NumberField default/min width (#1544)

* NumberField min width

* Add min width

* Fix side label

* fix lint

Co-authored-by: Robert Snow <[email protected]>

Author: devongovett

packages/@adobe/spectrum-css-temp/components/fieldlabel/index.css

@@ -63,10 +63,12 @@ governing permissions and limitations under the License.
  * label will wrap within this width. The width of the whole field can be overridden by the user,
  * and this causes both the label and inner field to resize as well. */
 .spectrum-Field {
+  --spectrum-field-default-width: var(--spectrum-component-single-line-width);
+
   &.spectrum-Field--positionTop {
     display: inline-flex;
     flex-direction: column;
-    width: var(--spectrum-component-single-line-width);
+    width: var(--spectrum-field-default-width);
 
     .spectrum-Field-field {
       /* If the user overrides the width of the field, propagate to the inner component */

packages/@adobe/spectrum-css-temp/components/stepper/index.css

@@ -20,6 +20,9 @@ governing permissions and limitations under the License.
   --spectrum-stepper-border-radius-reset: 0;
   --spectrum-stepper-border-size-reset: 0;
   --spectrum-stepper-border-size-default: 1px;
+  --spectrum-stepper-input-min-width: var(--spectrum-component-single-line-height);
+  --spectrum-stepper-default-width-desktop: calc(var(--spectrum-component-single-line-height) * 4);
+  --spectrum-stepper-default-width-mobile: calc(var(--spectrum-component-single-line-height) * 5);
 }
 
 .spectrum-Stepper {
@@ -30,12 +33,24 @@ governing permissions and limitations under the License.
     'field increment'
     'field decrement';
 
-  width: var(--spectrum-component-single-line-width);
+  inline-size: var(--spectrum-stepper-default-width-desktop);
+  min-inline-size: unset;
   line-height: 0;
   border-radius: var(--spectrum-border-radius);
   transition: border-color var(--spectrum-global-animation-duration-100) ease-in-out, box-shadow var(--spectrum-global-animation-duration-100) ease-in-out;
 }
 
+.spectrum-Stepper-container {
+  /* ensure we have higher specificity than .spectrum-Field */
+  &.spectrum-Stepper-container {
+    /* override the default width of the field container, only with labelPosition=top. */
+    --spectrum-field-default-width: var(--spectrum-stepper-default-width-desktop);
+  }
+
+  &.spectrum-Stepper-container--isMobile {
+    --spectrum-field-default-width: var(--spectrum-stepper-default-width-mobile);
+  }
+}
 
 .spectrum-Stepper-button {
   @inherit: %spectrum-BaseButton;
@@ -92,7 +107,7 @@ governing permissions and limitations under the License.
   grid-area: field;
 
   inline-size: unset;
-  min-inline-size: unset;
+  min-inline-size: var(--spectrum-stepper-input-min-width);
 }
 
 .spectrum-Stepper--showStepper {
@@ -111,6 +126,7 @@ governing permissions and limitations under the License.
     grid-template-rows: auto;
     grid-template-columns: auto 1fr auto;
     grid-template-areas: 'decrement field increment';
+    inline-size: var(--spectrum-stepper-default-width-mobile);
 
     .spectrum-Stepper-input {
       border-start-start-radius: var(--spectrum-stepper-border-radius-reset);

packages/@react-spectrum/label/src/Field.tsx

@@ -28,6 +28,7 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
     children,
     labelProps,
     elementType,
+    wrapperClassName,
     ...otherProps
   } = props;
   let {styleProps} = useStyleProps(otherProps);
@@ -40,7 +41,8 @@ function Field(props: SpectrumFieldProps, ref: RefObject<HTMLElement>) {
         'spectrum-Field--positionTop': labelPosition === 'top',
         'spectrum-Field--positionSide': labelPosition === 'side'
       },
-      styleProps.className
+      styleProps.className,
+      wrapperClassName
     );
 
     children = React.cloneElement(children, mergeProps(children.props, {

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

@@ -85,7 +85,14 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
     <Field
       {...props as Omit<SpectrumNumberFieldProps, 'onChange'>}
       labelProps={labelProps}
-      ref={domRef}>
+      ref={domRef}
+      wrapperClassName={classNames(
+        stepperStyle,
+        'spectrum-Stepper-container',
+        {
+          'spectrum-Stepper-container--isMobile': isMobile
+        }
+      )}>
       <NumberFieldInput
         {...props}
         groupProps={mergeProps(groupProps, hoverProps)}
@@ -122,8 +129,7 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: Numbe
     autoFocus,
     isQuiet,
     hideStepper,
-    validationState,
-    label
+    validationState
   } = props;
   let showStepper = !hideStepper;
 
@@ -137,7 +143,7 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: Numbe
       <div
         {...groupProps}
         ref={ref as RefObject<HTMLDivElement>}
-        {...(label ? {style: {...style, width: '100%'}} : {style})}
+        style={style}
         className={className}>
         <TextFieldBase
           UNSAFE_className={classNames(stepperStyle, 'spectrum-Stepper-field')}

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

@@ -173,6 +173,10 @@ storiesOf('NumberField', module)
     'custom width no visible label',
     () => renderNoLabel({width: 'size-3000', isRequired: true, 'aria-label': 'Width'})
   )
+  .add(
+    'custom width, labelPosition=side',
+    () => render({width: 'size-3000', labelPosition: 'side'})
+  )
   .add(
     'controlled',
     () => <NumberFieldControlled />
@@ -184,6 +188,10 @@ storiesOf('NumberField', module)
   .add(
     'flexed',
     () => renderSet()
+  )
+  .add(
+    'min width',
+    () => render({width: 0})
   );
 
 function render(props: any = {}) {

packages/@react-types/label/src/index.d.ts

@@ -31,5 +31,6 @@ export interface SpectrumLabelProps extends LabelProps, DOMProps, StyleProps, HT
 export interface SpectrumFieldProps extends SpectrumLabelProps {
   children: ReactElement,
   label?: ReactNode,
-  labelProps: HTMLAttributes<HTMLElement>
+  labelProps: HTMLAttributes<HTMLElement>,
+  wrapperClassName?: string
 }