feat(stepper): s2 number field/stepper migration (#3681)

* chore(numberfield): update package.json rootClass to NumberField

* docs(numberfield): update template.js
- updates rootClass to NumberField
- imports new nested components
- use inline infield buttons instead of separate stacked infield buttons
- adds support for side label
- updates templates for docs page
- adds +/- functionality to number field

* docs(numberfield): update stories for docs page
- updates documentation to use number field language instead of stepper
- imports new numberfield templates
- adds support for displaying the field label, label position, help text
and label text
- adds side label, invalid states stories
- updates some sentence-case display names for stories
- removes quiet variant stories
- updates display title to Number field
- adds migrated tag/status
- adds story for read-only state on docs page and expands on some
documentation

* docs(numberfield): adds more test coverage
- updates any stepper language to number field
- adds test coverage for hidden stepper, side label, help text, invalid,
minimum width, and truncation
- adds test case for focus + hover, keyboardFocus + hover, disabled+
keyboardFocus
- adds min width size test cases
- adds test cases

* feat(numberfield): s2 style migration
- new tokens used
- cleans up/standardizes mod usage for textfield
- cleans up/standardizes selectors so they are consistent across states/
variants
- adds styles for read-only state
- updates all custom properties to use numberfield prefix instead of
stepper
- adds style definitions for new features including hidden stepper, side
label, help text, invalid, minimum width
- uses textfield mods where possible to reduce the number of custom
styles number field has
- removes any textfield mods that are overwritten by number field styles
- updates metadata
- general clean up (stylelint warnings are addressed, some corrected mod
definitions)

* chore(numberfield): updates metadata.json

* chore(numberfield): add changeset

Author: marissahuysentruyt

.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}