feat(Tabs): allow dismissable tabs to have descriptive icons (#13830)

* feat(Tabs): allow dismissable tabs to have descriptive icons * fix(Tabs): default contained ctrl to true in dismissable tabs w. icons * fix(Tabs): remove temporary contained control --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 1, 2023 · ad1031b · ad1031b
1 parent 4943209
commit ad1031b
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 10 deletions.
diff --git a/e2e/components/Tabs/Tabs-test.e2e.js b/e2e/components/Tabs/Tabs-test.e2e.js
@@ -30,6 +30,14 @@ test.describe('Tabs', () => {
         });
       });
 
+      test('dismissable with icons @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'Tabs',
+          id: 'components-tabs--dismissable-with-icons',
+          theme,
+        });
+      });
+
       test('manual @vrt', async ({ page }) => {
         await snapshotStory(page, {
           component: 'Tabs',

diff --git a/packages/react/src/components/Tabs/Tabs-test.js b/packages/react/src/components/Tabs/Tabs-test.js
@@ -160,6 +160,7 @@ describe('Tab', () => {
         </TabPanels>
       </Tabs>
     );
+    // eslint-disable-next-line testing-library/no-node-access
     expect(screen.queryByText('test-secondary-label')).not.toBeInTheDocument();
   });
 
@@ -272,10 +273,9 @@ describe('Tab', () => {
       </Tabs>
     );
 
-    expect(
-      // eslint-disable-next-line testing-library/no-node-access
-      screen.queryAllByLabelText('Close tab')[0].parentElement
-    ).toHaveClass(`${prefix}--visually-hidden`);
+    expect(screen.queryAllByLabelText('Close tab')[0]).toHaveClass(
+      `${prefix}--visually-hidden`
+    );
   });
 
   it('should call onCloseTabRequest when dismissable and close icon clicked', async () => {
@@ -388,7 +388,28 @@ describe('Tab', () => {
     }
   });
 
-  it('should render close icon instead of renderIcon when dismissable', () => {
+  it('should render close icon when dismissable', () => {
+    render(
+      <Tabs dismissable>
+        <TabList aria-label="List of tabs">
+          <Tab>Tab Label 1</Tab>
+          <Tab>Tab Label 2</Tab>
+          <Tab>Tab Label 3</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>Tab Panel 1</TabPanel>
+          <TabPanel>Tab Panel 2</TabPanel>
+          <TabPanel>Tab Panel 3</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    expect(screen.getAllByLabelText('Close tab')[0]).not.toHaveClass(
+      `${prefix}--visaully-hidden`
+    );
+  });
+
+  it('should render close icon and renderIcon when dismissable and icon supplied', () => {
     render(
       <Tabs dismissable>
         <TabList aria-label="List of tabs">
@@ -404,11 +425,14 @@ describe('Tab', () => {
       </Tabs>
     );
 
-    expect(
-      // eslint-disable-next-line testing-library/no-node-access
-      screen.getAllByLabelText('Close tab')[0].parentElement
-    ).not.toHaveClass(`${prefix}--visaully-hidden`);
-    expect(screen.queryByTestId('svg')).not.toBeInTheDocument();
+    expect(screen.getAllByLabelText('Close tab')[0]).not.toHaveClass(
+      `${prefix}--visaully-hidden`
+    );
+    expect(screen.getByTestId('svg')).toBeInTheDocument();
+    // eslint-disable-next-line testing-library/no-node-access
+    expect(screen.getByTestId('svg').parentElement).toHaveClass(
+      `${prefix}--tabs__nav-item--icon-left`
+    );
   });
 });
 

diff --git a/packages/react/src/components/Tabs/Tabs.js b/packages/react/src/components/Tabs/Tabs.js
@@ -646,6 +646,11 @@ const Tab = React.forwardRef(function Tab(
       tabIndex={selectedIndex === index ? '0' : '-1'}
       type="button">
       <div className={`${prefix}--tabs__nav-item-label-wrapper`}>
+        {dismissable && Icon && (
+          <div className={`${prefix}--tabs__nav-item--icon-left`}>
+            {<Icon size={16} />}
+          </div>
+        )}
         <span className={`${prefix}--tabs__nav-item-label`}>{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

diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js
@@ -139,6 +139,76 @@ export const Dismissable = () => {
   );
 };
 
+export const DismissableWithIcons = ({ contained }) => {
+  const tabs = [
+    {
+      label: 'Tab label 1',
+      panel: <TabPanel>Tab Panel 1</TabPanel>,
+    },
+    {
+      label: 'Tab label 2',
+      panel: <TabPanel>Tab Panel 2</TabPanel>,
+    },
+    {
+      label: 'Tab label 3',
+      panel: <TabPanel>Tab Panel 3</TabPanel>,
+      disabled: true,
+    },
+    {
+      label: 'Tab label 4',
+      panel: <TabPanel>Tab Panel 4</TabPanel>,
+    },
+  ];
+  const [renderedTabs, setRenderedTabs] = useState(tabs);
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const handleTabChange = (evt) => {
+    setSelectedIndex(evt.selectedIndex);
+  };
+
+  const handleCloseTabRequest = (tabIndex) => {
+    const selectedTab = renderedTabs[selectedIndex];
+
+    const filteredTabs = renderedTabs.filter((_, index) => index !== tabIndex);
+    if (tabIndex === selectedIndex) {
+      const defaultTabIndex = filteredTabs.findIndex((tab) => !tab.disabled);
+      setSelectedIndex(defaultTabIndex);
+    } else {
+      setSelectedIndex(filteredTabs.indexOf(selectedTab));
+    }
+    setRenderedTabs(filteredTabs);
+  };
+
+  const resetTabs = () => {
+    setRenderedTabs(tabs);
+  };
+
+  const icons = [Bat, Bee, Corn, Monster];
+
+  return (
+    <>
+      <Button style={{ marginBottom: '3rem' }} onClick={resetTabs}>
+        Reset
+      </Button>
+      <Tabs
+        selectedIndex={selectedIndex}
+        onChange={handleTabChange}
+        dismissable
+        onTabCloseRequest={handleCloseTabRequest}>
+        <TabList aria-label="List of tabs" contained={contained}>
+          {renderedTabs.map((tab, index) => (
+            <Tab key={index} disabled={tab.disabled} renderIcon={icons[index]}>
+              {tab.label}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>{renderedTabs.map((tab) => tab.panel)}</TabPanels>
+      </Tabs>
+    </>
+  );
+};
+
 export const WithIcons = () => (
   <Tabs>
     <TabList activation="manual" aria-label="List of tabs">

diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss
@@ -332,6 +332,13 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
       }
     }
 
+    .#{$prefix}--tabs__nav-item--icon-left {
+      display: flex;
+      align-items: center;
+      padding-right: $spacing-03;
+      margin-top: -2px;
+    }
+
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {
       padding-left: $spacing-05;
     }