Skip to content

Commit a6d0357

Browse files
PelayoFelguerosoPelayoFelgueroso
authored
Merge pull request #2293 from dxc-technology/Mil4n0r/fix_tabs_typing
Fix tabs typing
2 parents ef8bf5c + ed09e75 commit a6d0357

File tree

2 files changed

+160
-142
lines changed

2 files changed

+160
-142
lines changed

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

Lines changed: 154 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
1+
import { DxcAlert, DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
22
import QuickNavContainer from "@/common/QuickNavContainer";
33
import DocFooter from "@/common/DocFooter";
44
import Example from "@/common/example/Example";
@@ -81,144 +81,159 @@ const sections = [
8181
{
8282
title: "Props",
8383
content: (
84-
<DxcTable>
85-
<thead>
86-
<tr>
87-
<th>Name</th>
88-
<th>Type</th>
89-
<th>Description</th>
90-
<th>Default</th>
91-
</tr>
92-
</thead>
93-
<tbody>
94-
<tr>
95-
<td>active</td>
96-
<td>
97-
<TableCode>boolean</TableCode>
98-
</td>
99-
<td>Whether the tab is active or not.</td>
100-
<td>
101-
<TableCode>false</TableCode>
102-
</td>
103-
</tr>
104-
<tr>
105-
<td>
106-
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
107-
<StatusBadge status="required" />
108-
children
109-
</DxcFlex>
110-
</td>
111-
<td>
112-
<TableCode>React.ReactNode</TableCode>
113-
</td>
114-
<td>Contains the component to be rendered when this tab is active.</td>
115-
<td>-</td>
116-
</tr>
117-
<tr>
118-
<td>defaultActive</td>
119-
<td>
120-
<TableCode>boolean</TableCode>
121-
</td>
122-
<td>Whether the tab is active or not by default, but mantaining the uncontrolled behaviour.</td>
123-
<td>
124-
<TableCode>false</TableCode>
125-
</td>
126-
</tr>
127-
<tr>
128-
<td>disabled</td>
129-
<td>
130-
<TableCode>boolean</TableCode>
131-
</td>
132-
<td>Whether the tab is disabled or not.</td>
133-
<td>
134-
<TableCode>false</TableCode>
135-
</td>
136-
</tr>
137-
<tr>
138-
<td>icon</td>
139-
<td>
140-
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
141-
</td>
142-
<td>
143-
<DxcLink newWindow href="https://fonts.google.com/icons">
144-
Material Symbol
145-
</DxcLink>{" "}
146-
name or SVG element as the icon that will be displayed in the tab. When using Material Symbols,
147-
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
148-
symbol name with <TableCode>"filled_"</TableCode>. The icon or the label, either of which must have a
149-
valid value.
150-
</td>
151-
<td>-</td>
152-
</tr>
153-
<tr>
154-
<td>
155-
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
156-
label
157-
</DxcFlex>
158-
</td>
159-
<td>
160-
<TableCode>string</TableCode>
161-
</td>
162-
<td>Tab label text. The icon or the label, either of which must have a valid value.</td>
163-
<td>-</td>
164-
</tr>
165-
<tr>
166-
<td>notificationNumber</td>
167-
<td>
168-
<TableCode>boolean | number</TableCode>
169-
</td>
170-
<td>
171-
If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a
172-
number is specified, the component will display a badge with the value as its label. Take into account
173-
that if that number is greater than 99, it will appear as <TableCode>+99</TableCode> in the badge.
174-
</td>
175-
<td>
176-
<TableCode>false</TableCode>
177-
</td>
178-
</tr>
179-
<tr>
180-
<td>onClick</td>
181-
<td>
182-
<TableCode>{"() => void"}</TableCode>
183-
</td>
184-
<td>This function will be called when the user clicks on this tab. This feature is mostly recommended for compatibility with third-party routing APIs.</td>
185-
<td>-</td>
186-
</tr>
187-
<tr>
188-
<td>onHover</td>
189-
<td>
190-
<TableCode>{"() => void"}</TableCode>
191-
</td>
192-
<td>This function will be called when the user hovers this tab.</td>
193-
<td>-</td>
194-
</tr>
195-
<tr>
196-
<td>
197-
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
198-
<StatusBadge status="required" />
199-
tabId
200-
</DxcFlex>
201-
</td>
202-
<td>
203-
<TableCode>string</TableCode>
204-
</td>
205-
<td>Value used to identify the tab internally.</td>
206-
<td>-</td>
207-
</tr>
208-
<tr>
209-
<td>
210-
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
211-
title
212-
</DxcFlex>
213-
</td>
214-
<td>
215-
<TableCode>string</TableCode>
216-
</td>
217-
<td>Tooltip text for the tab.</td>
218-
<td>-</td>
219-
</tr>
220-
</tbody>
221-
</DxcTable>
84+
<DxcFlex direction="column" gap="var(--spacing-gap-l)">
85+
<DxcTable>
86+
<thead>
87+
<tr>
88+
<th>Name</th>
89+
<th>Type</th>
90+
<th>Description</th>
91+
<th>Default</th>
92+
</tr>
93+
</thead>
94+
<tbody>
95+
<tr>
96+
<td>active</td>
97+
<td>
98+
<TableCode>boolean</TableCode>
99+
</td>
100+
<td>Whether the tab is active or not.</td>
101+
<td>
102+
<TableCode>false</TableCode>
103+
</td>
104+
</tr>
105+
<tr>
106+
<td>
107+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
108+
<StatusBadge status="required" />
109+
children
110+
</DxcFlex>
111+
</td>
112+
<td>
113+
<TableCode>React.ReactNode</TableCode>
114+
</td>
115+
<td>Contains the component to be rendered when this tab is active.</td>
116+
<td>-</td>
117+
</tr>
118+
<tr>
119+
<td>defaultActive</td>
120+
<td>
121+
<TableCode>boolean</TableCode>
122+
</td>
123+
<td>Whether the tab is active or not by default, but mantaining the uncontrolled behaviour.</td>
124+
<td>
125+
<TableCode>false</TableCode>
126+
</td>
127+
</tr>
128+
<tr>
129+
<td>disabled</td>
130+
<td>
131+
<TableCode>boolean</TableCode>
132+
</td>
133+
<td>Whether the tab is disabled or not.</td>
134+
<td>
135+
<TableCode>false</TableCode>
136+
</td>
137+
</tr>
138+
<tr>
139+
<td>icon</td>
140+
<td>
141+
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
142+
</td>
143+
<td>
144+
<DxcLink newWindow href="https://fonts.google.com/icons">
145+
Material Symbol
146+
</DxcLink>{" "}
147+
name or SVG element as the icon that will be displayed in the tab. When using Material Symbols,
148+
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
149+
symbol name with <TableCode>"filled_"</TableCode>. The icon or the label, either of which must have
150+
a valid value.
151+
</td>
152+
<td>-</td>
153+
</tr>
154+
<tr>
155+
<td>
156+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
157+
label
158+
</DxcFlex>
159+
</td>
160+
<td>
161+
<TableCode>string</TableCode>
162+
</td>
163+
<td>Tab label text. The icon or the label, either of which must have a valid value.</td>
164+
<td>-</td>
165+
</tr>
166+
<tr>
167+
<td>notificationNumber</td>
168+
<td>
169+
<TableCode>boolean | number</TableCode>
170+
</td>
171+
<td>
172+
If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a
173+
number is specified, the component will display a badge with the value as its label. Take into
174+
account that if that number is greater than 99, it will appear as <TableCode>+99</TableCode> in the
175+
badge.
176+
</td>
177+
<td>
178+
<TableCode>false</TableCode>
179+
</td>
180+
</tr>
181+
<tr>
182+
<td>onClick</td>
183+
<td>
184+
<TableCode>{"() => void"}</TableCode>
185+
</td>
186+
<td>
187+
This function will be called when the user clicks on this tab. This feature is mostly recommended
188+
for compatibility with third-party routing APIs.
189+
</td>
190+
<td>-</td>
191+
</tr>
192+
<tr>
193+
<td>onHover</td>
194+
<td>
195+
<TableCode>{"() => void"}</TableCode>
196+
</td>
197+
<td>This function will be called when the user hovers this tab.</td>
198+
<td>-</td>
199+
</tr>
200+
<tr>
201+
<td>tabId</td>
202+
<td>
203+
<TableCode>string</TableCode>
204+
</td>
205+
<td>Value used to identify the tab internally.</td>
206+
<td>-</td>
207+
</tr>
208+
<tr>
209+
<td>
210+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
211+
title
212+
</DxcFlex>
213+
</td>
214+
<td>
215+
<TableCode>string</TableCode>
216+
</td>
217+
<td>Tooltip text for the tab.</td>
218+
<td>-</td>
219+
</tr>
220+
</tbody>
221+
</DxcTable>
222+
<DxcAlert
223+
title="Important"
224+
semantic="warning"
225+
message={{
226+
text: (
227+
<>
228+
Each tab must have either <Code>tabId</Code> or <Code>label</Code> defined for the component to
229+
function correctly.
230+
</>
231+
),
232+
}}
233+
mode="banner"
234+
closable={false}
235+
/>
236+
</DxcFlex>
222237
),
223238
},
224239
],

‎packages/lib/src/tabs/types.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,20 @@ export type TabIconProps = {
3333
icon: string | SVG;
3434
};
3535

36-
export type TabProps = {
36+
type CommonTabProps = {
3737
defaultActive?: boolean;
3838
active?: boolean;
3939
title?: string;
40-
tabId?: string;
4140
disabled?: boolean;
4241
notificationNumber?: boolean | number;
4342
children: ReactNode;
4443
onClick?: () => void;
4544
onHover?: () => void;
46-
} & (TabLabelProps | TabIconProps);
45+
};
46+
47+
export type TabProps =
48+
| (CommonTabProps & { tabId: string; label?: string; icon?: string | SVG })
49+
| (CommonTabProps & { tabId?: string; label: string; icon?: string | SVG });
4750

4851
type TabsProps = {
4952
/**

0 commit comments

Comments
 (0)