Fix S2 ComboBox and NumberField custom width (#6782)

Author: devongovett

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -42,7 +42,7 @@ import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
 import {createContext, CSSProperties, forwardRef, ReactNode, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';
 import {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';
-import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
@@ -240,19 +240,12 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: FocusableRef<H
               isInvalid={isInvalid}
               size={size}
               styles={style({
+                ...fieldInput(),
                 paddingStart: 'edge-to-text',
                 // better way to do this one? it's not actually half, they are
                 // [9, 4], [12, 6], [15, 8], [18, 8]
                 // also noticed that our measurement is including the border, making the padding too much
-                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]',
-                width: {
-                  default: 208,
-                  size: {
-                    S: 192,
-                    L: 224,
-                    XL: 240
-                  }
-                }
+                paddingEnd: '[calc(self(height, self(minHeight)) * 3 / 16)]'
               })({size})}>
               <InputContext.Consumer>
                 {ctx => (

packages/@react-spectrum/s2/src/NumberField.tsx

@@ -25,7 +25,7 @@ import ChevronIcon from '../ui-icons/Chevron';
 import {createFocusableRef, useFocusableRef} from '@react-spectrum/utils';
 import {CSSProperties, ForwardedRef, forwardRef, ReactNode, useContext, useImperativeHandle, useMemo, useRef} from 'react';
 import Dash from '../ui-icons/Dash';
-import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {filterDOMProps, mergeProps, mergeRefs} from '@react-aria/utils';
 import {FocusableRef, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
@@ -284,19 +284,11 @@ function NumberField(props: NumberFieldProps, ref: FocusableRef<HTMLDivElement>)
                   isInvalid={isInvalid}
                   size={size}
                   styles={style({
+                    ...fieldInput(),
                     paddingStart: 'edge-to-text',
                     paddingEnd: 0,
-                    width: {
-                      default: 'full',
-                      size: {
-                        S: 192,
-                        M: 208,
-                        L: 224,
-                        XL: 240
-                      }
-                    },
                     cursor: 'default'
-                  })({size, isCollapsed})}>
+                  })({size})}>
                   <InputContext.Consumer>
                     {ctx => (
                       <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>

packages/@react-spectrum/s2/stories/ComboBox.stories.tsx

@@ -12,9 +12,11 @@
 
 import {Button, ComboBox, ComboBoxItem, ComboBoxSection, Content, ContextualHelp, Footer, Form, Header, Heading, Link, Text} from '../src';
 import {categorizeArgTypes} from './utils';
+import {ComboBoxProps} from 'react-aria-components';
 import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
+import {style} from '../style/spectrum-theme' with {type: 'macro'};
 
 const meta: Meta<typeof ComboBox<any>> = {
   component: ComboBox,
@@ -30,19 +32,18 @@ const meta: Meta<typeof ComboBox<any>> = {
 export default meta;
 type Story = StoryObj<typeof ComboBox<any>>;
 
-export const Example: Story = {
-  render: (args) => (
-    <ComboBox {...args}>
-      <ComboBoxItem>Chocolate</ComboBoxItem>
-      <ComboBoxItem>Mint</ComboBoxItem>
-      <ComboBoxItem>Strawberry</ComboBoxItem>
-      <ComboBoxItem>Vanilla</ComboBoxItem>
-      <ComboBoxItem>Chocolate Chip Cookie Dough</ComboBoxItem>
-    </ComboBox>
-  ),
-  args: {
-    label: 'Ice cream flavor'
-  }
+export const Example = (args: ComboBoxProps<any>) => (
+  <ComboBox {...args}>
+    <ComboBoxItem>Chocolate</ComboBoxItem>
+    <ComboBoxItem>Mint</ComboBoxItem>
+    <ComboBoxItem>Strawberry</ComboBoxItem>
+    <ComboBoxItem>Vanilla</ComboBoxItem>
+    <ComboBoxItem>Chocolate Chip Cookie Dough</ComboBoxItem>
+  </ComboBox>
+);
+
+Example.args = {
+  label: 'Ice cream flavor'
 };
 
 export const Sections: Story = {
@@ -210,3 +211,11 @@ ContextualHelpExample.parameters = {
     }
   }
 };
+
+export const CustomWidth = (args: any) => <Example {...args} styles={style({width: 384})} />;
+CustomWidth.args = Example.args;
+CustomWidth.parameters = {
+  docs: {
+    disable: true
+  }
+};