chore: remove use of defaultProps (issue #1644)

packages/cloud-cognitive/scripts/generate/templates/DISPLAY_NAME.js

@@ -24,16 +24,32 @@ const componentName = 'DISPLAY_NAME';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
 /**
  * TODO: A description of the component.
  */
 export let DISPLAY_NAME = React.forwardRef(
   (
     {
       // The component props, in alphabetical order (for consistency).
+
       children /* TODO: remove if not needed. */,
       className,
-      /* TODO: add other props for DISPLAY_NAME */
+      /* TODO: add other props for DISPLAY_NAME, with default values if needed */
+
       // Collect any other property values passed in.
       ...rest
     },
@@ -87,11 +103,3 @@ DISPLAY_NAME.propTypes = {
 
   /* TODO: add types and DocGen for all props. */
 };
-
-// Default values for component props. Default values are not required for
-// props that are required, nor for props where the component can apply
-// 'undefined' values reasonably. Default values should be provided when the
-// component needs to make a choice or assumption when a prop is not supplied.
-DISPLAY_NAME.defaultProps = {
-  /* TODO: add defaults for relevant props. */
-};

packages/cloud-cognitive/src/components/APIKeyModal/APIKeyModal.js

@@ -33,19 +33,26 @@ import uuidv4 from '../../global/js/utils/uuidv4';
 
 const componentName = 'APIKeyModal';
 
+// Default values for props
+const defaults = {
+  apiKeyName: '',
+  customSteps: Object.freeze([]),
+};
+
 export let APIKeyModal = forwardRef(
   (
     {
+      // The component props, in alphabetical order (for consistency).
       apiKey,
       apiKeyLabel,
-      apiKeyName,
+      apiKeyName = defaults.apiKeyName,
       body,
       className,
       closeButtonText,
       copyButtonText,
       copyErrorText,
       copyIconDescription,
-      customSteps,
+      customSteps = defaults.customSteps,
       downloadBodyText,
       downloadFileName,
       downloadFileType,
@@ -78,6 +85,8 @@ export let APIKeyModal = forwardRef(
       open,
       previousStepButtonText,
       showAPIKeyLabel,
+
+      // Collect any other property values passed in.
       ...rest
     },
     ref
@@ -504,15 +513,4 @@ APIKeyModal.propTypes = {
   showAPIKeyLabel: PropTypes.string,
 };
 
-APIKeyModal.defaultProps = {
-  apiKeyName: '',
-  customSteps: [],
-  error: false,
-  hasAPIKeyVisibilityToggle: false,
-  hasDownloadLink: false,
-  loading: false,
-  nameRequired: false,
-  open: false,
-};
-
 APIKeyModal.displayName = componentName;

packages/cloud-cognitive/src/components/ActionBar/ActionBar.js

@@ -33,13 +33,16 @@ const componentName = 'ActionBar';
 export let ActionBar = React.forwardRef(
   (
     {
+      // The component props, in alphabetical order (for consistency).
+
       actions,
       className,
       maxVisible,
       menuOptionsClass,
       onWidthChange,
       overflowAriaLabel,
       rightAlign,
+
       // Collect any other property values passed in.
       ...rest
     },
@@ -282,7 +285,3 @@ ActionBar.propTypes = {
    */
   rightAlign: PropTypes.bool,
 };
-
-ActionBar.defaultProps = {
-  rightAlign: false,
-};

packages/cloud-cognitive/src/components/ActionBar/ActionBarItem.js

@@ -57,12 +57,10 @@ const reservedProps = [
 ];
 // Base props on Carbon Button
 const propTypes = { ...Button.propTypes };
-const defaultProps = { ...Button.defaultProps };
 
 // Remove reserved props
 reservedProps.forEach((prop) => {
   delete propTypes[prop];
-  delete defaultProps[prop];
 });
 
 ActionBarItem.displayName = componentName;
@@ -104,5 +102,3 @@ ActionBarItem.propTypes = {
    */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
 };
-
-ActionBarItem.defaultProps = { ...defaultProps };

packages/cloud-cognitive/src/components/ActionSet/ActionSet.js

@@ -31,8 +31,6 @@ const ActionSetButton = React.forwardRef(
       kind,
       label,
       loading,
-      onClick,
-      size,
       // Collect any other property values passed in.
       ...rest
     },
@@ -52,7 +50,7 @@ const ActionSetButton = React.forwardRef(
         },
       ])}
       disabled={disabled || loading || false}
-      {...{ kind, onClick, ref, size }}
+      {...{ kind, ref }}
     >
       {label}
       {loading && <InlineLoading />}
@@ -80,6 +78,11 @@ const defaultKind = 'primary';
 const willStack = (size, numberOfActions) =>
   size === 'xs' || size === 'sm' || (size === 'md' && numberOfActions > 2);
 
+// Default values for props
+const defaults = {
+  size: 'md',
+};
+
 /**
  * An ActionSet presents a set of action buttons, constructed from bundles
  * of prop values and applying some layout rules. When the size is 'xs' or 'sm'
@@ -96,10 +99,12 @@ export const ActionSet = React.forwardRef(
   (
     {
       // The component props, in alphabetical order (for consistency).
+
       actions,
       buttonSize,
       className,
-      size,
+      size = defaults.size,
+
       // Collect any other property values passed in.
       ...rest
     },
@@ -186,7 +191,7 @@ ActionSet.validateActions =
     const problems = [];
 
     if (actions > 0) {
-      const size = sizeFn ? sizeFn(props) : props.size;
+      const size = sizeFn ? sizeFn(props) : props.size || defaults.size;
       const stacking = willStack(size, actions);
 
       const countActions = (kind) =>
@@ -294,7 +299,3 @@ ActionSet.propTypes = {
    */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xlg', 'max']),
 };
-
-ActionSet.defaultProps = {
-  size: 'md',
-};

packages/cloud-cognitive/src/components/AddSelect/AddSelect.js

@@ -17,14 +17,21 @@ import { AddSelectBreadcrumbs } from './AddSelectBreadcrumbs';
 import { AddSelectList } from './AddSelectList';
 const componentName = 'AddSelect';
 
+// Default values for props
+const defaults = {
+  items: Object.freeze([]),
+};
+
 export let AddSelect = forwardRef(
   (
     {
+      // The component props, in alphabetical order (for consistency).
+
       className,
       description,
       influencerTitle,
       inputPlaceholder,
-      items,
+      items = defaults.items,
       itemsLabel,
       multi,
       noResultsDescription,
@@ -40,6 +47,8 @@ export let AddSelect = forwardRef(
       removeIconDescription,
       textInputLabel,
       title,
+
+      // Collect any other property values passed in.
       ...rest
     },
     ref
@@ -221,8 +230,4 @@ AddSelect.propTypes = {
   title: PropTypes.string,
 };
 
-AddSelect.defaultProps = {
-  items: [],
-};
-
 AddSelect.displayName = componentName;

packages/cloud-cognitive/src/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -377,7 +377,4 @@ BreadcrumbWithOverflow.propTypes = {
   ),
 };
 
-BreadcrumbWithOverflow.defaultProps = {
-  noTrailingSlash: false,
-};
 BreadcrumbWithOverflow.displayName = componentName;

packages/cloud-cognitive/src/components/ButtonMenu/ButtonMenu.js

@@ -22,6 +22,11 @@ const componentName = 'ButtonMenu';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
+// Default values for props
+const defaults = {
+  size: 'default',
+};
+
 /**
  * Combining a standard button with an overflow menu, this component appears
  * as a button and has all the usual carbon Button props and rendering, but
@@ -33,13 +38,15 @@ export let ButtonMenu = React.forwardRef(
   (
     {
       // The component props, in alphabetical order (for consistency).
+
       children,
       className,
       iconDescription,
       label,
       menuOptionsClass,
       renderIcon: Icon,
-      size,
+      size = defaults.size,
+
       // Collect any other property values passed in.
       ...rest
     },
@@ -131,7 +138,3 @@ ButtonMenu.propTypes = {
    */
   size: Button.propTypes.size,
 };
-
-ButtonMenu.defaultProps = {
-  size: 'default',
-};

packages/cloud-cognitive/src/components/ButtonMenu/ButtonMenuItem.js

@@ -30,5 +30,3 @@ export let ButtonMenuItem = React.forwardRef((props, ref) => (
 ButtonMenuItem = pkg.checkComponentEnabled(ButtonMenuItem, componentName);
 
 ButtonMenuItem.propTypes = OverflowMenuItem.propTypes;
-
-ButtonMenuItem.defaultProps = OverflowMenuItem.defaultProps;

packages/cloud-cognitive/src/components/CancelableTextEdit/CancelableTextEdit.js

@@ -27,12 +27,19 @@ const componentName = 'CancelableTextEdit';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
+// Default values for props
+const defaults = {
+  size: 'md',
+};
+
 /**
  * TODO: A description of the component.
  */
 export let CancelableTextEdit = React.forwardRef(
   (
     {
+      // The component props, in alphabetical order (for consistency).
+
       className,
       hideLabel,
       inline,
@@ -45,7 +52,7 @@ export let CancelableTextEdit = React.forwardRef(
       revertDescription,
       saveDescription,
       saveDisabled,
-      size,
+      size = defaults.size,
       value,
       warn,
       warnText,
@@ -258,12 +265,3 @@ CancelableTextEdit.propTypes = {
    */
   warnText: PropTypes.string,
 };
-
-// Default values for component props. Default values are not required for
-// props that are required, nor for props where the component can apply
-// 'undefined' values reasonably. Default values should be provided when the
-// component needs to make a choice or assumption when a prop is not supplied.
-CancelableTextEdit.defaultProps = {
-  /* TODO: add defaults for relevant props. */
-  size: 'md',
-};