Skip to content

Commit 3b779a7

Browse files
Mil4n0rMil4n0r
authored
Merge pull request #2232 from dxc-technology/jialecl/tabs-improvement
`tabId` prop is no longer required
2 parents c2aa807 + 66e1efb commit 3b779a7

File tree

6 files changed

+134
-64
lines changed

6 files changed

+134
-64
lines changed

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

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

9595
const DxcTab = forwardRef(
9696
(
97-
{ active, disabled, icon, label, notificationNumber, onClick, onHover, title, tabId }: TabProps,
97+
{ active, disabled, icon, label, notificationNumber, onClick, onHover, title, tabId = label }: TabProps,
9898
ref: Ref<HTMLButtonElement>
9999
) => {
100100
const {
@@ -124,7 +124,7 @@ const DxcTab = forwardRef(
124124
}, [focusedTabId, tabId]);
125125

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

130130
return (
@@ -135,7 +135,9 @@ const DxcTab = forwardRef(
135135
hasLabelAndIcon={Boolean(icon && label)}
136136
iconPosition={iconPosition}
137137
onClick={() => {
138-
if (!isControlled) setActiveTabId?.(tabId);
138+
if (!isControlled) {
139+
setActiveTabId?.(tabId ?? "");
140+
}
139141
onClick?.();
140142
}}
141143
onKeyDown={handleOnKeyDown}
@@ -153,10 +155,11 @@ const DxcTab = forwardRef(
153155
role="tab"
154156
tabIndex={activeTabId === label && !disabled ? tabIndex : -1}
155157
type="button"
158+
aria-label={label ?? tabId ?? "tab"}
156159
>
157160
<LabelIconContainer iconPosition={iconPosition}>
158161
{icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>}
159-
<Label>{label}</Label>
162+
{label && <Label>{label}</Label>}
160163
</LabelIconContainer>
161164
{!disabled && notificationNumber && (
162165
<BadgeContainer hasLabelAndIcon={Boolean(icon && label)} iconPosition={iconPosition}>

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

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

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

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

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

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

105105
const tabsIcon = (iconPosition?: "top" | "left") => (
106106
<DxcTabs iconPosition={iconPosition}>
107-
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" icon={iconSVG}>
107+
<DxcTabs.Tab tabId="Tab 1" icon={iconSVG}>
108108
<></>
109109
</DxcTabs.Tab>
110-
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" icon={iconSVG}>
110+
<DxcTabs.Tab tabId="Tab 2" icon={iconSVG}>
111111
<></>
112112
</DxcTabs.Tab>
113-
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" icon={iconSVG} disabled>
113+
<DxcTabs.Tab tabId="Tab 3" icon={iconSVG} disabled>
114114
<></>
115115
</DxcTabs.Tab>
116-
<DxcTabs.Tab tabId="Tab 4" label="Tab 4">
116+
<DxcTabs.Tab tabId="Tab 4" icon="filled_star">
117117
<></>
118118
</DxcTabs.Tab>
119-
<DxcTabs.Tab tabId="Tab 5" label="Tab 5" icon="mail">
119+
<DxcTabs.Tab tabId="Tab 5" icon="mail">
120120
<></>
121121
</DxcTabs.Tab>
122-
<DxcTabs.Tab tabId="Tab 6" label="Tab 6" icon="mail">
122+
<DxcTabs.Tab tabId="Tab 6" icon="mail">
123123
<></>
124124
</DxcTabs.Tab>
125-
<DxcTabs.Tab tabId="Tab 7" label="Tab 7" icon="mail">
125+
<DxcTabs.Tab tabId="Tab 7" icon="mail">
126+
<></>
127+
</DxcTabs.Tab>
128+
</DxcTabs>
129+
);
130+
131+
const tabsIconLabel = (iconPosition?: "top" | "left") => (
132+
<DxcTabs iconPosition={iconPosition}>
133+
<DxcTabs.Tab label="Tab 1" icon={iconSVG}>
134+
<></>
135+
</DxcTabs.Tab>
136+
<DxcTabs.Tab label="Tab 2" icon={iconSVG}>
137+
<></>
138+
</DxcTabs.Tab>
139+
<DxcTabs.Tab label="Tab 3" icon={iconSVG} disabled>
140+
<></>
141+
</DxcTabs.Tab>
142+
<DxcTabs.Tab label="Tab 4" icon="filled_star">
143+
<></>
144+
</DxcTabs.Tab>
145+
<DxcTabs.Tab label="Tab 5" icon="mail">
146+
<></>
147+
</DxcTabs.Tab>
148+
<DxcTabs.Tab label="Tab 6" icon="mail">
149+
<></>
150+
</DxcTabs.Tab>
151+
<DxcTabs.Tab label="Tab 7" icon="mail">
126152
<></>
127153
</DxcTabs.Tab>
128154
</DxcTabs>
129155
);
130156

131157
const tabsNotificationIcon = (iconPosition?: "top" | "left") => (
132158
<DxcTabs iconPosition={iconPosition}>
133-
<DxcTabs.Tab tabId="Tab 1" label="Tab 1" icon={iconSVG} notificationNumber={true}>
159+
<DxcTabs.Tab label="Tab 1" icon={iconSVG} notificationNumber={true}>
134160
<></>
135161
</DxcTabs.Tab>
136-
<DxcTabs.Tab tabId="Tab 2" label="Tab 2" icon={iconSVG} notificationNumber={5}>
162+
<DxcTabs.Tab label="Tab 2" icon={iconSVG} notificationNumber={5}>
137163
<></>
138164
</DxcTabs.Tab>
139-
<DxcTabs.Tab tabId="Tab 3" label="Tab 3" icon={iconSVG} notificationNumber={100} disabled>
165+
<DxcTabs.Tab label="Tab 3" icon={iconSVG} notificationNumber={100} disabled>
140166
<></>
141167
</DxcTabs.Tab>
142-
<DxcTabs.Tab tabId="Tab 4" label="Tab 4" icon={iconSVG} notificationNumber={200}>
168+
<DxcTabs.Tab label="Tab 4" icon={iconSVG} notificationNumber={200}>
143169
<></>
144170
</DxcTabs.Tab>
145-
<DxcTabs.Tab tabId="Tab 5" label="Tab 5" icon={iconSVG}>
171+
<DxcTabs.Tab label="Tab 5" icon={iconSVG}>
146172
<></>
147173
</DxcTabs.Tab>
148-
<DxcTabs.Tab tabId="Tab 6" label="Tab 6" icon={iconSVG}>
174+
<DxcTabs.Tab label="Tab 6" icon={iconSVG}>
149175
<></>
150176
</DxcTabs.Tab>
151-
<DxcTabs.Tab tabId="Tab 7" label="Tab 7" icon={iconSVG}>
177+
<DxcTabs.Tab label="Tab 7" icon={iconSVG}>
152178
<></>
153179
</DxcTabs.Tab>
154180
</DxcTabs>
@@ -187,10 +213,12 @@ const Tabs = () => (
187213
<ExampleContainer>
188214
<Title title="With icon position left" theme="light" level={4} />
189215
{tabsIcon()}
216+
{tabsIconLabel()}
190217
</ExampleContainer>
191218
<ExampleContainer>
192219
<Title title="With icon position top" theme="light" level={4} />
193220
{tabsIcon("top")}
221+
{tabsIconLabel("top")}
194222
</ExampleContainer>
195223
<ExampleContainer>
196224
<Title title="With icon and notification number" theme="light" level={4} />

0 commit comments

Comments
 (0)