review comments

microsoft · Oct 2, 2024 · 7dacf5f · 7dacf5f
1 parent 7c95a38
commit 7dacf5f
Show file tree

Hide file tree

Showing 13 changed files with 95 additions and 161 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
@@ -207,8 +207,8 @@ export const WithIconOnlyAndVertical = () => (
 
 WithIconOnlyAndVertical.storyName = 'With icon only and vertical';
 
-export const CircularSubtleAppearance = () => (
-  <TabList appearance="subtle" shape="circular">
+export const SubtleRoundedAppearance = () => (
+  <TabList appearance="subtle-rounded">
     <Tab value="1">First</Tab>
     <Tab className="mouse-target" value="2">
       Second
@@ -217,12 +217,12 @@ export const CircularSubtleAppearance = () => (
   </TabList>
 );
 
-export const CircularSubtleAppearanceDarkMode = getStoryVariant(CircularSubtleAppearance, DARK_MODE);
+export const SubtleRoundedAppearanceDarkMode = getStoryVariant(SubtleRoundedAppearance, DARK_MODE);
 
-export const CircularSubtleAppearanceHighContrast = getStoryVariant(CircularSubtleAppearance, HIGH_CONTRAST);
+export const SubtleRoundedAppearanceHighContrast = getStoryVariant(SubtleRoundedAppearance, HIGH_CONTRAST);
 
-export const CircularFilledAppearance = () => (
-  <TabList appearance="filled" shape="circular">
+export const FilledRoundedAppearance = () => (
+  <TabList appearance="filled-rounded">
     <Tab value="1">First</Tab>
     <Tab className="mouse-target" value="2">
       Second
@@ -231,6 +231,6 @@ export const CircularFilledAppearance = () => (
   </TabList>
 );
 
-export const CircularFilledAppearanceDarkMode = getStoryVariant(CircularFilledAppearance, DARK_MODE);
+export const FilledRoundedAppearanceDarkMode = getStoryVariant(FilledRoundedAppearance, DARK_MODE);
 
-export const CircularFilledAppearanceHighContrast = getStoryVariant(CircularFilledAppearance, HIGH_CONTRAST);
+export const FilledRoundedAppearanceHighContrast = getStoryVariant(FilledRoundedAppearance, HIGH_CONTRAST);
diff --git a/packages/react-components/react-tabs/library/etc/react-tabs.api.md b/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' | 'shape' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
+export type TabListContextValue = Pick<TabListProps, 'onTabSelect' | 'selectTabOnFocus' | 'selectedValue' | 'reserveSelectedTabSpace'> & Required<Pick<TabListProps, 'appearance' | 'disabled' | 'size' | 'vertical'>> & {
     onRegister: RegisterTabEventHandler;
     onUnregister: RegisterTabEventHandler;
     onSelect: SelectTabEventHandler;
@@ -66,15 +66,14 @@ export type TabListContextValues = {
 
 // @public
 export type TabListProps = ComponentProps<TabListSlots> & {
-    appearance?: 'transparent' | 'subtle' | 'filled';
+    appearance?: 'transparent' | 'subtle' | 'subtle-rounded' | 'filled-rounded';
     reserveSelectedTabSpace?: boolean;
     defaultSelectedValue?: TabValue;
     disabled?: boolean;
     onTabSelect?: SelectTabEventHandler;
     selectTabOnFocus?: boolean;
     selectedValue?: TabValue;
     size?: 'small' | 'medium' | 'large';
-    shape?: 'circular';
     vertical?: boolean;
 };
 
@@ -110,12 +109,11 @@ export type TabSlots = {
 
 // @public
 export type TabState = ComponentState<TabInternalSlots> & Pick<TabProps, 'value'> & Required<Pick<TabProps, 'disabled'>> & {
-    appearance?: 'transparent' | 'subtle' | 'filled';
+    appearance?: 'transparent' | 'subtle' | 'subtle-rounded' | 'filled-rounded';
     iconOnly: boolean;
     selected: boolean;
     contentReservedSpaceClassName?: string;
     size: 'small' | 'medium' | 'large';
-    shape?: 'circular';
     vertical: boolean;
 };
 

diff --git a/packages/react-components/react-tabs/library/src/components/Tab/Tab.types.ts b/packages/react-components/react-tabs/library/src/components/Tab/Tab.types.ts
@@ -50,9 +50,9 @@ export type TabState = ComponentState<TabInternalSlots> &
   Pick<TabProps, 'value'> &
   Required<Pick<TabProps, 'disabled'>> & {
     /**
-     * A tab supports 'transparent' and 'subtle' appearance.
+     * A tab supports 'transparent', 'subtle', `subtle-rounded` and `filled-rounded` appearance.
      */
-    appearance?: 'transparent' | 'subtle' | 'filled';
+    appearance?: 'transparent' | 'subtle' | 'subtle-rounded' | 'filled-rounded';
 
     /**
      * A tab can have only an icon slot filled and no content.
@@ -73,12 +73,6 @@ 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.
      */

diff --git a/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts b/packages/react-components/react-tabs/library/src/components/Tab/useTab.ts
@@ -33,7 +33,6 @@ 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);
@@ -89,7 +88,6 @@ export const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): T
       elementType: 'span',
     }),
     appearance,
-    shape,
     disabled,
     selected,
     size,