From 00d9d0f8acb0588b6de31649b9fabd3ce3e9f285 Mon Sep 17 00:00:00 2001 From: Raisa Primerova Date: Tue, 15 Sep 2026 10:37:11 -0600 Subject: [PATCH 1/6] fix: Fix default Tabs variant to be outlined --- modules/preview-react/tabs/lib/TabsItem.tsx | 2 +- modules/preview-react/tabs/lib/useTabsModel.tsx | 6 +++--- modules/preview-react/tabs/stories/Tabs.mdx | 8 ++++---- modules/preview-react/tabs/stories/Tabs.stories.ts | 2 +- .../stories/examples/{OutlinedTabs.tsx => FilledTabs.tsx} | 4 ++-- 5 files changed, 11 insertions(+), 11 deletions(-) rename modules/preview-react/tabs/stories/examples/{OutlinedTabs.tsx => FilledTabs.tsx} (92%) diff --git a/modules/preview-react/tabs/lib/TabsItem.tsx b/modules/preview-react/tabs/lib/TabsItem.tsx index d111c0bdbc..b71192d9b0 100644 --- a/modules/preview-react/tabs/lib/TabsItem.tsx +++ b/modules/preview-react/tabs/lib/TabsItem.tsx @@ -82,7 +82,7 @@ export interface TabsItemProps tabIndex?: number; /** * The variant of the TabsItem. - * @default 'filled' + * @default 'outlined' */ variant?: 'filled' | 'outlined'; } diff --git a/modules/preview-react/tabs/lib/useTabsModel.tsx b/modules/preview-react/tabs/lib/useTabsModel.tsx index 9e5a8f8cee..a4ec06b3ed 100644 --- a/modules/preview-react/tabs/lib/useTabsModel.tsx +++ b/modules/preview-react/tabs/lib/useTabsModel.tsx @@ -47,9 +47,9 @@ export const useTabsModel = createModelHook({ orientation: 'horizontal' as typeof useOverflowListModel.defaultConfig.orientation, /** * The variant of the Tabs. - * @default 'filled' + * @default 'outlined' */ - variant: 'filled' as 'filled' | 'outlined', + variant: 'outlined' as 'filled' | 'outlined', menuConfig: {} as typeof useMenuModel.TConfig, }, requiredConfig: useOverflowListModel.requiredConfig, @@ -94,7 +94,7 @@ export const useTabsModel = createModelHook({ * state setting phase. */ panelIndexRef: panels.state.indexRef, - variant: config.variant || 'filled', + variant: config.variant || 'outlined', }; const overflowItems = React.useMemo( diff --git a/modules/preview-react/tabs/stories/Tabs.mdx b/modules/preview-react/tabs/stories/Tabs.mdx index ba91d0c497..dc55251bce 100644 --- a/modules/preview-react/tabs/stories/Tabs.mdx +++ b/modules/preview-react/tabs/stories/Tabs.mdx @@ -10,7 +10,7 @@ import {DynamicTabs} from './examples/DynamicTabs'; import {HoistedModel} from './examples/HoistedModel'; import {Icons} from './examples/Icons'; import {NamedTabs} from './examples/NamedTabs'; -import {OutlinedTabs} from './examples/OutlinedTabs'; +import {FilledTabs} from './examples/FilledTabs'; import {OverflowTabs} from './examples/OverflowTabs'; import {RightToLeft} from './examples/RightToLeft'; import {SinglePanel} from './examples/SinglePanel'; @@ -44,11 +44,11 @@ that does not support overflow. -### Outlined Tabs +### Filled Tabs -Set the `variant` prop of `Tabs` to `outlined` to render an outlined style of tabs. +Set the `variant` prop of `Tabs` to `filled` to render a filled style of tabs. - + ### Overflow Tabs diff --git a/modules/preview-react/tabs/stories/Tabs.stories.ts b/modules/preview-react/tabs/stories/Tabs.stories.ts index 496dd54abb..fd1ac1bfdb 100644 --- a/modules/preview-react/tabs/stories/Tabs.stories.ts +++ b/modules/preview-react/tabs/stories/Tabs.stories.ts @@ -7,10 +7,10 @@ import {AlternativeTabStop as AlternativeTabStopExample} from './examples/Altern import {Basic as BasicExample} from './examples/Basic'; import {DisabledTab as DisabledTabExample} from './examples/DisabledTab'; import {DynamicTabs as DynamicTabsExample} from './examples/DynamicTabs'; +import {OutlinedTabs as OutlinedTabsExample} from './examples/FilledTabs'; import {HoistedModel as HoistedModelExample} from './examples/HoistedModel'; import {Icons as IconsExample} from './examples/Icons'; import {NamedTabs as NamedTabsExample} from './examples/NamedTabs'; -import {OutlinedTabs as OutlinedTabsExample} from './examples/OutlinedTabs'; import {OverflowTabs as OverflowTabsExample} from './examples/OverflowTabs'; import {RightToLeft as RightToLeftExample} from './examples/RightToLeft'; import {SinglePanel as SinglePanelExample} from './examples/SinglePanel'; diff --git a/modules/preview-react/tabs/stories/examples/OutlinedTabs.tsx b/modules/preview-react/tabs/stories/examples/FilledTabs.tsx similarity index 92% rename from modules/preview-react/tabs/stories/examples/OutlinedTabs.tsx rename to modules/preview-react/tabs/stories/examples/FilledTabs.tsx index d5e79d4b24..424f9789ad 100644 --- a/modules/preview-react/tabs/stories/examples/OutlinedTabs.tsx +++ b/modules/preview-react/tabs/stories/examples/FilledTabs.tsx @@ -2,9 +2,9 @@ import {Tabs} from '@workday/canvas-kit-preview-react/tabs'; import {cssVar} from '@workday/canvas-kit-styling'; import {system} from '@workday/canvas-tokens-web'; -export const OutlinedTabs = () => { +export const FilledTabs = () => { return ( - + First Tab Second Tab From 88c27a1365ef9d72f523fbee17eecb886b4c8567 Mon Sep 17 00:00:00 2001 From: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com> Date: Tue, 15 Sep 2026 10:49:15 -0600 Subject: [PATCH 2/6] fix: Rename OutlinedTabsExample to FilledTabsExample Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- modules/preview-react/tabs/stories/Tabs.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/preview-react/tabs/stories/Tabs.stories.ts b/modules/preview-react/tabs/stories/Tabs.stories.ts index fd1ac1bfdb..b2bb788a87 100644 --- a/modules/preview-react/tabs/stories/Tabs.stories.ts +++ b/modules/preview-react/tabs/stories/Tabs.stories.ts @@ -7,7 +7,7 @@ import {AlternativeTabStop as AlternativeTabStopExample} from './examples/Altern import {Basic as BasicExample} from './examples/Basic'; import {DisabledTab as DisabledTabExample} from './examples/DisabledTab'; import {DynamicTabs as DynamicTabsExample} from './examples/DynamicTabs'; -import {OutlinedTabs as OutlinedTabsExample} from './examples/FilledTabs'; +import {FilledTabs as OutlinedTabsExample} from './examples/FilledTabs'; import {HoistedModel as HoistedModelExample} from './examples/HoistedModel'; import {Icons as IconsExample} from './examples/Icons'; import {NamedTabs as NamedTabsExample} from './examples/NamedTabs'; From e4d7a6a59aa50f20a7f66db8752eaf19d3d14eda Mon Sep 17 00:00:00 2001 From: Raisa Primerova Date: Thu, 17 Sep 2026 09:58:14 -0600 Subject: [PATCH 3/6] fix: Fix issue with story naming --- modules/preview-react/tabs/stories/Tabs.stories.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/preview-react/tabs/stories/Tabs.stories.ts b/modules/preview-react/tabs/stories/Tabs.stories.ts index b2bb788a87..5cfc5c851f 100644 --- a/modules/preview-react/tabs/stories/Tabs.stories.ts +++ b/modules/preview-react/tabs/stories/Tabs.stories.ts @@ -7,7 +7,7 @@ import {AlternativeTabStop as AlternativeTabStopExample} from './examples/Altern import {Basic as BasicExample} from './examples/Basic'; import {DisabledTab as DisabledTabExample} from './examples/DisabledTab'; import {DynamicTabs as DynamicTabsExample} from './examples/DynamicTabs'; -import {FilledTabs as OutlinedTabsExample} from './examples/FilledTabs'; +import {FilledTabs as FilledTabsExample} from './examples/FilledTabs'; import {HoistedModel as HoistedModelExample} from './examples/HoistedModel'; import {Icons as IconsExample} from './examples/Icons'; import {NamedTabs as NamedTabsExample} from './examples/NamedTabs'; @@ -31,8 +31,8 @@ type Story = StoryObj; export const Basic: Story = { render: BasicExample, }; -export const OutlinedTabs: Story = { - render: OutlinedTabsExample, +export const FilledTabs: Story = { + render: FilledTabsExample, }; export const NamedTabs: Story = { render: NamedTabsExample, From 7074927dd0a5024f6dc554b56f6740c733e4ef80 Mon Sep 17 00:00:00 2001 From: Raisa Primerova Date: Mon, 12 Oct 2026 14:28:36 -0600 Subject: [PATCH 4/6] fix: Fix tests and docs --- modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx | 2 +- modules/preview-react/tabs/stories/examples/RightToLeft.tsx | 2 +- modules/preview-react/tabs/stories/testing.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx index 59630bca96..7c1c08c061 100644 --- a/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx +++ b/modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx @@ -404,7 +404,7 @@ functional shortcuts, refer to the storybook documentation and our example stori **PR:** [#4062](https://github.com/Workday/canvas-kit/pull/4062) A new `Tabs` component has been added to `@workday/canvas-kit-preview-react`, aligned with the Sana -Canvas visual language. It supports `filled` and `outlined` variants. +Canvas visual language. It supports `filled` and `outlined` variants, with `outlined` variant as default. ```tsx import {Tabs} from '@workday/canvas-kit-preview-react/tabs'; diff --git a/modules/preview-react/tabs/stories/examples/RightToLeft.tsx b/modules/preview-react/tabs/stories/examples/RightToLeft.tsx index 130c2ef987..af5eb0306b 100644 --- a/modules/preview-react/tabs/stories/examples/RightToLeft.tsx +++ b/modules/preview-react/tabs/stories/examples/RightToLeft.tsx @@ -22,7 +22,7 @@ export const RightToLeft = () => { תוכן החמישי - + ראשון שְׁנִיָה diff --git a/modules/preview-react/tabs/stories/testing.stories.tsx b/modules/preview-react/tabs/stories/testing.stories.tsx index 3ab8e0f3e0..011f59dbd3 100644 --- a/modules/preview-react/tabs/stories/testing.stories.tsx +++ b/modules/preview-react/tabs/stories/testing.stories.tsx @@ -127,7 +127,7 @@ const OverflowTabs = () => { )} - + More} cs={{marginBlockStart: system.gap.lg}} From 8ab893d929aeebe5cb036772c5a86b278ac61e59 Mon Sep 17 00:00:00 2001 From: Raisa Primerova Date: Mon, 12 Oct 2026 14:29:22 -0600 Subject: [PATCH 5/6] fix: Update v16 md file --- modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md index 997d44f4d7..bf0a149e53 100644 --- a/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md +++ b/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md @@ -399,7 +399,7 @@ functional shortcuts, refer to the storybook documentation and our example stori **PR:** [#4062](https://github.com/Workday/canvas-kit/pull/4062) A new `Tabs` component has been added to `@workday/canvas-kit-preview-react`, aligned with the Sana -Canvas visual language. It supports `filled` and `outlined` variants. +Canvas visual language. It supports `filled` and `outlined` variants, with `outlined` variant as default. ```tsx import {Tabs} from '@workday/canvas-kit-preview-react/tabs'; From c5a667ecd1e41ac4c4c03e472608a2a0f5923c37 Mon Sep 17 00:00:00 2001 From: Raisa Primerova Date: Mon, 12 Oct 2026 14:44:51 -0600 Subject: [PATCH 6/6] fix: Fix props --- modules/preview-react/tabs/lib/TabsItem.tsx | 9 +++------ modules/preview-react/tabs/lib/useTabsModel.tsx | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/modules/preview-react/tabs/lib/TabsItem.tsx b/modules/preview-react/tabs/lib/TabsItem.tsx index 9d28328d05..e009d6e494 100644 --- a/modules/preview-react/tabs/lib/TabsItem.tsx +++ b/modules/preview-react/tabs/lib/TabsItem.tsx @@ -81,11 +81,6 @@ export interface TabsItemProps * set while all inactive tabs should have a `tabIndex={-1}` */ tabIndex?: number; - /** - * The variant of the TabsItem. - * @default 'outlined' - */ - variant?: 'filled' | 'outlined'; } const tabItemStencil = createStencil({ @@ -219,7 +214,9 @@ const tabItemStencil = createStencil({ }, }); -export const StyledTabItem = createComponent('button')({ +export const StyledTabItem = createComponent('button')< + TabsItemProps & {variant?: 'filled' | 'outlined'} +>({ displayName: 'StyledTabItem', Component: ({children, variant, ...elemProps}, ref, Element) => { return ( diff --git a/modules/preview-react/tabs/lib/useTabsModel.tsx b/modules/preview-react/tabs/lib/useTabsModel.tsx index 1c062349a3..36e1db41ea 100644 --- a/modules/preview-react/tabs/lib/useTabsModel.tsx +++ b/modules/preview-react/tabs/lib/useTabsModel.tsx @@ -229,7 +229,7 @@ export const useTabsModel = createModelHook({ * state setting phase. */ panelIndexRef: panels.state.indexRef, - variant: config.variant || 'outlined', + variant: config.variant, }; const overflowItems = React.useMemo(