diff --git a/packages/react/src/components/Tabs/Tabs.mdx b/packages/react/src/components/Tabs/Tabs.mdx index bb682752b10f..498ce7f4c2cf 100644 --- a/packages/react/src/components/Tabs/Tabs.mdx +++ b/packages/react/src/components/Tabs/Tabs.mdx @@ -64,9 +64,9 @@ First, we'll want to import the components from the react package. import { Tabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react'; ``` -In order to be able to "close" or "remove" tabs, we'll need to access and -render your tabs programmatically. For such purposes we'll need to store your -tabs in an array variable and put them in the state +In order to be able to "close" or "remove" tabs, we'll need to access and render +your tabs programmatically. For such purposes we'll need to store your tabs in +an array variable and put them in the state ```js const tabs = [ @@ -91,13 +91,13 @@ const tabs = [ const [renderedTabs, setRenderedTabs] = useState(tabs); ``` -The `Tabs` component accepts an `onTabCloseRequest` prop function that will forward -us the index of the requested tab to be closed. You may use this function to -open up a confirmation modal previous to deleting the tab; in our case, we'll -just go ahead and remove that tab directly from the `renderedTab`s array and -cover for some `selectedIndex` edge cases (i.e., when a tab is removed from the -array, the selectedIndex might need to be updated to point to a new tab or -index). +The `Tabs` component accepts an `onTabCloseRequest` prop function that will +forward us the index of the requested tab to be closed. You may use this +function to open up a confirmation modal previous to deleting the tab; in our +case, we'll just go ahead and remove that tab directly from the `renderedTab`s +array and cover for some `selectedIndex` edge cases (i.e., when a tab is removed +from the array, the selectedIndex might need to be updated to point to a new tab +or index). In order to be able to modify the `selectedIndex` on our end we'll need to use the `Tabs` component in a controlled state, which means we'll also have to @@ -112,6 +112,11 @@ const handleTabChange = (evt) => { }; const handleCloseTabRequest = (tabIndex) => { + // ignore close requests on disabled tabs + if (renderedTabs[tabIndex].disabled) { + return; + } + const selectedTab = renderedTabs[selectedIndex]; const filteredTabs = renderedTabs.filter((_, index) => index !== tabIndex); @@ -154,9 +159,7 @@ return ( onTabCloseRequest={handleCloseTabRequest}> {renderedTabs.map((tab, index) => ( - + {tab.label} ))} diff --git a/packages/react/src/components/Tabs/Tabs.stories.js b/packages/react/src/components/Tabs/Tabs.stories.js index cf15e29679f5..362f4119916e 100644 --- a/packages/react/src/components/Tabs/Tabs.stories.js +++ b/packages/react/src/components/Tabs/Tabs.stories.js @@ -100,6 +100,9 @@ export const Dismissable = () => { }; const handleCloseTabRequest = (tabIndex) => { + if (renderedTabs[tabIndex].disabled) { + return; + } const selectedTab = renderedTabs[selectedIndex]; const filteredTabs = renderedTabs.filter((_, index) => index !== tabIndex); @@ -168,6 +171,9 @@ export const DismissableWithIcons = ({ contained }) => { }; const handleCloseTabRequest = (tabIndex) => { + if (renderedTabs[tabIndex].disabled) { + return; + } const selectedTab = renderedTabs[selectedIndex]; const filteredTabs = renderedTabs.filter((_, index) => index !== tabIndex); diff --git a/packages/styles/scss/components/tabs/_tabs.scss b/packages/styles/scss/components/tabs/_tabs.scss index c5ef03ef50c7..cf2e27ffefb9 100644 --- a/packages/styles/scss/components/tabs/_tabs.scss +++ b/packages/styles/scss/components/tabs/_tabs.scss @@ -326,7 +326,6 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px)); .#{$prefix}--tabs__nav-item--close-icon { padding: $spacing-02; margin: -$spacing-02; - cursor: pointer; line-height: 0; pointer-events: auto; }