feat(Tabs): Contained tabs on the grid

e2e/components/Tabs/Tabs-test.e2e.js

@@ -70,6 +70,14 @@ test.describe('Tabs', () => {
         });
       });
 
+      test('contained fullWidth @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tabs',
+          id: 'components-tabs--contained-full-width',
+          theme,
+        });
+      });
+
       test('contained with secondary labels @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tabs',

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -7587,6 +7587,9 @@ Map {
       "contained": Object {
         "type": "bool",
       },
+      "fullWidth": Object {
+        "type": "bool",
+      },
       "iconSize": Object {
         "args": Array [
           Array [

packages/react/src/components/Tabs/Tabs-test.js

@@ -3,10 +3,16 @@ import { Tabs, Tab, TabPanel, TabPanels, TabList } from './Tabs';
 import { act } from 'react-dom/test-utils';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import * as hooks from '../../internal/useMatchMedia';
 
 const prefix = 'cds';
 
 describe('Tabs', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.spyOn(hooks, 'useMatchMedia').mockImplementation(() => true);
+  });
+
   it('should update selected index based on the default provided', () => {
     render(
       <Tabs defaultSelectedIndex={1}>
@@ -53,6 +59,11 @@ describe('Tabs', () => {
 });
 
 describe('Tab', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.spyOn(hooks, 'useMatchMedia').mockImplementation(() => true);
+  });
+
   it('should set a className from props on outermost element in Tab', () => {
     render(
       <Tabs>
@@ -437,6 +448,11 @@ describe('Tab', () => {
 });
 
 describe('TabPanel', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.spyOn(hooks, 'useMatchMedia').mockImplementation(() => true);
+  });
+
   it('should have a className if provided by props', () => {
     render(
       <Tabs>
@@ -536,3 +552,93 @@ describe('TabPanel', () => {
     expect(screen.getByText('Tab Panel 1')).toHaveAttribute('tabIndex', '0');
   });
 });
+
+describe('TabList', () => {
+  it('should span fullWidth if lg and fullWidth prop is passed in', () => {
+    jest.spyOn(hooks, 'useMatchMedia').mockImplementation(() => true);
+    const { container } = render(
+      <Tabs>
+        <TabList aria-label="List of tabs" contained fullWidth>
+          <Tab>Tab Label 1</Tab>
+          <Tab>Tab Label 2</Tab>
+          <Tab>Tab Label 3</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel className="custom-class">
+            Tab Panel 1<button type="button">Submit</button>
+          </TabPanel>
+          <TabPanel>Tab Panel 2</TabPanel>
+          <TabPanel>Tab Panel 3</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    expect(container.firstChild).toHaveClass(`${prefix}--tabs--full-width`);
+  });
+
+  it('should ignore fullWidth prop if screen smaller than lg', () => {
+    jest.spyOn(hooks, 'useMatchMedia').mockImplementation(() => false);
+    const { container } = render(
+      <Tabs>
+        <TabList aria-label="List of tabs" contained fullWidth>
+          <Tab>Tab Label 1</Tab>
+          <Tab>Tab Label 2</Tab>
+          <Tab>Tab Label 3</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel className="custom-class">
+            Tab Panel 1<button type="button">Submit</button>
+          </TabPanel>
+          <TabPanel>Tab Panel 2</TabPanel>
+          <TabPanel>Tab Panel 3</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    expect(container.firstChild).not.toHaveClass(`${prefix}--tabs--full-width`);
+  });
+
+  it('should ignore fullWidth prop if tabs are not contained', () => {
+    jest.spyOn(hooks, 'useMatchMedia').mockImplementation(() => true);
+    const { container } = render(
+      <Tabs>
+        <TabList aria-label="List of tabs" fullWidth>
+          <Tab>Tab Label 1</Tab>
+          <Tab>Tab Label 2</Tab>
+          <Tab>Tab Label 3</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel className="custom-class">
+            Tab Panel 1<button type="button">Submit</button>
+          </TabPanel>
+          <TabPanel>Tab Panel 2</TabPanel>
+          <TabPanel>Tab Panel 3</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    expect(container.firstChild).not.toHaveClass(`${prefix}--tabs--full-width`);
+  });
+
+  it('should not be fullWidth in default state', () => {
+    jest.spyOn(hooks, 'useMatchMedia').mockImplementation(() => true);
+    const { container } = render(
+      <Tabs>
+        <TabList aria-label="List of tabs" contained>
+          <Tab>Tab Label 1</Tab>
+          <Tab>Tab Label 2</Tab>
+          <Tab>Tab Label 3</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel className="custom-class">
+            Tab Panel 1<button type="button">Submit</button>
+          </TabPanel>
+          <TabPanel>Tab Panel 2</TabPanel>
+          <TabPanel>Tab Panel 3</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    expect(container.firstChild).not.toHaveClass(`${prefix}--tabs--full-width`);
+  });
+});

packages/react/src/components/Tabs/Tabs.js

@@ -6,6 +6,7 @@
  */
 
 import { ChevronLeft, ChevronRight } from '@carbon/icons-react';
+import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import debounce from 'lodash.debounce';
 import PropTypes from 'prop-types';
@@ -23,6 +24,7 @@ import { usePressable } from './usePressable';
 import deprecate from '../../prop-types/deprecate';
 import { Close } from '@carbon/icons-react';
 import { useEvent } from '../../internal/useEvent';
+import { useMatchMedia } from '../../internal/useMatchMedia';
 
 // Used to manage the overall state of the Tabs
 const TabsContext = React.createContext();
@@ -32,6 +34,9 @@ const TabContext = React.createContext();
 
 // Used to keep track of position in a list of tab panels
 const TabPanelContext = React.createContext();
+
+const lgMediaQuery = `(min-width: ${breakpoints.lg.width})`;
+
 function Tabs({
   children,
   defaultSelectedIndex = 0,
@@ -138,6 +143,7 @@ function TabList({
   children,
   className: customClassName,
   contained = false,
+  fullWidth = false,
   iconSize,
   leftOverflowButtonProps,
   light,
@@ -160,6 +166,14 @@ function TabList({
   const [isScrollable, setIsScrollable] = useState(false);
   const [scrollLeft, setScrollLeft] = useState(null);
 
+  const isLg = useMatchMedia(lgMediaQuery);
+
+  const distributeWidth =
+    fullWidth &&
+    contained &&
+    isLg &&
+    React.Children.toArray(children).length < 9;
+
   // Previous Button
   // VISIBLE IF:
   //   SCROLLABLE
@@ -186,6 +200,7 @@ function TabList({
     [`${prefix}--tabs__icon--default`]: iconSize === 'default',
     [`${prefix}--tabs__icon--lg`]: iconSize === 'lg',
     [`${prefix}--tabs--tall`]: hasSecondaryLabelTabs,
+    [`${prefix}--tabs--full-width`]: distributeWidth,
   });
 
   const isPreviousButtonVisible = ref.current
@@ -451,6 +466,11 @@ TabList.propTypes = {
    */
   contained: PropTypes.bool,
 
+  /**
+   * Used for tabs within a grid, this makes it so tabs span the full container width and have the same width. Only available on contained tabs with <9 children
+   */
+  fullWidth: PropTypes.bool,
+
   /**
    * If using `IconTab`, specify the size of the icon being used.
    */
@@ -651,7 +671,9 @@ const Tab = React.forwardRef(function Tab(
             {<Icon size={16} />}
           </div>
         )}
-        <span className={`${prefix}--tabs__nav-item-label`}>{children}</span>
+        <span className={`${prefix}--tabs__nav-item-label`} title={children}>
+          {children}
+        </span>
         {/* always rendering dismissIcon so we don't lose reference to it, otherwise events do not work when switching from/to dismissable state */}
         <div
           className={cx(`${prefix}--tabs__nav-item--icon`, {
@@ -662,7 +684,9 @@ const Tab = React.forwardRef(function Tab(
         </div>
       </div>
       {hasSecondaryLabel && (
-        <div className={`${prefix}--tabs__nav-item-secondary-label`}>
+        <div
+          className={`${prefix}--tabs__nav-item-secondary-label`}
+          title={secondaryLabel}>
           {secondaryLabel}
         </div>
       )}