From 74b5807783514faf10bff290e7b771069a63a59e Mon Sep 17 00:00:00 2001 From: Jan Hassel Date: Fri, 29 Sep 2023 18:22:13 +0200 Subject: [PATCH 01/12] fix(expandable-search): set tabindex to 0 (#14709) Co-authored-by: TJ Egan --- packages/react/src/components/Search/Search-test.js | 2 +- packages/react/src/components/Search/Search.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/components/Search/Search-test.js b/packages/react/src/components/Search/Search-test.js index 0a4b16ccf745..d011baa4edb0 100644 --- a/packages/react/src/components/Search/Search-test.js +++ b/packages/react/src/components/Search/Search-test.js @@ -147,7 +147,7 @@ describe('Search', () => { /> ); - expect(screen.getAllByRole('button')[0]).toHaveAttribute('tabIndex', '1'); + expect(screen.getAllByRole('button')[0]).toHaveAttribute('tabIndex', '0'); expect(screen.getByRole('searchbox')).toHaveAttribute('tabIndex', '-1'); }); diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx index cfb765b34bc8..dba8a5ed2eea 100644 --- a/packages/react/src/components/Search/Search.tsx +++ b/packages/react/src/components/Search/Search.tsx @@ -233,7 +233,7 @@ const Search = React.forwardRef(function Search( className={`${prefix}--search-magnifier`} onClick={onExpand} onKeyDown={handleExpandButtonKeyDown} - tabIndex={onExpand && !isExpanded ? 1 : -1} + tabIndex={onExpand && !isExpanded ? 0 : -1} ref={expandButtonRef} aria-expanded={onExpand && isExpanded ? true : undefined} aria-controls={onExpand ? uniqueId : undefined}> From fc444317da8b29c4fe6c896d89dbce73a46a01c0 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 26 Sep 2023 16:51:00 -0400 Subject: [PATCH 02/12] refactor(React): initialize default props with serially stable values --- .../Accordion/Accordion.Skeleton.tsx | 6 ---- .../src/components/Checkbox/Checkbox.tsx | 10 ++----- .../src/components/CodeSnippet/CodeSnippet.js | 18 ++++-------- .../components/ComboBox/ComboBox.stories.js | 1 + .../src/components/ComboBox/ComboBox.tsx | 28 ++----------------- .../ComposedModal/ComposedModal.tsx | 5 +--- .../components/ComposedModal/ModalFooter.tsx | 14 +++------- .../components/ComposedModal/ModalHeader.tsx | 6 +--- .../ContentSwitcher/ContentSwitcher.tsx | 13 ++++----- packages/react/src/components/Copy/Copy.js | 13 +++------ packages/react/src/internal/noopFn.ts | 8 ++++++ 11 files changed, 35 insertions(+), 87 deletions(-) create mode 100644 packages/react/src/internal/noopFn.ts diff --git a/packages/react/src/components/Accordion/Accordion.Skeleton.tsx b/packages/react/src/components/Accordion/Accordion.Skeleton.tsx index a3f9a2ebc650..6b00e7c926c6 100644 --- a/packages/react/src/components/Accordion/Accordion.Skeleton.tsx +++ b/packages/react/src/components/Accordion/Accordion.Skeleton.tsx @@ -105,12 +105,6 @@ AccordionSkeleton.propTypes = { open: PropTypes.bool, }; -AccordionSkeleton.defaultProps = { - open: true, - count: 4, - align: 'end', -}; - function AccordionSkeletonItem() { const prefix = usePrefix(); return ( diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx index 6bc628332899..ed4991df6651 100644 --- a/packages/react/src/components/Checkbox/Checkbox.tsx +++ b/packages/react/src/components/Checkbox/Checkbox.tsx @@ -12,6 +12,7 @@ import { Text } from '../Text'; import { usePrefix } from '../../internal/usePrefix'; import { WarningFilled, WarningAltFilled } from '@carbon/icons-react'; import setupGetInstanceId from '../../tools/setupGetInstanceId'; +import { noopFn } from '../../internal/noopFn'; const getInstanceId = setupGetInstanceId(); @@ -101,9 +102,9 @@ const Checkbox = React.forwardRef( helperText, id, labelText, - onChange, + onChange = noopFn, onClick, - indeterminate, + indeterminate = false, invalid, invalidText, hideLabel, @@ -296,11 +297,6 @@ Checkbox.propTypes = { warnText: PropTypes.node, }; -Checkbox.defaultProps = { - onChange: () => {}, - indeterminate: false, -}; - Checkbox.displayName = 'Checkbox'; export default Checkbox; diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js index 35691be2823c..8d045cfb54bd 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.js @@ -27,21 +27,21 @@ const defaultMinExpandedNumberOfRows = 16; function CodeSnippet({ align = 'bottom', className, - type, + type = 'single', children, disabled, feedback, feedbackTimeout, onClick, - ['aria-label']: ariaLabel, + ['aria-label']: ariaLabel = 'Copy to clipboard', ariaLabel: deprecatedAriaLabel, copyText, copyButtonDescription, light, - showMoreText, - showLessText, + showMoreText = 'Show more', + showLessText = 'Show less', hideCopyButton, - wrapText, + wrapText = false, maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows, maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows, minCollapsedNumberOfRows = defaultMinCollapsedNumberOfRows, @@ -419,12 +419,4 @@ CodeSnippet.propTypes = { wrapText: PropTypes.bool, }; -CodeSnippet.defaultProps = { - ['aria-label']: 'Copy to clipboard', - type: 'single', - showMoreText: 'Show more', - showLessText: 'Show less', - wrapText: false, -}; - export default CodeSnippet; diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index dc6197a1d912..b19b552736f6 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -64,6 +64,7 @@ export default { export const Default = () => (
{}} id="carbon-combobox" items={items} diff --git a/packages/react/src/components/ComboBox/ComboBox.tsx b/packages/react/src/components/ComboBox/ComboBox.tsx index 400dbf38d5ac..2414a15e14fd 100644 --- a/packages/react/src/components/ComboBox/ComboBox.tsx +++ b/packages/react/src/components/ComboBox/ComboBox.tsx @@ -38,7 +38,6 @@ import { } from '@carbon/icons-react'; import ListBox, { PropTypes as ListBoxPropTypes, - ListBoxType, ListBoxSize, } from '../ListBox'; import { ListBoxTrigger, ListBoxSelection } from '../ListBox/next'; @@ -286,11 +285,6 @@ export interface ComboBoxProps */ translateWithId?: (id: string) => string; - /** - * Currently supports either the default type, or an inline variant - */ - type?: ListBoxType; - /** * Specify whether the control is currently in warning state */ @@ -311,8 +305,8 @@ const ComboBox = forwardRef( ['aria-label']: ariaLabel = 'Choose an item', ariaLabel: deprecatedAriaLabel, className: containerClassName, - direction, - disabled, + direction = 'bottom', + disabled = false, downshiftProps, helperText, id, @@ -320,7 +314,7 @@ const ComboBox = forwardRef( invalid, invalidText, items, - itemToElement, + itemToElement = null, itemToString = defaultItemToString, light, onChange, @@ -333,7 +327,6 @@ const ComboBox = forwardRef( size, titleText, translateWithId, - type: _type, warn, warnText, ...rest @@ -913,11 +906,6 @@ ComboBox.propTypes = { */ translateWithId: PropTypes.func, - /** - * Currently supports either the default type, or an inline variant - */ - type: ListBoxPropTypes.ListBoxType, - /** * Specify whether the control is currently in warning state */ @@ -929,16 +917,6 @@ ComboBox.propTypes = { warnText: PropTypes.node, }; -ComboBox.defaultProps = { - disabled: false, - itemToString: defaultItemToString, - itemToElement: null, - shouldFilterItem: defaultShouldFilterItem, - type: 'default', - ['aria-label']: 'Choose an item', - direction: 'bottom', -}; - type ComboboxComponentProps = PropsWithoutRef< PropsWithChildren> & RefAttributes >; diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx index ef7555510617..4cfce68b7697 100644 --- a/packages/react/src/components/ComposedModal/ComposedModal.tsx +++ b/packages/react/src/components/ComposedModal/ComposedModal.tsx @@ -197,7 +197,7 @@ const ComposedModal = React.forwardRef( onKeyDown, open, preventCloseOnClickOutside, - selectorPrimaryFocus, + selectorPrimaryFocus = '[data-modal-primary-focus]', selectorsFloatingMenus, size, launcherButtonRef, @@ -468,8 +468,5 @@ ComposedModal.propTypes = { */ size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']), }; -ComposedModal.defaultProps = { - selectorPrimaryFocus: '[data-modal-primary-focus]', -}; export default ComposedModal; diff --git a/packages/react/src/components/ComposedModal/ModalFooter.tsx b/packages/react/src/components/ComposedModal/ModalFooter.tsx index 95891af0264d..9ee4f68905cb 100644 --- a/packages/react/src/components/ComposedModal/ModalFooter.tsx +++ b/packages/react/src/components/ComposedModal/ModalFooter.tsx @@ -4,6 +4,7 @@ import Button from '../Button'; import ButtonSet from '../ButtonSet'; import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; +import { noopFn } from '../../internal/noopFn'; interface SecondaryButtonProps { buttonText: ReactNode; @@ -163,11 +164,11 @@ export const ModalFooter = React.forwardRef( { children, className: customClassName, - closeModal, + closeModal = noopFn, danger, inputref, - onRequestClose, - onRequestSubmit, + onRequestClose = noopFn, + onRequestSubmit = noopFn, primaryButtonDisabled, primaryButtonText, primaryClassName, @@ -324,10 +325,3 @@ ModalFooter.propTypes = { */ secondaryClassName: PropTypes.string, }; - -const noop = () => {}; -ModalFooter.defaultProps = { - onRequestClose: noop, - onRequestSubmit: noop, - closeModal: noop, -}; diff --git a/packages/react/src/components/ComposedModal/ModalHeader.tsx b/packages/react/src/components/ComposedModal/ModalHeader.tsx index 43d394c4851b..1ddbc044454f 100644 --- a/packages/react/src/components/ComposedModal/ModalHeader.tsx +++ b/packages/react/src/components/ComposedModal/ModalHeader.tsx @@ -84,7 +84,7 @@ export const ModalHeader = React.forwardRef( closeClassName, closeIconClassName, closeModal, - iconDescription, + iconDescription = 'Close', label, labelClassName, title, @@ -198,7 +198,3 @@ ModalHeader.propTypes = { */ titleClassName: PropTypes.string, }; - -ModalHeader.defaultProps = { - iconDescription: 'Close', -}; diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx index cb3bfeb6c94d..f13aa9792412 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx @@ -13,6 +13,7 @@ import { LayoutConstraint } from '../Layout'; import { composeEventHandlers } from '../../tools/events'; import { getNextIndex, matches, keys } from '../../internal/keyboard'; import { PrefixContext } from '../../internal/usePrefix'; +import { noopFn } from '../../internal/noopFn'; interface SwitchEventHandlersParams { index?: number; @@ -126,12 +127,6 @@ export default class ContentSwitcher extends React.Component< static contextType = PrefixContext; - static defaultProps = { - selectedIndex: 0, - selectionMode: 'automatic', - onChange: () => {}, - }; - static getDerivedStateFromProps({ selectedIndex }, state) { const { prevSelectedIndex } = state; return prevSelectedIndex === selectedIndex @@ -202,10 +197,12 @@ export default class ContentSwitcher extends React.Component< className, light, // eslint-disable-next-line @typescript-eslint/no-unused-vars - selectedIndex, // eslint-disable-line no-unused-vars + selectedIndex = 0, // eslint-disable-next-line @typescript-eslint/no-unused-vars - selectionMode, // eslint-disable-line no-unused-vars + selectionMode = 'automatic', size, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + onChange = noopFn, ...other } = this.props; diff --git a/packages/react/src/components/Copy/Copy.js b/packages/react/src/components/Copy/Copy.js index 298fd87ee57a..10b4976a79f4 100644 --- a/packages/react/src/components/Copy/Copy.js +++ b/packages/react/src/components/Copy/Copy.js @@ -12,15 +12,16 @@ import classnames from 'classnames'; import { composeEventHandlers } from '../../tools/events'; import { usePrefix } from '../../internal/usePrefix'; import { IconButton } from '../IconButton'; +import { noopFn } from '../../internal/noopFn'; export default function Copy({ align = 'bottom', children, className, - feedback, - feedbackTimeout, + feedback = 'Copied!', + feedbackTimeout = 2000, onAnimationEnd, - onClick, + onClick = noopFn, ...other }) { const [animation, setAnimation] = useState(''); @@ -125,9 +126,3 @@ Copy.propTypes = { */ onClick: PropTypes.func, }; - -Copy.defaultProps = { - feedback: 'Copied!', - feedbackTimeout: 2000, - onClick: () => {}, -}; diff --git a/packages/react/src/internal/noopFn.ts b/packages/react/src/internal/noopFn.ts new file mode 100644 index 000000000000..062ec9581e14 --- /dev/null +++ b/packages/react/src/internal/noopFn.ts @@ -0,0 +1,8 @@ +/** + * Copyright IBM Corp. 2016, 2023 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +export const noopFn = () => {}; From a328f973f09469061c4f3fa28a1e3a91bc263dcb Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 26 Sep 2023 16:54:17 -0400 Subject: [PATCH 03/12] refactor(React): fix more components --- .../src/components/CopyButton/CopyButton.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/react/src/components/CopyButton/CopyButton.js b/packages/react/src/components/CopyButton/CopyButton.js index 7f217b920ab7..de6ec53ab95a 100644 --- a/packages/react/src/components/CopyButton/CopyButton.js +++ b/packages/react/src/components/CopyButton/CopyButton.js @@ -12,17 +12,23 @@ import { Copy as CopyIcon } from '@carbon/icons-react'; import Copy from '../Copy'; import { LayoutConstraint } from '../Layout'; import { usePrefix } from '../../internal/usePrefix'; - +import { noopFn } from '../../internal/noopFn'; export default function CopyButton({ align = 'bottom', - iconDescription, + feedback = 'Copied!', + feedbackTimeout = 2000, + iconDescription = 'Copy to clipboard', className, + onClick = noopFn, ...other }) { const prefix = usePrefix(); return ( {}, -}; From 3fb50aa4030e3c16ddff18bcac2f49ce85c7e324 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Tue, 26 Sep 2023 20:15:31 -0400 Subject: [PATCH 04/12] test(React): update snapshots --- .../__snapshots__/PublicAPI-test.js.snap | 56 ------------------- .../ContentSwitcher/ContentSwitcher.tsx | 4 +- 2 files changed, 2 insertions(+), 58 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 8fb6a6a07696..12cac151b9e7 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -67,11 +67,6 @@ Map { }, }, "AccordionSkeleton" => Object { - "defaultProps": Object { - "align": "end", - "count": 4, - "open": true, - }, "propTypes": Object { "align": Object { "args": Array [ @@ -466,10 +461,6 @@ Map { }, "Checkbox" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "indeterminate": false, - "onChange": [Function], - }, "propTypes": Object { "checked": Object { "type": "bool", @@ -622,13 +613,6 @@ Map { "render": [Function], }, "CodeSnippet" => Object { - "defaultProps": Object { - "aria-label": "Copy to clipboard", - "showLessText": "Show less", - "showMoreText": "Show more", - "type": "single", - "wrapText": false, - }, "propTypes": Object { "align": Object { "args": Array [ @@ -1079,15 +1063,6 @@ Map { }, "ComboBox" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "aria-label": "Choose an item", - "direction": "bottom", - "disabled": false, - "itemToElement": null, - "itemToString": [Function], - "shouldFilterItem": [Function], - "type": "default", - }, "propTypes": Object { "aria-label": Object { "type": "string", @@ -1336,15 +1311,6 @@ Map { "translateWithId": Object { "type": "func", }, - "type": Object { - "args": Array [ - Array [ - "default", - "inline", - ], - ], - "type": "oneOf", - }, "warn": Object { "type": "bool", }, @@ -1407,9 +1373,6 @@ Map { }, "ComposedModal" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "selectorPrimaryFocus": "[data-modal-primary-focus]", - }, "propTypes": Object { "aria-label": Object { "type": "string", @@ -1737,11 +1700,6 @@ Map { "render": [Function], }, "Copy" => Object { - "defaultProps": Object { - "feedback": "Copied!", - "feedbackTimeout": 2000, - "onClick": [Function], - }, "propTypes": Object { "align": Object { "args": Array [ @@ -1779,12 +1737,6 @@ Map { }, }, "CopyButton" => Object { - "defaultProps": Object { - "feedback": "Copied!", - "feedbackTimeout": 2000, - "iconDescription": "Copy to clipboard", - "onClick": [Function], - }, "propTypes": Object { "align": Object { "args": Array [ @@ -4961,11 +4913,6 @@ Map { }, "ModalFooter" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "closeModal": [Function], - "onRequestClose": [Function], - "onRequestSubmit": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -5026,9 +4973,6 @@ Map { }, "ModalHeader" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "iconDescription": "Close", - }, "propTypes": Object { "buttonOnClick": Object { "type": "func", diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx b/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx index f13aa9792412..3f3129543476 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.tsx @@ -127,7 +127,7 @@ export default class ContentSwitcher extends React.Component< static contextType = PrefixContext; - static getDerivedStateFromProps({ selectedIndex }, state) { + static getDerivedStateFromProps({ selectedIndex = 0 }, state) { const { prevSelectedIndex } = state; return prevSelectedIndex === selectedIndex ? null @@ -142,7 +142,7 @@ export default class ContentSwitcher extends React.Component< }; handleChildChange = (data) => { - const { selectionMode } = this.props; + const { selectionMode = 'automatic' } = this.props; // the currently selected child index const { selectedIndex } = this.state; // the newly selected child index From ca8119cfacacb20c4609bdf95d4aa121563b2862 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Wed, 27 Sep 2023 16:34:53 -0400 Subject: [PATCH 05/12] refactor(React): remove mroe default props --- .../react/src/components/DataTable/Table.tsx | 5 --- .../components/DataTable/TableBatchAction.js | 17 +++++--- .../DataTable/TableBatchActions.tsx | 4 -- .../src/components/DataTable/TableBody.tsx | 9 ++--- .../src/components/DataTable/TableHeader.tsx | 12 ++---- .../components/DataTable/TableSelectAll.tsx | 6 +-- .../src/components/DataTable/TableToolbar.tsx | 40 +++++++++++++++---- .../components/DataTable/TableToolbarMenu.tsx | 7 +--- .../DataTable/TableToolbarSearch.tsx | 16 +++----- .../src/components/Dropdown/Dropdown.tsx | 22 +++------- .../FileUploader/FileUploader.stories.js | 4 +- .../components/FileUploader/FileUploader.tsx | 22 +++------- .../src/components/FileUploader/Filename.tsx | 21 +++------- 13 files changed, 77 insertions(+), 108 deletions(-) diff --git a/packages/react/src/components/DataTable/Table.tsx b/packages/react/src/components/DataTable/Table.tsx index 821253bdb069..9e82aaf81856 100644 --- a/packages/react/src/components/DataTable/Table.tsx +++ b/packages/react/src/components/DataTable/Table.tsx @@ -289,9 +289,4 @@ Table.propTypes = { useZebraStyles: PropTypes.bool, }; -Table.defaultProps = { - isSortable: false, - overflowMenuOnHover: true, -}; - export default Table; diff --git a/packages/react/src/components/DataTable/TableBatchAction.js b/packages/react/src/components/DataTable/TableBatchAction.js index 1a0db30d441e..fcaa9e052605 100644 --- a/packages/react/src/components/DataTable/TableBatchAction.js +++ b/packages/react/src/components/DataTable/TableBatchAction.js @@ -10,7 +10,17 @@ import React from 'react'; import { AddFilled as iconAddSolid } from '@carbon/icons-react'; import Button from '../Button'; -const TableBatchAction = (props) => @@ -124,13 +121,7 @@ Filename.propTypes = { /** * Provide a custom tabIndex value for the `` */ - tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), -}; - -Filename.defaultProps = { - iconDescription: 'Uploading file', - status: 'uploading', - tabIndex: '0', + tabIndex: PropTypes.number, }; export default Filename; From 1490bc6620acb43556e88ddc36558ac38e0089d2 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 28 Sep 2023 10:50:43 -0400 Subject: [PATCH 06/12] fix(React): adjust tests to use required props --- .../__snapshots__/PublicAPI-test.js.snap | 193 +----------------- .../DataTable/TableToolbarSearch.tsx | 4 +- .../DataTable/__tests__/DataTable-test.js | 6 +- .../__tests__/TableToolbarMenu-test.js | 2 +- .../src/components/Dropdown/Dropdown-test.js | 5 +- .../__tests__/FileUploader-test.js | 2 +- .../__tests__/FluidDropdown-test.js | 5 +- 7 files changed, 22 insertions(+), 195 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 12cac151b9e7..984d9918353a 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -1773,10 +1773,6 @@ Map { "DangerButton" => Object {}, "DataTable" => Object { "Table": Object { - "defaultProps": Object { - "isSortable": false, - "overflowMenuOnHover": true, - }, "propTypes": Object { "children": Object { "type": "node", @@ -1825,28 +1821,6 @@ Map { }, }, "TableBatchAction": Object { - "defaultProps": Object { - "iconDescription": "Add", - "renderIcon": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "size": Object { - "args": Array [ - Array [ - Object { - "type": "number", - }, - Object { - "type": "string", - }, - ], - ], - "type": "oneOfType", - }, - }, - "render": [Function], - }, - }, "propTypes": Object { "hasIconOnly": Object { "type": "bool", @@ -1868,9 +1842,6 @@ Map { }, }, "TableBatchActions": Object { - "defaultProps": Object { - "translateWithId": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -1907,9 +1878,6 @@ Map { ], }, "TableBody": Object { - "defaultProps": Object { - "aria-live": "polite", - }, "propTypes": Object { "aria-live": Object { "args": Array [ @@ -2058,11 +2026,6 @@ Map { }, "TableHeader": Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "isSortable": false, - "scope": "col", - "translateWithId": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -2086,7 +2049,6 @@ Map { "type": "func", }, "scope": Object { - "isRequired": true, "type": "string", }, "sortDirection": Object { @@ -2119,9 +2081,6 @@ Map { }, }, "TableSelectAll": Object { - "defaultProps": Object { - "ariaLabel": "Select all rows in the table", - }, "propTypes": Object { "ariaLabel": Object { "isRequired": true, @@ -2191,12 +2150,11 @@ Map { }, }, "TableToolbar": Object { - "defaultProps": Object { - "aria-label": "data table toolbar", - }, "propTypes": Object { - "aria-label": [Function], - "aria-labelledby": [Function], + "aria-label": Object { + "type": "string", + }, + "ariaLabel": [Function], "children": Object { "type": "node", }, @@ -2236,28 +2194,6 @@ Map { }, }, "TableToolbarMenu": Object { - "defaultProps": Object { - "iconDescription": "Settings", - "renderIcon": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "size": Object { - "args": Array [ - Array [ - Object { - "type": "number", - }, - Object { - "type": "string", - }, - ], - ], - "type": "oneOfType", - }, - }, - "render": [Function], - }, - }, "propTypes": Object { "children": Object { "isRequired": true, @@ -2286,12 +2222,6 @@ Map { }, }, "TableToolbarSearch": Object { - "defaultProps": Object { - "onClear": [Function], - "persistent": false, - "tabIndex": "0", - "translateWithId": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -2365,7 +2295,6 @@ Map { "type": "oneOfType", }, "translateWithId": Object { - "isRequired": true, "type": "func", }, }, @@ -2863,15 +2792,6 @@ Map { }, "Dropdown" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "direction": "bottom", - "disabled": false, - "helperText": "", - "itemToElement": null, - "itemToString": [Function], - "titleText": "", - "type": "default", - }, "propTypes": Object { "aria-label": Object { "type": "string", @@ -3179,15 +3099,6 @@ Map { "contextType": Object { "$$typeof": Symbol(react.context), }, - "defaultProps": Object { - "accept": Array [], - "buttonKind": "primary", - "buttonLabel": "", - "disabled": false, - "filenameStatus": "uploading", - "multiple": false, - "onClick": [Function], - }, "propTypes": Object { "accept": Object { "args": Array [ @@ -3443,11 +3354,6 @@ Map { }, }, "Filename" => Object { - "defaultProps": Object { - "iconDescription": "Uploading file", - "status": "uploading", - "tabIndex": "0", - }, "propTypes": Object { "aria-describedby": Object { "type": "string", @@ -3472,17 +3378,7 @@ Map { "type": "oneOf", }, "tabIndex": Object { - "args": Array [ - Array [ - Object { - "type": "number", - }, - Object { - "type": "string", - }, - ], - ], - "type": "oneOfType", + "type": "number", }, }, }, @@ -7640,10 +7536,6 @@ Map { }, }, "Table" => Object { - "defaultProps": Object { - "isSortable": false, - "overflowMenuOnHover": true, - }, "propTypes": Object { "children": Object { "type": "node", @@ -7692,28 +7584,6 @@ Map { }, }, "TableBatchAction" => Object { - "defaultProps": Object { - "iconDescription": "Add", - "renderIcon": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "size": Object { - "args": Array [ - Array [ - Object { - "type": "number", - }, - Object { - "type": "string", - }, - ], - ], - "type": "oneOfType", - }, - }, - "render": [Function], - }, - }, "propTypes": Object { "hasIconOnly": Object { "type": "bool", @@ -7735,9 +7605,6 @@ Map { }, }, "TableBatchActions" => Object { - "defaultProps": Object { - "translateWithId": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -7774,9 +7641,6 @@ Map { ], }, "TableBody" => Object { - "defaultProps": Object { - "aria-live": "polite", - }, "propTypes": Object { "aria-live": Object { "args": Array [ @@ -7925,11 +7789,6 @@ Map { }, "TableHeader" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "isSortable": false, - "scope": "col", - "translateWithId": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -7953,7 +7812,6 @@ Map { "type": "func", }, "scope": Object { - "isRequired": true, "type": "string", }, "sortDirection": Object { @@ -7986,9 +7844,6 @@ Map { }, }, "TableSelectAll" => Object { - "defaultProps": Object { - "ariaLabel": "Select all rows in the table", - }, "propTypes": Object { "ariaLabel": Object { "isRequired": true, @@ -8058,12 +7913,11 @@ Map { }, }, "TableToolbar" => Object { - "defaultProps": Object { - "aria-label": "data table toolbar", - }, "propTypes": Object { - "aria-label": [Function], - "aria-labelledby": [Function], + "aria-label": Object { + "type": "string", + }, + "ariaLabel": [Function], "children": Object { "type": "node", }, @@ -8103,28 +7957,6 @@ Map { }, }, "TableToolbarMenu" => Object { - "defaultProps": Object { - "iconDescription": "Settings", - "renderIcon": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "size": Object { - "args": Array [ - Array [ - Object { - "type": "number", - }, - Object { - "type": "string", - }, - ], - ], - "type": "oneOfType", - }, - }, - "render": [Function], - }, - }, "propTypes": Object { "children": Object { "isRequired": true, @@ -8153,12 +7985,6 @@ Map { }, }, "TableToolbarSearch" => Object { - "defaultProps": Object { - "onClear": [Function], - "persistent": false, - "tabIndex": "0", - "translateWithId": [Function], - }, "propTypes": Object { "children": Object { "type": "node", @@ -8232,7 +8058,6 @@ Map { "type": "oneOfType", }, "translateWithId": Object { - "isRequired": true, "type": "func", }, }, diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.tsx b/packages/react/src/components/DataTable/TableToolbarSearch.tsx index 069d4276e02f..d3f7cb15290e 100644 --- a/packages/react/src/components/DataTable/TableToolbarSearch.tsx +++ b/packages/react/src/components/DataTable/TableToolbarSearch.tsx @@ -134,7 +134,7 @@ export interface TableToolbarSearchProps { /** * Provide custom text for the component for each translation id */ - translateWithId: (id: string) => string; + translateWithId?: (id: string) => string; } const TableToolbarSearch = ({ @@ -337,7 +337,7 @@ TableToolbarSearch.propTypes = { /** * Provide custom text for the component for each translation id */ - translateWithId: PropTypes.func.isRequired, + translateWithId: PropTypes.func, }; export default TableToolbarSearch; diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js index d7ffb2faf3e5..743653d8a195 100644 --- a/packages/react/src/components/DataTable/__tests__/DataTable-test.js +++ b/packages/react/src/components/DataTable/__tests__/DataTable-test.js @@ -98,7 +98,7 @@ describe('DataTable', () => { onChange={onInputChange} id="custom-id" /> - + Action 1 @@ -358,7 +358,7 @@ describe('DataTable', () => { onChange={onInputChange} id="custom-id" /> - + Action 1 @@ -522,7 +522,7 @@ describe('DataTable', () => { onChange={onInputChange} id="custom-id" /> - + Action 1 diff --git a/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js b/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js index 653ae8e91242..77c92cf0bb10 100644 --- a/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js +++ b/packages/react/src/components/DataTable/__tests__/TableToolbarMenu-test.js @@ -27,7 +27,7 @@ describe('TableToolbarMenu', () => { it('should support a custom `className` prop on the outermost element', () => { render( - + test ); diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js index d51dc8a8219c..c8c4477e1b74 100644 --- a/packages/react/src/components/Dropdown/Dropdown-test.js +++ b/packages/react/src/components/Dropdown/Dropdown-test.js @@ -30,6 +30,7 @@ describe('Dropdown', () => { label: 'input', placeholder: 'Filter...', type: 'default', + titleText: 'Dropdown label', }; }); @@ -91,12 +92,12 @@ describe('Dropdown', () => { describe('title', () => { it('renders a title', () => { - render(); + render(); expect(screen.getByText('Email Input')).toBeInTheDocument(); }); it('has the expected classes', () => { - render(); + render(); expect(screen.getByText('Email Input')).toHaveClass(`${prefix}--label`); }); }); diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js index 40aa39b554a5..fb37ad560f3e 100644 --- a/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js +++ b/packages/react/src/components/FileUploader/__tests__/FileUploader-test.js @@ -12,7 +12,7 @@ import FileUploader from '../'; import { uploadFiles } from '../test-helpers'; const iconDescription = 'test description'; -const requiredProps = { iconDescription }; +const requiredProps = { iconDescription, filenameStatus: 'uploading' }; describe('FileUploader', () => { describe('automated accessibility tests', () => { diff --git a/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js b/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js index e00cacd50b87..94998f0c8b3d 100644 --- a/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js +++ b/packages/react/src/components/FluidDropdown/__tests__/FluidDropdown-test.js @@ -29,6 +29,7 @@ describe('FluidDropdown', () => { label: 'input', placeholder: 'Filter...', type: 'default', + titleText: 'Dropdown label', }; }); @@ -104,12 +105,12 @@ describe('FluidDropdown', () => { describe('title', () => { it('renders a title', () => { - render(); + render(); expect(screen.getByText('Email Input')).toBeInTheDocument(); }); it('has the expected classes', () => { - render(); + render(); expect(screen.getByText('Email Input')).toHaveClass(`${prefix}--label`); }); }); From 45edbada561dd7f9214ef352742adc5c157cd6eb Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 28 Sep 2023 11:57:52 -0400 Subject: [PATCH 07/12] chore(Storybook): fix console warnings by adding required props --- .../src/components/ComboBox/ComboBox.stories.js | 1 - .../ContentSwitcher/ContentSwitcher.stories.js | 4 ++-- .../stories/DataTable-batch-actions.stories.js | 2 ++ .../stories/DataTable-filtering.stories.js | 4 ++-- .../DataTable/stories/DataTable-toolbar.stories.js | 10 +++++----- .../react/src/components/DatePicker/DatePicker.tsx | 8 ++++---- .../react/src/components/Dropdown/Dropdown.mdx | 14 ++++++++++++++ 7 files changed, 29 insertions(+), 14 deletions(-) diff --git a/packages/react/src/components/ComboBox/ComboBox.stories.js b/packages/react/src/components/ComboBox/ComboBox.stories.js index b19b552736f6..dc6197a1d912 100644 --- a/packages/react/src/components/ComboBox/ComboBox.stories.js +++ b/packages/react/src/components/ComboBox/ComboBox.stories.js @@ -64,7 +64,6 @@ export default { export const Default = () => (
{}} id="carbon-combobox" items={items} diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js index 0072a0dfca3d..87b331e8bdc5 100644 --- a/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js +++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher.stories.js @@ -53,7 +53,7 @@ export const _WithLayer = () => ( ); export const IconOnly = (args) => ( - + {}} {...args}> @@ -68,7 +68,7 @@ export const IconOnly = (args) => ( export const IconOnlyWithLayer = (args) => ( - + {}} {...args}> diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js index ecca479c61b3..233245e41022 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js @@ -132,6 +132,7 @@ export const Default = () => ( onChange={onInputChange} /> alert('Alert 1')}> Action 1 @@ -232,6 +233,7 @@ export const Playground = (args) => ( }} /> alert('Alert 1')}> Action 1 diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js index 21ff1dc7e6c5..a2807665f9fe 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js @@ -77,7 +77,7 @@ export const Default = () => ( {/* pass in `onInputChange` change here to make filtering work */} - + Action 1 @@ -136,7 +136,7 @@ export const Playground = (args) => ( onInputChange(evt); }} /> - + Action 1 diff --git a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js index a26d66719fd4..c8b602ab9ca4 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js @@ -66,7 +66,7 @@ export const Default = () => ( - + Action 1 @@ -124,7 +124,7 @@ export const PersistentToolbar = () => ( - + Action 1 @@ -185,7 +185,7 @@ export const SmallPersistentToolbar = () => ( size="sm"> - + Action 1 @@ -239,7 +239,7 @@ export const WithOverflowMenu = () => ( - + Action 1 @@ -306,7 +306,7 @@ export const Playground = (args) => ( onInputChange(evt); }} /> - + Action 1 diff --git a/packages/react/src/components/DatePicker/DatePicker.tsx b/packages/react/src/components/DatePicker/DatePicker.tsx index 80f28409d941..1bb85326f3d7 100644 --- a/packages/react/src/components/DatePicker/DatePicker.tsx +++ b/packages/react/src/components/DatePicker/DatePicker.tsx @@ -344,12 +344,12 @@ interface DatePickerProps /** * The maximum date that a user can pick to. */ - maxDate?: string; + maxDate?: string | number; /** * The minimum date that a user can start picking from. */ - minDate?: string; + minDate?: string | number; /** * The `change` event handler. @@ -961,12 +961,12 @@ DatePicker.propTypes = { /** * The maximum date that a user can pick to. */ - maxDate: PropTypes.string, + maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** * The minimum date that a user can start picking from. */ - minDate: PropTypes.string, + minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** * The `change` event handler. diff --git a/packages/react/src/components/Dropdown/Dropdown.mdx b/packages/react/src/components/Dropdown/Dropdown.mdx index ecaa6c44b08c..19afd25561e9 100644 --- a/packages/react/src/components/Dropdown/Dropdown.mdx +++ b/packages/react/src/components/Dropdown/Dropdown.mdx @@ -86,6 +86,7 @@ to the top of the screen. To do this, specify `direction="top"` label="Select an option..." direction="top" id="direction" + titleText="Dropdown label" /> ```jsx @@ -136,6 +137,7 @@ the text of the item in the input on selection. } label="Select an option..." id="item-to-element" + titleText="Dropdown label" /> ```jsx @@ -155,6 +157,7 @@ the text of the item in the input on selection. ) } label="Select an option..." + titleText="Dropdown label" /> ``` @@ -181,6 +184,7 @@ If the `items` array is not an array of strings, you'll need to use } label="Select an option..." id="item-to-element" + titleText="Dropdown label" /> ```jsx @@ -202,6 +206,7 @@ If the `items` array is not an array of strings, you'll need to use } label="Select an option..." id="item-to-element" + titleText="Dropdown label" /> ``` @@ -265,6 +270,7 @@ There are three sizes of `Dropdown` available: `sm`, `lg` (the default), and size="sm" label="Small [sm]" id="sm" + titleText="Dropdown label" />

```jsx @@ -286,16 +294,19 @@ There are three sizes of `Dropdown` available: `sm`, `lg` (the default), and items={['Option 1', 'Option 2', 'Option 3']} size="sm" label="Small [sm]" + titleText="Dropdown label" /> ``` @@ -317,6 +328,7 @@ that, pass in `type="inline"` to the `Dropdown` label="Inline" type="inline" id="inline" + titleText="Dropdown label" /> ```jsx @@ -324,6 +336,8 @@ that, pass in `type="inline"` to the `Dropdown` items={['Option 1', 'Option 2', 'Option 3']} label="Inline" type="inline" + is="inline" + titleText="Dropdown label" /> ``` From 0e5a4a7510bb2376697a8144b3769e3ba8dc5546 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 28 Sep 2023 13:58:01 -0400 Subject: [PATCH 08/12] refactor(React): remove more default props --- .../FileUploader/FileUploaderButton.tsx | 5 ++- .../FileUploaderDropContainer.tsx | 11 ++---- .../FileUploader/FileUploaderItem.tsx | 9 ++--- .../FileUploaderDropContainer-test.js | 35 +++++++++++++----- .../src/components/FluidSearch/FluidSearch.js | 7 ---- .../components/FormGroup/FormGroup.stories.js | 2 +- .../src/components/FormGroup/FormGroup.tsx | 12 ++----- .../react/src/components/ListBox/ListBox.tsx | 13 +++---- .../components/ListBox/ListBoxMenuIcon.tsx | 6 +--- .../components/ListBox/ListBoxMenuItem.tsx | 17 ++++----- .../components/ListBox/ListBoxSelection.tsx | 32 ++++++++--------- .../ListBox/next/ListBoxSelection.js | 31 ++++++++-------- .../components/ListBox/next/ListBoxTrigger.js | 14 ++++---- packages/react/src/components/Modal/Modal.js | 36 +++++++------------ .../components/ModalWrapper/ModalWrapper.js | 35 ++++++++---------- 15 files changed, 115 insertions(+), 150 deletions(-) diff --git a/packages/react/src/components/FileUploader/FileUploaderButton.tsx b/packages/react/src/components/FileUploader/FileUploaderButton.tsx index 9b9bc4312c83..5fa835afa85a 100644 --- a/packages/react/src/components/FileUploader/FileUploaderButton.tsx +++ b/packages/react/src/components/FileUploader/FileUploaderButton.tsx @@ -14,8 +14,7 @@ import uid from '../../tools/uniqueId'; import { usePrefix } from '../../internal/usePrefix'; import deprecate from '../../prop-types/deprecate'; import { ReactAttr } from '../../types/common'; - -function noop() {} +import { noopFn } from '../../internal/noopFn'; export interface FileUploaderButtonProps extends Omit, 'onChange' | 'tabIndex'> { @@ -114,7 +113,7 @@ function FileUploaderButton({ id, labelText: ownerLabelText = 'Add file', multiple = false, - onChange = noop, + onChange = noopFn, name, size = 'md', // eslint-disable-next-line react/prop-types diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx b/packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx index a1fa25ba92e9..5191ecadb656 100644 --- a/packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx +++ b/packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx @@ -14,6 +14,7 @@ import { usePrefix } from '../../internal/usePrefix'; import { composeEventHandlers } from '../../tools/events'; import deprecate from '../../prop-types/deprecate'; import { ReactAttr } from '../../types/common'; +import { noopFn } from '../../internal/noopFn'; export interface FileUploaderDropContainerProps extends Omit, 'tabIndex'> { @@ -100,7 +101,7 @@ function FileUploaderDropContainer({ labelText = 'Add file', multiple = false, name, - onAddFiles = () => {}, + onAddFiles = noopFn, onClick, pattern = '.[0-9a-z]+$', // eslint-disable-next-line react/prop-types @@ -305,12 +306,4 @@ FileUploaderDropContainer.propTypes = { ), }; -FileUploaderDropContainer.defaultProps = { - labelText: 'Add file', - multiple: false, - onAddFiles: () => {}, - accept: [], - pattern: '.[0-9a-z]+$', -}; - export default FileUploaderDropContainer; diff --git a/packages/react/src/components/FileUploader/FileUploaderItem.tsx b/packages/react/src/components/FileUploader/FileUploaderItem.tsx index 9b748f152ce7..32810963f2ae 100644 --- a/packages/react/src/components/FileUploader/FileUploaderItem.tsx +++ b/packages/react/src/components/FileUploader/FileUploaderItem.tsx @@ -13,6 +13,7 @@ import { keys, matches } from '../../internal/keyboard'; import uid from '../../tools/uniqueId'; import { usePrefix } from '../../internal/usePrefix'; import { ReactAttr } from '../../types/common'; +import { noopFn } from '../../internal/noopFn'; export interface FileUploaderItemProps extends ReactAttr { /** @@ -65,13 +66,12 @@ export interface FileUploaderItemProps extends ReactAttr { */ uuid?: string; } - function FileUploaderItem({ uuid, name, status = 'uploading', iconDescription, - onDelete = () => {}, + onDelete = noopFn, invalid, errorSubject, errorBody, @@ -180,9 +180,4 @@ FileUploaderItem.propTypes = { uuid: PropTypes.string, }; -FileUploaderItem.defaultProps = { - status: 'uploading', - onDelete: () => {}, -}; - export default FileUploaderItem; diff --git a/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js b/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js index d397a5babd02..9caf4730e7a9 100644 --- a/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js +++ b/packages/react/src/components/FileUploader/__tests__/FileUploaderDropContainer-test.js @@ -12,15 +12,19 @@ import { Simulate } from 'react-dom/test-utils'; import { FileUploaderDropContainer } from '../'; import { uploadFiles } from '../test-helpers'; +const requiredProps = { labelText: 'Add file' }; + describe('FileUploaderDropContainer', () => { it('should not have axe violations', async () => { - const { container } = render(); + const { container } = render( + + ); await expect(container).toHaveNoAxeViolations(); }); it('should support a custom class name on the drop area', () => { const { container } = render( - + ); // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access const dropArea = container.querySelector('button'); @@ -30,8 +34,8 @@ describe('FileUploaderDropContainer', () => { it('should have a unique id each time it is used', () => { const { container } = render( <> - - + + ); // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access @@ -40,14 +44,18 @@ describe('FileUploaderDropContainer', () => { }); it('should render with the default labelText prop', () => { - const { container } = render(); + const { container } = render( + + ); // eslint-disable-next-line testing-library/prefer-screen-queries const label = getByText(container, 'Add file'); expect(label).toBeInstanceOf(HTMLElement); }); it('should render with multiple set to false by default', () => { - const { container } = render(); + const { container } = render( + + ); // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access const input = container.querySelector('input'); expect(input.getAttribute('multiple')).toBeFalsy(); @@ -71,7 +79,7 @@ describe('FileUploaderDropContainer', () => { it('should call `onAddFiles` when a file is selected', () => { const onAddFiles = jest.fn(); const { container } = render( - + ); // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access const input = container.querySelector('input'); @@ -95,7 +103,11 @@ describe('FileUploaderDropContainer', () => { it('should mark invalid files using default pattern', () => { const onAddFiles = jest.fn(); const { container } = render( - + ); // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access const input = container.querySelector('input'); @@ -138,7 +150,11 @@ describe('FileUploaderDropContainer', () => { it('should be case insensitive when marking files invalid', () => { const onAddFiles = jest.fn(); const { container } = render( - + ); // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access const input = container.querySelector('input'); @@ -181,6 +197,7 @@ describe('FileUploaderDropContainer', () => { onAddFiles={onAddFiles} accept={['.txt', '.a_a', '.b-b', '.a-b_c']} pattern=".[0-9a-z-_]+$" + {...requiredProps} /> ); // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access diff --git a/packages/react/src/components/FluidSearch/FluidSearch.js b/packages/react/src/components/FluidSearch/FluidSearch.js index 1544d54cbfc5..18c209a5ba8f 100644 --- a/packages/react/src/components/FluidSearch/FluidSearch.js +++ b/packages/react/src/components/FluidSearch/FluidSearch.js @@ -26,13 +26,6 @@ const FluidSearch = React.forwardRef(function FluidSearch( ); }); -FluidSearch.defaultProps = { - autoComplete: 'off', - closeButtonLabelText: 'Clear search input', - role: 'searchbox', - type: 'text', -}; - FluidSearch.propTypes = { /** * Specify an optional value for the `autocomplete` property on the underlying diff --git a/packages/react/src/components/FormGroup/FormGroup.stories.js b/packages/react/src/components/FormGroup/FormGroup.stories.js index fbdda32b29e0..d2e0cfccdbd2 100644 --- a/packages/react/src/components/FormGroup/FormGroup.stories.js +++ b/packages/react/src/components/FormGroup/FormGroup.stories.js @@ -6,7 +6,7 @@ */ import React from 'react'; -import FormGroup from '../FormGroup'; +import { FormGroup } from '../FormGroup'; import TextInput from '../TextInput'; import RadioButtonGroup from '../RadioButtonGroup'; import RadioButton from '../RadioButton'; diff --git a/packages/react/src/components/FormGroup/FormGroup.tsx b/packages/react/src/components/FormGroup/FormGroup.tsx index 7c1b5de322ef..7dd2a8b541bb 100644 --- a/packages/react/src/components/FormGroup/FormGroup.tsx +++ b/packages/react/src/components/FormGroup/FormGroup.tsx @@ -47,11 +47,11 @@ export interface FormGroupProps extends ReactAttr { const FormGroup = ({ legendId, legendText, - invalid, + invalid = false, children, className, - message, - messageText, + message = false, + messageText = '', ...rest }: FormGroupProps) => { const prefix = usePrefix(); @@ -115,10 +115,4 @@ FormGroup.propTypes = { messageText: PropTypes.string, }; -FormGroup.defaultProps = { - invalid: false, - message: false, - messageText: '', -}; - export default FormGroup; diff --git a/packages/react/src/components/ListBox/ListBox.tsx b/packages/react/src/components/ListBox/ListBox.tsx index 80e4a979049f..6e6017bb9ea0 100644 --- a/packages/react/src/components/ListBox/ListBox.tsx +++ b/packages/react/src/components/ListBox/ListBox.tsx @@ -90,8 +90,8 @@ const ListBox: ListBoxComponent = React.forwardRef(function ListBox( { children, className: containerClassName, - disabled, - type, + disabled = false, + type = 'default', size, invalid, invalidText, @@ -156,7 +156,7 @@ ListBox.propTypes = { /** * Specify whether the ListBox is currently disabled */ - disabled: PropTypes.bool.isRequired, + disabled: PropTypes.bool, /** * Specify whether the control is currently invalid @@ -192,7 +192,7 @@ ListBox.propTypes = { * Specify the "type" of the ListBox. Currently supports either `default` or * `inline` as an option. */ - type: ListBoxType.isRequired, + type: ListBoxType, /** * Specify whether the control is currently in warning state @@ -205,9 +205,4 @@ ListBox.propTypes = { warnText: PropTypes.node, }; -ListBox.defaultProps = { - disabled: false, - type: 'default', -}; - export default ListBox; diff --git a/packages/react/src/components/ListBox/ListBoxMenuIcon.tsx b/packages/react/src/components/ListBox/ListBoxMenuIcon.tsx index aa55a958b746..c82921a2137f 100644 --- a/packages/react/src/components/ListBox/ListBoxMenuIcon.tsx +++ b/packages/react/src/components/ListBox/ListBoxMenuIcon.tsx @@ -74,11 +74,7 @@ ListBoxMenuIcon.propTypes = { * icon. This function takes in an id defined in `translationIds` and should * return a string message for that given message id. */ - translateWithId: PropTypes.func.isRequired, -}; - -ListBoxMenuIcon.defaultProps = { - translateWithId: defaultTranslateWithId, + translateWithId: PropTypes.func, }; export default ListBoxMenuIcon; diff --git a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx index 0a0c18d2d72d..b6eb7e41804a 100644 --- a/packages/react/src/components/ListBox/ListBoxMenuItem.tsx +++ b/packages/react/src/components/ListBox/ListBoxMenuItem.tsx @@ -59,7 +59,13 @@ export type ListBoxMenuItemComponent = ForwardRefReturn< */ const ListBoxMenuItem = React.forwardRef( function ListBoxMenuItem( - { children, isActive, isHighlighted, title, ...rest }: ListBoxMenuItemProps, + { + children, + isActive = false, + isHighlighted = false, + title, + ...rest + }: ListBoxMenuItemProps, forwardedRef: ListBoxMenuItemForwardedRef ) { const prefix = usePrefix(); @@ -101,12 +107,12 @@ ListBoxMenuItem.propTypes = { /** * Specify whether the current menu item is "active". */ - isActive: PropTypes.bool.isRequired, + isActive: PropTypes.bool, /** * Specify whether the current menu item is "highlighted". */ - isHighlighted: PropTypes.bool.isRequired, + isHighlighted: PropTypes.bool, /** * Provide an optional tooltip for the ListBoxMenuItem @@ -114,9 +120,4 @@ ListBoxMenuItem.propTypes = { title: PropTypes.string, }; -ListBoxMenuItem.defaultProps = { - isActive: false, - isHighlighted: false, -}; - export default ListBoxMenuItem as ListBoxMenuItemComponent; diff --git a/packages/react/src/components/ListBox/ListBoxSelection.tsx b/packages/react/src/components/ListBox/ListBoxSelection.tsx index e88a88cbdc5a..9ef89b691b45 100644 --- a/packages/react/src/components/ListBox/ListBoxSelection.tsx +++ b/packages/react/src/components/ListBox/ListBoxSelection.tsx @@ -50,11 +50,23 @@ export interface ListBoxSelectionProps { * icon. This function takes in an id defined in `translationIds` and should * return a string message for that given message id. */ - translateWithId(messageId: string, args?: Record): string; + translateWithId?(messageId: string, args?: Record): string; } export type ListBoxSelectionComponent = React.FC; +export const translationIds = { + 'clear.all': 'clear.all', + 'clear.selection': 'clear.selection', +}; + +const defaultTranslations = { + [translationIds['clear.all']]: 'Clear all selected items', + [translationIds['clear.selection']]: 'Clear selected item', +}; + +const defaultTranslateWithId = (id: string) => defaultTranslations[id]; + /** * `ListBoxSelection` is used to provide controls for clearing a selection, in * addition to conditionally rendering a badge if the control has more than one @@ -63,7 +75,7 @@ export type ListBoxSelectionComponent = React.FC; const ListBoxSelection: ListBoxSelectionComponent = ({ clearSelection, selectionCount, - translateWithId: t, + translateWithId: t = defaultTranslateWithId, disabled, onClearSelection, readOnly, @@ -124,16 +136,6 @@ const ListBoxSelection: ListBoxSelectionComponent = ({ ); }; -export const translationIds = { - 'clear.all': 'clear.all', - 'clear.selection': 'clear.selection', -}; - -const defaultTranslations = { - [translationIds['clear.all']]: 'Clear all selected items', - [translationIds['clear.selection']]: 'Clear selected item', -}; - ListBoxSelection.propTypes = { /** * Specify a function to be invoked when a user interacts with the clear @@ -168,11 +170,7 @@ ListBoxSelection.propTypes = { * icon. This function takes in an id defined in `translationIds` and should * return a string message for that given message id. */ - translateWithId: PropTypes.func.isRequired, -}; - -ListBoxSelection.defaultProps = { - translateWithId: (id: string) => defaultTranslations[id], + translateWithId: PropTypes.func, }; export default ListBoxSelection; diff --git a/packages/react/src/components/ListBox/next/ListBoxSelection.js b/packages/react/src/components/ListBox/next/ListBoxSelection.js index d7fbe6c67bd6..1ecc3a5b743b 100644 --- a/packages/react/src/components/ListBox/next/ListBoxSelection.js +++ b/packages/react/src/components/ListBox/next/ListBoxSelection.js @@ -16,10 +16,23 @@ import { usePrefix } from '../../../internal/usePrefix'; * addition to conditionally rendering a badge if the control has more than one * selection. */ + +export const translationIds = { + 'clear.all': 'clear.all', + 'clear.selection': 'clear.selection', +}; + +const defaultTranslations = { + [translationIds['clear.all']]: 'Clear all selected items', + [translationIds['clear.selection']]: 'Clear selected item', +}; + +const defaultTranslateWithId = (id) => defaultTranslations[id]; + function ListBoxSelection({ clearSelection, selectionCount, - translateWithId: t, + translateWithId: t = defaultTranslateWithId, disabled, onClearSelection, ...rest @@ -85,16 +98,6 @@ function ListBoxSelection({ ); } -export const translationIds = { - 'clear.all': 'clear.all', - 'clear.selection': 'clear.selection', -}; - -const defaultTranslations = { - [translationIds['clear.all']]: 'Clear all selected items', - [translationIds['clear.selection']]: 'Clear selected item', -}; - ListBoxSelection.propTypes = { /** * Specify a function to be invoked when a user interacts with the clear @@ -136,11 +139,7 @@ ListBoxSelection.propTypes = { * icon. This function takes in an id defined in `translationIds` and should * return a string message for that given message id. */ - translateWithId: PropTypes.func.isRequired, -}; - -ListBoxSelection.defaultProps = { - translateWithId: (id) => defaultTranslations[id], + translateWithId: PropTypes.func, }; export default ListBoxSelection; diff --git a/packages/react/src/components/ListBox/next/ListBoxTrigger.js b/packages/react/src/components/ListBox/next/ListBoxTrigger.js index fa096abd7e1e..4e5f8e130c6f 100644 --- a/packages/react/src/components/ListBox/next/ListBoxTrigger.js +++ b/packages/react/src/components/ListBox/next/ListBoxTrigger.js @@ -21,11 +21,17 @@ const defaultTranslations = { [translationIds['open.menu']]: 'Open', }; +const defaultTranslateWithId = (id) => defaultTranslations[id]; + /** * `ListBoxTrigger` is used to orient the icon up or down depending on the * state of the menu for a given `ListBox` */ -const ListBoxTrigger = ({ isOpen, translateWithId: t, ...rest }) => { +const ListBoxTrigger = ({ + isOpen, + translateWithId: t = defaultTranslateWithId, + ...rest +}) => { const prefix = usePrefix(); const className = cx({ [`${prefix}--list-box__menu-icon`]: true, @@ -57,11 +63,7 @@ ListBoxTrigger.propTypes = { * icon. This function takes in an id defined in `translationIds` and should * return a string message for that given message id. */ - translateWithId: PropTypes.func.isRequired, -}; - -ListBoxTrigger.defaultProps = { - translateWithId: (id) => defaultTranslations[id], + translateWithId: PropTypes.func, }; export default ListBoxTrigger; diff --git a/packages/react/src/components/Modal/Modal.js b/packages/react/src/components/Modal/Modal.js index 1d04dd39a7b9..462ac9e07339 100644 --- a/packages/react/src/components/Modal/Modal.js +++ b/packages/react/src/components/Modal/Modal.js @@ -19,6 +19,7 @@ import wrapFocus, { import setupGetInstanceId from '../../tools/setupGetInstanceId'; import { usePrefix } from '../../internal/usePrefix'; import { keys, match } from '../../internal/keyboard'; +import { noopFn } from '../../internal/noopFn'; const getInstanceId = setupGetInstanceId(); @@ -27,27 +28,27 @@ const Modal = React.forwardRef(function Modal( 'aria-label': ariaLabelProp, children, className, - modalHeading, - modalLabel, + modalHeading = '', + modalLabel = '', modalAriaLabel, - passiveModal, + passiveModal = false, secondaryButtonText, primaryButtonText, open, - onRequestClose, - onRequestSubmit, + onRequestClose = noopFn, + onRequestSubmit = noopFn, onSecondarySubmit, - primaryButtonDisabled, + primaryButtonDisabled = false, danger, alert, secondaryButtons, - selectorPrimaryFocus, // eslint-disable-line - selectorsFloatingMenus, // eslint-disable-line - shouldSubmitOnEnter, // eslint-disable-line + selectorPrimaryFocus = '[data-modal-primary-focus]', + selectorsFloatingMenus, + shouldSubmitOnEnter, size, - hasScrollingContent, + hasScrollingContent = false, closeButtonLabel, - preventCloseOnClickOutside, // eslint-disable-line + preventCloseOnClickOutside = false, isFullWidth, launcherButtonRef, ...rest @@ -508,17 +509,4 @@ Modal.propTypes = { size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']), }; -Modal.defaultProps = { - onRequestClose: () => {}, - onRequestSubmit: () => {}, - primaryButtonDisabled: false, - onKeyDown: () => {}, - passiveModal: false, - modalHeading: '', - modalLabel: '', - preventCloseOnClickOutside: false, - selectorPrimaryFocus: '[data-modal-primary-focus]', - hasScrollingContent: false, -}; - export default Modal; diff --git a/packages/react/src/components/ModalWrapper/ModalWrapper.js b/packages/react/src/components/ModalWrapper/ModalWrapper.js index f6f23d66c31e..2d144e2b1df9 100644 --- a/packages/react/src/components/ModalWrapper/ModalWrapper.js +++ b/packages/react/src/components/ModalWrapper/ModalWrapper.js @@ -11,6 +11,7 @@ import Modal from '../Modal'; import Button from '../Button'; import { ButtonKinds } from '../../prop-types/types'; import { warning } from '../../internal/warning'; +import { noopFn } from '../../internal/noopFn'; let didWarnAboutDeprecation = false; @@ -52,18 +53,6 @@ export default class ModalWrapper extends React.Component { withHeader: PropTypes.bool, }; - static defaultProps = { - shouldCloseAfterSubmit: true, - primaryButtonText: 'Save', - secondaryButtonText: 'Cancel', - triggerButtonIconDescription: 'Provide icon description if icon is used', - triggerButtonKind: 'primary', - disabled: false, - preventCloseOnClickOutside: false, - selectorPrimaryFocus: '[data-modal-primary-focus]', - onKeyDown: () => {}, - }; - triggerButton = React.createRef(); modal = React.createRef(); @@ -107,17 +96,19 @@ export default class ModalWrapper extends React.Component { render() { const { children, - onKeyDown, + onKeyDown = noopFn, buttonTriggerText, buttonTriggerClassName, renderTriggerButtonIcon, - triggerButtonIconDescription, - triggerButtonKind, - disabled, + primaryButtonText = 'Save', + secondaryButtonText = 'Cancel', + triggerButtonIconDescription = 'Provide icon description if icon is used', + triggerButtonKind = 'primary', + disabled = false, handleSubmit, // eslint-disable-line no-unused-vars - shouldCloseAfterSubmit, // eslint-disable-line no-unused-vars - selectorPrimaryFocus, - preventCloseOnClickOutside, // eslint-disable-line no-unused-vars + shouldCloseAfterSubmit = true, // eslint-disable-line no-unused-vars + selectorPrimaryFocus = '[data-modal-primary-focus]', + preventCloseOnClickOutside = false, // eslint-disable-line no-unused-vars ...other } = this.props; @@ -148,7 +139,11 @@ export default class ModalWrapper extends React.Component { ref={this.triggerButton}> {buttonTriggerText} - + {children}
From 4542a3bbe5a05a00eed84e22a7004168383b09ac Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 28 Sep 2023 13:59:44 -0400 Subject: [PATCH 09/12] chore(test): update snapshots --- .../__snapshots__/PublicAPI-test.js.snap | 63 +++++++------------ 1 file changed, 22 insertions(+), 41 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 984d9918353a..19475beb718b 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2580,10 +2580,30 @@ Map { "type": "oneOfType", }, "maxDate": Object { - "type": "string", + "args": Array [ + Array [ + Object { + "type": "string", + }, + Object { + "type": "number", + }, + ], + ], + "type": "oneOfType", }, "minDate": Object { - "type": "string", + "args": Array [ + Array [ + Object { + "type": "string", + }, + Object { + "type": "number", + }, + ], + ], + "type": "oneOfType", }, "onChange": Object { "type": "func", @@ -3249,13 +3269,6 @@ Map { }, }, "FileUploaderDropContainer" => Object { - "defaultProps": Object { - "accept": Array [], - "labelText": "Add file", - "multiple": false, - "onAddFiles": [Function], - "pattern": ".[0-9a-z]+$", - }, "propTypes": Object { "accept": Object { "args": Array [ @@ -3298,10 +3311,6 @@ Map { }, }, "FileUploaderItem" => Object { - "defaultProps": Object { - "onDelete": [Function], - "status": "uploading", - }, "propTypes": Object { "errorBody": Object { "type": "string", @@ -3702,11 +3711,6 @@ Map { "Provider": "React.Provider", }, "FormGroup" => Object { - "defaultProps": Object { - "invalid": false, - "message": false, - "messageText": "", - }, "propTypes": Object { "children": Object { "type": "node", @@ -4662,18 +4666,6 @@ Map { }, "Modal" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "hasScrollingContent": false, - "modalHeading": "", - "modalLabel": "", - "onKeyDown": [Function], - "onRequestClose": [Function], - "onRequestSubmit": [Function], - "passiveModal": false, - "preventCloseOnClickOutside": false, - "primaryButtonDisabled": false, - "selectorPrimaryFocus": "[data-modal-primary-focus]", - }, "propTypes": Object { "alert": Object { "type": "bool", @@ -4907,17 +4899,6 @@ Map { "render": [Function], }, "ModalWrapper" => Object { - "defaultProps": Object { - "disabled": false, - "onKeyDown": [Function], - "preventCloseOnClickOutside": false, - "primaryButtonText": "Save", - "secondaryButtonText": "Cancel", - "selectorPrimaryFocus": "[data-modal-primary-focus]", - "shouldCloseAfterSubmit": true, - "triggerButtonIconDescription": "Provide icon description if icon is used", - "triggerButtonKind": "primary", - }, "propTypes": Object { "buttonTriggerClassName": Object { "type": "string", From ffc0af5e91edd41923e53f456907af641a76fb78 Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 28 Sep 2023 16:19:56 -0400 Subject: [PATCH 10/12] refactor(React): remove more default props, some required props --- .../__snapshots__/PublicAPI-test.js.snap | 100 ------------------ .../components/DataTable/TableToolbarMenu.tsx | 2 +- .../DataTable-batch-actions.stories.js | 2 - .../stories/DataTable-filtering.stories.js | 4 +- .../stories/DataTable-toolbar.stories.js | 10 +- .../FileUploader/FileUploader.stories.js | 5 +- .../components/FileUploader/FileUploader.tsx | 4 +- .../MultiSelect/FilterableMultiSelect.js | 39 +++---- .../MultiSelect/MultiSelect.stories.js | 2 +- .../components/MultiSelect/MultiSelect.tsx | 55 ++++------ .../MultiSelect/MultiSelectPropTypes.js | 4 +- .../components/MultiSelect/tools/sorting.js | 4 +- .../components/Notification/Notification.tsx | 85 ++++++--------- .../stories/InlineNotification.stories.js | 2 - .../components/OverflowMenu/OverflowMenu.js | 55 ++++------ 15 files changed, 105 insertions(+), 268 deletions(-) diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 19475beb718b..ce4877a71160 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -92,15 +92,6 @@ Map { }, }, "ActionableNotification" => Object { - "defaultProps": Object { - "closeOnEscape": true, - "hasFocus": true, - "hideCloseButton": false, - "inline": false, - "kind": "error", - "onCloseButtonClick": [Function], - "role": "alertdialog", - }, "propTypes": Object { "actionButtonLabel": Object { "type": "string", @@ -138,7 +129,6 @@ Map { "warning-alt", ], ], - "isRequired": true, "type": "oneOf", }, "lowContrast": Object { @@ -2203,7 +2193,6 @@ Map { "type": "string", }, "iconDescription": Object { - "isRequired": true, "type": "string", }, "renderIcon": Object { @@ -3164,7 +3153,6 @@ Map { "type": "oneOf", }, "iconDescription": Object { - "isRequired": true, "type": "string", }, "labelDescription": Object { @@ -3393,20 +3381,6 @@ Map { }, "FilterableMultiSelect" => Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "clearSelectionDescription": "Total items selected: ", - "clearSelectionText": "To clear selection, press Delete or Backspace,", - "compareItems": [Function], - "direction": "bottom", - "disabled": false, - "filterItems": [Function], - "initialSelectedItems": Array [], - "itemToString": [Function], - "locale": "en", - "open": false, - "selectionFeedback": "top-after-reopen", - "sortItems": [Function], - }, "propTypes": Object { "aria-label": [Function], "ariaLabel": [Function], @@ -3417,7 +3391,6 @@ Map { "type": "string", }, "compareItems": Object { - "isRequired": true, "type": "func", }, "direction": Object { @@ -3635,7 +3608,6 @@ Map { "type": "oneOf", }, "sortItems": Object { - "isRequired": true, "type": "func", }, "translateWithId": Object { @@ -4251,12 +4223,6 @@ Map { }, }, "InlineNotification" => Object { - "defaultProps": Object { - "hideCloseButton": false, - "kind": "error", - "onCloseButtonClick": [Function], - "role": "status", - }, "propTypes": Object { "aria-label": Object { "type": "string", @@ -4997,20 +4963,6 @@ Map { "$$typeof": Symbol(react.forward_ref), "Filterable": Object { "$$typeof": Symbol(react.forward_ref), - "defaultProps": Object { - "clearSelectionDescription": "Total items selected: ", - "clearSelectionText": "To clear selection, press Delete or Backspace,", - "compareItems": [Function], - "direction": "bottom", - "disabled": false, - "filterItems": [Function], - "initialSelectedItems": Array [], - "itemToString": [Function], - "locale": "en", - "open": false, - "selectionFeedback": "top-after-reopen", - "sortItems": [Function], - }, "propTypes": Object { "aria-label": [Function], "ariaLabel": [Function], @@ -5021,7 +4973,6 @@ Map { "type": "string", }, "compareItems": Object { - "isRequired": true, "type": "func", }, "direction": Object { @@ -5239,7 +5190,6 @@ Map { "type": "oneOf", }, "sortItems": Object { - "isRequired": true, "type": "func", }, "translateWithId": Object { @@ -5257,22 +5207,6 @@ Map { }, "render": [Function], }, - "defaultProps": Object { - "clearSelectionDescription": "Total items selected: ", - "clearSelectionText": "To clear selection, press Delete or Backspace,", - "compareItems": [Function], - "direction": "bottom", - "disabled": false, - "initialSelectedItems": Array [], - "itemToString": [Function], - "locale": "en", - "open": false, - "selectedItems": undefined, - "selectionFeedback": "top-after-reopen", - "sortItems": [Function], - "titleText": false, - "type": "default", - }, "propTypes": Object { "className": Object { "type": "string", @@ -5284,7 +5218,6 @@ Map { "type": "string", }, "compareItems": Object { - "isRequired": true, "type": "func", }, "direction": Object { @@ -5375,7 +5308,6 @@ Map { "type": "oneOf", }, "sortItems": Object { - "isRequired": true, "type": "func", }, "titleText": Object { @@ -5422,30 +5354,6 @@ Map { }, }, "NotificationButton" => Object { - "defaultProps": Object { - "aria-label": "close notification", - "notificationType": "toast", - "renderIcon": Object { - "$$typeof": Symbol(react.forward_ref), - "propTypes": Object { - "size": Object { - "args": Array [ - Array [ - Object { - "type": "number", - }, - Object { - "type": "string", - }, - ], - ], - "type": "oneOfType", - }, - }, - "render": [Function], - }, - "type": "button", - }, "propTypes": Object { "aria-label": Object { "type": "string", @@ -7947,7 +7855,6 @@ Map { "type": "string", }, "iconDescription": Object { - "isRequired": true, "type": "string", }, "renderIcon": Object { @@ -8792,13 +8699,6 @@ Map { "render": [Function], }, "ToastNotification" => Object { - "defaultProps": Object { - "hideCloseButton": false, - "kind": "error", - "onCloseButtonClick": [Function], - "role": "status", - "timeout": 0, - }, "propTypes": Object { "aria-label": Object { "type": "string", diff --git a/packages/react/src/components/DataTable/TableToolbarMenu.tsx b/packages/react/src/components/DataTable/TableToolbarMenu.tsx index dbd6a50a8aea..2a00f38d566b 100644 --- a/packages/react/src/components/DataTable/TableToolbarMenu.tsx +++ b/packages/react/src/components/DataTable/TableToolbarMenu.tsx @@ -71,7 +71,7 @@ TableToolbarMenu.propTypes = { /** * The description of the menu icon. */ - iconDescription: PropTypes.string.isRequired, + iconDescription: PropTypes.string, /** * Optional prop to allow overriding the default menu icon diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js index 233245e41022..ecca479c61b3 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-batch-actions.stories.js @@ -132,7 +132,6 @@ export const Default = () => ( onChange={onInputChange} /> alert('Alert 1')}> Action 1 @@ -233,7 +232,6 @@ export const Playground = (args) => ( }} /> alert('Alert 1')}> Action 1 diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js index a2807665f9fe..21ff1dc7e6c5 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-filtering.stories.js @@ -77,7 +77,7 @@ export const Default = () => ( {/* pass in `onInputChange` change here to make filtering work */} - + Action 1 @@ -136,7 +136,7 @@ export const Playground = (args) => ( onInputChange(evt); }} /> - + Action 1 diff --git a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js index c8b602ab9ca4..e430cc02bed9 100644 --- a/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js +++ b/packages/react/src/components/DataTable/stories/DataTable-toolbar.stories.js @@ -66,7 +66,7 @@ export const Default = () => ( - + Action 1 @@ -124,7 +124,7 @@ export const PersistentToolbar = () => ( - + Action 1 @@ -185,7 +185,7 @@ export const SmallPersistentToolbar = () => ( size="sm"> - + Action 1 @@ -239,7 +239,7 @@ export const WithOverflowMenu = () => ( - + Action 1 @@ -306,7 +306,7 @@ export const Playground = (args) => ( onInputChange(evt); }} /> - + Action 1 diff --git a/packages/react/src/components/FileUploader/FileUploader.stories.js b/packages/react/src/components/FileUploader/FileUploader.stories.js index 4aa97c65f822..433fb96981fb 100644 --- a/packages/react/src/components/FileUploader/FileUploader.stories.js +++ b/packages/react/src/components/FileUploader/FileUploader.stories.js @@ -39,11 +39,11 @@ export const Default = () => { labelDescription="Max file size is 500mb. Only .jpg files are supported." buttonLabel="Add file" buttonKind="primary" - // size="md" + size="md" filenameStatus="edit" accept={['.jpg', '.png']} multiple={true} - // disabled={false} + disabled={false} iconDescription="Delete file" name="" /> @@ -65,6 +65,7 @@ export const _FileUploaderItem = (args) => { /> ); }; + _FileUploaderItem.argTypes = { errorBody: { control: 'text', diff --git a/packages/react/src/components/FileUploader/FileUploader.tsx b/packages/react/src/components/FileUploader/FileUploader.tsx index 0054e1aa12e2..b514ece6fea4 100644 --- a/packages/react/src/components/FileUploader/FileUploader.tsx +++ b/packages/react/src/components/FileUploader/FileUploader.tsx @@ -58,7 +58,7 @@ export interface FileUploaderProps extends ReactAttr { /** * Provide a description for the complete/close icon that can be read by screen readers */ - iconDescription: string; + iconDescription?: string; /** * Specify the description text of this `` @@ -145,7 +145,7 @@ export default class FileUploader extends React.Component< /** * Provide a description for the complete/close icon that can be read by screen readers */ - iconDescription: PropTypes.string.isRequired, + iconDescription: PropTypes.string, /** * Specify the description text of this `` diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js index 07f235035fa1..f6d75b05f661 100644 --- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js +++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js @@ -28,34 +28,34 @@ import { FormContext } from '../FluidForm'; const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect( { className: containerClassName, - clearSelectionDescription, - clearSelectionText, - compareItems, - direction, - disabled, + clearSelectionDescription = 'Total items selected: ', + clearSelectionText = 'To clear selection, press Delete or Backspace', + compareItems = defaultCompareItems, + direction = 'bottom', + disabled = false, downshiftProps, - filterItems, + filterItems = defaultFilterItems, helperText, hideLabel, id, - initialSelectedItems, + initialSelectedItems = [], invalid, invalidText, items, itemToElement: ItemToElement, // needs to be capitalized for react to render it correctly - itemToString, + itemToString = defaultItemToString, light, - locale, + locale = 'en', onInputValueChange, - open, + open = false, onChange, onMenuChange, placeholder, titleText, type, - selectionFeedback, + selectionFeedback = 'top-after-reopen', size, - sortItems, + sortItems = defaultSortItems, translateWithId, useTitleInItem, warn, @@ -680,19 +680,4 @@ FilterableMultiSelect.propTypes = { warnText: PropTypes.node, }; -FilterableMultiSelect.defaultProps = { - compareItems: defaultCompareItems, - direction: 'bottom', - disabled: false, - filterItems: defaultFilterItems, - initialSelectedItems: [], - itemToString: defaultItemToString, - locale: 'en', - sortItems: defaultSortItems, - open: false, - selectionFeedback: 'top-after-reopen', - clearSelectionText: 'To clear selection, press Delete or Backspace,', - clearSelectionDescription: 'Total items selected: ', -}; - export default FilterableMultiSelect; diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js index 110cd24c44ee..12ab47b32807 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.stories.js +++ b/packages/react/src/components/MultiSelect/MultiSelect.stories.js @@ -142,7 +142,7 @@ Playground.args = { invalidText: 'whoopsie!', label: 'This is a label', clearSelectionDescription: 'Total items selected: ', - useTitleInItem: 'this is the item title', + useTitleInItem: false, clearSelectionText: 'To clear selection, press Delete or Backspace,', }; diff --git a/packages/react/src/components/MultiSelect/MultiSelect.tsx b/packages/react/src/components/MultiSelect/MultiSelect.tsx index 69b439a64dc3..1dd72c3c72e6 100644 --- a/packages/react/src/components/MultiSelect/MultiSelect.tsx +++ b/packages/react/src/components/MultiSelect/MultiSelect.tsx @@ -33,8 +33,8 @@ import { FormContext } from '../FluidForm'; import { ListBoxProps } from '../ListBox/ListBox'; import { OnChangeData } from '../Dropdown'; import type { InternationalProps } from '../../types/common'; +import { noopFn } from '../../internal/noopFn'; -const noop = () => {}; const getInstanceId = setupGetInstanceId(); const { ItemClick, @@ -98,7 +98,7 @@ interface MultiSelectSortingProps { item1: ItemType, item2: ItemType, options: SharedOptions - ): number; // required but has default value + ): number; /** * Provide a method that sorts all options in the control. Overriding this @@ -123,7 +123,7 @@ interface MultiSelectSortingProps { sortItems?( items: ReadonlyArray, options: SortItemsOptions - ): ItemType[]; // required but has default value + ): ItemType[]; } export interface MultiSelectProps @@ -304,18 +304,18 @@ const MultiSelect = React.forwardRef( items, itemToElement, itemToString = defaultItemToString, - titleText, + titleText = false, hideLabel, helperText, label, - type, + type = 'default', size, - disabled, - initialSelectedItems, - sortItems, - compareItems, - clearSelectionText, - clearSelectionDescription, + disabled = false, + initialSelectedItems = [], + sortItems = defaultSortItems as MultiSelectProps['sortItems'], + compareItems = defaultCompareItems, + clearSelectionText = 'To clear selection, press Delete or Backspace', + clearSelectionDescription = 'Total items selected: ', light, invalid, invalidText, @@ -324,14 +324,14 @@ const MultiSelect = React.forwardRef( useTitleInItem, translateWithId, downshiftProps, - open, - selectionFeedback, + open = false, + selectionFeedback = 'top-after-reopen', onChange, onMenuChange, - direction, + direction = 'bottom', selectedItems: selected, readOnly, - locale, + locale = 'en', }: MultiSelectProps, ref: ForwardedRef ) => { @@ -607,7 +607,9 @@ const MultiSelect = React.forwardRef( {selectedItems.length > 0 && ( Array */ - sortItems: PropTypes.func.isRequired, + sortItems: PropTypes.func, /** * Provide text to be used in a `