fix(textfield): vertically center invalid icon (#3539)

Author: rise-erpelding

.changeset/healthy-windows-push.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/textfield": patch
+---
+
+Updates invalid icon spacing to be vertically centered for S2.

components/textfield/dist/metadata.json

@@ -88,6 +88,9 @@
     ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield.spectrum-Textfield--quiet",
     ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
+    ".spectrum-Textfield.spectrum-Textfield--sizeL",
+    ".spectrum-Textfield.spectrum-Textfield--sizeS",
+    ".spectrum-Textfield.spectrum-Textfield--sizeXL",
     ".spectrum-Textfield:hover .spectrum-Textfield-input",
     ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
   ],
@@ -247,6 +250,10 @@
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-component-top-to-text-100",
+    "--spectrum-component-top-to-workflow-icon-100",
+    "--spectrum-component-top-to-workflow-icon-200",
+    "--spectrum-component-top-to-workflow-icon-300",
+    "--spectrum-component-top-to-workflow-icon-75",
     "--spectrum-corner-radius-100",
     "--spectrum-disabled-content-color",
     "--spectrum-field-edge-to-alert-icon-extra-large",
@@ -274,10 +281,6 @@
     "--spectrum-field-text-to-validation-icon-large",
     "--spectrum-field-text-to-validation-icon-medium",
     "--spectrum-field-text-to-validation-icon-small",
-    "--spectrum-field-top-to-alert-icon-extra-large",
-    "--spectrum-field-top-to-alert-icon-large",
-    "--spectrum-field-top-to-alert-icon-medium",
-    "--spectrum-field-top-to-alert-icon-small",
     "--spectrum-field-top-to-validation-icon-extra-large",
     "--spectrum-field-top-to-validation-icon-large",
     "--spectrum-field-top-to-validation-icon-medium",
@@ -338,7 +341,11 @@
     "--system-textfield-border-color-hover",
     "--system-textfield-border-color-keyboard-focus",
     "--system-textfield-border-width",
-    "--system-textfield-quiet-border-color-disabled"
+    "--system-textfield-icon-spacing-block-invalid",
+    "--system-textfield-quiet-border-color-disabled",
+    "--system-textfield-size-l-icon-spacing-block-invalid",
+    "--system-textfield-size-s-icon-spacing-block-invalid",
+    "--system-textfield-size-xl-icon-spacing-block-invalid"
   ],
   "passthroughs": [],
   "high-contrast": [

components/textfield/index.css

@@ -99,7 +99,6 @@
 	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-100);
 	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-medium);
 	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-medium);
-	--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
 	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-medium);
 	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-medium);
 	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-medium);
@@ -123,7 +122,6 @@
 	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-75);
 	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-small);
 	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-small);
-	--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small);
 	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-small);
 	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-small);
 	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-small);
@@ -146,7 +144,6 @@
 	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-200);
 	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-large);
 	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-large);
-	--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
 	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-large);
 	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-large);
 	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-large);
@@ -169,7 +166,6 @@
 	--spectrum-textfield-icon-size-valid: var(--spectrum-checkmark-icon-size-300);
 	--spectrum-textfield-icon-spacing-inline-end-invalid: var(--spectrum-field-edge-to-alert-icon-extra-large);
 	--spectrum-textfield-icon-spacing-inline-end-valid: var(--spectrum-field-edge-to-validation-icon-extra-large);
-	--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large);
 	--spectrum-textfield-icon-spacing-block-valid: var(--spectrum-field-top-to-validation-icon-extra-large);
 	--spectrum-textfield-icon-spacing-inline-start-invalid: var(--spectrum-field-text-to-alert-icon-extra-large);
 	--spectrum-textfield-icon-spacing-inline-start-valid: var(--spectrum-field-text-to-validation-icon-extra-large);

components/textfield/themes/spectrum-two.css

@@ -25,6 +25,20 @@
 
 		--spectrum-textfield-border-width: var(--spectrum-border-width-100);
 
+		--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-100);
+
+		&.spectrum-Textfield--sizeS {
+			--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-75);
+		}
+
+		&.spectrum-Textfield--sizeL {
+			--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-200);
+		}
+
+		&.spectrum-Textfield--sizeXL {
+			--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-component-top-to-workflow-icon-300);
+		}
+
 		&.spectrum-Textfield--quiet {
 			--spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
 		}

components/textfield/themes/spectrum.css

@@ -22,6 +22,20 @@
 
 		--spectrum-textfield-border-color-disabled: var(--spectrum-gray-200);
 
+		--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-medium);
+
+		&.spectrum-Textfield--sizeS {
+			--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-small);
+		}
+
+		&.spectrum-Textfield--sizeL {
+			--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-large);
+		}
+
+		&.spectrum-Textfield--sizeXL {
+			--spectrum-textfield-icon-spacing-block-invalid: var(--spectrum-field-top-to-alert-icon-extra-large);
+		}
+
 		&.spectrum-Textfield--quiet {
 			--spectrum-textfield-border-color-disabled: var(--spectrum-gray-300);
 		}