Skip to content

TabId prop added to identify each tab #2227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Mil4n0r merged 3 commits into from
May 19, 2025
Merged

TabId prop added to identify each tab #2227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c55a139
TabId prop added to identify each tab
Jialecl May 15, 2025
5d2092f
required tab added
Jialecl May 15, 2025
aaf1818
types error in legacyTab fixed
Jialecl May 15, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions apps/website/screens/components/tabs/code/TabsCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,21 +254,21 @@ const sections = [
</DxcLink>{" "}
name or SVG element as the icon that will be displayed in the tab. When using Material Symbols,
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
symbol name with <TableCode>"filled_"</TableCode>.
symbol name with <TableCode>"filled_"</TableCode>. The icon or the label, either of which must have a
valid value.
</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
label
</DxcFlex>
</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Tab label text.</td>
<td>Tab label text. The icon or the label, either of which must have a valid value.</td>
<td>-</td>
</tr>
<tr>
Expand Down Expand Up @@ -301,6 +301,19 @@ const sections = [
<td>This function will be called when the user hovers this tab.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
tabId
</DxcFlex>
</td>
<td>
<TableCode>string</TableCode>
</td>
<td>Value used to identify the tab internally.</td>
<td>-</td>
</tr>
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
Expand Down
6 changes: 3 additions & 3 deletions apps/website/screens/components/tabs/code/examples-new/controlled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ const code = `() => {
return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcTabs>
<DxcTabs.Tab label="Mail" active={selectedTab === "Mail"} onClick={() => setSelectedTab("Mail")}>
<DxcTabs.Tab tabId="Mail" label="Mail" active={selectedTab === "Mail"} onClick={() => setSelectedTab("Mail")}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Calendar" active={selectedTab === "Calendar"} onClick={() => setSelectedTab("Calendar")}>
<DxcTabs.Tab tabId="Calendar" label="Calendar" active={selectedTab === "Calendar"} onClick={() => setSelectedTab("Calendar")}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Contacts" active={selectedTab === "Contacts"} onClick={() => setSelectedTab("Contacts")}>
<DxcTabs.Tab tabId="Contacts" label="Contacts" active={selectedTab === "Contacts"} onClick={() => setSelectedTab("Contacts")}>
<></>
</DxcTabs.Tab>
</DxcTabs>
Expand Down
6 changes: 3 additions & 3 deletions apps/website/screens/components/tabs/code/examples-new/icons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,13 +23,13 @@ const code = `() => {
return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcTabs>
<DxcTabs.Tab label="3G Mobile" icon={mobileIcon} notificationNumber={true}>
<DxcTabs.Tab tabId="Mobile" icon={mobileIcon} notificationNumber={true}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Ethernet" icon="settings_ethernet" notificationNumber={2} disabled>
<DxcTabs.Tab tabId="Ethernet" icon="settings_ethernet" notificationNumber={2} disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Wifi" icon="wifi" notificationNumber={120}>
<DxcTabs.Tab tabId="Wifi" icon="wifi" notificationNumber={120}>
<></>
</DxcTabs.Tab>
</DxcTabs>
Expand Down
6 changes: 3 additions & 3 deletions apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ const code = `() => {
return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcTabs>
<DxcTabs.Tab label="Mail" defaultActive>
<DxcTabs.Tab tabId="Mail" label="Mail" defaultActive>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Calendar">
<DxcTabs.Tab tabId="Calendar" label="Calendar">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Contacts">
<DxcTabs.Tab tabId="Contacts" label="Contacts">
<></>
</DxcTabs.Tab></DxcTabs>
</DxcInset>
Expand Down
24 changes: 12 additions & 12 deletions packages/lib/src/tabs/Tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,15 +94,15 @@ const Underline = styled.span<{ active: boolean }>`

const DxcTab = forwardRef(
(
{ active, disabled, icon, label, notificationNumber, onClick, onHover, title }: TabProps,
{ active, disabled, icon, label, notificationNumber, onClick, onHover, title, tabId }: TabProps,
ref: Ref<HTMLButtonElement>
) => {
const {
activeLabel,
focusedLabel,
activeTabId,
focusedTabId,
iconPosition,
isControlled,
setActiveLabel,
setActiveTabId,
tabIndex = 0,
} = useContext(TabsContext) ?? {};
const tabRef = useRef<HTMLButtonElement | null>(null);
Expand All @@ -120,22 +120,22 @@ const DxcTab = forwardRef(
};

useEffect(() => {
if (focusedLabel === label) tabRef?.current?.focus();
}, [focusedLabel, label]);
if (focusedTabId === tabId) tabRef?.current?.focus();
}, [focusedTabId, tabId]);

useEffect(() => {
if (active) setActiveLabel?.(label);
}, [active, label, setActiveLabel]);
if (active) setActiveTabId?.(tabId);
}, [active, tabId, setActiveTabId]);

return (
<Tooltip label={title}>
<Tab
aria-selected={activeLabel === label}
aria-selected={activeTabId === tabId}
disabled={disabled}
hasLabelAndIcon={Boolean(icon && label)}
iconPosition={iconPosition}
onClick={() => {
if (!isControlled) setActiveLabel?.(label);
if (!isControlled) setActiveTabId?.(tabId);
onClick?.();
}}
onKeyDown={handleOnKeyDown}
Expand All @@ -151,7 +151,7 @@ const DxcTab = forwardRef(
}
}}
role="tab"
tabIndex={activeLabel === label && !disabled ? tabIndex : -1}
tabIndex={activeTabId === label && !disabled ? tabIndex : -1}
type="button"
>
<LabelIconContainer iconPosition={iconPosition}>
Expand All @@ -167,7 +167,7 @@ const DxcTab = forwardRef(
/>
</BadgeContainer>
)}
<Underline active={activeLabel === label} />
<Underline active={activeTabId === tabId} />
</Tab>
</Tooltip>
);
Expand Down
68 changes: 34 additions & 34 deletions packages/lib/src/tabs/Tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,131 +24,131 @@ const iconSVG = (

const tabs = (margin?: Space | Margin) => (
<DxcTabs margin={margin}>
<DxcTabs.Tab label="Tab 1" title="test tooltip">
<DxcTabs.Tab label="Tab 1" tabId="Tab 1" title="test tooltip">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 2">
<DxcTabs.Tab tabId="Tab 2" label="Tab 2">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 3" disabled>
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 4">
<DxcTabs.Tab tabId="Tab 4" label="Tab 4">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 5">
<DxcTabs.Tab tabId="Tab 5" label="Tab 5">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 6">
<DxcTabs.Tab tabId="Tab 6" label="Tab 6">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 7">
<DxcTabs.Tab tabId="Tab 7" label="Tab 7">
<></>
</DxcTabs.Tab>
</DxcTabs>
);

const disabledTabs = (
<DxcTabs>
<DxcTabs.Tab label="Tab 1" disabled>
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 2" disabled>
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 3" disabled>
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" disabled>
<></>
</DxcTabs.Tab>
</DxcTabs>
);

const firstDisabledTabs = (
<DxcTabs>
<DxcTabs.Tab label="Tab 1" disabled>
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 2" disabled>
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 3">
<DxcTabs.Tab tabId="Tab 3" label="Tab 3">
<></>
</DxcTabs.Tab>
</DxcTabs>
);

const tabsNotification = (iconPosition?: "top" | "left") => (
<DxcTabs iconPosition={iconPosition}>
<DxcTabs.Tab label="Tab 1" notificationNumber={true}>
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" notificationNumber={true}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 2" notificationNumber={5}>
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" notificationNumber={5}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 3" notificationNumber={100} disabled>
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" notificationNumber={100} disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 4" notificationNumber={200}>
<DxcTabs.Tab tabId="Tab 4" label="Tab 4" notificationNumber={200}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 5">
<DxcTabs.Tab tabId="Tab 5" label="Tab 5">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 6">
<DxcTabs.Tab tabId="Tab 6" label="Tab 6">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 7">
<DxcTabs.Tab tabId="Tab 7" label="Tab 7">
<></>
</DxcTabs.Tab>
</DxcTabs>
);

const tabsIcon = (iconPosition?: "top" | "left") => (
<DxcTabs iconPosition={iconPosition}>
<DxcTabs.Tab label="Tab 1" icon={iconSVG}>
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" icon={iconSVG}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 2" icon={iconSVG}>
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" icon={iconSVG}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 3" icon={iconSVG} disabled>
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" icon={iconSVG} disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 4">
<DxcTabs.Tab tabId="Tab 4" label="Tab 4">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 5" icon="mail">
<DxcTabs.Tab tabId="Tab 5" label="Tab 5" icon="mail">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 6" icon="mail">
<DxcTabs.Tab tabId="Tab 6" label="Tab 6" icon="mail">
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 7" icon="mail">
<DxcTabs.Tab tabId="Tab 7" label="Tab 7" icon="mail">
<></>
</DxcTabs.Tab>
</DxcTabs>
);

const tabsNotificationIcon = (iconPosition?: "top" | "left") => (
<DxcTabs iconPosition={iconPosition}>
<DxcTabs.Tab label="Tab 1" icon={iconSVG} notificationNumber={true}>
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" icon={iconSVG} notificationNumber={true}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 2" icon={iconSVG} notificationNumber={5}>
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" icon={iconSVG} notificationNumber={5}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 3" icon={iconSVG} notificationNumber={100} disabled>
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" icon={iconSVG} notificationNumber={100} disabled>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 4" icon={iconSVG} notificationNumber={200}>
<DxcTabs.Tab tabId="Tab 4" label="Tab 4" icon={iconSVG} notificationNumber={200}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 5" icon={iconSVG}>
<DxcTabs.Tab tabId="Tab 5" label="Tab 5" icon={iconSVG}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 6" icon={iconSVG}>
<DxcTabs.Tab tabId="Tab 6" label="Tab 6" icon={iconSVG}>
<></>
</DxcTabs.Tab>
<DxcTabs.Tab label="Tab 7" icon={iconSVG}>
<DxcTabs.Tab tabId="Tab 7" label="Tab 7" icon={iconSVG}>
<></>
</DxcTabs.Tab>
</DxcTabs>
Expand Down
Loading