diff --git a/docs/CODE_GUIDELINES.md b/docs/CODE_GUIDELINES.md index c0db2b1a9b..14aa461ab3 100644 --- a/docs/CODE_GUIDELINES.md +++ b/docs/CODE_GUIDELINES.md @@ -139,14 +139,6 @@ unclear. - `.propTypes = {};` using the PropTypes to specify property types, shapes, and required properties, and including DocGen comments to describe the properties for a user. - - `.defaultProps = {};` providing default values for properties that need - them. Required props should NOT be given default values. Any property that - is not required but which the component needs to make an assumed value for - should be given a suitable default. Properties that can be left unset do - NOT need default values if the component simply tests for and copes with - the value being `undefined`. This includes any property that will be - passed directly to a nested component or HTML element in the JSX, because - React treats `undefined` as not setting the property/attribute. - Ensure all code is neatly formatted (use `yarn format` and/or a prettier plugin for an editor to follow the prettier rules set up in the project), and diff --git a/packages/ibm-products/src/components/AddSelect/AddSelect.tsx b/packages/ibm-products/src/components/AddSelect/AddSelect.tsx index de3a3aa11f..84dca0ddd2 100644 --- a/packages/ibm-products/src/components/AddSelect/AddSelect.tsx +++ b/packages/ibm-products/src/components/AddSelect/AddSelect.tsx @@ -17,7 +17,7 @@ export interface AddSelectProps { clearFiltersText?: string; closeIconDescription?: string; columnInputPlaceholder?: string; - description: string; + description?: string; filterByLabel?: string; globalFilters?: Filter[]; globalFiltersIconDescription?: string; @@ -31,19 +31,19 @@ export interface AddSelectProps { illustrationTheme?: Theme; influencerTitle?: string; items: Item; - itemsLabel: string; + itemsLabel?: string; metaIconDescription?: string; metaPanelTitle?: string; - multi: boolean; + multi?: boolean; navIconDescription?: string; noResultsDescription: string; noResultsTitle: string; noSelectionDescription?: string; noSelectionTitle?: string; - onClose: () => void; - onCloseButtonText: string; - onSubmit: () => void; - onSubmitButtonText: string; + onClose?: () => void; + onCloseButtonText?: string; + onSubmit?: () => void; + onSubmitButtonText?: string; open: boolean; /** * portal target for the all tags modal @@ -51,22 +51,40 @@ export interface AddSelectProps { portalTarget?: ReactNode; searchResultsTitle?: string; sortByLabel?: string; - title: string; + title?: string; } export const AddSelect = forwardRef( ( - { items, globalFilters, ...props }: AddSelectProps, + { + globalFilters, + closeIconDescription = '', + description = '', + itemsLabel = '', + items = { + entries: [], + }, + multi = false, + noResultsDescription = '', + noResultsTitle = '', + onClose = () => {}, + onCloseButtonText = '', + onSubmit = () => {}, + onSubmitButtonText = '', + open = false, + title = '', + ...props + }: AddSelectProps, ref: ForwardedRef ) => { const useNormalizedItems = !!items.entries.find((item) => item.children); const normalizedItems = useNormalizedItems ? normalize(items) : null; const globalFilterOpts = - props.multi && globalFilters?.length + multi && globalFilters?.length ? getGlobalFilterValues(globalFilters, normalizedItems) : null; const defaultModifiers = - props.multi && items.modifiers + multi && items.modifiers ? items.entries.map((item) => { const modifierAttribute = items?.modifiers?.id; const modifier = { @@ -85,11 +103,23 @@ export const AddSelect = forwardRef( ); } @@ -98,9 +128,9 @@ export const AddSelect = forwardRef( AddSelect.propTypes = { className: PropTypes.string, clearFiltersText: PropTypes.string, - closeIconDescription: PropTypes.string.isRequired, + closeIconDescription: PropTypes.string, columnInputPlaceholder: PropTypes.string, - description: PropTypes.string.isRequired, + description: PropTypes.string, filterByLabel: PropTypes.string, /**@ts-ignore */ globalFilters: PropTypes.arrayOf( @@ -154,20 +184,20 @@ AddSelect.propTypes = { value: PropTypes.string.isRequired, }) ).isRequired, - }).isRequired, - itemsLabel: PropTypes.string.isRequired, + }), + itemsLabel: PropTypes.string, metaIconDescription: PropTypes.string, metaPanelTitle: PropTypes.string, - multi: PropTypes.bool.isRequired, + multi: PropTypes.bool, navIconDescription: PropTypes.string, noResultsDescription: PropTypes.string.isRequired, noResultsTitle: PropTypes.string.isRequired, noSelectionDescription: PropTypes.string, noSelectionTitle: PropTypes.string, - onClose: PropTypes.func.isRequired, - onCloseButtonText: PropTypes.string.isRequired, - onSubmit: PropTypes.func.isRequired, - onSubmitButtonText: PropTypes.string.isRequired, + onClose: PropTypes.func, + onCloseButtonText: PropTypes.string, + onSubmit: PropTypes.func, + onSubmitButtonText: PropTypes.string, open: PropTypes.bool.isRequired, /** * portal target for the all tags modal @@ -175,25 +205,7 @@ AddSelect.propTypes = { portalTarget: PropTypes.node, searchResultsTitle: PropTypes.string, sortByLabel: PropTypes.string, - title: PropTypes.string.isRequired, -}; - -AddSelect.defaultProps = { - closeIconDescription: '', - description: '', - itemsLabel: '', - items: { - entries: [], - }, - multi: false, - noResultsDescription: '', - noResultsTitle: '', - onClose: () => {}, - onCloseButtonText: '', - onSubmit: () => {}, - onSubmitButtonText: '', - open: false, - title: '', + title: PropTypes.string, }; AddSelect.displayName = componentName; diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js index c970b76fdf..600e606400 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js @@ -14,7 +14,7 @@ import { pkg } from '../../../../../settings'; const blockClass = `${pkg.prefix}--datagrid`; const ButtonWrapper = ({ - onClick, + onClick = () => {}, setIsTearsheetOpen, isTearsheetOpen, iconTooltipLabel = 'Customize columns', @@ -39,10 +39,6 @@ const ButtonWrapper = ({ ); }; -ButtonWrapper.defaultProps = { - onClick: () => {}, -}; - ButtonWrapper.propTypes = { iconTooltipLabel: PropTypes.string, isTearsheetOpen: PropTypes.bool.isRequired, diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js index be6787c349..394984da4c 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js +++ b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js @@ -16,8 +16,24 @@ const blockClass = `${pkg.prefix}--datagrid__row-size`; const RowSizeRadioGroup = forwardRef( ( { - rowSizes, - selectedOption, + rowSizes = [ + { + value: 'xl', // 64 + }, + { + value: 'lg', // 48 + }, + { + value: 'md', // 40 + }, + { + value: 'sm', // 32 + }, + { + value: 'xs', // 24 + }, + ], + selectedOption = 'lg', onChange, legendText, rowSizeLabels = { @@ -76,27 +92,6 @@ const getBackwardCompatibleRowSize = (rowSize) => { return rowSizeMap[rowSize] || rowSize; }; -RowSizeRadioGroup.defaultProps = { - rowSizes: [ - { - value: 'xl', // 64 - }, - { - value: 'lg', // 48 - }, - { - value: 'md', // 40 - }, - { - value: 'sm', // 32 - }, - { - value: 'xs', // 24 - }, - ], - selectedOption: 'lg', -}; - RowSizeRadioGroup.propTypes = { legendText: PropTypes.string, onChange: PropTypes.func.isRequired, diff --git a/packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.test.js b/packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.test.js index 858a329283..97aa1caf8b 100644 --- a/packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.test.js +++ b/packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.test.js @@ -16,6 +16,7 @@ const defaultProps = { noSelectionDescription: 'No selection description', noResultsTitle: 'No results title', noResultsDescription: 'Try again description', + open: true, }; describe(componentName, () => { diff --git a/packages/ibm-products/src/components/Nav/NavItemLink.js b/packages/ibm-products/src/components/Nav/NavItemLink.js index fcb0993307..e9d1708bbb 100644 --- a/packages/ibm-products/src/components/Nav/NavItemLink.js +++ b/packages/ibm-products/src/components/Nav/NavItemLink.js @@ -1,14 +1,18 @@ /** - * @file Nav item link. - * @copyright IBM Security 2019 + * Copyright IBM Corp. 2024, 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. */ import PropTypes from 'prop-types'; import React from 'react'; -const NavItemLink = React.forwardRef(function NavItemLink(props, ref) { - const { element, ...rest } = props; - return React.createElement(element, { ...rest, ref }); +const NavItemLink = React.forwardRef(function NavItemLink( + { element = 'a', ...props }, + ref +) { + return React.createElement(element, { ...props, ref }); }); NavItemLink.displayName = 'NavItemLink'; @@ -18,8 +22,4 @@ NavItemLink.propTypes = { element: PropTypes.elementType, }; -NavItemLink.defaultProps = { - element: 'a', -}; - export default NavItemLink; diff --git a/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.test.js b/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.test.js index d85370a8ef..ab1a32b185 100644 --- a/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.test.js +++ b/packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.test.js @@ -16,6 +16,7 @@ const defaultProps = { noSelectionDescription: 'No selection description', noResultsTitle: 'No results title', noResultsDescription: 'Try again description', + open: true, }; describe(componentName, () => {