diff --git a/pages/theming/themed-stroke-width.page.tsx b/pages/theming/themed-stroke-width.page.tsx index b794609c4f..86e296da6b 100644 --- a/pages/theming/themed-stroke-width.page.tsx +++ b/pages/theming/themed-stroke-width.page.tsx @@ -18,6 +18,8 @@ import { SelectProps, SpaceBetween, StatusIndicator, + Tabs, + TabsProps, } from '~components'; import Icon, { IconProps } from '~components/icon'; import icons from '~components/icon/generated/icons'; @@ -45,6 +47,34 @@ const createStrokeHandler = (setter: (value: string) => void) => { }; }; +function TabsExample() { + const tabs: TabsProps.Tab[] = [ + { + id: 'first', + label: 'First tab', + content: 'First tab content area', + dismissible: true, + dismissLabel: 'Dismiss first tab', + }, + { + id: 'second', + label: 'Second tab', + content: 'Second tab content area', + dismissible: true, + dismissLabel: 'Dismiss second tab', + }, + { id: 'third', label: 'Third tab', content: 'Third tab content area' }, + { id: 'fourth', label: 'Fourth tab', disabled: true, content: 'Fourth tab content area' }, + ]; + + return ( + + + + + ); +} + export default function ThemedStrokeWidthPage() { const [themed, setThemed] = useState(false); const [strokeSmall, setStrokeSmall] = useState('2'); @@ -74,6 +104,11 @@ export default function ThemedStrokeWidthPage() { borderWidthIconBig: strokeBig ? `${strokeBig}px` : '1.5px', borderWidthIconLarge: strokeLarge ? `${strokeLarge}px` : '2px', borderRadiusButton: '8px', + fontSizeTabs: '14px', + lineHeightTabs: '16px', + fontWeightTabs: '700', + fontWeightTabsDisabled: '700', + spaceTabsVertical: { comfortable: '2px', compact: '0px' }, }, }; @@ -269,6 +304,10 @@ export default function ThemedStrokeWidthPage() { Warning Info + +
+ +