From 5e9ab8d5b74ac685c600aa4cfdf74b4c3a81639d Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Tue, 19 Jan 2021 11:13:37 -0800
Subject: [PATCH 1/2] feat(Tab): autogenerate IDs (#7519)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/react/src/components/Tab/Tab.js      | 11 ++++++----
 .../react/src/components/Tabs/Tabs-story.js   | 22 ++++++-------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js
index b6d56ae7269f..68b3862159f8 100644
--- 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
index ecdbdcaef938..d1d9b5092787 100644
--- 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" />

From da821e350f402d9a4b945eef9d5965a480ceec3f Mon Sep 17 00:00:00 2001
From: emyarod <emyarod@users.noreply.github.com>
Date: Tue, 19 Jan 2021 11:41:53 -0800
Subject: [PATCH 2/2] fix(Tabs): apply `scrollIntoView` prop on mount (#7543)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 packages/react/src/components/Tabs/Tabs.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
index f35e93bf9bf9..4548c0cacf79 100644
--- a/packages/react/src/components/Tabs/Tabs.js
+++ b/packages/react/src/components/Tabs/Tabs.js
@@ -179,7 +179,8 @@ export default class Tabs extends React.Component {
         tab?.tabAnchor?.offsetParent.getBoundingClientRect().right;
       const rightOverflowNavButtonHidden =
         tablistScrollLeft + tablistClientWidth === tablistScrollWidth;
-      tab?.tabAnchor?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      this.props.scrollIntoView &&
+        tab?.tabAnchor?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 
       // account for overflow buttons in scroll position on mount
       if (!leftOverflowNavButtonHidden && !rightOverflowNavButtonHidden) {