feat(stepper): s2 number field/stepper migration

.changeset/itchy-waves-work.md

@@ -0,0 +1,82 @@
+---
+"@spectrum-css/stepper": major
+---
+
+### Number field S2 Migration
+
+This work migrations the stepper/number field component to Spectrum 2! 🎉 The S1 stepper was very minimal, and didn't align with SWC or React's implementation. This migration should bring parity to the CSS component. New features include:
+
+- the display name for this component has changed from `stepper` to `number field` (based on design's, React's and SWC's naming conventions.)
+  - _**Note:**_ The NPM package name has remained as "stepper," and hasn't yet changed to "number field.""
+- an error state with alert icon
+- optional help text
+- embedded field label & optional positions
+
+#### Quick overview
+
+Because of all the new features and to align more with design, SWC and React, below is a quick recap of the following tokens & classes that have been renamed in the CSS:
+
+- All `.spectrum-Stepper*` class names have been converted to `.spectrum-NumberField*`
+- The `.hide-stepper` class has been converted to `.spectrum-NumberField--hiddenStepper`
+- Custom properties have been renamed from `--spectrum-stepper*` to `--spectrum-numberfield*`
+- Modifiable custom properties have been renamed from `--mod-stepper*` to `--mod-numberfield*`
+- Markup has changed
+- Styling lives on different elements
+- Lots more Chromatic test coverage
+
+#### Markup
+
+Following React's lead, the markup of the number field has changed. More obviously, help text and field label components are embedded into `.spectrum-NumberField`, instead of necessitating separate components. The number field now incorporates an error state that better reflects the embedded textfield's error state, so there is now an alert icon within the markup in an invalid number field. Additionally, a new `.spectrum-NumberField-inputs` containing wrapper was introduced to encapsulate the textfield element and infield button elements. This container allowed for some extra alignment styles for those 2 elements and then freed up the opportunity to introduced an "unstyled" `input` (as described more below). Custom classes were also added to the nested textfield and input elements to ensure styles for number field were passed correctly to the correct elements (`.spectrum-NumberField-textfield` and `.spectrum-NumberField-input`).
+
+Stemming from the infield button S2 migration, there is also an extra container for the inline (previously "stacked") stepper buttons.
+
+#### Styling
+
+The `.spectrum-NumberField-textfield` div is where the S2 design language lives (instead of on the input element), while the actual `input` (`.spectrum-NumberField-input`) is unstyled and incorporated more subtly. Breaking changes were introduced in all previous custom properties, where any `--spectrum-stepper-*` or `--mod-stepper-*` properties were renamed to `--spectrum-numberfield-*`or `--mod-numberfield-*`. This also applied to class names, where `.spectrum-Stepper` changed to `.spectrum-NumberField`. The `hide-stepper` class has also been updated to match our class naming conventions (`.spectrum-NumberField--hiddenStepper`).
+
+#### Mods
+
+Modifiable custom properties have been renamed from `--mod-stepper*` to `--mod-numberfield`.
+
+##### Removed custom properties include
+
+--mod-stepper-animation-duration
+--mod-stepper-button-border-width
+--mod-stepper-button-width
+--mod-stepper-button-width-quiet
+--mod-stepper-buttons-background-color
+--mod-stepper-buttons-border-color
+--mod-stepper-buttons-border-color-focus
+--mod-stepper-buttons-border-color-focus-hover
+--mod-stepper-buttons-border-color-hover
+--mod-stepper-buttons-border-color-keyboard-focus
+--mod-stepper-buttons-border-style
+--mod-stepper-buttons-border-width
+--mod-stepper-focus-indicator-visibility
+--mod-stepper-height (renamed to --mod-numberfield-block-size)
+--mod-stepper-width (renamed to --mod-numberfield-inline-size)
+
+##### New custom properties include
+
+--mod-numberfield-background-color
+--mod-numberfield-background-color-disabled
+--mod-numberfield-block-size (renamed from --mod-stepper-height)
+--mod-numberfield-border-color-disabled
+--mod-numberfield-border-color-invalid-default
+--mod-numberfield-border-color-invalid-focus
+--mod-numberfield-border-color-invalid-focus-hover
+--mod-numberfield-border-color-invalid-hover
+--mod-numberfield-border-color-invalid-keyboard-focus
+--mod-numberfield-button-inline-offset
+--mod-numberfield-font-family
+--mod-numberfield-font-size
+--mod-numberfield-font-style
+--mod-numberfield-font-weight
+--mod-numberfield-hidden-stepper-min-inline-size
+--mod-numberfield-inline-size (renamed from --mod-stepper-width)
+--mod-numberfield-label-to-field
+--mod-numberfield-line-height
+--mod-numberfield-min-inline-size
+--mod-numberfield-spacing-block-end-edge-to-text
+--mod-numberfield-spacing-block-start-edge-to-text
+--mod-numberfield-spacing-field-to-helptext

components/form/stories/form.stories.js

@@ -1,7 +1,7 @@
 import { Template as Fieldgroup } from "@spectrum-css/fieldgroup/stories/template.js";
 import { Template as Picker } from "@spectrum-css/picker/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { Template as Stepper } from "@spectrum-css/stepper/stories/template.js";
+import { Template as NumberField } from "@spectrum-css/stepper/stories/template.js";
 import { Template as TextField } from "@spectrum-css/textfield/stories/template.js";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
@@ -97,7 +97,7 @@ export default {
 				label: "Age",
 				id: "form-example-amount",
 				content: [
-					(passthroughs, context) => Stepper({
+					(passthroughs, context) => NumberField({
 						...passthroughs,
 					}, context),
 				]

components/infieldbutton/stories/template.js

@@ -20,7 +20,7 @@ export const Template = (
 		isActive,
 		isInline,
 		tabIndex = 0,
-		onMinus,
+		onSubtract,
 		onAdd,
 		onclick,
 	} = {},
@@ -44,7 +44,7 @@ export const Template = (
 					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 				})}
 				?disabled=${isDisabled}
-				@click=${onMinus}
+				@click=${onSubtract}
 				aria-haspopup="listbox"
 				type="button"
 				tabindex=${tabIndex}