Remove isCollapsed from S2 NumberField and add hideStepper (#6894)

Author: devongovett

.storybook-s2/docs/Migrating.jsx

@@ -209,7 +209,6 @@ export function Migrating() {
           <li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>Remove <Code>isQuiet</Code> (it is no longer supported in Spectrum 2)</li>
           <li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>Change <Code>validationState="invalid"</Code> to <Code>isInvalid</Code></li>
           <li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>Remove <Code>validationState="valid"</Code> (it is no longer supported in Spectrum 2)</li>
-          <li className={style({lineHeight: 'body', color: 'body', marginY: 8})}>[PENDING] Comment out <Code>hideStepper</Code> (it has not been implemented yet)</li>
         </ul>
 
         <H3>Picker</H3>

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

@@ -21,8 +21,7 @@ import {
   Text,
   useContextProps
 } from 'react-aria-components';
-import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};
-import ChevronIcon from '../ui-icons/Chevron';
+import {baseColor, size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useContext, useImperativeHandle, useMemo, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import Dash from '../ui-icons/Dash';
@@ -38,23 +37,21 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface NumberFieldProps extends
-  AriaNumberFieldProps,
+  Omit<AriaNumberFieldProps, 'children' | 'className' | 'style'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
   /**
-   * Whether the NumberField step buttons should be collapsed into a single column.
-   *
-   * @default "false"
+   * Whether to hide the increment and decrement buttons.
+   * @default false
    */
-    isCollapsed?: boolean,
+  hideStepper?: boolean,
   /**
    * The size of the NumberField.
    *
    * @default "M"
    */
-    size?: 'S' | 'M' | 'L' | 'XL',
-    label?: ReactNode
+  size?: 'S' | 'M' | 'L' | 'XL'
 }
 
 export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);
@@ -94,52 +91,22 @@ const inputButton = style({
   justifyContent: 'center',
   width: {
     size: {
-      S: {
-        default: 16,
-        isCollapsed: 24
-      },
-      M: {
-        default: 20,
-        isCollapsed: 24
-      },
-      L: {
-        default: 24,
-        isCollapsed: 32
-      },
-      XL: {
-        default: 32,
-        isCollapsed: 40
-      }
-    }
-  },
-  height: {
-    default: 'auto',
-    isCollapsed: {
-      size: {
-        S: 8,
-        M: 12,
-        L: 16,
-        XL: 20
-      }
+      S: 16,
+      M: 20,
+      L: 24,
+      XL: 32
     }
   },
+  height: 'auto',
   marginStart: {
     default: 'text-to-control',
     type: {
       increment: 0
     }
   },
-  aspectRatio: {
-    default: 'square',
-    isCollapsed: 'auto'
-  },
-  flexShrink: {
-    default: 0,
-    isCollapsed: 1
-  },
-  minHeight: {
-    isCollapsed: 0
-  },
+  aspectRatio: 'square',
+  flexShrink: 0,
+  minHeight: 0,
   transition: {
     default: 'default',
     forcedColors: 'none'
@@ -179,59 +146,33 @@ const iconStyles = style({
 
 const stepperContainerStyles = style({
   display: 'flex',
-  flexDirection: {
-    default: 'row',
-    isCollapsed: 'column-reverse'
-  },
+  flexDirection: 'row',
   gap: {
-    default: {
-      size: {
-        S: 8,
-        M: 4,
-        L: 8,
-        XL: 8
-      }
-    },
-    isCollapsed: '[2px]'
-  },
-  maxHeight: {
-    isCollapsed: {
-      size: {
-        S: 16,
-        M: 24,
-        L: 32,
-        XL: 40 // 40
-      }
+    size: {
+      S: 8,
+      M: 4,
+      L: 8,
+      XL: 8
     }
   },
   paddingEnd: {
-    default: {
-      size: {
-        S: '[2px]',
-        M: '[4px]',
-        L: '[6px]',
-        XL: '[6px]'
-      }
-    },
-    isCollapsed: '[2px]'
+    size: {
+      S: size(2),
+      M: 4,
+      L: size(6),
+      XL: size(6)
+    }
   }
 });
 
-const chevronSize = {
-  S: 'XS',
-  M: 'S',
-  L: 'L',
-  XL: 'XL'
-} as const;
-
 function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
   let {
     label,
     contextualHelp,
     description: descriptionMessage,
     errorMessage,
-    isCollapsed,
+    hideStepper,
     isRequired,
     size = 'M',
     labelPosition = 'top',
@@ -293,9 +234,11 @@ function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
                   styles={style({
                     ...fieldInput(),
                     paddingStart: 'edge-to-text',
-                    paddingEnd: 0,
-                    cursor: 'default'
-                  })({size})}>
+                    paddingEnd: {
+                      default: 0,
+                      isStepperHidden: 'edge-to-text'
+                    }
+                  })({size, isStepperHidden: hideStepper})}>
                   <InputContext.Consumer>
                     {ctx => (
                       <InputContext.Provider value={{...ctx, ref: mergeRefs((ctx as any)?.ref, inputRef)}}>
@@ -304,40 +247,30 @@ function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
                     )}
                   </InputContext.Consumer>
                   {isInvalid && <FieldErrorIcon isDisabled={isDisabled} />}
-                  <div className={stepperContainerStyles({isCollapsed, size})}>
+                  {!hideStepper && <div className={stepperContainerStyles({size})}>
                     <StepButton
                       ref={decrementButtonRef}
                       slot="decrement"
                       style={renderProps => pressScale(decrementButtonRef)(renderProps)}
                       className={renderProps => inputButton({
                         ...renderProps,
-                        type: isCollapsed ? 'decrementStep' : 'decrement',
-                        isCollapsed,
+                        type: 'decrement',
                         size
                       })}>
-                      {
-                        isCollapsed
-                          ? <ChevronIcon size={chevronSize[size]} className={iconStyles({type: 'decrementStep'})} />
-                          : <Dash size={size} className={iconStyles({})} />
-                      }
+                      <Dash size={size} className={iconStyles({})} />
                     </StepButton>
                     <StepButton
                       ref={incrementButtonRef}
                       slot="increment"
                       style={renderProps => pressScale(incrementButtonRef)(renderProps)}
                       className={renderProps => inputButton({
                         ...renderProps,
-                        type: isCollapsed ? 'incrementStep' : 'increment',
-                        isCollapsed,
+                        type: 'increment',
                         size
                       })}>
-                      {
-                        isCollapsed
-                          ? <ChevronIcon size={chevronSize[size]} className={iconStyles({type: 'incrementStep'})} />
-                          : <Add size={size} className={iconStyles({})} />
-                      }
+                      <Add size={size} className={iconStyles({})} />
                     </StepButton>
-                  </div>
+                  </div>}
                 </FieldGroup>
                 {descriptionMessage && <Text slot="description">{descriptionMessage}</Text>}
                 <HelpText

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

@@ -44,12 +44,6 @@ export const Example: Story = {
   }
 };
 
-export const Collapsed: Story = {
-  render: (args) => (
-    <NumberField {...args} isCollapsed />
-  )
-};
-
 export const Validation = (args: any) => (
   <Form>
     <NumberField {...args} />

packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/numberfield.test.ts.snap

@@ -4,10 +4,8 @@ exports[`Comments out hideStepper 1`] = `
 "import { NumberField } from "@react-spectrum/s2";
 
 <div>
-  // TODO(S2-upgrade): hideStepper has not been implemented yet.
-  <NumberField />
-  // TODO(S2-upgrade): hideStepper has not been implemented yet.
-  <NumberField />
+  <NumberField hideStepper />
+  <NumberField hideStepper={true} />
 </div>"
 `;
 

packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts

@@ -666,14 +666,6 @@ export const changes: ChangesJSON = {
           name: 'removeProp',
           args: {propToRemove: 'validationState', propValue: 'valid'}
         }
-      },
-      {
-        description: 'Comment out hideStepper',
-        reason: 'It has not been implemented yet',
-        function: {
-          name: 'commentOutProp',
-          args: {propToComment: 'hideStepper'}
-        }
       }
     ]
   },