fix: Tabs from testing (#7463)

snowystinger · web-flow · commit 494e01c0a12b · 2024-12-04T23:00:20.000Z
* fix: Tabs from testing

* fix horizontal spacing for icon only

* more spacing fixes

* make mobile testing easier

* rename prop isIconOnly
diff --git a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
@@ -31,7 +31,7 @@ export default meta;
 export const Example = (args: any) => (
   <Tabs {...args} styles={style({width: 450, height: 256})}>
     <TabList aria-label="History of Ancient Rome">
-      <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
+      <Tab id="FoR">Founding of Rome</Tab>
       <Tab id="MaR">Monarchy and Republic</Tab>
       <Tab id="Emp">Empire</Tab>
     </TabList>
@@ -57,9 +57,9 @@ export const Example = (args: any) => (
 export const Disabled = (args: any) => (
   <Tabs {...args} styles={style({width: 450, height: 144})} disabledKeys={['FoR', 'MaR', 'Emp']}>
     <TabList aria-label="History of Ancient Rome">
-      <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
-      <Tab id="MaR">Monarchy and Republic</Tab>
-      <Tab id="Emp">Empire</Tab>
+      <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
+      <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
+      <Tab id="Emp" aria-label="Likes"><Heart /><Text>Likes</Text></Tab>
     </TabList>
     <TabPanel id="FoR">
       Arma virumque cano, Troiae qui primus ab oris.
@@ -74,7 +74,7 @@ export const Disabled = (args: any) => (
 );
 
 export const Icons = (args: any) => (
-  <Tabs {...args} styles={style({width: 208, height: 144})} iconOnly>
+  <Tabs {...args} styles={style({width: 208, height: 144})} isIconOnly>
     <TabList aria-label="History of Ancient Rome">
       <Tab id="FoR" aria-label="Edit"><Edit /><Text>Edit</Text></Tab>
       <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Notifications</Text></Tab>
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -29,7 +29,7 @@ import {
 import {centerBaseline} from './CenterBaseline';
 import {Collection, DOMRef, DOMRefValue, FocusableRef, FocusableRefValue, Key, Node, Orientation, RefObject} from '@react-types/shared';
 import {createContext, forwardRef, Fragment, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {focusRing, style} from '../style' with {type: 'macro'};
+import {focusRing, size, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -55,7 +55,7 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
   /**
    * If the tabs should only display icons and no text.
    */
-  iconOnly?: boolean
+  isIconOnly?: boolean
 }
 
 export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
@@ -96,7 +96,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
     isDisabled,
     disabledKeys,
     orientation = 'horizontal',
-    iconOnly = false
+    isIconOnly = false
   } = props;
   let domRef = useDOMRef(ref);
   let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
@@ -112,7 +112,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
           disabledKeys,
           selectedKey: value,
           onSelectionChange: setValue,
-          iconOnly,
+          isIconOnly,
           onFocus: () => pickerRef.current?.focus(),
           pickerRef
         }]
@@ -170,7 +170,7 @@ const tablist = style({
 });
 
 export function TabList<T extends object>(props: TabListProps<T>) {
-  let {density, isDisabled, disabledKeys, orientation, iconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
+  let {density, isDisabled, disabledKeys, orientation, isIconOnly, onFocus} = useContext(InternalTabsContext) ?? {};
   let {showItems} = useContext(CollapseContext) ?? {};
   let state = useContext(TabListStateContext);
   let [selectedTab, setSelectedTab] = useState<HTMLElement | undefined>(undefined);
@@ -208,7 +208,7 @@ export function TabList<T extends object>(props: TabListProps<T>) {
       <RACTabList
         {...props}
         ref={tablistRef}
-        className={renderProps => tablist({...renderProps, isIconOnly: iconOnly, density})} />
+        className={renderProps => tablist({...renderProps, isIconOnly, density})} />
       {orientation === 'horizontal' &&
         <TabLine showItems={showItems} disabledKeys={disabledKeys} isDisabled={isDisabled} selectedTab={selectedTab} orientation={orientation} density={density} />}
     </div>
@@ -255,7 +255,7 @@ const selectedIndicator = style({
   transitionTimingFunction: 'in-out'
 });
 
-function TabLine(props: TabLineProps) {
+function TabLine(props: TabLineProps & {isIconOnly?: boolean}) {
   let {
     disabledKeys,
     isDisabled: isTabsDisabled,
@@ -301,7 +301,14 @@ function TabLine(props: TabLineProps) {
 
   useLayoutEffect(() => {
     onResize();
-  }, [onResize, state?.selectedItem?.key, direction, orientation, density]);
+  }, [onResize, state?.selectedItem?.key, density]);
+
+  let ref = useRef<HTMLElement | undefined>(selectedTab);
+  // assign ref before the useResizeObserver useEffect runs
+  useLayoutEffect(() => {
+    ref.current = selectedTab;
+  });
+  useResizeObserver({ref, onResize});
 
   return (
     <div style={{...style}} className={selectedIndicator({isDisabled, orientation})} />
@@ -333,7 +340,10 @@ const tab = style({
   position: 'relative',
   cursor: 'default',
   flexShrink: 0,
-  transition: 'default'
+  transition: 'default',
+  paddingX: {
+    isIconOnly: size(6)
+  }
 }, getAllowedOverrides());
 
 const icon = style({
@@ -346,15 +356,15 @@ const icon = style({
 });
 
 export function Tab(props: TabProps) {
-  let {density, iconOnly} = useContext(InternalTabsContext) ?? {};
+  let {density, isIconOnly} = useContext(InternalTabsContext) ?? {};
 
   return (
     <RACTab
       {...props}
       // @ts-ignore
       originalProps={props}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density}, props.styles)}>
+      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, isIconOnly}, props.styles)}>
       {({
           // @ts-ignore
           isMenu
@@ -372,7 +382,7 @@ export function Tab(props: TabProps) {
                       display: {
                         isIconOnly: 'none'
                       }
-                    })({isIconOnly: iconOnly})
+                    })({isIconOnly})
                 }],
                 [IconContext, {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
@@ -469,7 +479,7 @@ let HiddenTabs = function (props: {
 let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']}) => {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {items} = props;
-  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef} = useContext(InternalTabsContext);
+  let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, pickerRef, isIconOnly} = useContext(InternalTabsContext);
   let state = useContext(TabListStateContext);
   let allKeysDisabled = useMemo(() => {
     return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
@@ -491,6 +501,7 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
           ref={pickerRef ? pickerRef : undefined}
           isDisabled={isDisabled || allKeysDisabled}
           density={density!}
+          isIconOnly={isIconOnly}
           items={items}
           disabledKeys={disabledKeys}
           selectedKey={selectedKey}
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -29,15 +29,14 @@ import {
   checkmark,
   description,
   icon,
-  iconCenterWrapper,
   label,
   menuitem,
   sectionHeader,
   sectionHeading
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {edgeToText, focusRing, style} from '../style' with {type: 'macro'};
+import {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};
 import {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   FieldLabel
@@ -86,7 +85,11 @@ export interface PickerProps<T extends object> extends
     /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */
     menuWidth?: number,
     /** Density of the tabs, affects the height of the picker. */
-    density: 'compact' | 'regular'
+    density: 'compact' | 'regular',
+    /**
+     * If the tab picker should only display icon and no text for the button label.
+     */
+    isIconOnly?: boolean
 }
 
 export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
@@ -155,6 +158,14 @@ const iconStyles = style({
   }
 });
 
+const iconCenterWrapper = style({
+  display: 'flex',
+  gridArea: 'icon',
+  paddingStart: {
+    isIconOnly: size(6)
+  }
+});
+
 let InsideSelectValueContext = createContext(false);
 
 function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
@@ -170,6 +181,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
     items,
     placeholder = stringFormatter.format('picker.placeholder'),
     density,
+    isIconOnly,
     ...pickerProps
   } = props;
   let isQuiet = true;
@@ -205,7 +217,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                       [IconContext, {
                         slots: {
                           icon: {
-                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
+                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({isIconOnly})}),
                             styles: icon
                           }
                         }
@@ -214,10 +226,13 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                         slots: {
                           // Default slot is useful when converting other collections to PickerItems.
                           [DEFAULT_SLOT]: {styles: style({
-                            display: 'block',
+                            display: {
+                              default: 'block',
+                              isIconOnly: 'none'
+                            },
                             flexGrow: 1,
                             truncate: true
-                          })}
+                          })({isIconOnly})}
                         }
                       }],
                       [InsideSelectValueContext, true]
@@ -291,7 +306,7 @@ export function PickerItem(props: PickerItemProps) {
           <DefaultProvider
             context={IconContext}
             value={{slots: {
-              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
+              icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}), styles: icon}
             }}}>
             <DefaultProvider
               context={TextContext}
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -30,10 +30,10 @@ const meta: Meta<typeof Tabs> = {
 export default meta;
 
 export const Example = (args: any) => (
-  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={style({width: 'full'})}>
       <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
+        <Tab id="FoR">Founding of Rome</Tab>
         <Tab id="MaR">Monarchy and Republic</Tab>
         <Tab id="Emp">Empire</Tab>
       </TabList>
@@ -58,10 +58,10 @@ export const Example = (args: any) => (
 );
 
 export const Disabled = (args: any) => (
-  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={style({width: 'full'})} disabledKeys={['FoR', 'MaR', 'Emp']}>
       <TabList aria-label="History of Ancient Rome">
-        <Tab id="FoR"><Edit /><Text>Founding of Rome</Text></Tab>
+        <Tab id="FoR">Founding of Rome</Tab>
         <Tab id="MaR">Monarchy and Republic</Tab>
         <Tab id="Emp">Empire</Tab>
       </TabList>
@@ -78,9 +78,9 @@ export const Disabled = (args: any) => (
   </div>
 );
 
-export const Icons = (args: any) => (
-  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...args} styles={style({width: 'full'})} iconOnly>
+const IconsRender = (props) => (
+  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+    <Tabs {...props} styles={style({width: 'full'})}>
       <TabList aria-label="History of Ancient Rome">
         <Tab id="FoR" aria-label="Edit"><Edit /><Text>Founding of Rome</Text></Tab>
         <Tab id="MaR" aria-label="Notifications"><Bell /><Text>Monarchy and Republic</Text></Tab>
@@ -99,6 +99,10 @@ export const Icons = (args: any) => (
   </div>
 );
 
+export const Icons = {
+  render: (args) => <IconsRender {...args} />
+};
+
 interface Item {
   id: number,
   title: string,
@@ -111,7 +115,7 @@ let items: Item[] = [
 ];
 
 export const Dynamic = (args: any) => (
-  <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
+  <div className={style({width: 700, maxWidth: '[calc(100vw - 60px)]', height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
     <Tabs {...args} styles={style({width: 'full'})} disabledKeys={new Set([2])}>
       <TabList aria-label="History of Ancient Rome" items={items}>
         {item => <Tab>{item.title}</Tab>}
