From bab616314514d2d831f2f8c0f181619904b75648 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Tue, 26 Jan 2021 14:30:34 -0500
Subject: [PATCH 01/11] upgrade to helix-2.0

---
 package.json |  4 ++--
 yarn.lock    | 13 +++++++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 5a10f81..380bf92 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
     "@storybook/addons": "^5.3.17",
     "@storybook/react": "^5.3.17",
     "babel-loader": "^8.1.0",
-    "helix-ui": "^0.24.0",
+    "helix-ui": "^2.0.0",
     "husky": "^4.2.5",
     "microbundle": "^0.12.3",
     "prettier": "^2.0.4",
@@ -68,7 +68,7 @@
     "use-onclickoutside": "^0.3"
   },
   "peerDependencies": {
-    "helix-ui": "^0.24.0",
+    "helix-ui": "^2.0.0",
     "prop-types": "^15.7.2",
     "react": "^16.6.3"
   },
diff --git a/yarn.lock b/yarn.lock
index 7cccc87..df8bf82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2705,6 +2705,11 @@
     "@webassemblyjs/wast-parser" "1.8.5"
     "@xtuc/long" "4.2.2"
 
+"@webcomponents/webcomponentsjs@^2.4.3":
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-2.5.0.tgz#61b27785a6ad5bfd68fa018201fe418b118cb38d"
+  integrity sha512-C0l51MWQZ9kLzcxOZtniOMohpIFdCLZum7/TEHv3XWFc1Fvt5HCpbSX84x8ltka/JuNKcuiDnxXFkiB2gaePcg==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -5472,10 +5477,10 @@ he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
 
-helix-ui@^0.24.0:
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/helix-ui/-/helix-ui-0.24.0.tgz#db5e0c2e4f446192f9277ace0e0e2ded49de7fcd"
-  integrity sha512-vP2t5K9Gj3fdyZvmLobT3FlWU+EDr9J6UhwA6HGQlNmrdA42OeQCzg2I4W2l3a5vtNHQfVvjt4vsURFZ7QO/KA==
+helix-ui@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/helix-ui/-/helix-ui-2.0.0.tgz#763ad0a94b19392f8f82af49cc44e38a9a0870f3"
+  integrity sha512-KK0jff0QA9hPRHyu+MhSCiaALMFpKqz7jqJ8CJcgbtzH9u4EQbBxJdwh/97VpIUwvJKRsdCAsnj115YFsFq2Zw==
 
 hex-color-regex@^1.1.0:
   version "1.1.0"

From 3ca7c2217d4b5b35f865ba1925be4cf63eb0b77e Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Tue, 26 Jan 2021 14:36:22 -0500
Subject: [PATCH 02/11] Add support to pass your own custom radio input as prop
 instead of using existing one. - Can be helpful for folks using redux-form
 wrappers on their inputs. - Set medium size by default to prevent 'undefined'
 class name fro showing up in markup.

---
 src/ChoiceTile/index.js | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/ChoiceTile/index.js b/src/ChoiceTile/index.js
index 8807a00..f89c097 100644
--- a/src/ChoiceTile/index.js
+++ b/src/ChoiceTile/index.js
@@ -18,19 +18,24 @@ const ChoiceTile = ({
   subdued,
   title,
   style,
+  radioInput,
   ...rest
 }) => {
   return (
     <label className={classNames({ hxChoice: true }, className)} style={style}>
-      <input
-        checked={wcBool(checked)}
-        disabled={disabled}
-        invalid={invalid?.toString()}
-        name={name}
-        onChange={onChange}
-        type="radio"
-        {...rest}
-      />
+      {radioInput ? (
+        radioInput
+      ) : (
+        <input
+          checked={wcBool(checked)}
+          disabled={disabled}
+          invalid={invalid?.toString()}
+          name={name}
+          onChange={onChange}
+          type="radio"
+          {...rest}
+        />
+      )}
       <hx-tile class={classNames({ hxSubdued: subdued, [SIZES[size]]: true })}>
         <hx-icon type="checkmark"></hx-icon>
         {icon && (
@@ -58,10 +63,12 @@ ChoiceTile.propTypes = {
   size: PropTypes.oneOf(Object.keys(SIZES)),
   subdued: PropTypes.bool,
   title: PropTypes.string.isRequired,
+  radioInput: PropTypes.node,
 };
 
 ChoiceTile.defaultProps = {
   checked: false,
+  size: 'medium',
 };
 
 export default ChoiceTile;

From c394153141ef13543164d868bedf939062672fce Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Tue, 26 Jan 2021 15:00:42 -0500
Subject: [PATCH 03/11] Switch Modals and Popovers to use secondary button
 styles

---
 src/Modal/stories.js   | 2 +-
 src/Popover/stories.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Modal/stories.js b/src/Modal/stories.js
index 39d812d..85fb0db 100644
--- a/src/Modal/stories.js
+++ b/src/Modal/stories.js
@@ -29,7 +29,7 @@ storiesOf('Modal', module).add('All Knobs', () => {
   const longText = [1, 2, 3, 4, 5].map(() => <p>{getLongText()}</p>);
   const defaultFooter = [
     <Button variant="primary">Confirm</Button>,
-    <Button variant="tertiary">Cancel</Button>,
+    <Button variant="secondary">Cancel</Button>,
   ];
 
   return (
diff --git a/src/Popover/stories.js b/src/Popover/stories.js
index 95b4297..67e5714 100644
--- a/src/Popover/stories.js
+++ b/src/Popover/stories.js
@@ -26,7 +26,7 @@ storiesOf('Popover', module)
     const longText = [1, 2, 3, 4, 5].map(() => <p>{getLongText()}</p>);
     const defaultFooter = [
       <Button variant="primary">Ok</Button>,
-      <Button variant="tertiary">Cancel</Button>,
+      <Button variant="secondary">Cancel</Button>,
     ];
     return (
       <>

From 33afaaa42087613d9cf8db2ddbfcd39ab244039e Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Wed, 27 Jan 2021 11:51:30 -0500
Subject: [PATCH 04/11] Fix PropType errors and update docs

---
 src/Breadcrumb/index.js   | 2 +-
 src/ChoiceTile/index.js   | 2 +-
 src/ChoiceTile/stories.js | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js
index aab8349..6cc6dfe 100644
--- a/src/Breadcrumb/index.js
+++ b/src/Breadcrumb/index.js
@@ -22,7 +22,7 @@ const Breadcrumb = ({ children, icon = 'angle-right', addDelimiter = true, ...re
 
 Breadcrumb.propTypes = {
   icon: PropTypes.string,
-  children: PropTypes.func,
+  children: PropTypes.node,
 };
 
 export default Breadcrumb;
diff --git a/src/ChoiceTile/index.js b/src/ChoiceTile/index.js
index f89c097..2fc5c16 100644
--- a/src/ChoiceTile/index.js
+++ b/src/ChoiceTile/index.js
@@ -58,7 +58,7 @@ ChoiceTile.propTypes = {
   disabled: PropTypes.bool,
   icon: PropTypes.string,
   invalid: PropTypes.bool,
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   onChange: PropTypes.func,
   size: PropTypes.oneOf(Object.keys(SIZES)),
   subdued: PropTypes.bool,
diff --git a/src/ChoiceTile/stories.js b/src/ChoiceTile/stories.js
index ca5ab5f..5542884 100644
--- a/src/ChoiceTile/stories.js
+++ b/src/ChoiceTile/stories.js
@@ -52,16 +52,16 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
         style={{ width: 200, float: 'left' }}
         title={title || defaultTitle}
       >
-        {<p>{description || defaultDescription}</p>}
+        {<p>{'standard choice tile' || defaultDescription}</p>}
       </ChoiceTile>
 
       <ChoiceTile
         icon="bell"
-        name="choiceTileDemo"
+        radioInput={<input type="radio" name="choiceTileDemo" onChange={callback(action('onChange'))} />}
         style={{ marginLeft: 25, width: 200, float: 'left' }}
         title="Other Choice"
       >
-        {<p>{defaultDescription}</p>}
+        {<p>custom radio (see JSX)</p>}
       </ChoiceTile>
     </React.Fragment>
   );

From 550056be095ab533784793819dd78b5c65881c27 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Wed, 27 Jan 2021 11:51:52 -0500
Subject: [PATCH 05/11] make it pretty

---
 src/ChoiceTile/stories.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/ChoiceTile/stories.js b/src/ChoiceTile/stories.js
index 5542884..c025fb9 100644
--- a/src/ChoiceTile/stories.js
+++ b/src/ChoiceTile/stories.js
@@ -57,7 +57,9 @@ storiesOf('Choice Tile', module).add('All Knobs', () => {
 
       <ChoiceTile
         icon="bell"
-        radioInput={<input type="radio" name="choiceTileDemo" onChange={callback(action('onChange'))} />}
+        radioInput={
+          <input type="radio" name="choiceTileDemo" onChange={callback(action('onChange'))} />
+        }
         style={{ marginLeft: 25, width: 200, float: 'left' }}
         title="Other Choice"
       >

From dd8f45b5179896ba8221c111bfb4f75b41621063 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Wed, 27 Jan 2021 12:03:39 -0500
Subject: [PATCH 06/11] fix reactWarnings on breadcrumb, and let people change
 the text in the story

---
 src/Breadcrumb/index.js   |  2 +-
 src/Breadcrumb/stories.js | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js
index 6cc6dfe..29683aa 100644
--- a/src/Breadcrumb/index.js
+++ b/src/Breadcrumb/index.js
@@ -8,7 +8,7 @@ const Breadcrumb = ({ children, icon = 'angle-right', addDelimiter = true, ...re
       ? children.map((child, index) => [
           child,
           addDelimiter && index + 1 < children.length && (
-            <hx-icon class="delimiter" type={icon}></hx-icon>
+            <hx-icon key={index} class="delimiter" type={icon}></hx-icon>
           ),
         ])
       : children;
diff --git a/src/Breadcrumb/stories.js b/src/Breadcrumb/stories.js
index d884a11..db6f076 100644
--- a/src/Breadcrumb/stories.js
+++ b/src/Breadcrumb/stories.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { addParameters, storiesOf } from '@storybook/react';
+import { text } from '@storybook/addon-knobs/react';
 import Breadcrumb from './index';
 
 addParameters({
@@ -8,18 +9,22 @@ addParameters({
 
 storiesOf('Breadcrumb', module)
   .add('Multiple Breadcrumbs', () => {
+    let item1 = text('item1', 'Home');
+    let item2 = text('item2', 'Library');
+    let item3 = text('item3', 'Current');
     return (
       <Breadcrumb>
-        <a href="#">Home</a>
-        <a href="#">Library</a>
-        <a href="#">Current</a>
+        <a href="#">{item1}</a>
+        <a href="#">{item2}</a>
+        <a href="#">{item3}</a>
       </Breadcrumb>
     );
   })
   .add('Single Breadcrumb', () => {
+    let item1 = text('item1', 'Home');
     return (
       <Breadcrumb>
-        <a href="#">Home</a>
+        <a href="#">{item1}</a>
       </Breadcrumb>
     );
   });

From 61d34c6bb15f3a01d2550e1cae34ec2ce10ca89e Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Thu, 28 Jan 2021 21:05:04 -0500
Subject: [PATCH 07/11] Fix button sizes

---
 src/Button/stories.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/Button/stories.js b/src/Button/stories.js
index 3a6d9c9..e5bf8ce 100644
--- a/src/Button/stories.js
+++ b/src/Button/stories.js
@@ -10,24 +10,25 @@ addParameters({
 });
 
 const SIZES = {
-  small: 'Small',
-  '': 'Medium',
-  large: 'Large',
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
 };
+
 const VARIANTS = {
-  primary: 'Primary',
-  '': 'Secondary',
-  tertiary: 'Tertiary',
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
 };
 
 storiesOf('Button', module)
   .addDecorator(centered)
   .add('Sizes', () => {
-    const size = select('size', SIZES, '');
+    const size = select('size', SIZES, 'medium');
     return <Button {...(size && { size })}>{SIZES[size]} Button</Button>;
   })
   .add('Variants', () => {
-    const variant = select('variant', VARIANTS, '');
+    const variant = select('variant', VARIANTS, 'primary');
     return <Button {...(variant && { variant })}>{VARIANTS[variant]} Button</Button>;
   })
   .add('Icon Only', () => {

From b3c7ca736bd660a25d4ed54f618e8195f20fef0a Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 29 Jan 2021 11:54:59 -0500
Subject: [PATCH 08/11] Forward Refs on all components that have properties.

---
 src/Alert/index.js            |  29 ++++----
 src/Checkbox/index.js         |  35 +++++-----
 src/Disclosure/index.js       |   7 +-
 src/Drawer/index.js           |  32 +++++----
 src/Modal/index.js            |  27 +++++---
 src/Popover/index.js          |  41 +++++-------
 src/Radio/index.js            |   7 +-
 src/Search/index.js           | 123 ++++++++++++++++++----------------
 src/Select/index.js           |  60 ++++++++---------
 src/Switch/index.js           |   7 +-
 src/Text/index.js             |  59 ++++++++--------
 src/TextArea/index.js         |  54 +++++++--------
 src/Toast/index.js            |  26 ++++---
 src/Tooltip/index.js          |  20 +++---
 src/Tooltip/stories.js        |   6 +-
 src/hooks/useCombinedRefs.js  |  23 +++++++
 src/hooks/useEventListener.js |   5 +-
 17 files changed, 311 insertions(+), 250 deletions(-)
 create mode 100644 src/hooks/useCombinedRefs.js

diff --git a/src/Alert/index.js b/src/Alert/index.js
index cde272f..b27c9a1 100644
--- a/src/Alert/index.js
+++ b/src/Alert/index.js
@@ -1,18 +1,23 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import useEventListener from '../hooks/useEventListener';
+import useCombinedRefs from '../hooks/useCombinedRefs';
 
-const Alert = ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }) => {
-  const hxRef = useEventListener({ onDismiss, onSubmit });
-  return (
-    <div>
-      {/* Wrappping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
-      <hx-alert class={className} ref={hxRef} {...rest}>
-        {children}
-      </hx-alert>
-    </div>
-  );
-};
+const Alert = React.forwardRef(
+  ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }, ref) => {
+    const hxRef = useEventListener({ onDismiss, onSubmit }, ref);
+    return (
+      <div>
+        {/* Wrappping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
+        <hx-alert class={className} ref={hxRef} {...rest}>
+          {children}
+        </hx-alert>
+      </div>
+    );
+  }
+);
+
+Alert.displayName = 'Alert';
 
 Alert.propTypes = {
   className: PropTypes.string,
diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
index 08706fb..2825f4a 100644
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@@ -1,22 +1,27 @@
 import PropTypes from 'prop-types';
 import React, { useRef, useEffect } from 'react';
+import useCombinedRefs from '../hooks/useCombinedRefs';
 
-const Checkbox = ({ id, label, indeterminate, className, style, ...rest }) => {
-  const inputRef = useRef();
-  useEffect(() => {
-    inputRef.current.indeterminate = indeterminate;
-  }, [indeterminate]);
+const Checkbox = React.forwardRef(
+  ({ id, label, indeterminate, className, style, ...rest }, ref) => {
+    const hxRef = useCombinedRefs(ref, useRef());
+    useEffect(() => {
+      hxRef.current.indeterminate = indeterminate;
+    }, [indeterminate]);
 
-  return (
-    <hx-checkbox-control class={className}>
-      <input ref={inputRef} {...rest} id={id} type="checkbox" />
-      <label htmlFor={id}>
-        <hx-checkbox></hx-checkbox>
-        {label}
-      </label>
-    </hx-checkbox-control>
-  );
-};
+    return (
+      <hx-checkbox-control class={className}>
+        <input ref={hxRef} {...rest} id={id} type="checkbox" />
+        <label htmlFor={id}>
+          <hx-checkbox></hx-checkbox>
+          {label}
+        </label>
+      </hx-checkbox-control>
+    );
+  }
+);
+
+Checkbox.displayName = 'Checkbox';
 
 Checkbox.propTypes = {
   className: PropTypes.string,
diff --git a/src/Disclosure/index.js b/src/Disclosure/index.js
index e5e440a..61b3538 100644
--- a/src/Disclosure/index.js
+++ b/src/Disclosure/index.js
@@ -2,16 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { wcBool } from '../utils';
 
-const Disclosure = ({ className, ariaControls, ariaExpanded, ...rest }) => {
+const Disclosure = React.forwardRef(({ className, ariaControls, ariaExpanded, ...rest }, ref) => {
   return (
     <hx-disclosure
+      ref={ref}
       class={className}
       aria-controls={ariaControls}
       aria-expanded={wcBool(ariaExpanded)}
       {...rest}
     />
   );
-};
+});
 
 Disclosure.propTypes = {
   ariaControls: PropTypes.string.isRequired,
@@ -22,4 +23,6 @@ Disclosure.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
+Disclosure.displayName = 'Disclosure';
+
 export default Disclosure;
diff --git a/src/Drawer/index.js b/src/Drawer/index.js
index 70bd582..910eeb8 100644
--- a/src/Drawer/index.js
+++ b/src/Drawer/index.js
@@ -6,20 +6,24 @@ import { SIZES } from '../constants';
 import useEventListener from '../hooks/useEventListener';
 import { wcBool } from '../utils';
 
-const Drawer = ({ children, className, id, onClose, onOpen, open, size, ...rest }) => {
-  const hxRef = useEventListener({ onOpen, onClose });
-  return (
-    <hx-drawer
-      class={classnames(className, SIZES[size])}
-      id={id}
-      open={wcBool(open)}
-      ref={hxRef}
-      {...rest}
-    >
-      {children}
-    </hx-drawer>
-  );
-};
+const Drawer = React.forwardRef(
+  ({ children, className, id, onClose, onOpen, open, size, ...rest }, ref) => {
+    const hxRef = useEventListener({ onOpen, onClose }, ref);
+    return (
+      <hx-drawer
+        class={classnames(className, SIZES[size])}
+        id={id}
+        open={wcBool(open)}
+        ref={hxRef}
+        {...rest}
+      >
+        {children}
+      </hx-drawer>
+    );
+  }
+);
+
+Drawer.displayName = 'Drawer';
 
 Drawer.propTypes = {
   className: PropTypes.string,
diff --git a/src/Modal/index.js b/src/Modal/index.js
index f6a5dee..1dc9eab 100644
--- a/src/Modal/index.js
+++ b/src/Modal/index.js
@@ -1,18 +1,27 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import useEventListener from '../hooks/useEventListener';
 import { SIZES } from '../constants';
 import { wcBool } from '../utils';
 
-const Modal = ({ onOpen, onClose, className, open, size, children, ...rest }) => {
-  const hxRef = useEventListener({ onOpen, onClose });
-  return (
-    <hx-modal class={classNames(className, SIZES[size])} ref={hxRef} open={wcBool(open)} {...rest}>
-      {children}
-    </hx-modal>
-  );
-};
+const Modal = React.forwardRef(
+  ({ onOpen, onClose, className, open, size, children, ...rest }, ref) => {
+    const hxRef = useEventListener({ onOpen, onClose }, ref);
+    return (
+      <hx-modal
+        class={classNames(className, SIZES[size])}
+        ref={hxRef}
+        open={wcBool(open)}
+        {...rest}
+      >
+        {children}
+      </hx-modal>
+    );
+  }
+);
+
+Modal.displayName = 'Modal';
 
 Modal.propTypes = {
   id: PropTypes.string,
diff --git a/src/Popover/index.js b/src/Popover/index.js
index 0b04eae..5d59de3 100644
--- a/src/Popover/index.js
+++ b/src/Popover/index.js
@@ -5,29 +5,24 @@ import useEventListener from '../hooks/useEventListener';
 import { POSITIONS } from '../constants';
 import { wcBool } from '../utils';
 
-const Popover = ({
-  onOpen,
-  onClose,
-  onReposition,
-  className,
-  open,
-  children,
-  relativeTo,
-  ...rest
-}) => {
-  const hxRef = useEventListener({ onOpen, onClose, onReposition });
-  return (
-    <hx-popover
-      class={classNames(className)}
-      ref={hxRef}
-      open={wcBool(open)}
-      relative-to={relativeTo}
-      {...rest}
-    >
-      {children}
-    </hx-popover>
-  );
-};
+const Popover = React.forwardRef(
+  ({ onOpen, onClose, onReposition, className, open, children, relativeTo, ...rest }, ref) => {
+    const hxRef = useEventListener({ onOpen, onClose, onReposition }, ref);
+    return (
+      <hx-popover
+        class={classNames(className)}
+        ref={hxRef}
+        open={wcBool(open)}
+        relative-to={relativeTo}
+        {...rest}
+      >
+        {children}
+      </hx-popover>
+    );
+  }
+);
+
+Popover.displayName = 'Popover';
 
 Popover.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/src/Radio/index.js b/src/Radio/index.js
index 74d5573..16278d6 100644
--- a/src/Radio/index.js
+++ b/src/Radio/index.js
@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Radio = ({ id, label, className, style, ...rest }) => {
+const Radio = React.forwardRef(({ id, label, className, style, ...rest }, ref) => {
   return (
-    <hx-radio-control class={className} style={style}>
+    <hx-radio-control class={className} style={style} ref={ref}>
       <input {...rest} id={id} type="radio" />
       <label htmlFor={id}>
         <hx-radio></hx-radio>
@@ -11,7 +11,7 @@ const Radio = ({ id, label, className, style, ...rest }) => {
       </label>
     </hx-radio-control>
   );
-};
+});
 
 Radio.propTypes = {
   label: PropTypes.string.isRequired,
@@ -25,4 +25,5 @@ Radio.propTypes = {
   onChange: PropTypes.func,
 };
 
+Radio.displayName = 'Radio';
 export default Radio;
diff --git a/src/Search/index.js b/src/Search/index.js
index b506e76..ad84518 100644
--- a/src/Search/index.js
+++ b/src/Search/index.js
@@ -8,65 +8,72 @@ import { useEffectExceptOnMount } from '../hooks/useEffectExceptOnMounted';
 /**
  * @see https://helixdesignsystem.github.io/helix-ui/components/search/
  */
-const Search = ({
-  children,
-  disabled,
-  id,
-  label,
-  className,
-  clearLabel,
-  onClear,
-  optional,
-  required,
-  containerId,
-  value,
-  style,
-  ...rest
-}) => {
-  /**
-   * Show clear icon when value changes programmatically by triggering 'input' event manually.
-   * @see https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js
-   */
-  const inputRef = useRef();
-  useEffectExceptOnMount(() => {
-    const input = inputRef.current;
-    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-      window.HTMLInputElement.prototype,
-      'value'
-    ).set;
-    nativeInputValueSetter.call(input, value);
-    const ev = new Event('input', { bubbles: true });
-    input.dispatchEvent(ev);
-  }, [value]);
+const Search = React.forwardRef(
+  (
+    {
+      children,
+      disabled,
+      id,
+      label,
+      className,
+      clearLabel,
+      onClear,
+      optional,
+      required,
+      containerId,
+      value,
+      style,
+      ...rest
+    },
+    ref
+  ) => {
+    /**
+     * Show clear icon when value changes programmatically by triggering 'input' event manually.
+     * @see https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-onchange-event-in-react-js
+     */
+    const inputRef = useRef();
+    useEffectExceptOnMount(() => {
+      const input = inputRef.current;
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value'
+      ).set;
+      nativeInputValueSetter.call(input, value);
+      const ev = new Event('input', { bubbles: true });
+      input.dispatchEvent(ev);
+    }, [value]);
 
-  return (
-    <hx-search-control class={className} id={containerId} style={style}>
-      <input
-        id={id}
-        value={value}
-        ref={inputRef}
-        {...rest}
-        disabled={wcBool(disabled)}
-        type="search"
-      />
-      <button type="button" className="hxClear" aria-label={clearLabel} hidden onClick={onClear}>
-        <Icon type="times" />
-      </button>
-      <hx-search></hx-search>
-      {label && (
-        <label
-          className={classnames({
-            hxOptional: optional,
-            hxRequired: required,
-          })}
-          htmlFor={id}
-        >
-          {label}
-        </label>
-      )}
-    </hx-search-control>
-  );
-};
+    return (
+      <hx-search-control class={className} id={containerId} style={style} ref={ref}>
+        <input
+          id={id}
+          value={value}
+          ref={inputRef}
+          {...rest}
+          disabled={wcBool(disabled)}
+          type="search"
+        />
+        <button type="button" className="hxClear" aria-label={clearLabel} hidden onClick={onClear}>
+          <Icon type="times" />
+        </button>
+        <hx-search></hx-search>
+        {label && (
+          <label
+            className={classnames({
+              hxOptional: optional,
+              hxRequired: required,
+            })}
+            htmlFor={id}
+          >
+            {label}
+          </label>
+        )}
+      </hx-search-control>
+    );
+  }
+);
+
+Search.displayName = 'Search';
 
 Search.propTypes = {
   className: PropTypes.string,
diff --git a/src/Select/index.js b/src/Select/index.js
index f11a6a2..a3bb0dc 100644
--- a/src/Select/index.js
+++ b/src/Select/index.js
@@ -2,38 +2,34 @@ import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Select = ({
-  children,
-  className,
-  disabled,
-  id,
-  label,
-  onChange,
-  optional,
-  required,
-  style,
-  ...rest
-}) => {
-  return (
-    <hx-select-control class={className} style={style}>
-      <select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
-        {children}
-      </select>
-      <hx-select></hx-select>
-      {label && (
-        <label
-          className={classnames({
-            hxOptional: optional,
-            hxRequired: required,
-          })}
-          htmlFor={id}
-        >
-          {label}
-        </label>
-      )}
-    </hx-select-control>
-  );
-};
+const Select = React.forwardRef(
+  (
+    { children, className, disabled, id, label, onChange, optional, required, style, ...rest },
+    ref
+  ) => {
+    return (
+      <hx-select-control class={className} style={style} ref={ref}>
+        <select id={id} disabled={disabled} onChange={onChange} required={required} {...rest}>
+          {children}
+        </select>
+        <hx-select></hx-select>
+        {label && (
+          <label
+            className={classnames({
+              hxOptional: optional,
+              hxRequired: required,
+            })}
+            htmlFor={id}
+          >
+            {label}
+          </label>
+        )}
+      </hx-select-control>
+    );
+  }
+);
+
+Select.displayName = 'Select';
 
 Select.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/src/Switch/index.js b/src/Switch/index.js
index 8c7c895..95e5386 100644
--- a/src/Switch/index.js
+++ b/src/Switch/index.js
@@ -2,16 +2,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const Switch = ({ id, className, onLabel, offLabel, invalid, ...rest }) => {
+const Switch = React.forwardRef(({ id, className, onLabel, offLabel, invalid, ...rest }, ref) => {
   return (
-    <hx-switch-control class={classnames('switch', className)}>
+    <hx-switch-control class={classnames('switch', className)} ref={ref}>
       <input type="checkbox" id={id} {...rest} invalid={invalid?.toString()} />
       <label htmlFor={id}>
         <hx-switch onlabel={onLabel} offlabel={offLabel} aria-labelledby={id} />
       </label>
     </hx-switch-control>
   );
-};
+});
 
 Switch.propTypes = {
   id: PropTypes.string.isRequired,
@@ -30,4 +30,5 @@ Switch.defaultProps = {
   offLabel: '',
 };
 
+Switch.displayName = 'Switch';
 export default Switch;
diff --git a/src/Text/index.js b/src/Text/index.js
index ebf933c..45339e5 100644
--- a/src/Text/index.js
+++ b/src/Text/index.js
@@ -2,37 +2,36 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const Text = ({
-  id,
-  label,
-  invalid,
-  className,
-  required,
-  optional,
-  children,
-  prefix,
-  suffix,
-  style,
-  ...rest
-}) => {
-  return (
-    <hx-text-control class={classnames(className, { hxInvalid: invalid })} style={style}>
-      <input {...rest} id={id} required={required} type="text" />
-      <label
-        className={classnames({
-          hxOptional: optional,
-          hxRequired: required,
-        })}
-        htmlFor={id}
+const Text = React.forwardRef(
+  (
+    { id, label, invalid, className, required, optional, children, prefix, suffix, style, ...rest },
+    ref
+  ) => {
+    return (
+      <hx-text-control
+        class={classnames(className, { hxInvalid: invalid })}
+        style={style}
+        ref={ref}
       >
-        {label}
-      </label>
-      {prefix && <span className="hxPrefix">{prefix}</span>}
-      {suffix && <span className="hxSuffix">{suffix}</span>}
-      {children}
-    </hx-text-control>
-  );
-};
+        <input {...rest} id={id} required={required} type="text" />
+        <label
+          className={classnames({
+            hxOptional: optional,
+            hxRequired: required,
+          })}
+          htmlFor={id}
+        >
+          {label}
+        </label>
+        {prefix && <span className="hxPrefix">{prefix}</span>}
+        {suffix && <span className="hxSuffix">{suffix}</span>}
+        {children}
+      </hx-text-control>
+    );
+  }
+);
+
+Text.displayName = 'Text';
 
 Text.propTypes = {
   id: PropTypes.string.isRequired,
diff --git a/src/TextArea/index.js b/src/TextArea/index.js
index 24f8c82..ad6fa0b 100644
--- a/src/TextArea/index.js
+++ b/src/TextArea/index.js
@@ -2,34 +2,34 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
 
-const TextArea = ({
-  id,
-  label,
-  className,
-  required,
-  disabled,
-  optional,
-  invalid,
-  children,
-  style,
-  ...rest
-}) => {
-  return (
-    <hx-textarea-control class={classnames(className, { hxInvalid: invalid })} style={style}>
-      <textarea {...rest} id={id} required={required} disabled={disabled} />
-      <label
-        className={classnames({
-          hxOptional: optional,
-          hxRequired: required,
-        })}
-        htmlFor={id}
+const TextArea = React.forwardRef(
+  (
+    { id, label, className, required, disabled, optional, invalid, children, style, ...rest },
+    ref
+  ) => {
+    return (
+      <hx-textarea-control
+        class={classnames(className, { hxInvalid: invalid })}
+        style={style}
+        ref={ref}
       >
-        {label}
-      </label>
-      {children}
-    </hx-textarea-control>
-  );
-};
+        <textarea {...rest} id={id} required={required} disabled={disabled} />
+        <label
+          className={classnames({
+            hxOptional: optional,
+            hxRequired: required,
+          })}
+          htmlFor={id}
+        >
+          {label}
+        </label>
+        {children}
+      </hx-textarea-control>
+    );
+  }
+);
+
+TextArea.displayName = 'TextArea';
 
 TextArea.propTypes = {
   id: PropTypes.string.isRequired,
diff --git a/src/Toast/index.js b/src/Toast/index.js
index f410c1b..b2f695f 100644
--- a/src/Toast/index.js
+++ b/src/Toast/index.js
@@ -2,17 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import useEventListener from '../hooks/useEventListener';
 
-const Toast = ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }) => {
-  const hxRef = useEventListener({ onDismiss, onSubmit });
-  return (
-    <div>
-      {/* Wrapping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
-      <hx-toast class={className} ref={hxRef} {...rest}>
-        {children}
-      </hx-toast>
-    </div>
-  );
-};
+const Toast = React.forwardRef(
+  ({ onOpen, onClose, className, children, onDismiss, onSubmit, ...rest }, ref) => {
+    const hxRef = useEventListener({ onDismiss, onSubmit }, ref);
+    return (
+      <div>
+        {/* Wrapping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
+        <hx-toast class={className} ref={hxRef} {...rest}>
+          {children}
+        </hx-toast>
+      </div>
+    );
+  }
+);
+
+Toast.displayName = 'Toast';
 
 Toast.propTypes = {
   className: PropTypes.string,
diff --git a/src/Tooltip/index.js b/src/Tooltip/index.js
index 3667962..1e815f4 100644
--- a/src/Tooltip/index.js
+++ b/src/Tooltip/index.js
@@ -3,14 +3,18 @@ import React from 'react';
 import { POSITIONS } from '../constants';
 import useEventListener from '../hooks/useEventListener';
 
-const Tooltip = ({ children, id, position, onClose, onOpen, onReposition, ...rest }) => {
-  const hxRef = useEventListener({ onClose, onOpen, onReposition });
-  return (
-    <hx-tooltip for={id} position={position} ref={hxRef} {...rest}>
-      {children}
-    </hx-tooltip>
-  );
-};
+const Tooltip = React.forwardRef(
+  ({ children, id, position, onClose, onOpen, onReposition, ...rest }, ref) => {
+    const hxRef = useEventListener({ onClose, onOpen, onReposition }, ref);
+    return (
+      <hx-tooltip for={id} position={position} ref={hxRef} {...rest}>
+        {children}
+      </hx-tooltip>
+    );
+  }
+);
+
+Tooltip.displayName = 'Tooltip';
 
 Tooltip.propTypes = {
   children: PropTypes.node.isRequired,
diff --git a/src/Tooltip/stories.js b/src/Tooltip/stories.js
index 1ba7777..908996f 100644
--- a/src/Tooltip/stories.js
+++ b/src/Tooltip/stories.js
@@ -6,6 +6,7 @@ import { select, text } from '@storybook/addon-knobs/react';
 import Tooltip from '../Tooltip';
 import { POSITIONS } from '../constants';
 import { callback } from '../storyUtils';
+import Icon from '../Icon';
 
 addParameters({
   jsx: { skip: 3 },
@@ -19,15 +20,18 @@ storiesOf('Tooltip', module)
     let position = select('positions', POSITIONS, 'top-left');
     let content = text('content', 'I am a tool tip');
 
+    const myRef = React.useRef();
+
     return (
       <>
-        <hx-icon id={id} type="help-circle" />
+        <Icon id={id} type="help-circle" />
         <Tooltip
           id={id}
           position={position}
           onOpen={callback(action('onOpen'))}
           onClose={callback(action('onClose'))}
           onReposition={callback(action('onReposition'))}
+          ref={myRef}
         >
           {content}
         </Tooltip>
diff --git a/src/hooks/useCombinedRefs.js b/src/hooks/useCombinedRefs.js
new file mode 100644
index 0000000..0959563
--- /dev/null
+++ b/src/hooks/useCombinedRefs.js
@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * @see https://laptrinhx.com/reusing-the-ref-from-forwardref-with-react-hooks-3215655428/
+ * @param refs
+ * @return {React.MutableRefObject}
+ */
+export default function useCombinedRefs(...refs) {
+  const targetRef = React.useRef();
+
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    });
+  }, [refs]);
+
+  return targetRef;
+}
diff --git a/src/hooks/useEventListener.js b/src/hooks/useEventListener.js
index 8a387f0..9ad113a 100644
--- a/src/hooks/useEventListener.js
+++ b/src/hooks/useEventListener.js
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-
+import useCombinedRefs from './useCombinedRefs';
 const handlerNameToEvent = (handlerName) => handlerName.replace(/^on/, '').toLowerCase();
 
 /**
@@ -9,7 +9,8 @@ const handlerNameToEvent = (handlerName) => handlerName.replace(/^on/, '').toLow
  * @return {React.MutableRefObject}
  */
 function useEventListener(eventHandlers = {}, ref) {
-  const theRef = ref || useRef(null);
+  const theRef = ref ? useCombinedRefs(ref, useRef(null)) : useRef(null);
+
   useEffect(() => {
     Object.entries(eventHandlers).forEach(([handlerName, eventHandler], key) => {
       theRef.current.addEventListener(handlerNameToEvent(handlerName), eventHandler);

From d7eb28a9c9e0892f2897a5b97b5a8ea762de8b57 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 29 Jan 2021 12:02:48 -0500
Subject: [PATCH 09/11] Cleanup

---
 src/Breadcrumb/index.js       | 2 +-
 src/Busy/index.js             | 2 +-
 src/Button/index.js           | 3 ++-
 src/Checkbox/index.js         | 2 +-
 src/ChoiceTile/stories.js     | 1 -
 src/Icon/index.js             | 2 +-
 src/hooks/useEventListener.js | 4 ++--
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Breadcrumb/index.js b/src/Breadcrumb/index.js
index 29683aa..8f6a1f2 100644
--- a/src/Breadcrumb/index.js
+++ b/src/Breadcrumb/index.js
@@ -8,7 +8,7 @@ const Breadcrumb = ({ children, icon = 'angle-right', addDelimiter = true, ...re
       ? children.map((child, index) => [
           child,
           addDelimiter && index + 1 < children.length && (
-            <hx-icon key={index} class="delimiter" type={icon}></hx-icon>
+            <hx-icon key={index} class="delimiter" type={icon} />
           ),
         ])
       : children;
diff --git a/src/Busy/index.js b/src/Busy/index.js
index bb5515e..4edd27e 100644
--- a/src/Busy/index.js
+++ b/src/Busy/index.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 // Storybook story lives in /Progress folder
 const Busy = ({ className, children, ...rest }) => {
-  return <hx-busy class={className} {...rest}></hx-busy>;
+  return <hx-busy class={className} {...rest} />;
 };
 
 Busy.propTypes = {
diff --git a/src/Button/index.js b/src/Button/index.js
index 957ad4c..cafbf5e 100644
--- a/src/Button/index.js
+++ b/src/Button/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Icon from '../Icon';
+import Busy from '../Busy';
 
 function cssFor(modifier) {
   return {
@@ -34,7 +35,7 @@ class Button extends React.Component {
       <button className={classNames(this.props)} type={type || 'button'} {...props}>
         {headIcon && <Icon type={headIcon} />}
         {children && <span>{children}</span>}
-        {busy ? <hx-busy></hx-busy> : tailIcon && <Icon type={tailIcon} />}
+        {busy ? <Busy />: tailIcon && <Icon type={tailIcon} />}
       </button>
     );
   }
diff --git a/src/Checkbox/index.js b/src/Checkbox/index.js
index 2825f4a..cdada02 100644
--- a/src/Checkbox/index.js
+++ b/src/Checkbox/index.js
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef(
       <hx-checkbox-control class={className}>
         <input ref={hxRef} {...rest} id={id} type="checkbox" />
         <label htmlFor={id}>
-          <hx-checkbox></hx-checkbox>
+          <hx-checkbox />
           {label}
         </label>
       </hx-checkbox-control>
diff --git a/src/ChoiceTile/stories.js b/src/ChoiceTile/stories.js
index c025fb9..c0b6e8c 100644
--- a/src/ChoiceTile/stories.js
+++ b/src/ChoiceTile/stories.js
@@ -17,7 +17,6 @@ const SIZES = {
 };
 
 storiesOf('Choice Tile', module).add('All Knobs', () => {
-  let description = text('description', '');
   let title = text('title', '');
   let checked = boolean('checked', false);
   let disabled = boolean('disabled', false);
diff --git a/src/Icon/index.js b/src/Icon/index.js
index 9e2baac..a6641f2 100644
--- a/src/Icon/index.js
+++ b/src/Icon/index.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export const Icons = Object.keys(HelixUI.Utils.ICONS);
 
 const Icon = ({ type, className, ...rest }) => {
-  return <hx-icon type={type} {...rest} class={className}></hx-icon>;
+  return <hx-icon type={type} {...rest} class={className} />;
 };
 
 Icon.propTypes = {
diff --git a/src/hooks/useEventListener.js b/src/hooks/useEventListener.js
index 9ad113a..26e83f5 100644
--- a/src/hooks/useEventListener.js
+++ b/src/hooks/useEventListener.js
@@ -12,11 +12,11 @@ function useEventListener(eventHandlers = {}, ref) {
   const theRef = ref ? useCombinedRefs(ref, useRef(null)) : useRef(null);
 
   useEffect(() => {
-    Object.entries(eventHandlers).forEach(([handlerName, eventHandler], key) => {
+    Object.entries(eventHandlers).forEach(([handlerName, eventHandler]) => {
       theRef.current.addEventListener(handlerNameToEvent(handlerName), eventHandler);
     });
     return () => {
-      Object.entries(eventHandlers).forEach(([handlerName, eventHandler], key) => {
+      Object.entries(eventHandlers).forEach(([handlerName, eventHandler]) => {
         theRef.current.removeEventListener(handlerNameToEvent(handlerName), eventHandler);
       });
     };

From ef15480cb3388737971644f7b6156d0c049e2084 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Fri, 29 Jan 2021 12:03:28 -0500
Subject: [PATCH 10/11] prettier

---
 src/Button/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Button/index.js b/src/Button/index.js
index cafbf5e..df103e1 100644
--- a/src/Button/index.js
+++ b/src/Button/index.js
@@ -35,7 +35,7 @@ class Button extends React.Component {
       <button className={classNames(this.props)} type={type || 'button'} {...props}>
         {headIcon && <Icon type={headIcon} />}
         {children && <span>{children}</span>}
-        {busy ? <Busy />: tailIcon && <Icon type={tailIcon} />}
+        {busy ? <Busy /> : tailIcon && <Icon type={tailIcon} />}
       </button>
     );
   }

From e142102929c4eb0e39f5172a4e24ce17e8096709 Mon Sep 17 00:00:00 2001
From: Nicko Winner-Arroyo <nicko.winner-arroyo@rackspace.com>
Date: Mon, 1 Feb 2021 14:25:04 -0500
Subject: [PATCH 11/11] Cleanup per review feedback

---
 src/Toast/index.js     | 2 +-
 src/Tooltip/stories.js | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/Toast/index.js b/src/Toast/index.js
index b2f695f..6c32c7c 100644
--- a/src/Toast/index.js
+++ b/src/Toast/index.js
@@ -7,7 +7,7 @@ const Toast = React.forwardRef(
     const hxRef = useEventListener({ onDismiss, onSubmit }, ref);
     return (
       <div>
-        {/* Wrapping element needed: Otherwise when alert removes itself from DOM on close, it will cause error */}
+        {/* Wrapping element needed: Otherwise when hx-toast removes itself from DOM on close, it will cause error */}
         <hx-toast class={className} ref={hxRef} {...rest}>
           {children}
         </hx-toast>
diff --git a/src/Tooltip/stories.js b/src/Tooltip/stories.js
index 908996f..9c53d7b 100644
--- a/src/Tooltip/stories.js
+++ b/src/Tooltip/stories.js
@@ -1,6 +1,5 @@
 import centered from '@storybook/addon-centered/react';
 import { addParameters, storiesOf } from '@storybook/react';
-import React from 'react';
 import { action } from '@storybook/addon-actions';
 import { select, text } from '@storybook/addon-knobs/react';
 import Tooltip from '../Tooltip';
@@ -20,8 +19,6 @@ storiesOf('Tooltip', module)
     let position = select('positions', POSITIONS, 'top-left');
     let content = text('content', 'I am a tool tip');
 
-    const myRef = React.useRef();
-
     return (
       <>
         <Icon id={id} type="help-circle" />
@@ -31,7 +28,6 @@ storiesOf('Tooltip', module)
           onOpen={callback(action('onOpen'))}
           onClose={callback(action('onClose'))}
           onReposition={callback(action('onReposition'))}
-          ref={myRef}
         >
           {content}
         </Tooltip>