From 727691155c4f9e5dc3c56976f5316dd8ff7d1550 Mon Sep 17 00:00:00 2001
From: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
Date: Tue, 19 Oct 2021 13:45:55 -0500
Subject: [PATCH 1/2] feat(Tab): make tab functional component (#9722)

* feat(Tab): make tab functional component

* feat(Tabs): convert to functional

* fix: remove console.logs

* fix: export components as default

* fix: tabs state and refs

* fix: use prefix

* fix: add feature flag v11 story

* fix: temp use v10 classNames

* fix: clean up, comment, and fix select

* fix: keyboard navigation

* fix: remove console log

* chore: tabs comment

* feat: add tab tests

* feat: add tabs tests

* fix: add back light

* fix: remove v11 styles

* Update packages/react/src/components/Tabs/index.js

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>

* fix: next tab test and deprecation

* fix: tabs deprecate unused props

* fix: deprecations'

* fix: tab role presentation test

* fix: remove unused arg'

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/Tabs/Tabs.stories.js       |   8 +
 .../__snapshots__/PublicAPI-test.js.snap      |   6 +-
 packages/react/src/components/Tab/Tab-test.js |   2 +-
 packages/react/src/components/Tab/Tab.js      |   4 +-
 packages/react/src/components/Tab/index.js    |   8 +-
 .../react/src/components/Tab/next/Tab-test.js | 204 ++++++
 packages/react/src/components/Tab/next/Tab.js | 166 +++++
 packages/react/src/components/Tabs/index.js   |  11 +-
 .../src/components/Tabs/next/Tabs-test.js     | 264 ++++++++
 .../react/src/components/Tabs/next/Tabs.js    | 613 ++++++++++++++++++
 10 files changed, 1276 insertions(+), 10 deletions(-)
 create mode 100644 packages/react/src/components/Tab/next/Tab-test.js
 create mode 100644 packages/react/src/components/Tab/next/Tab.js
 create mode 100644 packages/react/src/components/Tabs/next/Tabs-test.js
 create mode 100644 packages/react/src/components/Tabs/next/Tabs.js

diff --git a/packages/carbon-react/src/components/Tabs/Tabs.stories.js b/packages/carbon-react/src/components/Tabs/Tabs.stories.js
index 1c04f224b089..4e4741d3288f 100644
--- a/packages/carbon-react/src/components/Tabs/Tabs.stories.js
+++ b/packages/carbon-react/src/components/Tabs/Tabs.stories.js
@@ -7,10 +7,18 @@
 
 import React from 'react';
 import { Button, Tab, Tabs, TabsSkeleton } from '../Tabs';
+import { unstable_FeatureFlags as FeatureFlags } from 'carbon-components-react';
 import { Layer } from '../Layer';
 
 export default {
   title: 'Components/Tabs',
+  decorators: [
+    (Story) => (
+      <FeatureFlags flags={{ 'enable-v11-release': true }}>
+        <Story />
+      </FeatureFlags>
+    ),
+  ],
   parameters: {
     component: Tabs,
     subcomponents: {
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 6ac36a38f0a8..6223d424aed7 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5905,7 +5905,6 @@ Map {
       "label": "provide a label",
       "onClick": [Function],
       "onKeyDown": [Function],
-      "role": "presentation",
       "selected": false,
     },
     "propTypes": Object {
@@ -5946,10 +5945,7 @@ Map {
       "renderContent": Object {
         "type": "func",
       },
-      "role": Object {
-        "isRequired": true,
-        "type": "string",
-      },
+      "role": [Function],
       "selected": Object {
         "isRequired": true,
         "type": "bool",
diff --git a/packages/react/src/components/Tab/Tab-test.js b/packages/react/src/components/Tab/Tab-test.js
index f28a9e157f99..f84b5668a6ac 100644
--- a/packages/react/src/components/Tab/Tab-test.js
+++ b/packages/react/src/components/Tab/Tab-test.js
@@ -45,7 +45,7 @@ describe('Tab', () => {
     });
 
     it('renders <li> with [role="presentation"]', () => {
-      expect(wrapper.props().role).toEqual('presentation');
+      expect(wrapper.find('li').prop('role')).toEqual('presentation');
     });
 
     it('renders <button> with tabindex set to 0', () => {
diff --git a/packages/react/src/components/Tab/Tab.js b/packages/react/src/components/Tab/Tab.js
index 1a746eb731c1..6329e625edc0 100644
--- a/packages/react/src/components/Tab/Tab.js
+++ b/packages/react/src/components/Tab/Tab.js
@@ -82,7 +82,7 @@ export default class Tab extends React.Component {
     /**
      * Provide an accessibility role for your Tab
      */
-    role: PropTypes.string.isRequired,
+    role: deprecate(PropTypes.string),
 
     /**
      * Whether your Tab is selected.
@@ -97,7 +97,6 @@ export default class Tab extends React.Component {
   };
 
   static defaultProps = {
-    role: 'presentation',
     label: 'provide a label',
     selected: false,
     onClick: () => {},
@@ -122,6 +121,7 @@ export default class Tab extends React.Component {
       renderAnchor,
       renderButton,
       renderContent, // eslint-disable-line no-unused-vars
+      role, // eslint-disable-line no-unused-vars
       ...other
     } = this.props;
 
diff --git a/packages/react/src/components/Tab/index.js b/packages/react/src/components/Tab/index.js
index e664e8d8850b..d76f1b004194 100644
--- a/packages/react/src/components/Tab/index.js
+++ b/packages/react/src/components/Tab/index.js
@@ -5,4 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export default from './Tab';
+import * as FeatureFlags from '@carbon/feature-flags';
+import { default as TabNext } from './next/Tab';
+import { default as TabClassic } from './Tab';
+
+const Tab = FeatureFlags.enabled('enable-v11-release') ? TabNext : TabClassic;
+
+export default Tab;
diff --git a/packages/react/src/components/Tab/next/Tab-test.js b/packages/react/src/components/Tab/next/Tab-test.js
new file mode 100644
index 000000000000..78a2f5447278
--- /dev/null
+++ b/packages/react/src/components/Tab/next/Tab-test.js
@@ -0,0 +1,204 @@
+import React from 'react';
+import { default as Tab } from './Tab';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('Tab', () => {
+  it('adds extra classes that are passed via className', async () => {
+    render(
+      <Tab
+        className="custom-class"
+        label="Tab 1"
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        selected={false}>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    await expect(
+      screen.getByRole('presentation').classList.contains('custom-class')
+    ).toBe(true);
+  });
+
+  it('sets tabIndex on <button> if one is passed via props', async () => {
+    render(
+      <Tab
+        label="Tab 1"
+        // eslint-disable-next-line jsx-a11y/tabindex-no-positive
+        tabIndex={2}
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        selected={false}>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    await expect(screen.getByRole('tab').tabIndex).toEqual(2);
+  });
+
+  it('renders <li> with [role="presentation"]', async () => {
+    render(
+      <Tab
+        className="custom-class"
+        label="Tab 1"
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        selected={false}>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    await expect(screen.getByRole('presentation')).toBeTruthy();
+  });
+
+  it('renders <button> with tabindex set to 0 by default', async () => {
+    render(
+      <Tab
+        label="Tab 1"
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        selected={false}>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    await expect(screen.getByRole('tab').tabIndex).toEqual(0);
+  });
+
+  it('renders <button> with tabindex set to -1 if disabled', async () => {
+    render(
+      <Tab
+        label="Tab 1"
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        selected={false}
+        disabled>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    await expect(screen.getByRole('tab').tabIndex).toEqual(-1);
+  });
+
+  it('uses label to set children on <button> when passed via props', async () => {
+    render(
+      <Tab
+        label="Tab 1"
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        selected={false}>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    await expect(screen.getByRole('tab').textContent).toBe('Tab 1');
+  });
+
+  it('has aria-disabled that matches disabled', async () => {
+    render(
+      <Tab
+        label="Tab 1"
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        selected={false}
+        disabled>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    await expect(screen.getByRole('tab')).toHaveAttribute('aria-disabled');
+  });
+});
+
+describe('Click events', () => {
+  it('invokes handleTabClick from handleTabClick prop', async () => {
+    const handleTabClick = jest.fn();
+    render(
+      <Tab
+        label="Tab 1"
+        handleTabClick={handleTabClick}
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        selected={false}>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    const button = screen.getByRole('tab');
+    userEvent.click(button);
+    await expect(handleTabClick).toHaveBeenCalled();
+  });
+
+  it('invokes onClick when a function is passed to onClick prop', async () => {
+    const onClick = jest.fn();
+
+    render(
+      <Tab
+        label="Tab 1"
+        onClick={onClick}
+        onKeyDown={() => {}}
+        selected={false}>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    const button = screen.getByRole('tab');
+    userEvent.click(button);
+    await expect(onClick).toHaveBeenCalled();
+  });
+
+  it('does not invoke click handler if tab is disabled', async () => {
+    const onClick = jest.fn();
+
+    render(
+      <Tab
+        label="Tab 1"
+        onClick={onClick}
+        onKeyDown={() => {}}
+        selected={false}
+        disabled>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    const button = screen.getByRole('tab');
+    userEvent.click(button);
+    await expect(onClick).not.toHaveBeenCalled();
+  });
+});
+
+describe('Keyboard events', () => {
+  it('invokes onKeyDown from onKeyDown prop', async () => {
+    const onKeyDown = jest.fn();
+    render(
+      <Tab label="Tab 1" onClick={() => {}} onKeyDown={onKeyDown} selected>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    const button = screen.getByRole('tab');
+    userEvent.type(button, '[ArrowLeft]');
+
+    await expect(onKeyDown).toHaveBeenCalled();
+  });
+
+  it('invokes handleTabKeyDown from handleTabKeyDown prop', async () => {
+    const handleTabKeyDown = jest.fn();
+    render(
+      <Tab
+        label="Tab 1"
+        onClick={() => {}}
+        onKeyDown={() => {}}
+        handleTabKeyDown={handleTabKeyDown}
+        selected>
+        <p>Content for first tab goes here.</p>
+      </Tab>
+    );
+
+    const button = screen.getByRole('tab');
+    userEvent.type(button, '[ArrowRight]');
+
+    await expect(handleTabKeyDown).toHaveBeenCalled();
+  });
+});
diff --git a/packages/react/src/components/Tab/next/Tab.js b/packages/react/src/components/Tab/next/Tab.js
new file mode 100644
index 000000000000..40be07b3b1cb
--- /dev/null
+++ b/packages/react/src/components/Tab/next/Tab.js
@@ -0,0 +1,166 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { usePrefix } from '../../../internal/usePrefix';
+
+const Tab = React.forwardRef(function Tab(
+  {
+    className,
+    disabled,
+    handleTabClick,
+    handleTabKeyDown,
+    id,
+    index,
+    label = 'provide a label',
+    onClick = () => {},
+    onKeyDown = () => {},
+    renderButton,
+    renderContent, // eslint-disable-line no-unused-vars
+    selected = false,
+    tabIndex = 0,
+    ...other
+  },
+  ref
+) {
+  const prefix = usePrefix();
+
+  const classes = classNames(
+    className,
+    // TODO: remove scrollable in next major release
+    // `${prefix}--tabs__nav-item`,
+    `${prefix}--tabs--scrollable__nav-item`,
+    {
+      [`${prefix}--tabs__nav-item--disabled`]: disabled,
+      [`${prefix}--tabs__nav-item--selected`]: selected,
+      // TODO: remove scrollable in next major release
+      [`${prefix}--tabs--scrollable__nav-item--disabled`]: disabled,
+      [`${prefix}--tabs--scrollable__nav-item--selected`]: selected,
+    }
+  );
+
+  const buttonProps = {
+    ['aria-selected']: selected,
+    ['aria-disabled']: disabled,
+    ['aria-controls']: id && `${id}__panel`,
+    id,
+    // TODO: remove scrollable in next major release
+    // className:  `${prefix}--tabs__nav-link`,
+    className: `${prefix}--tabs--scrollable__nav-link`,
+    tabIndex: !disabled ? tabIndex : -1,
+    ref: ref,
+  };
+
+  return (
+    <li
+      {...other}
+      className={classes}
+      onClick={(evt) => {
+        if (disabled) {
+          return;
+        }
+        if (handleTabClick) {
+          handleTabClick(index, evt);
+        }
+        onClick(evt);
+      }}
+      onKeyDown={(evt) => {
+        if (disabled) {
+          return;
+        }
+        if (handleTabKeyDown) {
+          handleTabKeyDown(index, evt);
+        }
+        onKeyDown(evt);
+      }}
+      role="presentation">
+      {renderButton ? (
+        renderButton(buttonProps)
+      ) : (
+        <button type="button" role="tab" {...buttonProps}>
+          {label}
+        </button>
+      )}
+    </li>
+  );
+});
+
+Tab.propTypes = {
+  /**
+   * Specify an optional className to be added to your Tab
+   */
+  className: PropTypes.string,
+
+  /**
+   * Whether your Tab is disabled.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * A handler that is invoked when a user clicks on the control.
+   * Reserved for usage in Tabs
+   */
+  handleTabClick: PropTypes.func,
+
+  /**
+   * A handler that is invoked on the key down event for the control.
+   * Reserved for usage in Tabs
+   */
+  handleTabKeyDown: PropTypes.func,
+
+  /**
+   * The element ID for the top-level element.
+   */
+  id: PropTypes.string,
+
+  /**
+   * The index of your Tab in your Tabs. Reserved for usage in Tabs
+   */
+  index: PropTypes.number,
+
+  /**
+   * Provide the contents of your Tab
+   */
+  label: PropTypes.node,
+
+  /**
+   * Provide a handler that is invoked when a user clicks on the control
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Provide a handler that is invoked on the key down event for the control
+   */
+  onKeyDown: PropTypes.func,
+
+  /*
+   * An optional parameter to allow overriding the anchor rendering.
+   * Useful for using Tab along with react-router or other client
+   * side router libraries.
+   **/
+  renderButton: PropTypes.func,
+
+  /*
+   * An optional parameter to allow overriding the content rendering.
+   **/
+  renderContent: PropTypes.func,
+
+  /**
+   * Whether your Tab is selected.
+   * Reserved for usage in Tabs
+   */
+  selected: PropTypes.bool,
+
+  /**
+   * Specify the tab index of the `<button>` node
+   */
+  tabIndex: PropTypes.number,
+};
+
+export default Tab;
diff --git a/packages/react/src/components/Tabs/index.js b/packages/react/src/components/Tabs/index.js
index 531a69be74b1..989fb9845fb8 100644
--- a/packages/react/src/components/Tabs/index.js
+++ b/packages/react/src/components/Tabs/index.js
@@ -5,5 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import * as FeatureFlags from '@carbon/feature-flags';
+import { default as TabsNext } from './next/Tabs';
+import { default as TabsClassic } from './Tabs';
+
+const Tabs = FeatureFlags.enabled('enable-v11-release')
+  ? TabsNext
+  : TabsClassic;
+
 export * from './Tabs.Skeleton';
-export default from './Tabs';
+
+export default Tabs;
diff --git a/packages/react/src/components/Tabs/next/Tabs-test.js b/packages/react/src/components/Tabs/next/Tabs-test.js
new file mode 100644
index 000000000000..c95e6731711a
--- /dev/null
+++ b/packages/react/src/components/Tabs/next/Tabs-test.js
@@ -0,0 +1,264 @@
+import React from 'react';
+import { default as Tabs } from './Tabs';
+import { default as Tab } from '../../Tab/next/Tab';
+import { render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/dom';
+
+describe('Tabs', () => {
+  it('adds extra classes that are passed via className prop', async () => {
+    render(
+      <Tabs className="custom-class" data-testid="tabs-test">
+        <Tab label="firstTab">content1</Tab>
+        <Tab label="lastTab">content2</Tab>
+      </Tabs>
+    );
+
+    const tabs = screen.getByTestId('tabs-test');
+    await expect(tabs.classList.contains('custom-class')).toBe(true);
+  });
+
+  it('renders <ul> with tablist role by default', async () => {
+    render(
+      <Tabs className="custom-class">
+        <Tab label="firstTab">content1</Tab>
+        <Tab label="lastTab">content2</Tab>
+      </Tabs>
+    );
+
+    const tablist = screen.getByRole('tablist');
+    await expect(tablist).toBeTruthy();
+  });
+});
+
+describe('Children tabs', () => {
+  it('renders children', async () => {
+    render(
+      <Tabs className="custom-class">
+        <Tab label="firstTab">content1</Tab>
+        <Tab label="lastTab">content2</Tab>
+      </Tabs>
+    );
+
+    const tabArray = screen.getAllByRole('presentation');
+    await expect(tabArray.length).toEqual(2);
+  });
+
+  it('first tab is selected by default', async () => {
+    render(
+      <Tabs className="custom-class">
+        <Tab label="firstTab" data-testid="first-tab">
+          content1
+        </Tab>
+        <Tab label="lastTab">content2</Tab>
+      </Tabs>
+    );
+
+    const firstTab = screen.getByTestId('first-tab');
+    await expect(
+      firstTab.classList.contains('bx--tabs__nav-item--selected')
+    ).toBe(true);
+  });
+
+  it('overrides default selected tab when selected prop is provided', async () => {
+    render(
+      <Tabs className="custom-class" selected={1}>
+        <Tab label="firstTab" data-testid="first-tab">
+          content1
+        </Tab>
+        <Tab label="lastTab" data-testid="second-tab">
+          content2
+        </Tab>
+      </Tabs>
+    );
+
+    const firstTab = screen.getByTestId('first-tab');
+    const secondTab = screen.getByTestId('second-tab');
+
+    await expect(
+      firstTab.classList.contains('bx--tabs__nav-item--selected')
+    ).toBe(false);
+    await expect(
+      secondTab.classList.contains('bx--tabs__nav-item--selected')
+    ).toBe(true);
+  });
+});
+
+describe('Children tab content', () => {
+  it('renders correct number of children content as expected', async () => {
+    render(
+      <Tabs className="custom-class">
+        <Tab label="firstTab">content1</Tab>
+        <Tab label="lastTab">content2</Tab>
+      </Tabs>
+    );
+
+    const contentArray = screen.getAllByRole('tabpanel', { hidden: true });
+    await expect(contentArray.length).toEqual(2);
+  });
+
+  it('only shows one content tabpanel at a time', async () => {
+    render(
+      <Tabs className="custom-class">
+        <Tab label="firstTab">content1</Tab>
+        <Tab label="secondTab">content2</Tab>
+        <Tab label="lastTab">content3</Tab>
+      </Tabs>
+    );
+
+    const contentArray = screen.getAllByRole('tabpanel');
+    await expect(contentArray.length).toEqual(1);
+  });
+
+  it('adds extra classes that are passed via tabContentClassName prop', async () => {
+    render(
+      <Tabs tabContentClassName="content-class">
+        <Tab label="firstTab">content1</Tab>
+        <Tab label="lastTab">content2</Tab>
+      </Tabs>
+    );
+
+    const content = screen.getByRole('tabpanel');
+    await expect(content.classList.contains('content-class')).toBe(true);
+  });
+
+  it('renders unselected tab content with hidden attribute', async () => {
+    render(
+      <Tabs className="custom-class">
+        <Tab label="firstTab">content1</Tab>
+        <Tab label="lastTab">content2</Tab>
+      </Tabs>
+    );
+
+    const contentArray = screen.getAllByRole('tabpanel', { hidden: true });
+    await expect(contentArray[1]).toHaveAttribute('hidden');
+  });
+});
+
+describe('Keyboard events', () => {
+  it('updates selected tab and content, and loops from first tab to last tab when pressing left arrow key', async () => {
+    render(
+      <Tabs>
+        <Tab label="firstTab" data-testid="tab1">
+          content1
+        </Tab>
+        <Tab label="lastTab" data-testid="tab2">
+          content2
+        </Tab>
+      </Tabs>
+    );
+
+    const tab1 = screen.getByTestId('tab1');
+    const tab2 = screen.getByTestId('tab2');
+
+    const tabContent = screen.getAllByRole('tabpanel');
+    const tab1Content = tabContent[0];
+    fireEvent.keyDown(tab1, {
+      key: 'ArrowLeft',
+      code: 'ArrowLeft',
+      charCode: 37,
+    });
+    await expect(tab2.classList.contains('bx--tabs__nav-item--selected')).toBe(
+      true
+    );
+    await expect(tab1Content).toHaveAttribute('hidden');
+  });
+
+  it('updates selected tab and content when pressing right arrow key', async () => {
+    render(
+      <Tabs>
+        <Tab label="firstTab" data-testid="tab1">
+          content1
+        </Tab>
+        <Tab label="lastTab" data-testid="tab2">
+          content2
+        </Tab>
+      </Tabs>
+    );
+
+    const tab1 = screen.getByTestId('tab1');
+    const tab2 = screen.getByTestId('tab2');
+    const tabContent = screen.getAllByRole('tabpanel');
+    const tab1Content = tabContent[0];
+
+    fireEvent.keyDown(tab1, {
+      key: 'ArrowRight',
+      code: 'ArrowRight',
+      charCode: 39,
+    });
+    await expect(tab2.classList.contains('bx--tabs__nav-item--selected')).toBe(
+      true
+    );
+    await expect(tab1Content).toHaveAttribute('hidden');
+  });
+
+  it('ignores disabled tabs', async () => {
+    render(
+      <Tabs>
+        <Tab label="firstTab" data-testid="tab1">
+          content1
+        </Tab>
+        <Tab label="lastTab" data-testid="tab2" disabled>
+          content2
+        </Tab>
+        <Tab label="thirdTab" data-testid="tab3">
+          content3
+        </Tab>
+      </Tabs>
+    );
+    const tab1 = screen.getByTestId('tab1');
+    const tab3 = screen.getByTestId('tab3');
+    fireEvent.keyDown(tab1, {
+      key: 'ArrowRight',
+      code: 'ArrowRight',
+      charCode: 39,
+    });
+
+    await expect(tab3.classList.contains('bx--tabs__nav-item--selected')).toBe(
+      true
+    );
+  });
+});
+
+describe('Click events', () => {
+  it('updates selected tab and content on click', async () => {
+    render(
+      <Tabs>
+        <Tab label="firstTab" data-testid="tab1">
+          content1
+        </Tab>
+        <Tab label="lastTab" data-testid="tab2">
+          content2
+        </Tab>
+      </Tabs>
+    );
+    const tab2 = screen.getByTestId('tab2');
+    const tabContent = screen.getAllByRole('tabpanel');
+    const tab1Content = tabContent[0];
+    fireEvent.click(tab2);
+    await expect(tab2.classList.contains('bx--tabs__nav-item--selected')).toBe(
+      true
+    );
+    await expect(tab1Content).toHaveAttribute('hidden');
+  });
+
+  it('ignores disabled tab on click', async () => {
+    render(
+      <Tabs>
+        <Tab label="firstTab" data-testid="tab1">
+          content1
+        </Tab>
+        <Tab label="lastTab" data-testid="tab2" disabled>
+          content2
+        </Tab>
+      </Tabs>
+    );
+    const tab2 = screen.getByTestId('tab2');
+    const tabContent = screen.getAllByRole('tabpanel', { hidden: true });
+    const tab2Content = tabContent[1];
+    fireEvent.click(tab2);
+    await expect(tab2.classList.contains('bx--tabs__nav-item--selected')).toBe(
+      false
+    );
+    await expect(tab2Content).toHaveAttribute('hidden');
+  });
+});
diff --git a/packages/react/src/components/Tabs/next/Tabs.js b/packages/react/src/components/Tabs/next/Tabs.js
new file mode 100644
index 000000000000..c94a46d8719d
--- /dev/null
+++ b/packages/react/src/components/Tabs/next/Tabs.js
@@ -0,0 +1,613 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { ChevronLeft16, ChevronRight16 } from '@carbon/icons-react';
+import debounce from 'lodash.debounce';
+import { keys, match, matches } from '../../../internal/keyboard';
+import TabContent from '../../TabContent';
+import deprecate from '../../../prop-types/deprecate';
+import { usePrefix } from '../../../internal/usePrefix';
+
+const Tabs = React.forwardRef(function Tabs(
+  {
+    children,
+    className,
+    leftOverflowButtonProps,
+    light = false,
+    onSelectionChange,
+    rightOverflowButtonProps,
+    scrollIntoView = true,
+    selected = 0,
+    selectionMode = 'automatic',
+    tabContentClassName,
+    type = 'default',
+    ...other
+  },
+  ref
+) {
+  const prefix = usePrefix();
+
+  //refs
+  const tablist = useRef();
+  const leftOverflowNavButton = useRef();
+  const rightOverflowNavButton = useRef();
+  const tabs = useRef([]);
+
+  //states
+  const [horizontalOverflow, setHorizontalOverflow] = useState(false);
+  const [tablistClientWidth, setTablistClientWidth] = useState(null);
+  const [tablistScrollWidth, setTablistScrollWidth] = useState(null);
+  const [tablistScrollLeft, setTablistScrollLeft] = useState(null);
+  const [isSelected, setIsSelected] = useState(selected);
+  const [prevSelected, setPrevSelected] = useState(isSelected);
+
+  /**
+   * prop + state alignment - getDerivedStateFromProps
+   * only update if selected prop changes
+   */
+  useEffect(() => {
+    if (selected !== prevSelected) {
+      setIsSelected(selected);
+      setPrevSelected(selected);
+    }
+  }, [selected]); //eslint-disable-line react-hooks/exhaustive-deps
+
+  // width of the overflow buttons
+  let OVERFLOW_BUTTON_OFFSET = 40;
+
+  /**
+   * `scroll` event handler to save tablist clientWidth, scrollWidth, and
+   * scrollLeft
+   */
+  const handleScroll = () => {
+    if (!tablist?.current) {
+      return;
+    }
+    const { clientWidth, scrollLeft, scrollWidth } = tablist.current;
+
+    setTablistClientWidth(clientWidth);
+    setTablistScrollWidth(scrollWidth);
+    setTablistScrollLeft(scrollLeft);
+    setHorizontalOverflow(scrollWidth > clientWidth);
+  };
+
+  /**
+   * The debounced version of the `resize` event handler.
+   * @type {Function}
+   * @private
+   */
+  const _debouncedHandleWindowResize = useRef();
+
+  const _handleWindowResize = handleScroll;
+
+  /**
+   * returns all tabs that are not disabled
+   * used for keyboard navigation
+   */
+  const getEnabledTabs = () =>
+    React.Children.toArray(children).reduce(
+      (enabledTabs, tab, index) =>
+        !tab.props.disabled ? enabledTabs.concat(index) : enabledTabs,
+      []
+    );
+
+  /**
+   * returns the index of the next tab we are going to when navigating L/R arrow keys (i.e. 0, 1, 2)
+   * used in handleTabKeyDown to get the next index after keyboard arrow evt, which then updates selected tab
+   */
+  const getNextIndex = (index, direction) => {
+    const enabledTabs = getEnabledTabs();
+    const nextIndex = Math.max(
+      enabledTabs.indexOf(index) + direction,
+      // For `tab` not found in `enabledTabs`
+      -1
+    );
+    const nextIndexLooped =
+      nextIndex >= 0 && nextIndex < enabledTabs.length
+        ? nextIndex
+        : nextIndex - Math.sign(nextIndex) * enabledTabs.length;
+    return enabledTabs[nextIndexLooped];
+  };
+
+  /**
+   * used as second argument for getNextIndex(i,d)
+   * returns -1, 1 or 0 depending on arrow key
+   * number is then used in math calculations to find the index of the next tab we are navigating to
+   */
+  const getDirection = (evt) => {
+    if (match(evt, keys.ArrowLeft)) {
+      return -1;
+    }
+    if (match(evt, keys.ArrowRight)) {
+      return 1;
+    }
+    return 0;
+  };
+
+  const getTabAt = useCallback(
+    (index) => tabs.current[index] || React.Children.toArray(children)[index],
+    [tabs, children]
+  );
+
+  const scrollTabIntoView = (event, { index }) => {
+    const tab = getTabAt(index);
+    if (
+      matches(event, [keys.ArrowLeft, keys.ArrowRight]) ||
+      event.type === 'click'
+    ) {
+      const currentScrollLeft = tablistScrollLeft;
+      tab?.tabAnchor?.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest',
+      });
+      tab?.tabAnchor?.focus();
+      const newScrollLeft = tablist.current.scrollLeft;
+      if (newScrollLeft > currentScrollLeft) {
+        tablist.current.scrollLeft += OVERFLOW_BUTTON_OFFSET;
+      }
+    }
+  };
+
+  /**
+   * selecting tab on click and on keyboard nav
+   * index = tab to be selected, returned in handleTabKeyDown
+   * onSelectionChange = optional prop for event handler
+   */
+  const selectTabAt = (event, { index, onSelectionChange }) => {
+    scrollTabIntoView(event, { index });
+    if (isSelected !== index) {
+      setIsSelected(index);
+      setPrevSelected(index);
+      if (typeof onSelectionChange === 'function') {
+        onSelectionChange(index);
+      }
+    }
+  };
+
+  /**
+   *  keyboard event handler
+   */
+  const handleTabKeyDown = (onSelectionChange) => {
+    return (index, evt) => {
+      if (matches(evt, [keys.Enter, keys.Space])) {
+        selectTabAt(evt, { index, onSelectionChange });
+      }
+
+      const nextIndex = (() => {
+        if (matches(evt, [keys.ArrowLeft, keys.ArrowRight])) {
+          return getNextIndex(index, getDirection(evt));
+        }
+        if (match(evt, keys.Home)) {
+          return 0;
+        }
+        if (match(evt, keys.End)) {
+          return getEnabledTabs().pop();
+        }
+      })();
+      const tab = getTabAt(nextIndex);
+
+      // updating selected tab
+      if (
+        matches(evt, [keys.ArrowLeft, keys.ArrowRight, keys.Home, keys.End])
+      ) {
+        evt.preventDefault();
+        if (selectionMode !== 'manual') {
+          selectTabAt(evt, { index: nextIndex, onSelectionChange });
+        } else {
+          scrollTabIntoView(evt, { index: nextIndex });
+        }
+        tab?.focus();
+      }
+    };
+  };
+
+  const getTabs = () => React.Children.map(children, (tab) => tab);
+
+  /**
+   *  click handler
+   *  passed down to Tab children as a prop in `tabsWithProps`
+   *  following functions (handle*) are Props on Tab.js, see Tab.js for parameters
+   */
+  const handleTabClick = (onSelectionChange) => (index, evt) => {
+    evt.preventDefault();
+    selectTabAt(evt, { index, onSelectionChange });
+  };
+
+  /**
+   * creates an array of all the child tab items
+   */
+  const setTabAt = (index, tabRef) => {
+    tabs.current[index] = tabRef;
+  };
+
+  let overflowNavInterval = null;
+
+  /**
+   * group - overflow scroll
+   * scrolling via overflow btn click
+   * click handler for scrollable tabs L/R arrow buttons
+   */
+  const handleOverflowNavClick = (_, { direction, multiplier = 10 }) => {
+    // account for overflow button appearing and causing tablist width change
+    const { clientWidth, scrollLeft, scrollWidth } = tablist?.current;
+    if (direction === 1 && !scrollLeft) {
+      tablist.current.scrollLeft += OVERFLOW_BUTTON_OFFSET;
+    }
+
+    tablist.current.scrollLeft += direction * multiplier;
+
+    const leftEdgeReached =
+      direction === -1 && scrollLeft < OVERFLOW_BUTTON_OFFSET;
+
+    const rightEdgeReached =
+      direction === 1 &&
+      scrollLeft + clientWidth >= scrollWidth - OVERFLOW_BUTTON_OFFSET;
+
+    if (leftEdgeReached || rightEdgeReached) {
+      if (leftEdgeReached) {
+        rightOverflowNavButton?.current?.focus();
+      }
+      if (rightEdgeReached) {
+        leftOverflowNavButton?.current?.focus();
+      }
+    }
+  };
+
+  /**
+   * group - overflow scroll
+   * scrolling w/ mouse event
+   * mousedown handler for scrollable tabs
+   */
+  const handleOverflowNavMouseDown = (event, { direction }) => {
+    // disregard mouse buttons aside from LMB
+    if (event.buttons !== 1) {
+      return;
+    }
+
+    overflowNavInterval = setInterval(() => {
+      const { clientWidth, scrollLeft, scrollWidth } = tablist?.current;
+
+      // clear interval if scroll reaches left or right edge
+      const leftEdgeReached =
+        direction === -1 && scrollLeft < OVERFLOW_BUTTON_OFFSET;
+
+      const rightEdgeReached =
+        direction === 1 &&
+        scrollLeft + clientWidth >= scrollWidth - OVERFLOW_BUTTON_OFFSET;
+
+      if (leftEdgeReached || rightEdgeReached) {
+        clearInterval(overflowNavInterval);
+      }
+
+      // account for overflow button appearing and causing tablist width change
+      handleOverflowNavClick(event, { direction });
+    });
+  };
+
+  /**
+   * group - overflow scroll
+   * scrolling w/ mouse event
+   * mouseup handler for scrollable tabs
+   */
+  const handleOverflowNavMouseUp = () => {
+    clearInterval(overflowNavInterval);
+  };
+
+  /**
+   * only run once - component did mount equivalent
+   */
+  useEffect(() => {
+    _debouncedHandleWindowResize.current = debounce(_handleWindowResize, 200);
+
+    _handleWindowResize();
+    window.addEventListener('resize', _debouncedHandleWindowResize.current);
+
+    // scroll selected tab into view on mount
+    const { clientWidth, scrollLeft, scrollWidth } = tablist?.current || {};
+
+    setTablistClientWidth(clientWidth);
+    setTablistScrollWidth(scrollWidth);
+    setTablistScrollLeft(scrollLeft);
+
+    const tab = getTabAt(isSelected);
+    const horizontalOverflow = scrollWidth > clientWidth;
+
+    if (horizontalOverflow) {
+      const leftOverflowNavButtonHidden =
+        tab?.tabAnchor?.getBoundingClientRect().right <
+        tab?.tabAnchor?.offsetParent.getBoundingClientRect().right;
+
+      const rightOverflowNavButtonHidden =
+        scrollLeft + clientWidth === scrollWidth;
+      scrollIntoView &&
+        tab?.tabAnchor?.scrollIntoView({
+          block: 'nearest',
+          inline: 'nearest',
+        });
+
+      // account for overflow buttons in scroll position on mount
+      if (!leftOverflowNavButtonHidden && !rightOverflowNavButtonHidden) {
+        tablist.current.scrollLeft += OVERFLOW_BUTTON_OFFSET * 2;
+      }
+    }
+
+    //component will unmount equivalent
+    return () => {
+      if (_debouncedHandleWindowResize.current) {
+        _debouncedHandleWindowResize.current.cancel();
+      }
+      window.removeEventListener(
+        'resize',
+        _debouncedHandleWindowResize.current
+      );
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  /**
+   * component did update equivalent
+   */
+  useEffect(() => {
+    // compare current tablist properties to current state
+    const {
+      clientWidth: currentTablistClientWidth,
+      scrollLeft: currentTablistScrollLeft,
+      scrollWidth: currentTablistScrollWidth,
+    } = tablist.current;
+
+    if (
+      currentTablistClientWidth !== tablistClientWidth ||
+      currentTablistScrollLeft !== tablistScrollLeft ||
+      currentTablistScrollWidth !== tablistScrollWidth
+    ) {
+      setTablistClientWidth(currentTablistClientWidth);
+      setTablistScrollWidth(currentTablistScrollWidth);
+      setTablistScrollLeft(currentTablistScrollLeft);
+      setHorizontalOverflow(
+        currentTablistScrollWidth > currentTablistClientWidth
+      );
+    }
+
+    if (scrollIntoView && prevSelected !== isSelected) {
+      getTabAt(isSelected)?.tabAnchor?.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest',
+      });
+    }
+  }, [
+    isSelected,
+    prevSelected,
+    scrollIntoView,
+    tablistClientWidth,
+    tablistScrollLeft,
+    tablistScrollWidth,
+    getTabAt,
+  ]);
+
+  /**
+   * The tab panel acts like a tab panel when the screen is wider, but acts
+   * like a select list when the screen is narrow.  In the wide case we want
+   * to allow the user to use the tab key to set the focus in the tab panel
+   * and then use the left and right arrow keys to navigate the tabs.  In the
+   * narrow case we want to use the tab key to select different options in
+   * the list.
+   *
+   * We set the tab index based on the different states so the browser will treat
+   * the whole tab panel as a single focus component when it looks like a tab
+   * panel and separate components when it looks like a select list.
+   */
+  const tabsWithProps = getTabs().map((tab, index) => {
+    const tabIndex = index === isSelected ? 0 : -1;
+    const newTab = React.cloneElement(tab, {
+      index,
+      selected: index === isSelected,
+      handleTabClick: handleTabClick(onSelectionChange),
+      tabIndex,
+      ref: (e) => {
+        setTabAt(index, e);
+      },
+      handleTabKeyDown: handleTabKeyDown(onSelectionChange),
+    });
+
+    return newTab;
+  });
+
+  const tabContentWithProps = React.Children.map(tabsWithProps, (tab) => {
+    const {
+      id: tabId,
+      children,
+      selected,
+      renderContent: Content = TabContent,
+    } = tab.props;
+
+    return (
+      <Content
+        id={tabId && `${tabId}__panel`}
+        className={tabContentClassName}
+        hidden={!selected}
+        selected={selected}
+        aria-labelledby={tabId}>
+        {children}
+      </Content>
+    );
+  });
+
+  const leftOverflowNavButtonHidden = !horizontalOverflow || !tablistScrollLeft;
+
+  const rightOverflowNavButtonHidden =
+    !horizontalOverflow ||
+    tablistScrollLeft + tablistClientWidth === tablistScrollWidth;
+
+  const classes = {
+    // TODO: remove scrollable from classnames in next major release and uncomment classnames that don't contain scrollable
+    tabs: classNames(
+      className,
+      // `${prefix}--tabs`,
+      `${prefix}--tabs--scrollable`,
+      {
+        // [`${prefix}--tabs--container`]: type === 'container',
+        [`${prefix}--tabs--scrollable--container`]: type === 'container',
+        // [`${prefix}--tabs--light`]: light,
+        [`${prefix}--tabs--scrollable--light`]: light,
+      }
+    ),
+    // TODO: remove scrollable from classnames in next major release and uncomment classnames that don't contain scrollable
+    tablist: classNames(
+      // `${prefix}--tabs__nav`,
+      `${prefix}--tabs--scrollable__nav`
+    ),
+    leftOverflowButtonClasses: classNames({
+      [`${prefix}--tab--overflow-nav-button`]: horizontalOverflow,
+      [`${prefix}--tab--overflow-nav-button--hidden`]: leftOverflowNavButtonHidden,
+    }),
+    rightOverflowButtonClasses: classNames({
+      [`${prefix}--tab--overflow-nav-button`]: horizontalOverflow,
+      [`${prefix}--tab--overflow-nav-button--hidden`]: rightOverflowNavButtonHidden,
+    }),
+  };
+
+  return (
+    <>
+      <div
+        className={classes.tabs}
+        onScroll={handleScroll}
+        ref={ref}
+        {...other}>
+        <button
+          aria-hidden="true"
+          aria-label="Scroll left"
+          className={classes.leftOverflowButtonClasses}
+          onClick={(_) => handleOverflowNavClick(_, { direction: -1 })}
+          onMouseDown={(event) =>
+            handleOverflowNavMouseDown(event, { direction: -1 })
+          }
+          onMouseUp={handleOverflowNavMouseUp}
+          ref={leftOverflowNavButton}
+          tabIndex="-1"
+          type="button"
+          {...leftOverflowButtonProps}>
+          <ChevronLeft16 />
+        </button>
+        {!leftOverflowNavButtonHidden && (
+          <div className={`${prefix}--tabs__overflow-indicator--left`} />
+        )}
+        <ul
+          role="tablist"
+          tabIndex={-1}
+          className={classes.tablist}
+          ref={tablist}>
+          {tabsWithProps}
+        </ul>
+        {!rightOverflowNavButtonHidden && (
+          <div className={`${prefix}--tabs__overflow-indicator--right`} />
+        )}
+        <button
+          aria-hidden="true"
+          aria-label="Scroll right"
+          className={classes.rightOverflowButtonClasses}
+          onClick={(_) => handleOverflowNavClick(_, { direction: 1 })}
+          onMouseDown={(event) =>
+            handleOverflowNavMouseDown(event, { direction: 1 })
+          }
+          onMouseUp={handleOverflowNavMouseUp}
+          ref={rightOverflowNavButton}
+          tabIndex="-1"
+          type="button"
+          {...rightOverflowButtonProps}>
+          <ChevronRight16 />
+        </button>
+      </div>
+      {tabContentWithProps}
+    </>
+  );
+});
+
+Tabs.propTypes = {
+  /**
+   * Pass in a collection of <Tab> children to be rendered depending on the
+   * currently selected tab
+   */
+  children: PropTypes.node,
+
+  /**
+   * Provide a className that is applied to the root <div> component for the
+   * <Tabs>
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the Tab content is hidden
+   */
+  hidden: PropTypes.bool,
+
+  /**
+   * Provide the props that describe the left overflow button
+   */
+  leftOverflowButtonProps: PropTypes.object,
+
+  /**
+   * Specify whether or not to use the light component variant
+   */
+  light: deprecate(
+    PropTypes.bool,
+    'The light prop has been deprecated in v11 in favor of our new layering model that uses the Layer component'
+  ),
+
+  /**
+   * Optionally provide an `onClick` handler that is invoked when a <Tab> is
+   * clicked
+   */
+  onClick: PropTypes.func,
+
+  /**
+   * Optionally provide an `onKeyDown` handler that is invoked when keyed
+   * navigation is triggered
+   */
+  onKeyDown: PropTypes.func,
+
+  /**
+   * Provide an optional handler that is called whenever the selection
+   * changes. This method is called with the index of the tab that was
+   * selected
+   */
+  onSelectionChange: PropTypes.func,
+
+  /**
+   * Provide the props that describe the right overflow button
+   */
+  rightOverflowButtonProps: PropTypes.object,
+
+  /**
+   * Choose whether or not to automatically scroll to newly selected tabs
+   * on component rerender
+   */
+  scrollIntoView: PropTypes.bool,
+
+  /**
+   * Optionally provide an index for the currently selected <Tab>
+   */
+  selected: PropTypes.number,
+
+  /**
+   * Choose whether or not to automatically change selection on focus
+   */
+  selectionMode: PropTypes.oneOf(['automatic', 'manual']),
+
+  /**
+   * Provide a className that is applied to the <TabContent> components
+   */
+  tabContentClassName: PropTypes.string,
+
+  /**
+   * Provide the type of Tab
+   */
+  type: PropTypes.oneOf(['default', 'container']),
+};
+
+export default Tabs;

From 72731190d6bf854b09e3cdb5785799821908970f Mon Sep 17 00:00:00 2001
From: Taylor Jones <tay1orjones@users.noreply.github.com>
Date: Tue, 19 Oct 2021 14:19:30 -0500
Subject: [PATCH 2/2] Remove external/outside margin from components (#9830)

* fix(form): remove fieldset margin

* fix(form): remove fileuploader margin

* fix(form): remove label margin

* fix(notifications): remove external margin

* fix(structured-list): remove external margin

* chore: put component margin removal behind flag

* chore: add v11 flag env variable to sass compilation config

Co-authored-by: Josh Black <josh@josh.black>
---
 .../file-uploader/_file-uploader.scss         |  5 ++++-
 .../components/src/components/form/_form.scss | 21 +++++++++++++------
 .../notification/_inline-notification.scss    |  7 +++++--
 .../notification/_toast-notification.scss     | 15 ++++++++-----
 .../structured-list/_structured-list.scss     |  5 ++++-
 packages/react/.storybook/main.js             |  4 +++-
 .../src/components/FormGroup/FormGroup.js     |  3 ++-
 .../file-uploader/_file-uploader.scss         |  5 ++++-
 .../styles/scss/components/form/_form.scss    | 21 +++++++++++++------
 .../_actionable-notification.scss             |  7 +++++--
 .../notification/_inline-notification.scss    |  7 +++++--
 .../notification/_toast-notification.scss     | 15 ++++++++-----
 .../structured-list/_structured-list.scss     |  5 ++++-
 13 files changed, 86 insertions(+), 34 deletions(-)

diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss
index 1d997c4d0600..bb4b63e24c7e 100644
--- a/packages/components/src/components/file-uploader/_file-uploader.scss
+++ b/packages/components/src/components/file-uploader/_file-uploader.scss
@@ -57,7 +57,10 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-03;
+    }
+
     color: $link-01;
     cursor: pointer;
     outline: 2px solid transparent;
diff --git a/packages/components/src/components/form/_form.scss b/packages/components/src/components/form/_form.scss
index 17715c9e33f8..f00ae8ef4124 100644
--- a/packages/components/src/components/form/_form.scss
+++ b/packages/components/src/components/form/_form.scss
@@ -18,11 +18,15 @@
   .#{$prefix}--fieldset {
     @include reset;
 
-    margin-bottom: $carbon--spacing-07;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-07;
+    }
   }
 
-  .#{$prefix}--fieldset--no-margin {
-    margin-bottom: 0;
+  @if not feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--fieldset--no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .#{$prefix}--form-item {
@@ -42,7 +46,10 @@
     @include type-style('label-01');
 
     display: inline-block;
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: $carbon--spacing-03;
+    }
+
     color: $text-02;
     font-weight: $input-label-weight;
     line-height: 1rem;
@@ -125,8 +132,10 @@
     display: block;
   }
 
-  .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-    margin: 0;
+  @if not feature-flag-enabled('enable-v11-release') {
+    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+      margin: 0;
+    }
   }
 
   .#{$prefix}--form--fluid input[data-invalid] {
diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
index 17cbde33b4c4..f58bf988467d 100644
--- a/packages/components/src/components/notification/_inline-notification.scss
+++ b/packages/components/src/components/notification/_inline-notification.scss
@@ -33,8 +33,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $carbon--spacing-05;
-    margin-bottom: $carbon--spacing-05;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-top: $carbon--spacing-05;
+      margin-bottom: $carbon--spacing-05;
+    }
+
     color: $inverse-01;
 
     @include carbon--breakpoint(md) {
diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
index 1fb6fdaa305d..2c4cf3d76b02 100644
--- a/packages/components/src/components/notification/_toast-notification.scss
+++ b/packages/components/src/components/notification/_toast-notification.scss
@@ -29,14 +29,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $carbon--spacing-05;
-    margin-top: $carbon--spacing-03;
-    margin-right: $carbon--spacing-05;
-    margin-bottom: $carbon--spacing-03;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-top: $carbon--spacing-03;
+      margin-right: $carbon--spacing-05;
+      margin-bottom: $carbon--spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $inverse-01;
 
-    &:first-child {
-      margin-top: $carbon--spacing-05;
+    @if not feature-flag-enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $carbon--spacing-05;
+      }
     }
 
     @include carbon--breakpoint(max) {
diff --git a/packages/components/src/components/structured-list/_structured-list.scss b/packages/components/src/components/structured-list/_structured-list.scss
index f07bf8b9ed23..a19bbcbf7dae 100644
--- a/packages/components/src/components/structured-list/_structured-list.scss
+++ b/packages/components/src/components/structured-list/_structured-list.scss
@@ -32,7 +32,10 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not feature-flag-enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
index 4d9fa461553e..41be2da8f11c 100644
--- a/packages/react/.storybook/main.js
+++ b/packages/react/.storybook/main.js
@@ -13,7 +13,7 @@ const customProperties = require('postcss-custom-properties');
 const rtlcss = require('rtlcss');
 
 const {
-  CARBON_ENABLE_V11_RELEASE,
+  CARBON_ENABLE_V11_RELEASE = 'false',
   CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES = 'false',
   CARBON_REACT_STORYBOOK_USE_RTL,
   CARBON_REACT_STORYBOOK_USE_SASS_LOADER,
@@ -69,6 +69,7 @@ module.exports = {
             $feature-flags: (
               ui-shell: true,
               enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+              enable-v11-release: ${CARBON_ENABLE_V11_RELEASE},
             );
             ${content}
           `;
@@ -88,6 +89,7 @@ module.exports = {
           $feature-flags: (
             ui-shell: true,
             enable-css-custom-properties: ${CARBON_REACT_STORYBOOK_USE_CUSTOM_PROPERTIES},
+            enable-v11-release: ${CARBON_ENABLE_V11_RELEASE},
           );
         `,
         implementation: require('sass'),
diff --git a/packages/react/src/components/FormGroup/FormGroup.js b/packages/react/src/components/FormGroup/FormGroup.js
index f2cd065863d5..d476c4bd4d50 100644
--- a/packages/react/src/components/FormGroup/FormGroup.js
+++ b/packages/react/src/components/FormGroup/FormGroup.js
@@ -19,7 +19,7 @@ const FormGroup = ({
   className,
   message,
   messageText,
-  hasMargin,
+  hasMargin, // TODO - remove in v11
   ...other
 }) => {
   const prefix = usePrefix();
@@ -27,6 +27,7 @@ const FormGroup = ({
   const classNamesLegend = classnames(`${prefix}--label`, [
     enabled ? null : className,
   ]);
+  // TODO - remove `fieldset--no-margin` in v11
   const classNamesFieldset = classnames(`${prefix}--fieldset`, className, {
     [`${prefix}--fieldset--no-margin`]: !hasMargin,
   });
diff --git a/packages/styles/scss/components/file-uploader/_file-uploader.scss b/packages/styles/scss/components/file-uploader/_file-uploader.scss
index 1f7a90661459..d093294b83df 100644
--- a/packages/styles/scss/components/file-uploader/_file-uploader.scss
+++ b/packages/styles/scss/components/file-uploader/_file-uploader.scss
@@ -62,7 +62,10 @@
     display: inline-block;
     width: 100%;
     max-width: rem(320px);
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-03;
+    }
+
     color: $link-primary;
     cursor: pointer;
     outline: 2px solid transparent;
diff --git a/packages/styles/scss/components/form/_form.scss b/packages/styles/scss/components/form/_form.scss
index 1db3071bcad7..bee4c969ac82 100644
--- a/packages/styles/scss/components/form/_form.scss
+++ b/packages/styles/scss/components/form/_form.scss
@@ -22,11 +22,15 @@ $input-label-weight: 400 !default;
   .#{$prefix}--fieldset {
     @include reset;
 
-    margin-bottom: $spacing-07;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-07;
+    }
   }
 
-  .#{$prefix}--fieldset--no-margin {
-    margin-bottom: 0;
+  @if not enabled('enable-v11-release') {
+    .#{$prefix}--fieldset--no-margin {
+      margin-bottom: 0;
+    }
   }
 
   .#{$prefix}--form-item {
@@ -46,7 +50,10 @@ $input-label-weight: 400 !default;
     @include type-style('label-01');
 
     display: inline-block;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: $spacing-03;
+    }
+
     color: $text-secondary;
     font-weight: $input-label-weight;
     line-height: 1rem;
@@ -129,8 +136,10 @@ $input-label-weight: 400 !default;
     display: block;
   }
 
-  .#{$prefix}--form--fluid .#{$prefix}--fieldset {
-    margin: 0;
+  @if not enabled('enable-v11-release') {
+    .#{$prefix}--form--fluid .#{$prefix}--fieldset {
+      margin: 0;
+    }
   }
 
   .#{$prefix}--form--fluid input[data-invalid] {
diff --git a/packages/styles/scss/components/notification/_actionable-notification.scss b/packages/styles/scss/components/notification/_actionable-notification.scss
index 7984f0bdb9c1..deb8d6e6cb42 100644
--- a/packages/styles/scss/components/notification/_actionable-notification.scss
+++ b/packages/styles/scss/components/notification/_actionable-notification.scss
@@ -36,8 +36,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {
diff --git a/packages/styles/scss/components/notification/_inline-notification.scss b/packages/styles/scss/components/notification/_inline-notification.scss
index 5f281a2cf556..fe15efe2a1d0 100644
--- a/packages/styles/scss/components/notification/_inline-notification.scss
+++ b/packages/styles/scss/components/notification/_inline-notification.scss
@@ -34,8 +34,11 @@
     height: auto;
     min-height: rem(48px);
     flex-wrap: wrap;
-    margin-top: $spacing-05;
-    margin-bottom: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-05;
+      margin-bottom: $spacing-05;
+    }
+
     color: $text-inverse;
 
     @include breakpoint(md) {
diff --git a/packages/styles/scss/components/notification/_toast-notification.scss b/packages/styles/scss/components/notification/_toast-notification.scss
index 80765bcc3a93..c4e6471ef7e7 100644
--- a/packages/styles/scss/components/notification/_toast-notification.scss
+++ b/packages/styles/scss/components/notification/_toast-notification.scss
@@ -32,14 +32,19 @@
     width: rem(288px);
     height: auto;
     padding-left: $spacing-05;
-    margin-top: $spacing-03;
-    margin-right: $spacing-05;
-    margin-bottom: $spacing-03;
+    @if not enabled('enable-v11-release') {
+      margin-top: $spacing-03;
+      margin-right: $spacing-05;
+      margin-bottom: $spacing-03;
+    }
+
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
     color: $text-inverse;
 
-    &:first-child {
-      margin-top: $spacing-05;
+    @if not enabled('enable-v11-release') {
+      &:first-child {
+        margin-top: $spacing-05;
+      }
     }
 
     @include breakpoint(max) {
diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
index 08a64f15cc9d..ed2c72bb94bc 100644
--- a/packages/styles/scss/components/structured-list/_structured-list.scss
+++ b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -36,7 +36,10 @@
 
     display: table;
     width: 100%;
-    margin-bottom: 5rem;
+    @if not enabled('enable-v11-release') {
+      margin-bottom: 5rem;
+    }
+
     background-color: transparent;
     border-collapse: collapse;
     border-spacing: 0;