Feature: Added large tab size to react-tabs (#25577)

* Added large tab size * yarn change * Update vr-tests * Code review fix
microsoft · Nov 9, 2022 · d5d0385 · d5d0385
1 parent 09b24f9
commit d5d0385
Show file tree

Hide file tree

Showing 14 changed files with 344 additions and 37 deletions.
diff --git 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)',
     () => (

diff --git a/change/@fluentui-react-tabs-9707187f-ba5a-45f1-a521-3aac9918a416.json 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": "[email protected]",
+  "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
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixed incorrect typography style",
+  "packageName": "@fluentui/react-theme",
+  "email": "[email protected]",
+  "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
@@ -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
@@ -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
@@ -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
@@ -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