From 3e9862cd65563f692ee431dca558747caf4c2157 Mon Sep 17 00:00:00 2001
From: Akira Sudoh <asudoh@gmail.com>
Date: Mon, 29 Apr 2019 23:06:01 +0900
Subject: [PATCH] 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.
---
 src/components/Button/Button.js               | 176 +++++++-------
 src/components/Checkbox/Checkbox.js           | 104 ++++----
 .../__snapshots__/DataTable-test.js.snap      |  24 +-
 .../TableBatchAction-test.js.snap             |   4 +-
 .../TableBatchActions-test.js.snap            |   8 +-
 .../__snapshots__/ModalWrapper-test.js.snap   |  12 +-
 src/components/Select/Select.js               | 224 +++++++++---------
 src/components/TextInput/TextInput.js         | 206 ++++++++--------
 src/components/UIShell/HeaderMenuItem.js      |  33 +--
 src/components/UIShell/Link.js                |   2 +-
 src/components/UIShell/SideNavMenuItem.js     |   2 +-
 src/components/UIShell/SideNavSwitcher.js     |   2 +-
 .../__snapshots__/HeaderMenu-test.js.snap     |  12 +-
 .../__snapshots__/HeaderMenuItem-test.js.snap |   4 +-
 .../SideNavMenuItem-test.js.snap              |  12 +-
 .../SideNavSwitcher-test.js.snap              |   4 +-
 16 files changed, 411 insertions(+), 418 deletions(-)

diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js
index b8a880021c..2334c3e4a5 100644
--- 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
index ee31262cad..f3379c24cd 100644
--- 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
index f23d1d9a83..228da4beef 100644
--- 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>
diff --git a/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap b/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
index 4c7da1c035..5d02f5d416 100644
--- a/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
+++ b/src/components/DataTable/__tests__/__snapshots__/TableBatchAction-test.js.snap
@@ -32,7 +32,7 @@ exports[`DataTable.TableBatchAction should render 1`] = `
     }
   }
 >
-  <ForwardRef
+  <ForwardRef(Button)
     className="custom-class"
     disabled={false}
     iconDescription="Add"
@@ -107,6 +107,6 @@ exports[`DataTable.TableBatchAction should render 1`] = `
         </svg>
       </AddFilled16>
     </button>
-  </ForwardRef>
+  </ForwardRef(Button)>
 </TableBatchAction>
 `;
diff --git a/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap b/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
index 77ea17c76f..fd3f06215f 100644
--- a/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
+++ b/src/components/DataTable/__tests__/__snapshots__/TableBatchActions-test.js.snap
@@ -15,7 +15,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
       <div
         className="bx--action-list"
       >
-        <ForwardRef
+        <ForwardRef(Button)
           className="bx--batch-summary__cancel"
           disabled={false}
           iconDescription="Provide icon description if icon is used"
@@ -34,7 +34,7 @@ exports[`DataTable.TableBatchActions should render 1`] = `
           >
             Cancel
           </button>
-        </ForwardRef>
+        </ForwardRef(Button)>
       </div>
     </TableActionList>
     <div
@@ -67,7 +67,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
       <div
         className="bx--action-list"
       >
-        <ForwardRef
+        <ForwardRef(Button)
           className="bx--batch-summary__cancel"
           disabled={false}
           iconDescription="Provide icon description if icon is used"
@@ -86,7 +86,7 @@ exports[`DataTable.TableBatchActions should render 2`] = `
           >
             Cancel
           </button>
-        </ForwardRef>
+        </ForwardRef(Button)>
       </div>
     </TableActionList>
     <div
diff --git a/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap b/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
index d2e12957bb..607f1bfc53 100644
--- a/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
+++ b/src/components/ModalWrapper/__snapshots__/ModalWrapper-test.js.snap
@@ -21,7 +21,7 @@ exports[`ModalWrapper should render 1`] = `
     onKeyDown={[Function]}
     role="presentation"
   >
-    <ForwardRef
+    <ForwardRef(Button)
       className="btn-trigger"
       disabled={false}
       iconDescription="Provide icon description if icon is used"
@@ -40,7 +40,7 @@ exports[`ModalWrapper should render 1`] = `
       >
         Test Modal
       </button>
-    </ForwardRef>
+    </ForwardRef(Button)>
     <Modal
       focusTrap={true}
       iconDescription="close the modal"
@@ -144,7 +144,7 @@ exports[`ModalWrapper should render 1`] = `
             <div
               className="bx--modal-footer"
             >
-              <ForwardRef
+              <ForwardRef(Button)
                 disabled={false}
                 iconDescription="Provide icon description if icon is used"
                 kind="secondary"
@@ -162,8 +162,8 @@ exports[`ModalWrapper should render 1`] = `
                 >
                   Cancel
                 </button>
-              </ForwardRef>
-              <ForwardRef
+              </ForwardRef(Button)>
+              <ForwardRef(Button)
                 disabled={false}
                 iconDescription="Provide icon description if icon is used"
                 inputref={
@@ -206,7 +206,7 @@ exports[`ModalWrapper should render 1`] = `
                 >
                   Save
                 </button>
-              </ForwardRef>
+              </ForwardRef(Button)>
             </div>
           </div>
         </div>
diff --git a/src/components/Select/Select.js b/src/components/Select/Select.js
index 429401514d..41b764ca59 100644
--- a/src/components/Select/Select.js
+++ b/src/components/Select/Select.js
@@ -17,123 +17,121 @@ import WarningFilled16 from '@carbon/icons-react/lib/warning--filled/16';
 
 const { prefix } = settings;
 
-const Select = React.forwardRef(
-  (
-    {
-      className,
-      id,
-      inline,
-      labelText,
-      disabled,
-      children,
-      noLabel, // reserved for use with <Pagination> component
-      iconDescription,
-      hideLabel,
-      invalid,
-      invalidText,
-      helperText,
-      light,
-      ...other
-    },
-    ref
-  ) => {
-    const selectClasses = classNames({
-      [`${prefix}--select`]: true,
-      [`${prefix}--select--inline`]: inline,
-      [`${prefix}--select--light`]: light,
-      [`${prefix}--select--invalid`]: invalid,
-      [className]: className,
-    });
-    const labelClasses = classNames(`${prefix}--label`, {
-      [`${prefix}--visually-hidden`]: hideLabel,
-      [`${prefix}--label--disabled`]: disabled,
-    });
-    const errorId = `${id}-error-msg`;
-    const error = invalid ? (
-      <div className={`${prefix}--form-requirement`} id={errorId}>
-        {invalidText}
-      </div>
-    ) : null;
-    const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
-      [`${prefix}--form__helper-text--disabled`]: disabled,
-    });
-    const helper = helperText ? (
-      <div className={helperTextClasses}>{helperText}</div>
-    ) : null;
-    const ariaProps = {};
-    if (invalid) {
-      ariaProps['aria-describedby'] = errorId;
-    }
-    const input = (() => {
-      return (
-        <>
-          <select
-            {...other}
-            {...ariaProps}
-            id={id}
-            className={`${prefix}--select-input`}
-            disabled={disabled || undefined}
-            data-invalid={invalid || undefined}
-            aria-invalid={invalid || undefined}
-            ref={ref}>
-            {children}
-          </select>
-          {componentsX ? (
-            <ChevronDownGlyph
-              className={`${prefix}--select__arrow`}
-              aria-label={iconDescription}>
-              <title>{iconDescription}</title>
-            </ChevronDownGlyph>
-          ) : (
-            <Icon
-              icon={iconCaretDown}
-              className={`${prefix}--select__arrow`}
-              description={iconDescription}
-            />
-          )}
-          {componentsX && invalid && (
-            <WarningFilled16 className={`${prefix}--select__invalid-icon`} />
-          )}
-        </>
-      );
-    })();
+const Select = React.forwardRef(function Select(
+  {
+    className,
+    id,
+    inline,
+    labelText,
+    disabled,
+    children,
+    noLabel, // reserved for use with <Pagination> component
+    iconDescription,
+    hideLabel,
+    invalid,
+    invalidText,
+    helperText,
+    light,
+    ...other
+  },
+  ref
+) {
+  const selectClasses = classNames({
+    [`${prefix}--select`]: true,
+    [`${prefix}--select--inline`]: inline,
+    [`${prefix}--select--light`]: light,
+    [`${prefix}--select--invalid`]: invalid,
+    [className]: className,
+  });
+  const labelClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: disabled,
+  });
+  const errorId = `${id}-error-msg`;
+  const error = invalid ? (
+    <div className={`${prefix}--form-requirement`} id={errorId}>
+      {invalidText}
+    </div>
+  ) : null;
+  const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: disabled,
+  });
+  const helper = helperText ? (
+    <div className={helperTextClasses}>{helperText}</div>
+  ) : null;
+  const ariaProps = {};
+  if (invalid) {
+    ariaProps['aria-describedby'] = errorId;
+  }
+  const input = (() => {
     return (
-      <div className={`${prefix}--form-item`}>
-        <div className={selectClasses}>
-          {!noLabel && (
-            <label htmlFor={id} className={labelClasses}>
-              {labelText}
-            </label>
-          )}
-          {!inline && helper}
-          {componentsX && inline && (
-            <>
-              <div className={`${prefix}--select-input--inline__wrapper`}>
-                <div
-                  className={`${prefix}--select-input__wrapper`}
-                  data-invalid={invalid || null}>
-                  {input}
-                </div>
-                {error}
+      <>
+        <select
+          {...other}
+          {...ariaProps}
+          id={id}
+          className={`${prefix}--select-input`}
+          disabled={disabled || undefined}
+          data-invalid={invalid || undefined}
+          aria-invalid={invalid || undefined}
+          ref={ref}>
+          {children}
+        </select>
+        {componentsX ? (
+          <ChevronDownGlyph
+            className={`${prefix}--select__arrow`}
+            aria-label={iconDescription}>
+            <title>{iconDescription}</title>
+          </ChevronDownGlyph>
+        ) : (
+          <Icon
+            icon={iconCaretDown}
+            className={`${prefix}--select__arrow`}
+            description={iconDescription}
+          />
+        )}
+        {componentsX && invalid && (
+          <WarningFilled16 className={`${prefix}--select__invalid-icon`} />
+        )}
+      </>
+    );
+  })();
+  return (
+    <div className={`${prefix}--form-item`}>
+      <div className={selectClasses}>
+        {!noLabel && (
+          <label htmlFor={id} className={labelClasses}>
+            {labelText}
+          </label>
+        )}
+        {!inline && helper}
+        {componentsX && inline && (
+          <>
+            <div className={`${prefix}--select-input--inline__wrapper`}>
+              <div
+                className={`${prefix}--select-input__wrapper`}
+                data-invalid={invalid || null}>
+                {input}
               </div>
-              {helper}
-            </>
-          )}
-          {componentsX && !inline && (
-            <div
-              className={`${prefix}--select-input__wrapper`}
-              data-invalid={invalid || null}>
-              {input}
+              {error}
             </div>
-          )}
-          {!componentsX && input}
-          {!componentsX && inline && helper}
-          {(!componentsX || (componentsX && !inline)) && error}
-        </div>
+            {helper}
+          </>
+        )}
+        {componentsX && !inline && (
+          <div
+            className={`${prefix}--select-input__wrapper`}
+            data-invalid={invalid || null}>
+            {input}
+          </div>
+        )}
+        {!componentsX && input}
+        {!componentsX && inline && helper}
+        {(!componentsX || (componentsX && !inline)) && error}
       </div>
-    );
-  }
-);
+    </div>
+  );
+});
 
 Select.propTypes = {
   /**
diff --git a/src/components/TextInput/TextInput.js b/src/components/TextInput/TextInput.js
index 7ac0ddb906..482e6cbbb8 100644
--- a/src/components/TextInput/TextInput.js
+++ b/src/components/TextInput/TextInput.js
@@ -14,111 +14,109 @@ import WarningFilled16 from '@carbon/icons-react/lib/warning--filled/16';
 
 const { prefix } = settings;
 
-const TextInput = React.forwardRef(
-  (
-    {
-      labelText,
-      className = `${prefix}--text__input`,
-      id,
-      placeholder,
-      type,
-      onChange,
-      onClick,
-      hideLabel,
-      invalid,
-      invalidText,
-      helperText,
-      light,
-      ...other
+const TextInput = React.forwardRef(function TextInput(
+  {
+    labelText,
+    className = `${prefix}--text__input`,
+    id,
+    placeholder,
+    type,
+    onChange,
+    onClick,
+    hideLabel,
+    invalid,
+    invalidText,
+    helperText,
+    light,
+    ...other
+  },
+  ref
+) {
+  const textInputProps = {
+    id,
+    onChange: evt => {
+      if (!other.disabled) {
+        onChange(evt);
+      }
     },
-    ref
-  ) => {
-    const textInputProps = {
-      id,
-      onChange: evt => {
-        if (!other.disabled) {
-          onChange(evt);
-        }
-      },
-      onClick: evt => {
-        if (!other.disabled) {
-          onClick(evt);
-        }
-      },
-      placeholder,
-      type,
-      ref,
-    };
-
-    const errorId = id + '-error-msg';
-    const textInputClasses = classNames(`${prefix}--text-input`, className, {
-      [`${prefix}--text-input--light`]: light,
-      [`${prefix}--text-input--invalid`]: invalid,
-    });
-    const labelClasses = classNames(`${prefix}--label`, {
-      [`${prefix}--visually-hidden`]: hideLabel,
-      [`${prefix}--label--disabled`]: other.disabled,
-    });
-    const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
-      [`${prefix}--form__helper-text--disabled`]: other.disabled,
-    });
-
-    const label = labelText ? (
-      <label htmlFor={id} className={labelClasses}>
-        {labelText}
-      </label>
-    ) : null;
-
-    const error = invalid ? (
-      <div className={`${prefix}--form-requirement`} id={errorId}>
-        {invalidText}
-      </div>
-    ) : null;
-
-    const input = invalid ? (
-      <input
-        {...other}
-        {...textInputProps}
-        data-invalid
-        aria-invalid
-        aria-describedby={errorId}
-        className={textInputClasses}
-      />
-    ) : (
-      <input {...other} {...textInputProps} className={textInputClasses} />
-    );
-
-    const helper = helperText ? (
-      <div className={helperTextClasses}>{helperText}</div>
-    ) : null;
-
-    const textInputWrapperClasses = classNames(`${prefix}--form-item`, {
-      [`${prefix}--text-input-wrapper`]: componentsX,
-    });
-
-    return (
-      <div className={textInputWrapperClasses}>
-        {label}
-        {helper}
-        {componentsX ? (
-          <div
-            className={`${prefix}--text-input__field-wrapper`}
-            data-invalid={invalid || null}>
-            {invalid && (
-              <WarningFilled16
-                className={`${prefix}--text-input__invalid-icon`}
-              />
-            )}
-            {input}
-          </div>
-        ) : (
-          input
-        )}
-        {error}
-      </div>
-    );
-  }
-);
+    onClick: evt => {
+      if (!other.disabled) {
+        onClick(evt);
+      }
+    },
+    placeholder,
+    type,
+    ref,
+  };
+
+  const errorId = id + '-error-msg';
+  const textInputClasses = classNames(`${prefix}--text-input`, className, {
+    [`${prefix}--text-input--light`]: light,
+    [`${prefix}--text-input--invalid`]: invalid,
+  });
+  const labelClasses = classNames(`${prefix}--label`, {
+    [`${prefix}--visually-hidden`]: hideLabel,
+    [`${prefix}--label--disabled`]: other.disabled,
+  });
+  const helperTextClasses = classNames(`${prefix}--form__helper-text`, {
+    [`${prefix}--form__helper-text--disabled`]: other.disabled,
+  });
+
+  const label = labelText ? (
+    <label htmlFor={id} className={labelClasses}>
+      {labelText}
+    </label>
+  ) : null;
+
+  const error = invalid ? (
+    <div className={`${prefix}--form-requirement`} id={errorId}>
+      {invalidText}
+    </div>
+  ) : null;
+
+  const input = invalid ? (
+    <input
+      {...other}
+      {...textInputProps}
+      data-invalid
+      aria-invalid
+      aria-describedby={errorId}
+      className={textInputClasses}
+    />
+  ) : (
+    <input {...other} {...textInputProps} className={textInputClasses} />
+  );
+
+  const helper = helperText ? (
+    <div className={helperTextClasses}>{helperText}</div>
+  ) : null;
+
+  const textInputWrapperClasses = classNames(`${prefix}--form-item`, {
+    [`${prefix}--text-input-wrapper`]: componentsX,
+  });
+
+  return (
+    <div className={textInputWrapperClasses}>
+      {label}
+      {helper}
+      {componentsX ? (
+        <div
+          className={`${prefix}--text-input__field-wrapper`}
+          data-invalid={invalid || null}>
+          {invalid && (
+            <WarningFilled16
+              className={`${prefix}--text-input__invalid-icon`}
+            />
+          )}
+          {input}
+        </div>
+      ) : (
+        input
+      )}
+      {error}
+    </div>
+  );
+});
 
 TextInput.propTypes = {
   /**
diff --git a/src/components/UIShell/HeaderMenuItem.js b/src/components/UIShell/HeaderMenuItem.js
index 06f101e428..0eec75e10e 100644
--- a/src/components/UIShell/HeaderMenuItem.js
+++ b/src/components/UIShell/HeaderMenuItem.js
@@ -12,22 +12,23 @@ import Link, { LinkPropTypes } from './Link';
 
 const { prefix } = settings;
 
-const HeaderMenuItem = React.forwardRef(
-  ({ className, children, role, ...rest }, ref) => {
-    return (
-      <li className={className} role={role}>
-        <Link
-          {...rest}
-          className={`${prefix}--header__menu-item`}
-          ref={ref}
-          role="menuitem"
-          tabIndex={0}>
-          <span className={`${prefix}--text-truncate--end`}>{children}</span>
-        </Link>
-      </li>
-    );
-  }
-);
+const HeaderMenuItem = React.forwardRef(function HeaderMenuItem(
+  { className, children, role, ...rest },
+  ref
+) {
+  return (
+    <li className={className} role={role}>
+      <Link
+        {...rest}
+        className={`${prefix}--header__menu-item`}
+        ref={ref}
+        role="menuitem"
+        tabIndex={0}>
+        <span className={`${prefix}--text-truncate--end`}>{children}</span>
+      </Link>
+    </li>
+  );
+});
 
 HeaderMenuItem.propTypes = {
   /**
diff --git a/src/components/UIShell/Link.js b/src/components/UIShell/Link.js
index 69b4bab0fa..e862ca7601 100644
--- a/src/components/UIShell/Link.js
+++ b/src/components/UIShell/Link.js
@@ -14,7 +14,7 @@ import React from 'react';
  * in their own components to support use-cases like `react-router` or
  * `@reach/router`
  */
-const Link = React.forwardRef((props, ref) => {
+const Link = React.forwardRef(function Link(props, ref) {
   const { element, ...rest } = props;
   return React.createElement(element, { ...rest, ref });
 });
diff --git a/src/components/UIShell/SideNavMenuItem.js b/src/components/UIShell/SideNavMenuItem.js
index 26340306cf..2ad279363c 100644
--- a/src/components/UIShell/SideNavMenuItem.js
+++ b/src/components/UIShell/SideNavMenuItem.js
@@ -14,7 +14,7 @@ import Link from './Link';
 
 const { prefix } = settings;
 
-const SideNavMenuItem = React.forwardRef((props, ref) => {
+const SideNavMenuItem = React.forwardRef(function SideNavMenuItem(props, ref) {
   const { children, className: customClassName, isActive, ...rest } = props;
   const className = cx(`${prefix}--side-nav__menu-item`, customClassName);
   const linkClassName = cx({
diff --git a/src/components/UIShell/SideNavSwitcher.js b/src/components/UIShell/SideNavSwitcher.js
index f73d54036d..2feb6cea58 100644
--- a/src/components/UIShell/SideNavSwitcher.js
+++ b/src/components/UIShell/SideNavSwitcher.js
@@ -13,7 +13,7 @@ import React from 'react';
 
 const { prefix } = settings;
 
-const SideNavSwitcher = React.forwardRef((props, ref) => {
+const SideNavSwitcher = React.forwardRef(function SideNavSwitcher(props, ref) {
   const { className: customClassName, labelText, onChange, options } = props;
   const className = cx(`${prefix}--side-nav__switcher`, customClassName);
   // Note for usage around `onBlur`: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
diff --git a/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap b/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
index 47e3dc5f8e..0f78b66a24 100644
--- a/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
+++ b/src/components/UIShell/__tests__/__snapshots__/HeaderMenu-test.js.snap
@@ -56,7 +56,7 @@ exports[`HeaderMenu should render 1`] = `
         className="bx--header__menu"
         role="menu"
       >
-        <ForwardRef
+        <ForwardRef(HeaderMenuItem)
           href="/a"
           key=".0"
           role="none"
@@ -85,8 +85,8 @@ exports[`HeaderMenu should render 1`] = `
               </a>
             </Link>
           </li>
-        </ForwardRef>
-        <ForwardRef
+        </ForwardRef(HeaderMenuItem)>
+        <ForwardRef(HeaderMenuItem)
           href="/b"
           key=".1"
           role="none"
@@ -115,8 +115,8 @@ exports[`HeaderMenu should render 1`] = `
               </a>
             </Link>
           </li>
-        </ForwardRef>
-        <ForwardRef
+        </ForwardRef(HeaderMenuItem)>
+        <ForwardRef(HeaderMenuItem)
           href="/c"
           key=".2"
           role="none"
@@ -145,7 +145,7 @@ exports[`HeaderMenu should render 1`] = `
               </a>
             </Link>
           </li>
-        </ForwardRef>
+        </ForwardRef(HeaderMenuItem)>
       </ul>
     </li>
   </HeaderMenu>
diff --git a/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap b/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
index a7f587fd80..a417de4195 100644
--- a/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
+++ b/src/components/UIShell/__tests__/__snapshots__/HeaderMenuItem-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HeaderMenuItem should render 1`] = `
-<ForwardRef
+<ForwardRef(HeaderMenuItem)
   className="custom-class"
   role="none"
 >
@@ -28,5 +28,5 @@ exports[`HeaderMenuItem should render 1`] = `
       </a>
     </Link>
   </li>
-</ForwardRef>
+</ForwardRef(HeaderMenuItem)>
 `;
diff --git a/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap b/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap
index ced3cf27cc..ace0d43c96 100644
--- a/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap
+++ b/src/components/UIShell/__tests__/__snapshots__/SideNavMenuItem-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SideNavMenuItem should render 1`] = `
-<ForwardRef
+<ForwardRef(SideNavMenuItem)
   className="custom-classname"
   href="#"
   isActive={false}
@@ -31,11 +31,11 @@ exports[`SideNavMenuItem should render 1`] = `
       </a>
     </Link>
   </li>
-</ForwardRef>
+</ForwardRef(SideNavMenuItem)>
 `;
 
 exports[`SideNavMenuItem should render active styles with \`isActive\` or \`aria-current="page"\` 1`] = `
-<ForwardRef
+<ForwardRef(SideNavMenuItem)
   className="custom-classname"
   href="#"
   isActive={true}
@@ -65,11 +65,11 @@ exports[`SideNavMenuItem should render active styles with \`isActive\` or \`aria
       </a>
     </Link>
   </li>
-</ForwardRef>
+</ForwardRef(SideNavMenuItem)>
 `;
 
 exports[`SideNavMenuItem should render active styles with \`isActive\` or \`aria-current="page"\` 2`] = `
-<ForwardRef
+<ForwardRef(SideNavMenuItem)
   aria-current="page"
   className="custom-classname"
   href="#"
@@ -102,5 +102,5 @@ exports[`SideNavMenuItem should render active styles with \`isActive\` or \`aria
       </a>
     </Link>
   </li>
-</ForwardRef>
+</ForwardRef(SideNavMenuItem)>
 `;
diff --git a/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap b/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap
index b38f77b48b..551006c10b 100644
--- a/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap
+++ b/src/components/UIShell/__tests__/__snapshots__/SideNavSwitcher-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SideNavSwitcher should render 1`] = `
-<ForwardRef
+<ForwardRef(SideNavSwitcher)
   className="custom-classname"
   labelText="label"
   onChange={[MockFunction]}
@@ -90,5 +90,5 @@ exports[`SideNavSwitcher should render 1`] = `
       </ChevronDown20>
     </div>
   </div>
-</ForwardRef>
+</ForwardRef(SideNavSwitcher)>
 `;