From cd94245d016dd08bff6eedc12a7d42cfcada9243 Mon Sep 17 00:00:00 2001
From: GitHub <snowystinger@gmail.com>
Date: Wed, 4 Dec 2024 14:39:35 +1100
Subject: [PATCH 1/5] fix: Tabs from testing

---
 packages/@react-spectrum/s2/src/Tabs.tsx             | 12 ++++++++++--
 packages/@react-spectrum/s2/stories/Tabs.stories.tsx | 12 ++++++++----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 2b9dcd250b2..38b326e383d 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -255,7 +255,7 @@ const selectedIndicator = style({
   transitionTimingFunction: 'in-out'
 });
 
-function TabLine(props: TabLineProps) {
+function TabLine(props: TabLineProps & {iconOnly?: boolean}) {
   let {
     disabledKeys,
     isDisabled: isTabsDisabled,
@@ -295,13 +295,21 @@ function TabLine(props: TabLineProps) {
       } else {
         styleObj.height = `${selectedTab.offsetHeight}px`;
       }
+      console.log('styleObj', styleObj);
       setStyle(styleObj);
     }
   }, [direction, setStyle, selectedTab, orientation]);
 
   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})} />
diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index 554dda9aca4..e756930c699 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -33,7 +33,7 @@ export const Example = (args: any) => (
   <div className={style({width: 700, 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>
@@ -61,7 +61,7 @@ export const Disabled = (args: any) => (
   <div className={style({width: 700, 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) => (
+const IconsRender = (props) => (
   <div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
-    <Tabs {...args} styles={style({width: 'full'})} iconOnly>
+    <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,

From ff8e5c9d7a28d3c56b8a9743d89c907697222807 Mon Sep 17 00:00:00 2001
From: GitHub <snowystinger@gmail.com>
Date: Wed, 4 Dec 2024 14:49:34 +1100
Subject: [PATCH 2/5] fix horizontal spacing for icon only

---
 packages/@react-spectrum/s2/src/Tabs.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 38b326e383d..53ebdf70b01 100644
--- 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
@@ -341,7 +341,10 @@ const tab = style({
   position: 'relative',
   cursor: 'default',
   flexShrink: 0,
-  transition: 'default'
+  transition: 'default',
+  paddingX: {
+    isIconOnly: size(6)
+  }
 }, getAllowedOverrides());
 
 const icon = style({
@@ -362,7 +365,7 @@ export function Tab(props: TabProps) {
       // @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: iconOnly}, props.styles)}>
       {({
           // @ts-ignore
           isMenu

From 09a7d5e91058b68e06fef0beb46071930b163c07 Mon Sep 17 00:00:00 2001
From: GitHub <snowystinger@gmail.com>
Date: Wed, 4 Dec 2024 14:59:58 +1100
Subject: [PATCH 3/5] more spacing fixes

---
 packages/@react-spectrum/s2/src/Tabs.tsx      |  4 +--
 .../@react-spectrum/s2/src/TabsPicker.tsx     | 28 ++++++++++++++-----
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 53ebdf70b01..4144eb9f57a 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -295,7 +295,6 @@ function TabLine(props: TabLineProps & {iconOnly?: boolean}) {
       } else {
         styleObj.height = `${selectedTab.offsetHeight}px`;
       }
-      console.log('styleObj', styleObj);
       setStyle(styleObj);
     }
   }, [direction, setStyle, selectedTab, orientation]);
@@ -480,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, iconOnly} = useContext(InternalTabsContext);
   let state = useContext(TabListStateContext);
   let allKeysDisabled = useMemo(() => {
     return isAllTabsDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
@@ -502,6 +501,7 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
           ref={pickerRef ? pickerRef : undefined}
           isDisabled={isDisabled || allKeysDisabled}
           density={density!}
+          iconOnly={iconOnly}
           items={items}
           disabledKeys={disabledKeys}
           selectedKey={selectedKey}
diff --git a/packages/@react-spectrum/s2/src/TabsPicker.tsx b/packages/@react-spectrum/s2/src/TabsPicker.tsx
index 313c626876c..88942707f06 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -29,7 +29,6 @@ import {
   checkmark,
   description,
   icon,
-  iconCenterWrapper,
   label,
   menuitem,
   sectionHeader,
@@ -37,7 +36,7 @@ import {
 } 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.
+     */
+    iconOnly?: 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>) {
@@ -205,7 +216,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: props.iconOnly})}),
                             styles: icon
                           }
                         }
@@ -214,10 +225,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: props.iconOnly})}
                         }
                       }],
                       [InsideSelectValueContext, true]
@@ -291,7 +305,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}

From aff08159c7083bd611213342fa91a471e731fb2f Mon Sep 17 00:00:00 2001
From: GitHub <snowystinger@gmail.com>
Date: Wed, 4 Dec 2024 15:54:11 +1100
Subject: [PATCH 4/5] make mobile testing easier

---
 packages/@react-spectrum/s2/stories/Tabs.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
index e756930c699..fa8d585bf5f 100644
--- a/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/Tabs.stories.tsx
@@ -30,7 +30,7 @@ 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">Founding of Rome</Tab>
@@ -58,7 +58,7 @@ 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">Founding of Rome</Tab>
@@ -79,7 +79,7 @@ export const Disabled = (args: any) => (
 );
 
 const IconsRender = (props) => (
-  <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 {...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>
@@ -115,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>}

From d092f95e89f91d83b5859adb2cc43ca9befbd587 Mon Sep 17 00:00:00 2001
From: GitHub <snowystinger@gmail.com>
Date: Thu, 5 Dec 2024 06:18:28 +1100
Subject: [PATCH 5/5] rename prop isIconOnly

---
 .../s2/chromatic/Tabs.stories.tsx             | 10 ++++-----
 packages/@react-spectrum/s2/src/Tabs.tsx      | 22 +++++++++----------
 .../@react-spectrum/s2/src/TabsPicker.tsx     |  7 +++---
 3 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx b/packages/@react-spectrum/s2/chromatic/Tabs.stories.tsx
index 3525c5c3785..80a3c6f9399 100644
--- 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
index 4144eb9f57a..04de2f8bd7f 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -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 & {iconOnly?: boolean}) {
+function TabLine(props: TabLineProps & {isIconOnly?: boolean}) {
   let {
     disabledKeys,
     isDisabled: isTabsDisabled,
@@ -356,7 +356,7 @@ const icon = style({
 });
 
 export function Tab(props: TabProps) {
-  let {density, iconOnly} = useContext(InternalTabsContext) ?? {};
+  let {density, isIconOnly} = useContext(InternalTabsContext) ?? {};
 
   return (
     <RACTab
@@ -364,7 +364,7 @@ export function Tab(props: TabProps) {
       // @ts-ignore
       originalProps={props}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, isIconOnly: iconOnly}, props.styles)}>
+      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, isIconOnly}, props.styles)}>
       {({
           // @ts-ignore
           isMenu
@@ -382,7 +382,7 @@ export function Tab(props: TabProps) {
                       display: {
                         isIconOnly: 'none'
                       }
-                    })({isIconOnly: iconOnly})
+                    })({isIconOnly})
                 }],
                 [IconContext, {
                   render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
@@ -479,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, iconOnly} = 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());
@@ -501,7 +501,7 @@ let TabsMenu = (props: {items: Array<Node<any>>, onSelectionChange: TabsProps['o
           ref={pickerRef ? pickerRef : undefined}
           isDisabled={isDisabled || allKeysDisabled}
           density={density!}
-          iconOnly={iconOnly}
+          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
index 88942707f06..c66c8c264e0 100644
--- a/packages/@react-spectrum/s2/src/TabsPicker.tsx
+++ b/packages/@react-spectrum/s2/src/TabsPicker.tsx
@@ -89,7 +89,7 @@ export interface PickerProps<T extends object> extends
     /**
      * If the tab picker should only display icon and no text for the button label.
      */
-    iconOnly?: boolean
+    isIconOnly?: boolean
 }
 
 export const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
@@ -181,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;
@@ -216,7 +217,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                       [IconContext, {
                         slots: {
                           icon: {
-                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({isIconOnly: props.iconOnly})}),
+                            render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({isIconOnly})}),
                             styles: icon
                           }
                         }
@@ -231,7 +232,7 @@ function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLB
                             },
                             flexGrow: 1,
                             truncate: true
-                          })({isIconOnly: props.iconOnly})}
+                          })({isIconOnly})}
                         }
                       }],
                       [InsideSelectValueContext, true]