Skip to content

Commit c2aa807

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2227 from dxc-technology/jialecl-tabsId
TabId prop added to identify each tab
2 parents a748554 + aaf1818 commit c2aa807

9 files changed

Lines changed: 108 additions & 96 deletions

File tree

‎apps/website/screens/components/tabs/code/TabsCodePage.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -254,21 +254,21 @@ const sections = [
254254
</DxcLink>{" "}
255255
name or SVG element as the icon that will be displayed in the tab. When using Material Symbols,
256256
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
257-
symbol name with <TableCode>"filled_"</TableCode>.
257+
symbol name with <TableCode>"filled_"</TableCode>. The icon or the label, either of which must have a
258+
valid value.
258259
</td>
259260
<td>-</td>
260261
</tr>
261262
<tr>
262263
<td>
263264
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
264-
<StatusBadge status="required" />
265265
label
266266
</DxcFlex>
267267
</td>
268268
<td>
269269
<TableCode>string</TableCode>
270270
</td>
271-
<td>Tab label text.</td>
271+
<td>Tab label text. The icon or the label, either of which must have a valid value.</td>
272272
<td>-</td>
273273
</tr>
274274
<tr>
@@ -301,6 +301,19 @@ const sections = [
301301
<td>This function will be called when the user hovers this tab.</td>
302302
<td>-</td>
303303
</tr>
304+
<tr>
305+
<td>
306+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
307+
<StatusBadge status="required" />
308+
tabId
309+
</DxcFlex>
310+
</td>
311+
<td>
312+
<TableCode>string</TableCode>
313+
</td>
314+
<td>Value used to identify the tab internally.</td>
315+
<td>-</td>
316+
</tr>
304317
<tr>
305318
<td>
306319
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">

‎apps/website/screens/components/tabs/code/examples-new/controlled.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ const code = `() => {
77
return (
88
<DxcInset space="var(--spacing-padding-xl)">
99
<DxcTabs>
10-
<DxcTabs.Tab label="Mail" active={selectedTab === "Mail"} onClick={() => setSelectedTab("Mail")}>
10+
<DxcTabs.Tab tabId="Mail" label="Mail" active={selectedTab === "Mail"} onClick={() => setSelectedTab("Mail")}>
1111
<></>
1212
</DxcTabs.Tab>
13-
<DxcTabs.Tab label="Calendar" active={selectedTab === "Calendar"} onClick={() => setSelectedTab("Calendar")}>
13+
<DxcTabs.Tab tabId="Calendar" label="Calendar" active={selectedTab === "Calendar"} onClick={() => setSelectedTab("Calendar")}>
1414
<></>
1515
</DxcTabs.Tab>
16-
<DxcTabs.Tab label="Contacts" active={selectedTab === "Contacts"} onClick={() => setSelectedTab("Contacts")}>
16+
<DxcTabs.Tab tabId="Contacts" label="Contacts" active={selectedTab === "Contacts"} onClick={() => setSelectedTab("Contacts")}>
1717
<></>
1818
</DxcTabs.Tab>
1919
</DxcTabs>

‎apps/website/screens/components/tabs/code/examples-new/icons.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,13 +23,13 @@ const code = `() => {
2323
return (
2424
<DxcInset space="var(--spacing-padding-xl)">
2525
<DxcTabs>
26-
<DxcTabs.Tab label="3G Mobile" icon={mobileIcon} notificationNumber={true}>
26+
<DxcTabs.Tab tabId="Mobile" icon={mobileIcon} notificationNumber={true}>
2727
<></>
2828
</DxcTabs.Tab>
29-
<DxcTabs.Tab label="Ethernet" icon="settings_ethernet" notificationNumber={2} disabled>
29+
<DxcTabs.Tab tabId="Ethernet" icon="settings_ethernet" notificationNumber={2} disabled>
3030
<></>
3131
</DxcTabs.Tab>
32-
<DxcTabs.Tab label="Wifi" icon="wifi" notificationNumber={120}>
32+
<DxcTabs.Tab tabId="Wifi" icon="wifi" notificationNumber={120}>
3333
<></>
3434
</DxcTabs.Tab>
3535
</DxcTabs>

‎apps/website/screens/components/tabs/code/examples-new/uncontrolled.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ const code = `() => {
44
return (
55
<DxcInset space="var(--spacing-padding-xl)">
66
<DxcTabs>
7-
<DxcTabs.Tab label="Mail" defaultActive>
7+
<DxcTabs.Tab tabId="Mail" label="Mail" defaultActive>
88
<></>
99
</DxcTabs.Tab>
10-
<DxcTabs.Tab label="Calendar">
10+
<DxcTabs.Tab tabId="Calendar" label="Calendar">
1111
<></>
1212
</DxcTabs.Tab>
13-
<DxcTabs.Tab label="Contacts">
13+
<DxcTabs.Tab tabId="Contacts" label="Contacts">
1414
<></>
1515
</DxcTabs.Tab></DxcTabs>
1616
</DxcInset>

‎packages/lib/src/tabs/Tab.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -94,15 +94,15 @@ const Underline = styled.span<{ active: boolean }>`
9494

9595
const DxcTab = forwardRef(
9696
(
97-
{ active, disabled, icon, label, notificationNumber, onClick, onHover, title }: TabProps,
97+
{ active, disabled, icon, label, notificationNumber, onClick, onHover, title, tabId }: TabProps,
9898
ref: Ref<HTMLButtonElement>
9999
) => {
100100
const {
101-
activeLabel,
102-
focusedLabel,
101+
activeTabId,
102+
focusedTabId,
103103
iconPosition,
104104
isControlled,
105-
setActiveLabel,
105+
setActiveTabId,
106106
tabIndex = 0,
107107
} = useContext(TabsContext) ?? {};
108108
const tabRef = useRef<HTMLButtonElement | null>(null);
@@ -120,22 +120,22 @@ const DxcTab = forwardRef(
120120
};
121121

122122
useEffect(() => {
123-
if (focusedLabel === label) tabRef?.current?.focus();
124-
}, [focusedLabel, label]);
123+
if (focusedTabId === tabId) tabRef?.current?.focus();
124+
}, [focusedTabId, tabId]);
125125

126126
useEffect(() => {
127-
if (active) setActiveLabel?.(label);
128-
}, [active, label, setActiveLabel]);
127+
if (active) setActiveTabId?.(tabId);
128+
}, [active, tabId, setActiveTabId]);
129129

130130
return (
131131
<Tooltip label={title}>
132132
<Tab
133-
aria-selected={activeLabel === label}
133+
aria-selected={activeTabId === tabId}
134134
disabled={disabled}
135135
hasLabelAndIcon={Boolean(icon && label)}
136136
iconPosition={iconPosition}
137137
onClick={() => {
138-
if (!isControlled) setActiveLabel?.(label);
138+
if (!isControlled) setActiveTabId?.(tabId);
139139
onClick?.();
140140
}}
141141
onKeyDown={handleOnKeyDown}
@@ -151,7 +151,7 @@ const DxcTab = forwardRef(
151151
}
152152
}}
153153
role="tab"
154-
tabIndex={activeLabel === label && !disabled ? tabIndex : -1}
154+
tabIndex={activeTabId === label && !disabled ? tabIndex : -1}
155155
type="button"
156156
>
157157
<LabelIconContainer iconPosition={iconPosition}>
@@ -167,7 +167,7 @@ const DxcTab = forwardRef(
167167
/>
168168
</BadgeContainer>
169169
)}
170-
<Underline active={activeLabel === label} />
170+
<Underline active={activeTabId === tabId} />
171171
</Tab>
172172
</Tooltip>
173173
);

‎packages/lib/src/tabs/Tabs.stories.tsx‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -24,131 +24,131 @@ const iconSVG = (
2424

2525
const tabs = (margin?: Space | Margin) => (
2626
<DxcTabs margin={margin}>
27-
<DxcTabs.Tab label="Tab 1" title="test tooltip">
27+
<DxcTabs.Tab label="Tab 1" tabId="Tab 1" title="test tooltip">
2828
<></>
2929
</DxcTabs.Tab>
30-
<DxcTabs.Tab label="Tab 2">
30+
<DxcTabs.Tab tabId="Tab 2" label="Tab 2">
3131
<></>
3232
</DxcTabs.Tab>
33-
<DxcTabs.Tab label="Tab 3" disabled>
33+
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" disabled>
3434
<></>
3535
</DxcTabs.Tab>
36-
<DxcTabs.Tab label="Tab 4">
36+
<DxcTabs.Tab tabId="Tab 4" label="Tab 4">
3737
<></>
3838
</DxcTabs.Tab>
39-
<DxcTabs.Tab label="Tab 5">
39+
<DxcTabs.Tab tabId="Tab 5" label="Tab 5">
4040
<></>
4141
</DxcTabs.Tab>
42-
<DxcTabs.Tab label="Tab 6">
42+
<DxcTabs.Tab tabId="Tab 6" label="Tab 6">
4343
<></>
4444
</DxcTabs.Tab>
45-
<DxcTabs.Tab label="Tab 7">
45+
<DxcTabs.Tab tabId="Tab 7" label="Tab 7">
4646
<></>
4747
</DxcTabs.Tab>
4848
</DxcTabs>
4949
);
5050

5151
const disabledTabs = (
5252
<DxcTabs>
53-
<DxcTabs.Tab label="Tab 1" disabled>
53+
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" disabled>
5454
<></>
5555
</DxcTabs.Tab>
56-
<DxcTabs.Tab label="Tab 2" disabled>
56+
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" disabled>
5757
<></>
5858
</DxcTabs.Tab>
59-
<DxcTabs.Tab label="Tab 3" disabled>
59+
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" disabled>
6060
<></>
6161
</DxcTabs.Tab>
6262
</DxcTabs>
6363
);
6464

6565
const firstDisabledTabs = (
6666
<DxcTabs>
67-
<DxcTabs.Tab label="Tab 1" disabled>
67+
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" disabled>
6868
<></>
6969
</DxcTabs.Tab>
70-
<DxcTabs.Tab label="Tab 2" disabled>
70+
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" disabled>
7171
<></>
7272
</DxcTabs.Tab>
73-
<DxcTabs.Tab label="Tab 3">
73+
<DxcTabs.Tab tabId="Tab 3" label="Tab 3">
7474
<></>
7575
</DxcTabs.Tab>
7676
</DxcTabs>
7777
);
7878

7979
const tabsNotification = (iconPosition?: "top" | "left") => (
8080
<DxcTabs iconPosition={iconPosition}>
81-
<DxcTabs.Tab label="Tab 1" notificationNumber={true}>
81+
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" notificationNumber={true}>
8282
<></>
8383
</DxcTabs.Tab>
84-
<DxcTabs.Tab label="Tab 2" notificationNumber={5}>
84+
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" notificationNumber={5}>
8585
<></>
8686
</DxcTabs.Tab>
87-
<DxcTabs.Tab label="Tab 3" notificationNumber={100} disabled>
87+
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" notificationNumber={100} disabled>
8888
<></>
8989
</DxcTabs.Tab>
90-
<DxcTabs.Tab label="Tab 4" notificationNumber={200}>
90+
<DxcTabs.Tab tabId="Tab 4" label="Tab 4" notificationNumber={200}>
9191
<></>
9292
</DxcTabs.Tab>
93-
<DxcTabs.Tab label="Tab 5">
93+
<DxcTabs.Tab tabId="Tab 5" label="Tab 5">
9494
<></>
9595
</DxcTabs.Tab>
96-
<DxcTabs.Tab label="Tab 6">
96+
<DxcTabs.Tab tabId="Tab 6" label="Tab 6">
9797
<></>
9898
</DxcTabs.Tab>
99-
<DxcTabs.Tab label="Tab 7">
99+
<DxcTabs.Tab tabId="Tab 7" label="Tab 7">
100100
<></>
101101
</DxcTabs.Tab>
102102
</DxcTabs>
103103
);
104104

105105
const tabsIcon = (iconPosition?: "top" | "left") => (
106106
<DxcTabs iconPosition={iconPosition}>
107-
<DxcTabs.Tab label="Tab 1" icon={iconSVG}>
107+
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" icon={iconSVG}>
108108
<></>
109109
</DxcTabs.Tab>
110-
<DxcTabs.Tab label="Tab 2" icon={iconSVG}>
110+
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" icon={iconSVG}>
111111
<></>
112112
</DxcTabs.Tab>
113-
<DxcTabs.Tab label="Tab 3" icon={iconSVG} disabled>
113+
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" icon={iconSVG} disabled>
114114
<></>
115115
</DxcTabs.Tab>
116-
<DxcTabs.Tab label="Tab 4">
116+
<DxcTabs.Tab tabId="Tab 4" label="Tab 4">
117117
<></>
118118
</DxcTabs.Tab>
119-
<DxcTabs.Tab label="Tab 5" icon="mail">
119+
<DxcTabs.Tab tabId="Tab 5" label="Tab 5" icon="mail">
120120
<></>
121121
</DxcTabs.Tab>
122-
<DxcTabs.Tab label="Tab 6" icon="mail">
122+
<DxcTabs.Tab tabId="Tab 6" label="Tab 6" icon="mail">
123123
<></>
124124
</DxcTabs.Tab>
125-
<DxcTabs.Tab label="Tab 7" icon="mail">
125+
<DxcTabs.Tab tabId="Tab 7" label="Tab 7" icon="mail">
126126
<></>
127127
</DxcTabs.Tab>
128128
</DxcTabs>
129129
);
130130

131131
const tabsNotificationIcon = (iconPosition?: "top" | "left") => (
132132
<DxcTabs iconPosition={iconPosition}>
133-
<DxcTabs.Tab label="Tab 1" icon={iconSVG} notificationNumber={true}>
133+
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" icon={iconSVG} notificationNumber={true}>
134134
<></>
135135
</DxcTabs.Tab>
136-
<DxcTabs.Tab label="Tab 2" icon={iconSVG} notificationNumber={5}>
136+
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" icon={iconSVG} notificationNumber={5}>
137137
<></>
138138
</DxcTabs.Tab>
139-
<DxcTabs.Tab label="Tab 3" icon={iconSVG} notificationNumber={100} disabled>
139+
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" icon={iconSVG} notificationNumber={100} disabled>
140140
<></>
141141
</DxcTabs.Tab>
142-
<DxcTabs.Tab label="Tab 4" icon={iconSVG} notificationNumber={200}>
142+
<DxcTabs.Tab tabId="Tab 4" label="Tab 4" icon={iconSVG} notificationNumber={200}>
143143
<></>
144144
</DxcTabs.Tab>
145-
<DxcTabs.Tab label="Tab 5" icon={iconSVG}>
145+
<DxcTabs.Tab tabId="Tab 5" label="Tab 5" icon={iconSVG}>
146146
<></>
147147
</DxcTabs.Tab>
148-
<DxcTabs.Tab label="Tab 6" icon={iconSVG}>
148+
<DxcTabs.Tab tabId="Tab 6" label="Tab 6" icon={iconSVG}>
149149
<></>
150150
</DxcTabs.Tab>
151-
<DxcTabs.Tab label="Tab 7" icon={iconSVG}>
151+
<DxcTabs.Tab tabId="Tab 7" label="Tab 7" icon={iconSVG}>
152152
<></>
153153
</DxcTabs.Tab>
154154
</DxcTabs>

0 commit comments

Comments
 (0)