diff --git a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx index 1c397958bfa536..0904453a7d4da4 100644 --- a/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Tabs.stories.tsx @@ -92,6 +92,38 @@ storiesOf('TabList and Tab Converged', module) includeDarkMode: true, }, ) + .addStory( + 'Large size', + () => ( + + First + + Second + + Third + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) + .addStory( + 'Vertical and large size', + () => ( + + First + + Second + + Third + + ), + { + includeHighContrast: true, + includeDarkMode: true, + }, + ) .addStory( 'Tab Selected (default)', () => ( diff --git a/change/@fluentui-react-tabs-9707187f-ba5a-45f1-a521-3aac9918a416.json b/change/@fluentui-react-tabs-9707187f-ba5a-45f1-a521-3aac9918a416.json new file mode 100644 index 00000000000000..5bf88cfbf891d9 --- /dev/null +++ b/change/@fluentui-react-tabs-9707187f-ba5a-45f1-a521-3aac9918a416.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Added large size tabs", + "packageName": "@fluentui/react-tabs", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-theme-abd73672-2ebe-4112-90fb-9219bfe2cc54.json b/change/@fluentui-react-theme-abd73672-2ebe-4112-90fb-9219bfe2cc54.json new file mode 100644 index 00000000000000..2924f509d2c5f8 --- /dev/null +++ b/change/@fluentui-react-theme-abd73672-2ebe-4112-90fb-9219bfe2cc54.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fixed incorrect typography style", + "packageName": "@fluentui/react-theme", + "email": "gcox@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-tabs/etc/react-tabs.api.md b/packages/react-components/react-tabs/etc/react-tabs.api.md index bd79b980a82f8c..c33bf17db18d1d 100644 --- a/packages/react-components/react-tabs/etc/react-tabs.api.md +++ b/packages/react-components/react-tabs/etc/react-tabs.api.md @@ -68,7 +68,7 @@ export type TabListProps = ComponentProps & { disabled?: boolean; onTabSelect?: SelectTabEventHandler; selectedValue?: TabValue; - size?: 'small' | 'medium'; + size?: 'small' | 'medium' | 'large'; vertical?: boolean; }; @@ -105,7 +105,7 @@ export type TabState = ComponentState & Pick & Requ iconOnly: boolean; selected: boolean; contentReservedSpaceClassName?: string; - size: 'small' | 'medium'; + size: 'small' | 'medium' | 'large'; vertical: boolean; }; diff --git a/packages/react-components/react-tabs/src/components/Tab/Tab.test.tsx b/packages/react-components/react-tabs/src/components/Tab/Tab.test.tsx index 0bfe4c8b305488..f65b2260b4c7d3 100644 --- a/packages/react-components/react-tabs/src/components/Tab/Tab.test.tsx +++ b/packages/react-components/react-tabs/src/components/Tab/Tab.test.tsx @@ -77,6 +77,10 @@ describe('Tab', () => { ['vertical', { ...defaultContext, vertical: true }], ['small size', { ...defaultContext, size: 'small' }], ['small size and vertical', { ...defaultContext, size: 'small', vertical: true }], + ['medium size', { ...defaultContext, size: 'medium' }], + ['medium size and vertical', { ...defaultContext, size: 'medium', vertical: true }], + ['large size', { ...defaultContext, size: 'large' }], + ['large size and vertical', { ...defaultContext, size: 'large', vertical: true }], ])('renders %s correctly with icon slotted', (_testName, tabList) => { const contextValues = { tabList: tabList as TabListContextValue, diff --git a/packages/react-components/react-tabs/src/components/Tab/Tab.types.ts b/packages/react-components/react-tabs/src/components/Tab/Tab.types.ts index 903d12b2689427..90c327bcc56b3e 100644 --- a/packages/react-components/react-tabs/src/components/Tab/Tab.types.ts +++ b/packages/react-components/react-tabs/src/components/Tab/Tab.types.ts @@ -62,9 +62,9 @@ export type TabState = ComponentState & */ contentReservedSpaceClassName?: string; /** - * A tab can be either 'small' or 'medium' size. + * A tab can be either 'small', 'medium', or 'large' size. */ - size: 'small' | 'medium'; + size: 'small' | 'medium' | 'large'; /** * A tab can arrange its content based on if the tabs in the list are arranged vertically. */ diff --git a/packages/react-components/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap b/packages/react-components/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap index 5deffaabbc5ac2..079f2ffe7f5837 100644 --- a/packages/react-components/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap +++ b/packages/react-components/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap @@ -74,6 +74,154 @@ exports[`Tab renders default correctly with icon slotted 1`] = ` `; +exports[`Tab renders large size and vertical correctly with icon slotted 1`] = ` +
+ +
+`; + +exports[`Tab renders large size correctly with icon slotted 1`] = ` +
+ +
+`; + +exports[`Tab renders medium size and vertical correctly with icon slotted 1`] = ` +
+ +
+`; + +exports[`Tab renders medium size correctly with icon slotted 1`] = ` +
+ +
+`; + exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `