diff --git a/apps/website/screens/components/tabs/code/TabsCodePage.tsx b/apps/website/screens/components/tabs/code/TabsCodePage.tsx index 109c027c5..bbde19305 100644 --- a/apps/website/screens/components/tabs/code/TabsCodePage.tsx +++ b/apps/website/screens/components/tabs/code/TabsCodePage.tsx @@ -1,4 +1,4 @@ -import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; +import { DxcAlert, DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react"; import QuickNavContainer from "@/common/QuickNavContainer"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; @@ -81,144 +81,159 @@ const sections = [ { title: "Props", content: ( - - - - Name - Type - Description - Default - - - - - active - - boolean - - Whether the tab is active or not. - - false - - - - - - - children - - - - React.ReactNode - - Contains the component to be rendered when this tab is active. - - - - - defaultActive - - boolean - - Whether the tab is active or not by default, but mantaining the uncontrolled behaviour. - - false - - - - disabled - - boolean - - Whether the tab is disabled or not. - - false - - - - icon - - string | {"(React.ReactNode & React.SVGProps )"} - - - - Material Symbol - {" "} - 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 "filled_". The icon or the label, either of which must have a - valid value. - - - - - - - - label - - - - string - - Tab label text. The icon or the label, either of which must have a valid value. - - - - - notificationNumber - - boolean | number - - - If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a - number is specified, the component will display a badge with the value as its label. Take into account - that if that number is greater than 99, it will appear as +99 in the badge. - - - false - - - - onClick - - {"() => void"} - - This function will be called when the user clicks on this tab. This feature is mostly recommended for compatibility with third-party routing APIs. - - - - - onHover - - {"() => void"} - - This function will be called when the user hovers this tab. - - - - - - - - tabId - - - - string - - Value used to identify the tab internally. - - - - - - - title - - - - string - - Tooltip text for the tab. - - - - - + + + + + Name + Type + Description + Default + + + + + active + + boolean + + Whether the tab is active or not. + + false + + + + + + + children + + + + React.ReactNode + + Contains the component to be rendered when this tab is active. + - + + + defaultActive + + boolean + + Whether the tab is active or not by default, but mantaining the uncontrolled behaviour. + + false + + + + disabled + + boolean + + Whether the tab is disabled or not. + + false + + + + icon + + string | {"(React.ReactNode & React.SVGProps )"} + + + + Material Symbol + {" "} + 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 "filled_". The icon or the label, either of which must have + a valid value. + + - + + + + + label + + + + string + + Tab label text. The icon or the label, either of which must have a valid value. + - + + + notificationNumber + + boolean | number + + + If true, an empty badge will appear. If false or if the tab is disabled, no badge will appear. If a + number is specified, the component will display a badge with the value as its label. Take into + account that if that number is greater than 99, it will appear as +99 in the + badge. + + + false + + + + onClick + + {"() => void"} + + + This function will be called when the user clicks on this tab. This feature is mostly recommended + for compatibility with third-party routing APIs. + + - + + + onHover + + {"() => void"} + + This function will be called when the user hovers this tab. + - + + + tabId + + string + + Value used to identify the tab internally. + - + + + + + title + + + + string + + Tooltip text for the tab. + - + + + + + Each tab must have either tabId or label defined for the component to + function correctly. + + ), + }} + mode="banner" + closable={false} + /> + ), }, ], diff --git a/packages/lib/src/tabs/types.ts b/packages/lib/src/tabs/types.ts index b3d4578de..c06090e44 100644 --- a/packages/lib/src/tabs/types.ts +++ b/packages/lib/src/tabs/types.ts @@ -33,17 +33,20 @@ export type TabIconProps = { icon: string | SVG; }; -export type TabProps = { +type CommonTabProps = { defaultActive?: boolean; active?: boolean; title?: string; - tabId?: string; disabled?: boolean; notificationNumber?: boolean | number; children: ReactNode; onClick?: () => void; onHover?: () => void; -} & (TabLabelProps | TabIconProps); +}; + +export type TabProps = + | (CommonTabProps & { tabId: string; label?: string; icon?: string | SVG }) + | (CommonTabProps & { tabId?: string; label: string; icon?: string | SVG }); type TabsProps = { /**