From 3fcf163f9ee9437aa3acc093a200a9eb1f16262c Mon Sep 17 00:00:00 2001
From: GeoffCoxMSFT <gcox@microsoft.com>
Date: Tue, 8 Nov 2022 09:56:25 -0800
Subject: [PATCH 1/4] Added large tab size

---
 .../react-tabs/etc/react-tabs.api.md          |   4 +-
 .../src/components/Tab/Tab.test.tsx           |   4 +
 .../src/components/Tab/Tab.types.ts           |   4 +-
 .../Tab/__snapshots__/Tab.test.tsx.snap       | 148 ++++++++++++++++++
 .../src/components/Tab/useTabStyles.ts        | 113 +++++++++----
 .../src/components/TabList/TabList.types.ts   |   4 +-
 .../stories/Tabs/TabListSizeLarge.stories.tsx |  50 ++++++
 .../Tabs/TabListSizeMedium.stories.tsx        |   2 +-
 .../stories/Tabs/TabListSizeSmall.stories.tsx |   2 +-
 .../react-tabs/stories/Tabs/index.stories.tsx |   1 +
 .../src/global/typographyStyles.ts            |   2 +-
 11 files changed, 298 insertions(+), 36 deletions(-)
 create mode 100644 packages/react-components/react-tabs/stories/Tabs/TabListSizeLarge.stories.tsx

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<TabListSlots> & {
     disabled?: boolean;
     onTabSelect?: SelectTabEventHandler;
     selectedValue?: TabValue;
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
     vertical?: boolean;
 };
 
@@ -105,7 +105,7 @@ export type TabState = ComponentState<TabSlots> & Pick<TabProps, 'value'> & 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<TabSlots> &
      */
     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`] = `
 </div>
 `;
 
+exports[`Tab renders large size and vertical correctly with icon slotted 1`] = `
+<div>
+  <button
+    aria-selected="false"
+    class="fui-Tab"
+    role="tab"
+    style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
+    type="button"
+    value="1"
+  >
+    <span
+      class="fui-Tab__icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+    <span
+      class="fui-Tab__content"
+    >
+      Default Tab
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Tab renders large size correctly with icon slotted 1`] = `
+<div>
+  <button
+    aria-selected="false"
+    class="fui-Tab"
+    role="tab"
+    style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
+    type="button"
+    value="1"
+  >
+    <span
+      class="fui-Tab__icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+    <span
+      class="fui-Tab__content"
+    >
+      Default Tab
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Tab renders medium size and vertical correctly with icon slotted 1`] = `
+<div>
+  <button
+    aria-selected="false"
+    class="fui-Tab"
+    role="tab"
+    style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
+    type="button"
+    value="1"
+  >
+    <span
+      class="fui-Tab__icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+    <span
+      class="fui-Tab__content"
+    >
+      Default Tab
+    </span>
+  </button>
+</div>
+`;
+
+exports[`Tab renders medium size correctly with icon slotted 1`] = `
+<div>
+  <button
+    aria-selected="false"
+    class="fui-Tab"
+    role="tab"
+    style="--fui-Tab__indicator--offset: 0px; --fui-Tab__indicator--scale: 1;"
+    type="button"
+    value="1"
+  >
+    <span
+      class="fui-Tab__icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        fill="currentColor"
+        height="1em"
+        viewBox="0 0 20 20"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M14.5 3A2.5 2.5 0 0117 5.5v9a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 14.5v-9A2.5 2.5 0 015.5 3h9zm0 1h-9C4.67 4 4 4.67 4 5.5v9c0 .83.67 1.5 1.5 1.5h9c.83 0 1.5-.67 1.5-1.5v-9c0-.83-.67-1.5-1.5-1.5zM7 11a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zM7 7a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2zm3 0a1 1 0 110 2 1 1 0 010-2z"
+          fill="currentColor"
+        />
+      </svg>
+    </span>
+    <span
+      class="fui-Tab__content"
+    >
+      Default Tab
+    </span>
+  </button>
+</div>
+`;
+
 exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
 <div>
   <button
diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
index a1ef4f2b1c2aa4..ed16df9e5c3c68 100644
--- a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
+++ b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
@@ -45,6 +45,15 @@ const useRootStyles = makeStyles({
   vertical: {
     justifyContent: 'start',
   },
+  smallHorizontal: {
+    columnGap: tokens.spacingHorizontalXXS,
+    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),
+  },
+  smallVertical: {
+    // horizontal spacing is deliberate. This is the gap between icon and content.
+    columnGap: tokens.spacingHorizontalXXS,
+    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),
+  },
   mediumHorizontal: {
     columnGap: tokens.spacingHorizontalSNudge,
     ...shorthands.padding(tokens.spacingVerticalM, tokens.spacingHorizontalMNudge),
@@ -54,14 +63,14 @@ const useRootStyles = makeStyles({
     columnGap: tokens.spacingHorizontalSNudge,
     ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalMNudge),
   },
-  smallHorizontal: {
-    columnGap: tokens.spacingHorizontalXXS,
-    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalSNudge),
+  largeHorizontal: {
+    columnGap: tokens.spacingHorizontalSNudge,
+    ...shorthands.padding(tokens.spacingVerticalL, tokens.spacingHorizontalMNudge),
   },
-  smallVertical: {
+  largeVertical: {
     // horizontal spacing is deliberate. This is the gap between icon and content.
-    columnGap: tokens.spacingHorizontalXXS,
-    ...shorthands.padding(tokens.spacingVerticalXXS, tokens.spacingHorizontalSNudge),
+    columnGap: tokens.spacingHorizontalSNudge,
+    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalMNudge),
   },
   transparent: {
     backgroundColor: tokens.colorTransparentBackground,
@@ -203,6 +212,22 @@ const usePendingIndicatorStyles = makeStyles({
       backgroundColor: tokens.colorTransparentStroke,
     },
   },
+  smallHorizontal: {
+    '::before': {
+      bottom: 0,
+      height: tokens.strokeWidthThick,
+      left: tokens.spacingHorizontalSNudge,
+      right: tokens.spacingHorizontalSNudge,
+    },
+  },
+  smallVertical: {
+    '::before': {
+      bottom: tokens.spacingVerticalXS,
+      left: 0,
+      top: tokens.spacingVerticalXS,
+      width: tokens.strokeWidthThicker,
+    },
+  },
   mediumHorizontal: {
     '::before': {
       bottom: 0,
@@ -219,19 +244,19 @@ const usePendingIndicatorStyles = makeStyles({
       width: tokens.strokeWidthThicker,
     },
   },
-  smallHorizontal: {
+  largeHorizontal: {
     '::before': {
       bottom: 0,
-      height: tokens.strokeWidthThick,
-      left: tokens.spacingHorizontalSNudge,
-      right: tokens.spacingHorizontalSNudge,
+      height: tokens.strokeWidthThicker,
+      left: tokens.spacingHorizontalM,
+      right: tokens.spacingHorizontalM,
     },
   },
-  smallVertical: {
+  largeVertical: {
     '::before': {
-      bottom: tokens.spacingVerticalXS,
+      bottom: tokens.spacingVerticalMNudge,
       left: 0,
-      top: tokens.spacingVerticalXS,
+      top: tokens.spacingVerticalMNudge,
       width: tokens.strokeWidthThicker,
     },
   },
@@ -274,6 +299,22 @@ const useActiveIndicatorStyles = makeStyles({
       backgroundColor: tokens.colorNeutralForegroundDisabled,
     },
   },
+  smallHorizontal: {
+    '::after': {
+      bottom: 0,
+      height: tokens.strokeWidthThick,
+      left: tokens.spacingHorizontalSNudge,
+      right: tokens.spacingHorizontalSNudge,
+    },
+  },
+  smallVertical: {
+    '::after': {
+      bottom: tokens.spacingVerticalXS,
+      left: '0',
+      top: tokens.spacingVerticalXS,
+      width: tokens.strokeWidthThicker,
+    },
+  },
   mediumHorizontal: {
     '::after': {
       bottom: '0',
@@ -290,19 +331,19 @@ const useActiveIndicatorStyles = makeStyles({
       width: tokens.strokeWidthThicker,
     },
   },
-  smallHorizontal: {
+  largeHorizontal: {
     '::after': {
       bottom: 0,
-      height: tokens.strokeWidthThick,
-      left: tokens.spacingHorizontalSNudge,
-      right: tokens.spacingHorizontalSNudge,
+      height: tokens.strokeWidthThicker,
+      left: tokens.spacingHorizontalM,
+      right: tokens.spacingHorizontalM,
     },
   },
-  smallVertical: {
+  largeVertical: {
     '::after': {
-      bottom: tokens.spacingVerticalXS,
-      left: '0',
-      top: tokens.spacingVerticalXS,
+      bottom: tokens.spacingVerticalMNudge,
+      left: 0,
+      top: tokens.spacingVerticalMNudge,
       width: tokens.strokeWidthThicker,
     },
   },
@@ -332,6 +373,11 @@ const useIconStyles = makeStyles({
     height: '20px',
     width: '20px',
   },
+  large: {
+    fontSize: '24px',
+    height: '24px',
+    width: '24px',
+  },
 });
 
 /**
@@ -347,6 +393,12 @@ const useContentStyles = makeStyles({
   selected: {
     ...typographyStyles.body1Strong,
   },
+  large: {
+    ...typographyStyles.body2,
+  },
+  largeSelected: {
+    ...typographyStyles.subtitle2,
+  },
   noIconBefore: {
     gridColumnStart: 1,
     gridRowStart: 1,
@@ -377,8 +429,9 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
     tabClassNames.root,
     rootStyles.base,
     vertical ? rootStyles.vertical : rootStyles.horizontal,
-    size !== 'small' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),
     size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal),
+    size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal),
+    size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal),
     focusStyles.base,
     !disabled && appearance === 'subtle' && rootStyles.subtle,
     !disabled && appearance === 'transparent' && rootStyles.transparent,
@@ -387,19 +440,23 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
 
     // pending indicator (before pseudo element)
     pendingIndicatorStyles.base,
-    size !== 'small' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),
     size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal),
+    size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal),
+    size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal),
     disabled && pendingIndicatorStyles.disabled,
 
     // active indicator (after pseudo element)
     selected && activeIndicatorStyles.base,
     selected && !disabled && activeIndicatorStyles.selected,
-    selected &&
-      size !== 'small' &&
-      (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),
     selected &&
       size === 'small' &&
       (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal),
+    selected &&
+      size === 'medium' &&
+      (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal),
+    selected &&
+      size === 'large' &&
+      (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal),
     selected && disabled && activeIndicatorStyles.disabled,
 
     state.root.className,
@@ -414,6 +471,7 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
     state.contentReservedSpaceClassName = mergeClasses(
       reservedSpaceClassNames.content,
       contentStyles.base,
+      size === 'large' && contentStyles.large,
       contentStyles.selected,
       state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,
       contentStyles.placeholder,
@@ -424,7 +482,8 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
   state.content.className = mergeClasses(
     tabClassNames.content,
     contentStyles.base,
-    selected && contentStyles.selected,
+    size === 'large' && contentStyles.large,
+    selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected),
     state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,
     state.content.className,
   );
diff --git a/packages/react-components/react-tabs/src/components/TabList/TabList.types.ts b/packages/react-components/react-tabs/src/components/TabList/TabList.types.ts
index 3df9c08a436aa3..ae49ef62d2b869 100644
--- a/packages/react-components/react-tabs/src/components/TabList/TabList.types.ts
+++ b/packages/react-components/react-tabs/src/components/TabList/TabList.types.ts
@@ -78,11 +78,11 @@ export type TabListProps = ComponentProps<TabListSlots> & {
   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 (
+      <>
+        <Tab value="tab1">First Tab</Tab>
+        <Tab icon={<CalendarMonthRegular />} value="tab2">
+          Second Tab
+        </Tab>
+        <Tab value="tab3">Third Tab</Tab>
+        <Tab value="tab4">Fourth Tab</Tab>
+      </>
+    );
+  };
+
+  return (
+    <div className={styles.root}>
+      <TabList defaultSelectedValue="tab2" size="large">
+        {renderTabs()}
+      </TabList>
+      <TabList defaultSelectedValue="tab2" size="large" vertical>
+        {renderTabs()}
+      </TabList>
+    </div>
+  );
+};
+
+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: {

From b9e849f3ac41a70f451b8d63e07ab7654499a471 Mon Sep 17 00:00:00 2001
From: GeoffCoxMSFT <gcox@microsoft.com>
Date: Tue, 8 Nov 2022 09:58:01 -0800
Subject: [PATCH 2/4] yarn change

---
 ...ui-react-tabs-9707187f-ba5a-45f1-a521-3aac9918a416.json | 7 +++++++
 ...i-react-theme-abd73672-2ebe-4112-90fb-9219bfe2cc54.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-tabs-9707187f-ba5a-45f1-a521-3aac9918a416.json
 create mode 100644 change/@fluentui-react-theme-abd73672-2ebe-4112-90fb-9219bfe2cc54.json

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"
+}

From 48a15e0e19dbb6d6a2e293d16bf39e90a4497d0a Mon Sep 17 00:00:00 2001
From: GeoffCoxMSFT <gcox@microsoft.com>
Date: Tue, 8 Nov 2022 10:05:55 -0800
Subject: [PATCH 3/4] Update vr-tests

---
 .../src/stories/Tabs.stories.tsx              | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

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',
+    () => (
+      <TabList size="large">
+        <Tab value="1">First</Tab>
+        <Tab className="mouse-target" value="2">
+          Second
+        </Tab>
+        <Tab value="3">Third</Tab>
+      </TabList>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
+  .addStory(
+    'Vertical and large size',
+    () => (
+      <TabList size="large" vertical>
+        <Tab value="1">First</Tab>
+        <Tab className="mouse-target" value="2">
+          Second
+        </Tab>
+        <Tab value="3">Third</Tab>
+      </TabList>
+    ),
+    {
+      includeHighContrast: true,
+      includeDarkMode: true,
+    },
+  )
   .addStory(
     'Tab Selected (default)',
     () => (

From 4e7d3b83b3732dbf7ff4731316ea768682039acf Mon Sep 17 00:00:00 2001
From: GeoffCoxMSFT <gcox@microsoft.com>
Date: Wed, 9 Nov 2022 09:21:07 -0800
Subject: [PATCH 4/4] Code review fix

---
 .../react-tabs/src/components/Tab/useTabStyles.ts              | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
index ed16df9e5c3c68..26a71ad563ec13 100644
--- a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
+++ b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
@@ -471,8 +471,7 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
     state.contentReservedSpaceClassName = mergeClasses(
       reservedSpaceClassNames.content,
       contentStyles.base,
-      size === 'large' && contentStyles.large,
-      contentStyles.selected,
+      size === 'large' ? contentStyles.largeSelected : contentStyles.selected,
       state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore,
       contentStyles.placeholder,
       state.content.className,