fix(combo-button): use id for keys, allow id attr, update stories (#548)

* fix(combo-button): use id for keys, allow id attr, update stories * docs(combo-button): add id to story demo * test(combo-button): include id in tests, update snapshots
carbon-design-system · May 21, 2020 · 769e957 · 769e957
1 parent 8a7d376
commit 769e957
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/src/components/ComboButton/ComboButton.js b/src/components/ComboButton/ComboButton.js
@@ -50,6 +50,7 @@ const ComboButton = ({ children, className, direction }) => {
       href,
       iconDescription,
       onClick,
+      id,
       renderIcon: Icon,
     } = button.props;
     return (
@@ -59,7 +60,8 @@ const ComboButton = ({ children, className, direction }) => {
         href={href}
         iconDescription={iconDescription}
         kind="primary"
-        key={button.id}
+        id={id}
+        key={id || `button-${href}`}
         onClick={onClick}
         renderIcon={Icon}
         type="button"
@@ -89,6 +91,7 @@ const ComboButton = ({ children, className, direction }) => {
         href,
         onClick,
         primaryFocus,
+        id,
         renderIcon: Icon,
       } = item.props;
 
@@ -108,7 +111,8 @@ const ComboButton = ({ children, className, direction }) => {
               {!Icon ? null : <Icon />}
             </>
           }
-          key={item.id}
+          id={id}
+          key={id || `item-${href}`}
           onClick={onClick}
           primaryFocus={!primaryFocus && index === 0 ? true : primaryFocus}
         />

diff --git a/src/components/ComboButton/ComboButton.stories.js b/src/components/ComboButton/ComboButton.stories.js
@@ -44,7 +44,9 @@ storiesOf(patterns('ComboButton'), module).add(
               <ComboButtonItem
                 className="some-class"
                 key={text}
+                href={`#${index}`}
                 index={index}
+                id={index}
                 onClick={action(`onClick (${text})`)}
                 renderIcon={index % 2 === 0 ? Filter20 : null} // Show icon at even indexes.
               >

diff --git a/src/components/ComboButton/__tests__/ComboButton.spec.js b/src/components/ComboButton/__tests__/ComboButton.spec.js
@@ -13,7 +13,7 @@ describe('ComboButton', () => {
   it('renders a combo button without an overflow menu', () => {
     const comboButton = mount(
       <ComboButton>
-        <ComboButtonItem renderIcon={ArrowRight20}>
+        <ComboButtonItem id="test-1" renderIcon={ArrowRight20}>
           Start a task
         </ComboButtonItem>
       </ComboButton>
@@ -26,10 +26,10 @@ describe('ComboButton', () => {
   it('renders a combo button with children and an overflow menu', () => {
     const comboButton = mount(
       <ComboButton>
-        <ComboButtonItem renderIcon={ArrowRight20}>
+        <ComboButtonItem id="test-1" renderIcon={ArrowRight20}>
           Start a task
         </ComboButtonItem>
-        <ComboButtonItem>Filter list</ComboButtonItem>
+        <ComboButtonItem id="test-2">Filter list</ComboButtonItem>
       </ComboButton>
     );
 

diff --git a/src/components/ComboButton/__tests__/__snapshots__/ComboButton.spec.js.snap b/src/components/ComboButton/__tests__/__snapshots__/ComboButton.spec.js.snap
@@ -16,6 +16,8 @@ exports[`ComboButton renders a combo button with children and an overflow menu 1
         className="security--combo-button--primary"
         disabled={false}
         iconDescription=""
+        id="test-1"
+        key="test-1"
         kind="primary"
         largeText={null}
         loading={false}
@@ -33,6 +35,7 @@ exports[`ComboButton renders a combo button with children and an overflow menu 1
           className="security--button security--combo-button--primary"
           disabled={false}
           iconDescription=""
+          id="test-1"
           kind="primary"
           onClick={[Function]}
           renderIcon={
@@ -47,6 +50,7 @@ exports[`ComboButton renders a combo button with children and an overflow menu 1
           <button
             className="security--button security--combo-button--primary bx--btn bx--btn--primary"
             disabled={false}
+            id="test-1"
             onClick={[Function]}
             tabIndex={0}
             type="button"
@@ -204,6 +208,8 @@ exports[`ComboButton renders a combo button without an overflow menu 1`] = `
         className="security--combo-button--primary"
         disabled={false}
         iconDescription=""
+        id="test-1"
+        key="test-1"
         kind="primary"
         largeText={null}
         loading={false}
@@ -221,6 +227,7 @@ exports[`ComboButton renders a combo button without an overflow menu 1`] = `
           className="security--button security--combo-button--primary"
           disabled={false}
           iconDescription=""
+          id="test-1"
           kind="primary"
           onClick={[Function]}
           renderIcon={
@@ -235,6 +242,7 @@ exports[`ComboButton renders a combo button without an overflow menu 1`] = `
           <button
             className="security--button security--combo-button--primary bx--btn bx--btn--primary"
             disabled={false}
+            id="test-1"
             onClick={[Function]}
             tabIndex={0}
             type="button"