wip

Author: marissahuysentruyt

components/stepper/dist/metadata.json

@@ -10,11 +10,6 @@
     ".spectrum-NumberField-inputs .spectrum-Textfield .spectrum-Textfield-input",
     ".spectrum-NumberField-textfield",
     ".spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
-    ".spectrum-NumberField.hide-stepper",
-    ".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield",
-    ".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield .spectrum-NumberField-input",
-    ".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield :has(.spectrum-Textfield-validationIcon)",
-    ".spectrum-NumberField.hide-stepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
     ".spectrum-NumberField.is-disabled",
     ".spectrum-NumberField.is-focused.is-hover:not(.is-disabled)",
     ".spectrum-NumberField.is-focused:not(.is-disabled)",
@@ -28,6 +23,11 @@
     ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled)",
     ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled) .spectrum-NumberField-inputs",
     ".spectrum-NumberField.is-keyboardFocused:not(.is-disabled):hover",
+    ".spectrum-NumberField.spectrum-NumberField--hiddenStepper",
+    ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield",
+    ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield .spectrum-NumberField-input",
+    ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield.spectrum-Textfield.is-invalid .spectrum-Textfield-validationIcon",
+    ".spectrum-NumberField.spectrum-NumberField--hiddenStepper .spectrum-NumberField-textfield:not(:has(.spectrum-Textfield-validationIcon)) .spectrum-NumberField-input",
     ".spectrum-NumberField.spectrum-NumberField--sideLabel",
     ".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-fieldLabel",
     ".spectrum-NumberField.spectrum-NumberField--sideLabel .spectrum-NumberField-helpText",
@@ -85,7 +85,6 @@
     "--mod-numberfield-spacing-block-end-edge-to-text",
     "--mod-numberfield-spacing-block-start-edge-to-text",
     "--mod-numberfield-spacing-field-to-helptext",
-    "--mod-numberfield-stepper-button-width",
     "--mod-stepper-button-inline-offset"
   ],
   "component": [],
@@ -142,6 +141,7 @@
     "--spectrum-in-field-stepper-to-end-large",
     "--spectrum-in-field-stepper-to-end-medium",
     "--spectrum-in-field-stepper-to-end-small",
+    "--spectrum-infield-button-width",
     "--spectrum-line-height-100",
     "--spectrum-negative-border-color-default",
     "--spectrum-negative-border-color-focus",
@@ -178,8 +178,8 @@
     "--spectrum-numberfield-border-color-keyboard-focus",
     "--spectrum-numberfield-border-radius",
     "--spectrum-numberfield-border-width",
+    "--spectrum-numberfield-button-container-size",
     "--spectrum-numberfield-button-inline-offset",
-    "--spectrum-numberfield-button-size",
     "--spectrum-numberfield-focus-indicator-color",
     "--spectrum-numberfield-focus-indicator-gap",
     "--spectrum-numberfield-focus-indicator-width",
@@ -216,8 +216,6 @@
     "--spectrum-workflow-icon-size-75"
   ],
   "passthroughs": [
-    "--mod-infield-button-block-size",
-    "--mod-infield-button-inline-size",
     "--mod-textfield-border-color",
     "--mod-textfield-border-color-disabled",
     "--mod-textfield-border-color-focus",

components/stepper/index.css

@@ -162,7 +162,7 @@
 	--mod-textfield-min-width: var(--mod-numberfield-min-inline-size, var(--spectrum-numberfield-min-inline-size));
 	--mod-textfield-height: var(--mod-numberfield-block-size, var(--spectrum-numberfield-block-size));
 
-	&.hide-stepper {
+	&.spectrum-NumberField--hiddenStepper {
 		--mod-textfield-min-width: var(--mod-numberfield-hidden-stepper-min-inline-size, var(--spectrum-numberfield-hidden-stepper-min-inline-size));
 	}
 	/* @passthrough end */
@@ -227,7 +227,7 @@
 		outline-offset: var(--spectrum-numberfield-focus-indicator-gap);
 	}
 
-	&.hide-stepper {
+	&.spectrum-NumberField--hiddenStepper {
 		min-inline-size: var(--mod-numberfield-hidden-stepper-min-inline-size, var(--spectrum-numberfield-hidden-stepper-min-inline-size));
 
 		.spectrum-NumberField-textfield  {

components/stepper/stories/template.js

@@ -41,7 +41,7 @@ export const Template = ({
 				"is-keyboardFocused": isKeyboardFocused,
 				"is-invalid": isInvalid,
 				"is-disabled": isDisabled,
-				"hide-stepper": hideStepper,
+				"spectrum-NumberField--hiddenStepper": hideStepper,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			@keyup=${function(e) {