fix(Tab): sync tab id with tab panel id (#8074)

* fix(Tab): sync tab id with tab panel id * docs(Tabs): set IDs for individual tabs Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 22, 2021 · 2c42a32 · 2c42a32
1 parent c022111
commit 2c42a32
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 18 deletions.
diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js
@@ -10,10 +10,8 @@ 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 = {
     /**
@@ -106,11 +104,9 @@ export default class Tab extends React.Component {
     onKeyDown: () => {},
   };
 
-  tabId = this.props.id || `tab-${getInstanceId()}`;
-
   render() {
     const {
-      id, // eslint-disable-line no-unused-vars
+      id,
       className,
       handleTabClick,
       handleTabKeyDown,
@@ -146,8 +142,8 @@ export default class Tab extends React.Component {
     const buttonProps = {
       ['aria-selected']: selected,
       ['aria-disabled']: disabled,
-      ['aria-controls']: `${this.tabId}__panel`,
-      id: this.tabId,
+      ['aria-controls']: id && `${id}__panel`,
+      id,
       // 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
@@ -124,17 +124,18 @@ export default {
 
 export const _Default = () => (
   <Tabs>
-    <Tab label="Tab label 1">
+    <Tab id="tab-1" label="Tab label 1">
       <p>Content for first tab goes here.</p>
     </Tab>
-    <Tab label="Tab label 2">
+    <Tab id="tab-2" label="Tab label 2">
       <p>Content for second tab goes here.</p>
       <Button>With a button</Button>
     </Tab>
-    <Tab label="Tab label 3" disabled>
+    <Tab id="tab-3" label="Tab label 3" disabled>
       <p>Content for third tab goes here.</p>
     </Tab>
     <Tab
+      id="tab-4"
       label="Tab label 4 shows truncation"
       title="Tab label 4 shows truncation">
       <p>Content for fourth tab goes here.</p>
@@ -152,23 +153,24 @@ _Default.story = {
 export const Playground = () => (
   <div className={props.tabs().light ? 'tabs-story-wrapper--light' : null}>
     <Tabs {...props.tabs()}>
-      <Tab {...props.tab()} label="Tab label 1">
+      <Tab {...props.tab()} id="tab-1" label="Tab label 1">
         <div className="some-content">
           <p>Content for first tab goes here.</p>
         </div>
       </Tab>
-      <Tab {...props.tab()} label="Tab label 2">
+      <Tab {...props.tab()} id="tab-2" label="Tab label 2">
         <div className="some-content">
           <p>Content for second tab goes here.</p>
         </div>
       </Tab>
-      <Tab {...props.tab()} label="Tab label 3" disabled>
+      <Tab {...props.tab()} id="tab-3" label="Tab label 3" disabled>
         <div className="some-content">
           <p>Content for third tab goes here.</p>
         </div>
       </Tab>
       <Tab
         {...props.tab()}
+        id="tab-4"
         label="Tab label 4 shows truncation"
         title="Tab label 4 shows truncation"
         renderContent={TabContentRenderedOnlyWhenSelected}>
@@ -193,13 +195,14 @@ export const Playground = () => (
 
 export const Container = () => (
   <Tabs type="container">
-    <Tab label="Tab label 1">
+    <Tab id="tab-1" label="Tab label 1">
       <p>Content for first tab goes here.</p>
     </Tab>
-    <Tab label="Tab label 2">
+    <Tab id="tab-2" label="Tab label 2">
       <p>Content for second tab goes here.</p>
     </Tab>
     <Tab
+      id="tab-3"
       label="Tab label 3 shows truncation"
       title="Tab label 3 shows truncation">
       <p>Content for third tab goes here.</p>
@@ -219,16 +222,17 @@ export const Skeleton = () => {
         <TabsSkeleton type={select('Type of Tabs (type)', types, 'default')} />
       ) : (
         <Tabs type={select('Type of Tabs (type)', types, 'default')}>
-          <Tab label="Tab label 1">
+          <Tab id="tab-1" label="Tab label 1">
             <p>Content for first tab goes here.</p>
           </Tab>
-          <Tab label="Tab label 2">
+          <Tab id="tab-2" label="Tab label 2">
             <p>Content for second tab goes here.</p>
           </Tab>
-          <Tab label="Tab label 3" disabled>
+          <Tab id="tab-3" label="Tab label 3" disabled>
             <p>Content for third tab goes here.</p>
           </Tab>
           <Tab
+            id="tab-4"
             label="Tab label 4 shows truncation"
             title="Tab label 4 shows truncation">
             <p>Content for fourth tab goes here.</p>