Tabs icon toggle (#25597)

* Added regular filled icon toggling * yarn change
microsoft · Nov 10, 2022 · 715bd7f · 715bd7f
1 parent b997f70
commit 715bd7f
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 40 deletions.
diff --git a/change/@fluentui-react-tabs-509e61ea-8dad-490f-9503-54f49362f231.json b/change/@fluentui-react-tabs-509e61ea-8dad-490f-9503-54f49362f231.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added support for regular/filled icon toggling",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-components/react-tabs/src/components/Tab/useTabStyles.ts
@@ -16,6 +16,13 @@ const reservedSpaceClassNames = {
   content: 'fui-Tab__content--reserved-space',
 };
 
+// These should match the constants defined in @fluentui/react-icons
+// This package avoids taking a dependency on the icons package for only the constants.
+const iconClassNames = {
+  filled: 'fui-Icon-filled',
+  regular: 'fui-Icon-regular',
+};
+
 /**
  * Styles for the root slot
  */
@@ -360,6 +367,12 @@ const useIconStyles = makeStyles({
     display: 'inline-flex',
     justifyContent: 'center',
     ...shorthands.overflow('hidden'),
+    [`& .${iconClassNames.filled}`]: {
+      display: 'none',
+    },
+    [`& .${iconClassNames.regular}`]: {
+      display: 'inline',
+    },
   },
   // per design, the small and medium font sizes are the same.
   // the size prop only affects spacing.
@@ -378,6 +391,14 @@ const useIconStyles = makeStyles({
     height: '24px',
     width: '24px',
   },
+  selected: {
+    [`& .${iconClassNames.filled}`]: {
+      display: 'inline',
+    },
+    [`& .${iconClassNames.regular}`]: {
+      display: 'none',
+    },
+  },
 });
 
 /**
@@ -463,7 +484,13 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
   );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(tabClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
+    state.icon.className = mergeClasses(
+      tabClassNames.icon,
+      iconStyles.base,
+      iconStyles[size],
+      selected && iconStyles.selected,
+      state.icon.className,
+    );
   }
 
   // This needs to be before state.content.className is updated

diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListDisabled.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListDisabled.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { makeStyles, shorthands, Tab, TabList } from '@fluentui/react-components';
+import { CalendarMonthRegular, CalendarMonthFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const useStyles = makeStyles({
   root: {
@@ -19,30 +21,30 @@ export const Disabled = () => {
   return (
     <div className={styles.root}>
       <TabList defaultSelectedValue="tab2" disabled>
-        <Tab icon={<CalendarMonthRegular />} value="tab1">
+        <Tab icon={<CalendarMonth />} value="tab1">
           First Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab2">
+        <Tab icon={<CalendarMonth />} value="tab2">
           Second Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab3">
+        <Tab icon={<CalendarMonth />} value="tab3">
           Third Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab4">
+        <Tab icon={<CalendarMonth />} value="tab4">
           Fourth Tab
         </Tab>
       </TabList>
       <TabList defaultSelectedValue="tab2">
-        <Tab icon={<CalendarMonthRegular />} value="tab1">
+        <Tab icon={<CalendarMonth />} value="tab1">
           First Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab2" disabled>
+        <Tab icon={<CalendarMonth />} value="tab2" disabled>
           Second Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab3" disabled>
+        <Tab icon={<CalendarMonth />} value="tab3" disabled>
           Third Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab4">
+        <Tab icon={<CalendarMonth />} value="tab4">
           Fourth Tab
         </Tab>
       </TabList>

diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListIconOnly.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListIconOnly.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { makeStyles, shorthands, Tab, TabList } from '@fluentui/react-components';
-import { CalendarMonthRegular } from '@fluentui/react-icons';
+import { CalendarMonthRegular, CalendarMonthFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const useStyles = makeStyles({
   root: {
@@ -19,10 +21,10 @@ export const IconOnly = () => {
   const renderTabs = () => {
     return (
       <>
-        <Tab icon={<CalendarMonthRegular />} value="tab1" aria-label="First Tab" />
-        <Tab icon={<CalendarMonthRegular />} value="tab2" aria-label="Second Tab" />
-        <Tab icon={<CalendarMonthRegular />} value="tab3" aria-label="Third Tab" />
-        <Tab icon={<CalendarMonthRegular />} value="tab4" aria-label="Fourth Tab" />
+        <Tab icon={<CalendarMonth />} value="tab1" aria-label="First Tab" />
+        <Tab icon={<CalendarMonth />} value="tab2" aria-label="Second Tab" />
+        <Tab icon={<CalendarMonth />} value="tab3" aria-label="Third Tab" />
+        <Tab icon={<CalendarMonth />} value="tab4" aria-label="Fourth Tab" />
       </>
     );
   };

diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListSizeLarge.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListSizeLarge.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { makeStyles, shorthands, Tab, TabList } from '@fluentui/react-components';
+import { CalendarMonthRegular, CalendarMonthFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const useStyles = makeStyles({
   root: {
@@ -20,7 +22,7 @@ export const SizeLarge = () => {
     return (
       <>
         <Tab value="tab1">First Tab</Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab2">
+        <Tab icon={<CalendarMonth />} value="tab2">
           Second Tab
         </Tab>
         <Tab value="tab3">Third Tab</Tab>

diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListSizeMedium.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListSizeMedium.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { makeStyles, shorthands, Tab, TabList } from '@fluentui/react-components';
+import { CalendarMonthRegular, CalendarMonthFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const useStyles = makeStyles({
   root: {
@@ -20,7 +22,7 @@ export const SizeMedium = () => {
     return (
       <>
         <Tab value="tab1">First Tab</Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab2">
+        <Tab icon={<CalendarMonth />} value="tab2">
           Second Tab
         </Tab>
         <Tab value="tab3">Third Tab</Tab>

diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListSizeSmall.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListSizeSmall.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { CalendarMonthRegular } from '@fluentui/react-icons';
 import { makeStyles, shorthands, Tab, TabList } from '@fluentui/react-components';
+import { CalendarMonthRegular, CalendarMonthFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const useStyles = makeStyles({
   root: {
@@ -20,7 +22,7 @@ export const SizeSmall = () => {
     return (
       <>
         <Tab value="tab1">First Tab</Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab2">
+        <Tab icon={<CalendarMonth />} value="tab2">
           Second Tab
         </Tab>
         <Tab value="tab3">Third Tab</Tab>

diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListWithIcon.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListWithIcon.stories.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { makeStyles, shorthands, Tab, TabList } from '@fluentui/react-components';
-import { CalendarMonthRegular } from '@fluentui/react-icons';
+import { CalendarMonthRegular, CalendarMonthFilled, bundleIcon } from '@fluentui/react-icons';
+
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
 
 const useStyles = makeStyles({
   root: {
@@ -19,16 +21,16 @@ export const WithIcon = () => {
   const renderTabs = () => {
     return (
       <>
-        <Tab icon={<CalendarMonthRegular />} value="tab1">
+        <Tab icon={<CalendarMonth />} value="tab1">
           First Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab2">
+        <Tab icon={<CalendarMonth />} value="tab2">
           Second Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab3">
+        <Tab icon={<CalendarMonth />} value="tab3">
           Third Tab
         </Tab>
-        <Tab icon={<CalendarMonthRegular />} value="tab4">
+        <Tab icon={<CalendarMonth />} value="tab4">
           Fourth Tab
         </Tab>
       </>

diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListWithOverflow.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListWithOverflow.stories.tsx
@@ -25,10 +25,32 @@ import {
   CalendarWeekStartRegular,
   CalendarWorkWeekRegular,
   MoreHorizontalRegular,
+  Calendar3DayFilled,
+  CalendarAgendaFilled,
+  CalendarChatFilled,
+  CalendarDayFilled,
+  CalendarMonthFilled,
+  CalendarSearchFilled,
+  CalendarTodayFilled,
+  CalendarWeekStartFilled,
+  CalendarWorkWeekFilled,
+  MoreHorizontalFilled,
+  bundleIcon,
 } from '@fluentui/react-icons';
 import { useIsOverflowItemVisible, useOverflowMenu, Overflow, OverflowItem } from '@fluentui/react-overflow';
 import type { ARIAButtonElement } from '@fluentui/react-aria';
 
+const Calendar3Day = bundleIcon(Calendar3DayFilled, Calendar3DayRegular);
+const CalendarAgenda = bundleIcon(CalendarAgendaFilled, CalendarAgendaRegular);
+const CalendarChat = bundleIcon(CalendarChatFilled, CalendarChatRegular);
+const CalendarDay = bundleIcon(CalendarDayFilled, CalendarDayRegular);
+const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);
+const CalendarSearch = bundleIcon(CalendarSearchFilled, CalendarSearchRegular);
+const CalendarToday = bundleIcon(CalendarTodayFilled, CalendarTodayRegular);
+const CalendarWeekStart = bundleIcon(CalendarWeekStartFilled, CalendarWeekStartRegular);
+const CalendarWorkWeek = bundleIcon(CalendarWorkWeekFilled, CalendarWorkWeekRegular);
+const MoreHorizontal = bundleIcon(MoreHorizontalFilled, MoreHorizontalRegular);
+
 //----- Example Tab Data -----//
 
 type ExampleTab = {
@@ -41,47 +63,47 @@ const tabs: ExampleTab[] = [
   {
     id: 'today',
     name: 'Today',
-    icon: <CalendarTodayRegular />,
+    icon: <CalendarToday />,
   },
   {
     id: 'agenda',
     name: 'Agenda',
-    icon: <CalendarAgendaRegular />,
+    icon: <CalendarAgenda />,
   },
   {
     id: 'day',
     name: 'Day',
-    icon: <CalendarDayRegular />,
+    icon: <CalendarDay />,
   },
   {
     id: 'threeDay',
     name: 'Three Day',
-    icon: <Calendar3DayRegular />,
+    icon: <Calendar3Day />,
   },
   {
     id: 'workWeek',
     name: 'Work Week',
-    icon: <CalendarWorkWeekRegular />,
+    icon: <CalendarWorkWeek />,
   },
   {
     id: 'week',
     name: 'Week',
-    icon: <CalendarWeekStartRegular />,
+    icon: <CalendarWeekStart />,
   },
   {
     id: 'month',
     name: 'Month',
-    icon: <CalendarMonthRegular />,
+    icon: <CalendarMonth />,
   },
   {
     id: 'search',
     name: 'Search',
-    icon: <CalendarSearchRegular />,
+    icon: <CalendarSearch />,
   },
   {
     id: 'chat',
     name: 'Conversations',
-    icon: <CalendarChatRegular />,
+    icon: <CalendarChat />,
   },
 ];
 
@@ -149,7 +171,7 @@ const OverflowMenu = (props: OverflowMenuProps) => {
           appearance="transparent"
           className={styles.menuButton}
           ref={ref}
-          icon={<MoreHorizontalRegular />}
+          icon={<MoreHorizontal />}
           aria-label={`${overflowCount} more tabs`}
           role="tab"
         />

diff --git a/packages/react-components/react-tabs/stories/Tabs/TabListWithPanels.stories.tsx b/packages/react-components/react-tabs/stories/Tabs/TabListWithPanels.stories.tsx
@@ -1,8 +1,20 @@
 import * as React from 'react';
 import { makeStyles, shorthands, tokens, Tab, TabList } from '@fluentui/react-components';
-import { AirplaneRegular, AirplaneTakeOffRegular, TimeAndWeatherRegular } from '@fluentui/react-icons';
+import {
+  AirplaneRegular,
+  AirplaneFilled,
+  AirplaneTakeOffRegular,
+  AirplaneTakeOffFilled,
+  TimeAndWeatherRegular,
+  TimeAndWeatherFilled,
+  bundleIcon,
+} from '@fluentui/react-icons';
 import type { SelectTabData, SelectTabEvent, TabValue } from '@fluentui/react-components';
 
+const Airplane = bundleIcon(AirplaneFilled, AirplaneRegular);
+const AirplaneTakeOff = bundleIcon(AirplaneTakeOffFilled, AirplaneTakeOffRegular);
+const TimeAndWeather = bundleIcon(TimeAndWeatherFilled, TimeAndWeatherRegular);
+
 const useStyles = makeStyles({
   root: {
     alignItems: 'flex-start',
@@ -124,13 +136,13 @@ export const WithPanels = () => {
   return (
     <div className={styles.root}>
       <TabList selectedValue={selectedValue} onTabSelect={onTabSelect}>
-        <Tab id="Arrivals" icon={<AirplaneRegular />} value="arrivals">
+        <Tab id="Arrivals" icon={<Airplane />} value="arrivals">
           Arrivals
         </Tab>
-        <Tab id="Departures" icon={<AirplaneTakeOffRegular />} value="departures">
+        <Tab id="Departures" icon={<AirplaneTakeOff />} value="departures">
           Departures
         </Tab>
-        <Tab id="Conditions" icon={<TimeAndWeatherRegular />} value="conditions">
+        <Tab id="Conditions" icon={<TimeAndWeather />} value="conditions">
           Conditions
         </Tab>
       </TabList>