feat(Tab): autogenerate IDs (#7519)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jan 19, 2021 · 5e9ab8d · 5e9ab8d
1 parent d80b056
commit 5e9ab8d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js
@@ -10,9 +10,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import deprecate from '../../prop-types/deprecate';
+import setupGetInstanceId from '../../tools/setupGetInstanceId';
 
 const { prefix } = settings;
-
+const getInstanceId = setupGetInstanceId();
 export default class Tab extends React.Component {
   static propTypes = {
     /**
@@ -105,9 +106,11 @@ export default class Tab extends React.Component {
     onKeyDown: () => {},
   };
 
+  tabId = this.props.id || `tab-${getInstanceId()}`;
+
   render() {
     const {
-      id,
+      id, // eslint-disable-line no-unused-vars
       className,
       handleTabClick,
       handleTabKeyDown,
@@ -143,8 +146,8 @@ export default class Tab extends React.Component {
     const buttonProps = {
       ['aria-selected']: selected,
       ['aria-disabled']: disabled,
-      ['aria-controls']: `${id}__panel`,
-      id,
+      ['aria-controls']: `${this.tabId}__panel`,
+      id: this.tabId,
       // TODO: remove scrollable in next major release
       // className:  `${prefix}--tabs__nav-link`,
       className: `${prefix}--tabs--scrollable__nav-link`,

diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
@@ -122,23 +122,22 @@ export default {
 export const Default = () => (
   <div className={props.tabs().light ? 'tabs-story-wrapper--light' : null}>
     <Tabs {...props.tabs()}>
-      <Tab id="tab-1" {...props.tab()} label="Tab label 1">
+      <Tab {...props.tab()} label="Tab label 1">
         <div className="some-content">
           <p>Content for first tab goes here.</p>
         </div>
       </Tab>
-      <Tab id="tab-2" {...props.tab()} label="Tab label 2">
+      <Tab {...props.tab()} label="Tab label 2">
         <div className="some-content">
           <p>Content for second tab goes here.</p>
         </div>
       </Tab>
-      <Tab id="tab-3" {...props.tab()} label="Tab label 3" disabled>
+      <Tab {...props.tab()} label="Tab label 3" disabled>
         <div className="some-content">
           <p>Content for third tab goes here.</p>
         </div>
       </Tab>
       <Tab
-        id="tab-4"
         {...props.tab()}
         label="Tab label 4 shows truncation"
         title="Tab label 4 shows truncation"
@@ -153,10 +152,7 @@ export const Default = () => (
           <CodeSnippetExample />
         </div>
       </Tab>
-      <Tab
-        id="tab-5"
-        {...props.tab()}
-        label={<CustomLabel text="Custom Label" />}>
+      <Tab {...props.tab()} label={<CustomLabel text="Custom Label" />}>
         <div className="some-content">
           <p>Content for fifth tab goes here.</p>
         </div>
@@ -180,18 +176,17 @@ export const Container = () => (
       props.tabs().light ? 'container-tabs-story-wrapper--light' : null
     }>
     <Tabs type="container" {...props.tabs()}>
-      <Tab id="tab-1" {...props.tab()} label="Tab label 1">
+      <Tab {...props.tab()} label="Tab label 1">
         <div className="some-content">
           <p>Content for first tab goes here.</p>
         </div>
       </Tab>
-      <Tab id="tab-2" {...props.tab()} label="Tab label 2">
+      <Tab {...props.tab()} label="Tab label 2">
         <div className="some-content">
           <p>Content for second tab goes here.</p>
         </div>
       </Tab>
       <Tab
-        id="tab-3"
         {...props.tab()}
         label="Tab label 3 renders content only when selected"
         title="Tab label 3 renders content only when selected"
@@ -206,10 +201,7 @@ export const Container = () => (
           <CodeSnippetExample />
         </div>
       </Tab>
-      <Tab
-        id="tab-4"
-        {...props.tab()}
-        label={<CustomLabel text="Custom Label" />}>
+      <Tab {...props.tab()} label={<CustomLabel text="Custom Label" />}>
         <div className="some-content">
           <p>Content for fourth tab goes here.</p>
           <TextInput light id="sample-input" labelText="Text Input Label" />