feat(react-tabs): add rounded tab appearance variants

apps/vr-tests-react-components/src/stories/Tabs.stories.tsx

@@ -206,3 +206,31 @@ export const WithIconOnlyAndVertical = () => (
 );
 
 WithIconOnlyAndVertical.storyName = 'With icon only and vertical';
+
+export const CircularSubtleAppearance = () => (
+  <TabList appearance="subtle" shape="circular">
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+
+export const CircularSubtleAppearanceDarkMode = getStoryVariant(CircularSubtleAppearance, DARK_MODE);
+
+export const CircularSubtleAppearanceHighContrast = getStoryVariant(CircularSubtleAppearance, HIGH_CONTRAST);
+
+export const CircularFilledAppearance = () => (
+  <TabList appearance="filled" shape="circular">
+    <Tab value="1">First</Tab>
+    <Tab className="mouse-target" value="2">
+      Second
+    </Tab>
+    <Tab value="3">Third</Tab>
+  </TabList>
+);
+
+export const CircularFilledAppearanceDarkMode = getStoryVariant(CircularFilledAppearance, DARK_MODE);
+
+export const CircularFilledAppearanceHighContrast = getStoryVariant(CircularFilledAppearance, HIGH_CONTRAST);

change/@fluentui-react-tabs-3bd10027-20f4-490c-9384-f87d93d8fe3a.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feature: add circular tab variant",
+  "packageName": "@fluentui/react-tabs",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-tabs/library/etc/react-tabs.api.md

@@ -48,7 +48,7 @@ export const TabList: ForwardRefComponent<TabListProps>;
 export const tabListClassNames: SlotClassNames<TabListSlots>;
 
 // @public (undocumented)
-export type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
+export type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'shape' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
     onRegister: RegisterTabEventHandler;
     onUnregister: RegisterTabEventHandler;
     onSelect: SelectTabEventHandler;
@@ -66,14 +66,15 @@ export type TabListContextValues = {
 
 // @public
 export type TabListProps = ComponentProps<TabListSlots> & {
-    appearance?: 'transparent' | 'subtle';
+    appearance?: 'transparent' | 'subtle' | 'filled';
     reserveSelectedTabSpace?: boolean;
     defaultSelectedValue?: TabValue;
     disabled?: boolean;
     onTabSelect?: SelectTabEventHandler;
     selectTabOnFocus?: boolean;
     selectedValue?: TabValue;
     size?: 'small' | 'medium' | 'large';
+    shape?: 'circular';
     vertical?: boolean;
 };
 
@@ -109,11 +110,12 @@ export type TabSlots = {
 
 // @public
 export type TabState = ComponentState<TabInternalSlots> & Pick<TabProps, 'value'> & Required<Pick<TabProps, 'disabled'>> & {
-    appearance?: 'transparent' | 'subtle';
+    appearance?: 'transparent' | 'subtle' | 'filled';
     iconOnly: boolean;
     selected: boolean;
     contentReservedSpaceClassName?: string;
     size: 'small' | 'medium' | 'large';
+    shape?: 'circular';
     vertical: boolean;
 };
 

packages/react-components/react-tabs/library/src/components/Tab/Tab.types.ts

@@ -52,7 +52,8 @@ export type TabState = ComponentState<TabInternalSlots> &
     /**
      * A tab supports 'transparent' and 'subtle' appearance.
      */
-    appearance?: 'transparent' | 'subtle';
+    appearance?: 'transparent' | 'subtle' | 'filled';
+
     /**
      * A tab can have only an icon slot filled and no content.
      */
@@ -72,6 +73,12 @@ export type TabState = ComponentState<TabInternalSlots> &
      * A tab can be either 'small', 'medium', or 'large' size.
      */
     size: 'small' | 'medium' | 'large';
+
+    /**
+     * A tab can have a circular shape. Could be used only with 'filled' or 'subtle' appearance.
+     */
+    shape?: 'circular';
+
     /**
      * A tab can arrange its content based on if the tabs in the list are arranged vertically.
      */

packages/react-components/react-tabs/library/src/components/Tab/useTab.ts

@@ -33,6 +33,7 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
   const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);
   const size = useTabListContext_unstable(ctx => ctx.size);
   const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);
+  const shape = useTabListContext_unstable(ctx => ctx.shape);
   const disabled = listDisabled || tabDisabled;
 
   const innerRef = React.useRef<HTMLElement>(null);
@@ -88,6 +89,7 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
       elementType: 'span',
     }),
     appearance,
+    shape,
     disabled,
     selected,
     size,

packages/react-components/react-tabs/library/src/components/Tab/useTabStyles.styles.ts

@@ -173,6 +173,92 @@ const useRootStyles = makeStyles({
   },
 });
 
+const useCircularStyles = makeStyles({
+  base: {
+    borderRadius: tokens.borderRadiusCircular,
+    '& .fui-Tab__icon': {
+      color: 'inherit',
+    },
+    '& .fui-Tab__content': {
+      color: 'inherit',
+    },
+  },
+  subtle: {
+    backgroundColor: tokens.colorTransparentBackground,
+    border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,
+    color: tokens.colorNeutralForeground2,
+    ':hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Hover}`,
+      color: tokens.colorNeutralForeground2Hover,
+    },
+    ':active': {
+      backgroundColor: tokens.colorNeutralBackground1Pressed,
+      border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStroke1Pressed}`,
+      color: tokens.colorNeutralForeground2Pressed,
+    },
+  },
+  subtleSelected: {
+    backgroundColor: tokens.colorBrandBackground2,
+    border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStroke}`,
+    color: tokens.colorBrandForeground2,
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackground2Hover,
+      border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokeHover}`,
+      color: tokens.colorBrandForeground2Hover,
+    },
+    ':active': {
+      backgroundColor: tokens.colorBrandBackground2Pressed,
+      border: `solid ${tokens.strokeWidthThin} ${tokens.colorCompoundBrandStrokePressed}`,
+      color: tokens.colorBrandForeground2Pressed,
+    },
+  },
+  subtleDisabled: {
+    backgroundColor: tokens.colorTransparentBackground,
+    color: tokens.colorNeutralForegroundDisabled,
+    border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,
+  },
+  subtleDisabledSelected: {
+    backgroundColor: tokens.colorTransparentBackground,
+    color: tokens.colorNeutralForegroundDisabled,
+    border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,
+  },
+  filled: {
+    backgroundColor: tokens.colorNeutralBackground3,
+    color: tokens.colorNeutralForeground2,
+    ':hover': {
+      backgroundColor: tokens.colorNeutralBackground3Hover,
+      color: tokens.colorNeutralForeground2Hover,
+    },
+    ':active': {
+      backgroundColor: tokens.colorNeutralBackground3Pressed,
+      color: tokens.colorNeutralForeground2Pressed,
+    },
+  },
+  filledSelected: {
+    backgroundColor: tokens.colorBrandBackground,
+    color: tokens.colorNeutralForegroundOnBrand,
+    ':hover': {
+      backgroundColor: tokens.colorBrandBackgroundHover,
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+    ':active': {
+      backgroundColor: tokens.colorBrandBackgroundPressed,
+      color: tokens.colorNeutralForegroundOnBrand,
+    },
+  },
+  filledDisabled: {
+    backgroundColor: tokens.colorNeutralBackgroundDisabled,
+    border: `solid ${tokens.strokeWidthThin} ${tokens.colorTransparentStroke}`,
+    color: tokens.colorNeutralForegroundDisabled,
+  },
+  filledDisabledSelected: {
+    backgroundColor: tokens.colorNeutralBackgroundDisabled,
+    border: `solid ${tokens.strokeWidthThin} ${tokens.colorNeutralStrokeDisabled}`,
+    color: tokens.colorNeutralForegroundDisabled,
+  },
+});
+
 /**
  * Focus styles for the root slot
  */
@@ -472,35 +558,37 @@ export const useTabIndicatorStyles_unstable = (state: TabState): TabState => {
   const pendingIndicatorStyles = usePendingIndicatorStyles();
   const activeIndicatorStyles = useActiveIndicatorStyles();
 
-  const { disabled, selected, size, vertical } = state;
-
-  state.root.className = mergeClasses(
-    tabClassNames.root,
-    rootStyles.root,
-
-    // pending indicator (before pseudo element)
-    pendingIndicatorStyles.base,
-    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.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,
-  );
+  const { disabled, selected, size, shape, vertical } = state;
+
+  const classes: Parameters<typeof mergeClasses> = [tabClassNames.root, rootStyles.root];
+
+  // Only apply indicator styles if the shape is not circular
+  if (shape !== 'circular') {
+    classes.push(
+      // pending indicator (before pseudo element)
+      pendingIndicatorStyles.base,
+      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.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 = mergeClasses(...classes, state.root.className);
 
   useTabAnimatedIndicatorStyles_unstable(state);
 
@@ -522,21 +610,40 @@ export const useTabButtonStyles_unstable = (state: TabState, slot: TabState['roo
 
   const rootStyles = useRootStyles();
   const focusStyles = useFocusStyles();
+  const circularStyles = useCircularStyles();
 
-  const { appearance, disabled, selected, size, vertical } = state;
+  const { appearance, shape, disabled, selected, size, vertical } = state;
+
+  const isCircular = shape === 'circular';
 
   slot.className = mergeClasses(
     rootStyles.button,
+    // orientation
     vertical ? rootStyles.vertical : rootStyles.horizontal,
+    // size
     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,
+    // appearance
+    !disabled && appearance === 'subtle' && !isCircular && rootStyles.subtle,
     !disabled && appearance === 'transparent' && rootStyles.transparent,
-    !disabled && selected && rootStyles.selected,
+    !disabled && selected && !isCircular && rootStyles.selected,
     disabled && rootStyles.disabled,
 
+    // circular tabs
+    isCircular && circularStyles.base,
+    // subtle + circular
+    !disabled && appearance === 'subtle' && isCircular && circularStyles.subtle,
+    !disabled && appearance === 'subtle' && selected && isCircular && circularStyles.subtleSelected,
+    disabled && appearance === 'subtle' && isCircular && circularStyles.subtleDisabled,
+    disabled && appearance === 'subtle' && selected && isCircular && circularStyles.subtleDisabledSelected,
+    // filled + circular
+    !disabled && appearance === 'filled' && isCircular && circularStyles.filled,
+    !disabled && appearance === 'filled' && selected && isCircular && circularStyles.filledSelected,
+    disabled && appearance === 'filled' && isCircular && circularStyles.filledDisabled,
+    disabled && appearance === 'filled' && selected && isCircular && circularStyles.filledDisabledSelected,
+
     slot.className,
   );
 

packages/react-components/react-tabs/library/src/components/TabList/TabList.types.ts

@@ -42,10 +42,12 @@ export type TabListProps = ComponentProps<TabListSlots> & {
    * A tab list can supports 'transparent' and 'subtle' appearance.
    *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
    *- 'transparent': No background and border styling
+   *- 'filled': Adds background and border styling
+   *
    * The appearance affects each of the contained tabs.
    * @default 'transparent'
    */
-  appearance?: 'transparent' | 'subtle';
+  appearance?: 'transparent' | 'subtle' | 'filled';
 
   /**
    * Tab size may change between unselected and selected states.
@@ -92,6 +94,11 @@ export type TabListProps = ComponentProps<TabListSlots> & {
    */
   size?: 'small' | 'medium' | 'large';
 
+  /**
+   * A tab list can be set to have a circular shape. Could be used with 'filled' or 'subtle' appearance.
+   */
+  shape?: 'circular';
+
   /**
    * A tab list can arrange its tabs vertically.
    * @default false
@@ -101,7 +108,7 @@ export type TabListProps = ComponentProps<TabListSlots> & {
 
 export type TabListContextValue = Pick<
   TabListProps,
-  'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'
+  'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'shape' | 'reserveSelectedTabSpace'
 > &
   Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
     /** A callback to allow a tab to register itself with the tab list. */

packages/react-components/react-tabs/library/src/components/TabList/TabListContext.ts

@@ -22,6 +22,7 @@ const tabListContextDefaultValue: TabListContextValue = {
       registeredTabs: {},
     };
   },
+  shape: undefined,
   size: 'medium',
   vertical: false,
 };

packages/react-components/react-tabs/library/src/components/TabList/useTabList.ts

@@ -27,6 +27,7 @@ export const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElem
     onTabSelect,
     selectTabOnFocus = false,
     size = 'medium',
+    shape,
     vertical = false,
   } = props;
 
@@ -102,6 +103,7 @@ export const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElem
     selectTabOnFocus,
     selectedValue,
     size,
+    shape,
     vertical,
     onRegister,
     onUnregister,

packages/react-components/react-tabs/library/src/components/TabList/useTabListContextValues.tsx

@@ -12,6 +12,7 @@ export function useTabListContextValues_unstable(state: TabListState): TabListCo
     onSelect,
     getRegisteredTabs,
     size,
+    shape,
     vertical,
   } = state;
 
@@ -26,6 +27,7 @@ export function useTabListContextValues_unstable(state: TabListState): TabListCo
     onUnregister,
     getRegisteredTabs,
     size,
+    shape,
     vertical,
   };