& {
selectedValue?: TabValue;
/**
- * A tab list can be either 'small' or 'medium' size.
+ * A tab list can be either 'small', 'medium', or 'large' size.
* The size affects each of the contained tabs.
* @default 'medium'
*/
- size?: 'small' | 'medium';
+ size?: 'small' | 'medium' | 'large';
/**
* A tab list can arrange its tabs vertically.
diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListSizeLarge.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListSizeLarge.stories.tsx
new file mode 100644
index 00000000000000..41e7ddfe4186f6
--- /dev/null
+++ b/packages/react-components/react-tabs/stories/Tabs/TabListSizeLarge.stories.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
+import { makeStyles, shorthands, Tab, TabList } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+ root: {
+ alignItems: 'flex-start',
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'flex-start',
+ ...shorthands.padding('50px', '20px'),
+ rowGap: '20px',
+ },
+});
+
+export const SizeLarge = () => {
+ const styles = useStyles();
+
+ const renderTabs = () => {
+ return (
+ <>
+ First Tab
+ } value="tab2">
+ Second Tab
+
+ Third Tab
+ Fourth Tab
+ >
+ );
+ };
+
+ return (
+
+
+ {renderTabs()}
+
+
+ {renderTabs()}
+
+
+ );
+};
+
+SizeLarge.parameters = {
+ docs: {
+ description: {
+ story: 'A tab list can have `large` tabs.',
+ },
+ },
+};
diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListSizeMedium.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListSizeMedium.stories.tsx
index 1556bfdbf4c76c..b58ee623a6b27f 100644
--- a/packages/react-components/react-tabs/stories/Tabs/TabListSizeMedium.stories.tsx
+++ b/packages/react-components/react-tabs/stories/Tabs/TabListSizeMedium.stories.tsx
@@ -44,7 +44,7 @@ export const SizeMedium = () => {
SizeMedium.parameters = {
docs: {
description: {
- story: 'A tab list can have `medium` tabs. The default size is `medium`.',
+ story: 'A tab list can have `medium` tabs (default).',
},
},
};
diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListSizeSmall.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListSizeSmall.stories.tsx
index a2fa3919159ccc..f8814b6cca3a18 100644
--- a/packages/react-components/react-tabs/stories/Tabs/TabListSizeSmall.stories.tsx
+++ b/packages/react-components/react-tabs/stories/Tabs/TabListSizeSmall.stories.tsx
@@ -44,7 +44,7 @@ export const SizeSmall = () => {
SizeSmall.parameters = {
docs: {
description: {
- story: 'A tab list can have `small` tabs. The default size is `medium`.',
+ story: 'A tab list can have `small` tabs.',
},
},
};
diff --git a/packages/react-components/react-tabs/stories/Tabs/index.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/index.stories.tsx
index 5d32983f18283d..8f8a906b3fab80 100644
--- a/packages/react-components/react-tabs/stories/Tabs/index.stories.tsx
+++ b/packages/react-components/react-tabs/stories/Tabs/index.stories.tsx
@@ -10,6 +10,7 @@ export { Appearance } from './TabListAppearance.stories';
export { Disabled } from './TabListDisabled.stories';
export { SizeSmall } from './TabListSizeSmall.stories';
export { SizeMedium } from './TabListSizeMedium.stories';
+export { SizeLarge } from './TabListSizeLarge.stories';
export { WithIcon } from './TabListWithIcon.stories';
export { IconOnly } from './TabListIconOnly.stories';
export { WithOverflow } from './TabListWithOverflow.stories';
diff --git a/packages/react-components/react-theme/src/global/typographyStyles.ts b/packages/react-components/react-theme/src/global/typographyStyles.ts
index 2c0462712486a2..b3a5d3e200a73f 100644
--- a/packages/react-components/react-theme/src/global/typographyStyles.ts
+++ b/packages/react-components/react-theme/src/global/typographyStyles.ts
@@ -26,7 +26,7 @@ export const typographyStyles: TypographyStyles = {
body2: {
fontFamily: tokens.fontFamilyBase,
fontSize: tokens.fontSizeBase400,
- fontWeight: tokens.fontWeightSemibold,
+ fontWeight: tokens.fontWeightRegular,
lineHeight: tokens.lineHeightBase400,
},
caption1: {