chore(components): better name with forwardRef (#2281)

This change updates React component name for various forward-ref'ed components from just `<ForwardRef>` to something like `<ForwardRef(TextInput)>`. Refs #1768.
carbon-design-system · Apr 29, 2019 · 3e9862c · 3e9862c
1 parent fa8b534
commit 3e9862c
Show file tree

Hide file tree

Showing 16 changed files with 411 additions and 418 deletions.
diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
@@ -18,99 +18,97 @@ const { prefix } = settings;
 
 let didWarnAboutDeprecation = false;
 
-const Button = React.forwardRef(
-  (
-    {
-      children,
-      as,
-      className,
-      disabled,
-      small,
-      kind,
-      href,
-      tabIndex,
-      type,
-      inputref,
-      renderIcon,
-      icon,
-      iconDescription,
-      ...other
-    },
-    ref
-  ) => {
-    const buttonClasses = classNames(className, {
-      [`${prefix}--btn`]: true,
-      [`${prefix}--btn--sm`]: small,
-      [`${prefix}--btn--primary`]: kind === 'primary',
-      [`${prefix}--btn--danger`]: kind === 'danger',
-      [`${prefix}--btn--secondary`]: kind === 'secondary',
-      [`${prefix}--btn--ghost`]: kind === 'ghost',
-      [`${prefix}--btn--danger--primary`]: kind === 'danger--primary',
-      [`${prefix}--btn--tertiary`]: kind === 'tertiary',
-      [`${prefix}--btn--disabled`]: disabled,
-    });
-
-    const commonProps = {
-      tabIndex,
-      className: buttonClasses,
-      ref: breakingChangesX ? ref : ref || inputref,
-    };
-
-    if (__DEV__ && breakingChangesX && icon) {
-      warning(
-        didWarnAboutDeprecation,
-        'The `icon` property in the `Button` component is being removed in the next release of ' +
-          '`carbon-components-react`. Please use `renderIcon` instead.'
-      );
-      didWarnAboutDeprecation = true;
-    }
-
-    const hasRenderIcon = Object(renderIcon) === renderIcon;
-    const ButtonImageElement = hasRenderIcon
-      ? renderIcon
-      : !breakingChangesX && icon && Icon;
-    const buttonImage = !ButtonImageElement ? null : (
-      <ButtonImageElement
-        icon={!hasRenderIcon && Object(icon) === icon ? icon : undefined}
-        name={!hasRenderIcon && Object(icon) !== icon ? icon : undefined}
-        aria-label={!hasRenderIcon ? undefined : iconDescription}
-        description={hasRenderIcon ? undefined : iconDescription}
-        className={`${prefix}--btn__icon`}
-        aria-hidden={true}
-      />
+const Button = React.forwardRef(function Button(
+  {
+    children,
+    as,
+    className,
+    disabled,
+    small,
+    kind,
+    href,
+    tabIndex,
+    type,
+    inputref,
+    renderIcon,
+    icon,
+    iconDescription,
+    ...other
+  },
+  ref
+) {
+  const buttonClasses = classNames(className, {
+    [`${prefix}--btn`]: true,
+    [`${prefix}--btn--sm`]: small,
+    [`${prefix}--btn--primary`]: kind === 'primary',
+    [`${prefix}--btn--danger`]: kind === 'danger',
+    [`${prefix}--btn--secondary`]: kind === 'secondary',
+    [`${prefix}--btn--ghost`]: kind === 'ghost',
+    [`${prefix}--btn--danger--primary`]: kind === 'danger--primary',
+    [`${prefix}--btn--tertiary`]: kind === 'tertiary',
+    [`${prefix}--btn--disabled`]: disabled,
+  });
+
+  const commonProps = {
+    tabIndex,
+    className: buttonClasses,
+    ref: breakingChangesX ? ref : ref || inputref,
+  };
+
+  if (__DEV__ && breakingChangesX && icon) {
+    warning(
+      didWarnAboutDeprecation,
+      'The `icon` property in the `Button` component is being removed in the next release of ' +
+        '`carbon-components-react`. Please use `renderIcon` instead.'
     );
+    didWarnAboutDeprecation = true;
+  }
 
-    let component = 'button';
-    let otherProps = {
-      disabled,
-      type,
+  const hasRenderIcon = Object(renderIcon) === renderIcon;
+  const ButtonImageElement = hasRenderIcon
+    ? renderIcon
+    : !breakingChangesX && icon && Icon;
+  const buttonImage = !ButtonImageElement ? null : (
+    <ButtonImageElement
+      icon={!hasRenderIcon && Object(icon) === icon ? icon : undefined}
+      name={!hasRenderIcon && Object(icon) !== icon ? icon : undefined}
+      aria-label={!hasRenderIcon ? undefined : iconDescription}
+      description={hasRenderIcon ? undefined : iconDescription}
+      className={`${prefix}--btn__icon`}
+      aria-hidden={true}
+    />
+  );
+
+  let component = 'button';
+  let otherProps = {
+    disabled,
+    type,
+  };
+  const anchorProps = {
+    role: 'button',
+    href,
+  };
+  if (as) {
+    component = as;
+    otherProps = {
+      ...otherProps,
+      ...anchorProps,
     };
-    const anchorProps = {
-      role: 'button',
-      href,
-    };
-    if (as) {
-      component = as;
-      otherProps = {
-        ...otherProps,
-        ...anchorProps,
-      };
-    } else if (href) {
-      component = 'a';
-      otherProps = anchorProps;
-    }
-    return React.createElement(
-      component,
-      {
-        ...other,
-        ...commonProps,
-        ...otherProps,
-      },
-      children,
-      buttonImage
-    );
+  } else if (href) {
+    component = 'a';
+    otherProps = anchorProps;
   }
-);
+  return React.createElement(
+    component,
+    {
+      ...other,
+      ...commonProps,
+      ...otherProps,
+    },
+    children,
+    buttonImage
+  );
+});
 
 Button.propTypes = {
   /**

diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
@@ -12,59 +12,57 @@ import { settings } from 'carbon-components';
 
 const { prefix } = settings;
 
-const Checkbox = React.forwardRef(
-  (
-    {
-      className,
-      id,
-      labelText,
-      onChange,
-      indeterminate,
-      hideLabel,
-      wrapperClassName,
-      title = '',
-      ...other
-    },
-    ref
-  ) => {
-    const labelClasses = classNames(`${prefix}--checkbox-label`, className);
-    const innerLabelClasses = classNames({
-      [`${prefix}--visually-hidden`]: hideLabel,
-    });
-    const wrapperClasses = classNames(
-      `${prefix}--form-item`,
-      `${prefix}--checkbox-wrapper`,
-      wrapperClassName
-    );
-
-    return (
-      <div className={wrapperClasses}>
-        <input
-          {...other}
-          type="checkbox"
-          onChange={evt => {
-            onChange(evt.target.checked, id, evt);
-          }}
-          className={`${prefix}--checkbox`}
-          id={id}
-          ref={el => {
-            if (el) {
-              el.indeterminate = indeterminate;
-            }
-            if (typeof ref === 'function') {
-              ref(el);
-            } else if (Object(ref) === ref) {
-              ref.current = el;
-            }
-          }}
-        />
-        <label htmlFor={id} className={labelClasses} title={title || null}>
-          <span className={innerLabelClasses}>{labelText}</span>
-        </label>
-      </div>
-    );
-  }
-);
+const Checkbox = React.forwardRef(function Checkbox(
+  {
+    className,
+    id,
+    labelText,
+    onChange,
+    indeterminate,
+    hideLabel,
+    wrapperClassName,
+    title = '',
+    ...other
+  },
+  ref
+) {
+  const labelClasses = classNames(`${prefix}--checkbox-label`, className);
+  const innerLabelClasses = classNames({
+    [`${prefix}--visually-hidden`]: hideLabel,
+  });
+  const wrapperClasses = classNames(
+    `${prefix}--form-item`,
+    `${prefix}--checkbox-wrapper`,
+    wrapperClassName
+  );
+
+  return (
+    <div className={wrapperClasses}>
+      <input
+        {...other}
+        type="checkbox"
+        onChange={evt => {
+          onChange(evt.target.checked, id, evt);
+        }}
+        className={`${prefix}--checkbox`}
+        id={id}
+        ref={el => {
+          if (el) {
+            el.indeterminate = indeterminate;
+          }
+          if (typeof ref === 'function') {
+            ref(el);
+          } else if (Object(ref) === ref) {
+            ref.current = el;
+          }
+        }}
+      />
+      <label htmlFor={id} className={labelClasses} title={title || null}>
+        <span className={innerLabelClasses}>{labelText}</span>
+      </label>
+    </div>
+  );
+});
 
 Checkbox.propTypes = {
   /**

diff --git a/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -1867,7 +1867,7 @@ exports[`DataTable should render 1`] = `
                     Action 3
                   </TableToolbarAction>
                 </TableToolbarMenu>
-                <ForwardRef
+                <ForwardRef(Button)
                   disabled={false}
                   iconDescription="Provide icon description if icon is used"
                   kind="primary"
@@ -1877,7 +1877,7 @@ exports[`DataTable should render 1`] = `
                   type="button"
                 >
                   Add new
-                </ForwardRef>
+                </ForwardRef(Button)>
               </TableToolbarContent>
             </TableToolbar>
             <Table
@@ -2030,7 +2030,7 @@ exports[`DataTable should render 1`] = `
                       }
                     }
                   >
-                    <ForwardRef
+                    <ForwardRef(Button)
                       disabled={false}
                       iconDescription="Add"
                       kind="primary"
@@ -2107,7 +2107,7 @@ exports[`DataTable should render 1`] = `
                           </svg>
                         </AddFilled16>
                       </button>
-                    </ForwardRef>
+                    </ForwardRef(Button)>
                   </TableBatchAction>
                   <TableBatchAction
                     iconDescription="Add"
@@ -2140,7 +2140,7 @@ exports[`DataTable should render 1`] = `
                       }
                     }
                   >
-                    <ForwardRef
+                    <ForwardRef(Button)
                       disabled={false}
                       iconDescription="Add"
                       kind="primary"
@@ -2217,7 +2217,7 @@ exports[`DataTable should render 1`] = `
                           </svg>
                         </AddFilled16>
                       </button>
-                    </ForwardRef>
+                    </ForwardRef(Button)>
                   </TableBatchAction>
                   <TableBatchAction
                     iconDescription="Add"
@@ -2250,7 +2250,7 @@ exports[`DataTable should render 1`] = `
                       }
                     }
                   >
-                    <ForwardRef
+                    <ForwardRef(Button)
                       disabled={false}
                       iconDescription="Add"
                       kind="primary"
@@ -2327,9 +2327,9 @@ exports[`DataTable should render 1`] = `
                           </svg>
                         </AddFilled16>
                       </button>
-                    </ForwardRef>
+                    </ForwardRef(Button)>
                   </TableBatchAction>
-                  <ForwardRef
+                  <ForwardRef(Button)
                     className="bx--batch-summary__cancel"
                     disabled={false}
                     iconDescription="Provide icon description if icon is used"
@@ -2348,7 +2348,7 @@ exports[`DataTable should render 1`] = `
                     >
                       Cancel
                     </button>
-                  </ForwardRef>
+                  </ForwardRef(Button)>
                 </div>
               </TableActionList>
               <div
@@ -2653,7 +2653,7 @@ exports[`DataTable should render 1`] = `
                   </OverflowMenu>
                 </ForwardRef(OverflowMenu)>
               </TableToolbarMenu>
-              <ForwardRef
+              <ForwardRef(Button)
                 disabled={false}
                 iconDescription="Provide icon description if icon is used"
                 kind="primary"
@@ -2671,7 +2671,7 @@ exports[`DataTable should render 1`] = `
                 >
                   Add new
                 </button>
-              </ForwardRef>
+              </ForwardRef(Button)>
             </div>
           </TableToolbarContent>
         </section>