feat(textfield): migrate to s2

Author: rise-erpelding

.changeset/healthy-chicken-clap.md

@@ -0,0 +1,42 @@
+---
+"@spectrum-css/textfield": major
+---
+
+Migrate to Spectrum 2
+
+- Default styles are used for medium
+- Removal of quiet variant
+- Style adjustments to match design spec:
+  - Spacing start/end edge to value for XL component should use `component-edge-to-text-300`, not `-200`
+  - Spacing top edge to value should change with size, now uses different spacing tokens for each component tshirt size according to spec (`component-top-to-text-75`, `-100`, `-200`, and `-300`)
+  - Spacing bottom edge to value should change with size, now uses different spacing tokens for each component tshirt size according to spec (`component-bottom-to-text-75`, `-100`, `-200`, and `-300`)
+  - Adjust border thickness to 2px
+  - Adjust side label inline spacing to field, should be `spacing-200` for all tshirt sizes
+  - Adjust border colors to match spec
+  - Change disabled background color to `gray-25`
+  - Change disabled-border-color from transparent to `disabled-border-color`
+- Use new and updated tokens:
+  - use tokens for textfield width (`field-default-width-small`, `-medium`, `-large`, `-extra-large`)
+  - use updated corner radius tokens
+  - use different component-bottom-to-text tokens for character-count-spacing-block
+  - update tokens for alert icon block spacing
+  - update tokens for alert and invalid inline-start spacing
+  - update font tokens
+
+Adds mods:
+
+- `--mod-textfield-character-count-color`
+- `--mod-textfield-character-count-line-height`
+- `--mod-textfield-character-count-line-height-cjk`
+- `--mod-textfield-line-height-cjk`
+
+Removes mods:
+
+- `--mod-textfield-line-height`
+- `--mod-text-area-min-block-size-quiet`
+- `--mod-textfield-character-count-spacing-block-quiet`
+- `--mod-textfield-icon-spacing-inline-end-quiet-invalid`
+- `--mod-textfield-icon-spacing-inline-end-quiet-valid`
+- `--mod-textfield-label-spacing-block-quiet`
+- `--mod-textfield-spacing-block-quiet`
+- `--mod-textfield-spacing-inline-quiet`

components/textfield/dist/metadata.json

@@ -2,6 +2,14 @@
   "sourceFile": "index.css",
   "selectors": [
     ".is-disabled .spectrum-FieldLabel",
+    ".is-disabled .spectrum-HelpText .spectrum-HelpText-text",
+    ".is-disabled .spectrum-Textfield-characterCount",
+    ".is-disabled .spectrum-Textfield-input:read-only::placeholder",
+    ".is-disabled .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder",
+    ".is-disabled .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder",
+    ".is-disabled:hover .spectrum-Textfield-input:read-only::placeholder",
+    ".is-disabled:hover .spectrum-Textfield.is-readOnly .spectrum-Textfield-input::placeholder",
+    ".is-disabled:hover .spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder",
     ".is-focused .spectrum-Textfield-input",
     ".is-focused .spectrum-Textfield-input::placeholder",
     ".is-focused .spectrum-Textfield-input:hover",
@@ -23,23 +31,13 @@
     ".spectrum-Textfield",
     ".spectrum-Textfield .spectrum-FieldLabel",
     ".spectrum-Textfield .spectrum-HelpText",
+    ".spectrum-Textfield .spectrum-HelpText-text",
+    ".spectrum-Textfield .spectrum-Textfield-characterCount",
     ".spectrum-Textfield .spectrum-Textfield-input",
     ".spectrum-Textfield .spectrum-Textfield-input::placeholder",
-    ".spectrum-Textfield--multiline",
     ".spectrum-Textfield--multiline .spectrum-Textfield-input",
     ".spectrum-Textfield--multiline.spectrum-Textfield--grows .spectrum-Textfield-input",
     ".spectrum-Textfield--multiline.spectrum-Textfield--grows.spectrum-Textfield--sideLabel .spectrum-Textfield-input",
-    ".spectrum-Textfield--multiline.spectrum-Textfield--quiet .spectrum-Textfield-input",
-    ".spectrum-Textfield--quiet .spectrum-FieldLabel",
-    ".spectrum-Textfield--quiet .spectrum-Textfield-characterCount",
-    ".spectrum-Textfield--quiet .spectrum-Textfield-input",
-    ".spectrum-Textfield--quiet .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input",
-    ".spectrum-Textfield--quiet.is-disabled .spectrum-Textfield-input::placeholder",
-    ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input",
-    ".spectrum-Textfield--quiet.is-disabled:hover .spectrum-Textfield-input::placeholder",
-    ".spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield--quiet.is-valid .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield--sideLabel",
     ".spectrum-Textfield--sideLabel .spectrum-FieldLabel",
     ".spectrum-Textfield--sideLabel .spectrum-HelpText",
@@ -51,12 +49,17 @@
     ".spectrum-Textfield--sizeS",
     ".spectrum-Textfield--sizeXL",
     ".spectrum-Textfield-characterCount",
+    ".spectrum-Textfield-characterCount:lang(ja)",
+    ".spectrum-Textfield-characterCount:lang(ko)",
+    ".spectrum-Textfield-characterCount:lang(zh)",
     ".spectrum-Textfield-input",
     ".spectrum-Textfield-input:-moz-ui-invalid",
     ".spectrum-Textfield-input::placeholder",
     ".spectrum-Textfield-input:disabled",
     ".spectrum-Textfield-input:disabled::placeholder",
     ".spectrum-Textfield-input:focus",
+    ".spectrum-Textfield-input:focus-visible",
+    ".spectrum-Textfield-input:focus-visible::placeholder",
     ".spectrum-Textfield-input:focus::placeholder",
     ".spectrum-Textfield-input:focus:hover",
     ".spectrum-Textfield-input:focus:hover::placeholder",
@@ -82,18 +85,13 @@
     ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input",
     ".spectrum-Textfield.is-readOnly:hover .spectrum-Textfield-input::placeholder",
     ".spectrum-Textfield.is-valid .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield.spectrum-Textfield--quiet.is-invalid .spectrum-Textfield-input",
-    ".spectrum-Textfield.spectrum-Textfield--quiet.is-keyboardFocused:after",
-    ".spectrum-Textfield.spectrum-Textfield--quiet.is-valid .spectrum-Textfield-input",
-    ".spectrum-Textfield.spectrum-Textfield--quiet:after",
     ".spectrum-Textfield.spectrum-Textfield--sideLabel .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield:hover .spectrum-Textfield-input",
     ".spectrum-Textfield:hover .spectrum-Textfield-input::placeholder"
   ],
   "modifiers": [
     "--mod-texfield-animation-duration",
     "--mod-text-area-min-block-size",
-    "--mod-text-area-min-block-size-quiet",
     "--mod-text-area-min-inline-size",
     "--mod-textfield-background-color",
     "--mod-textfield-background-color-disabled",
@@ -109,11 +107,13 @@
     "--mod-textfield-border-color-invalid-keyboard-focus",
     "--mod-textfield-border-color-keyboard-focus",
     "--mod-textfield-border-width",
+    "--mod-textfield-character-count-color",
     "--mod-textfield-character-count-font-family",
     "--mod-textfield-character-count-font-size",
     "--mod-textfield-character-count-font-weight",
+    "--mod-textfield-character-count-line-height",
+    "--mod-textfield-character-count-line-height-cjk",
     "--mod-textfield-character-count-spacing-block",
-    "--mod-textfield-character-count-spacing-block-quiet",
     "--mod-textfield-character-count-spacing-block-side",
     "--mod-textfield-character-count-spacing-inline",
     "--mod-textfield-character-count-spacing-inline-side",
@@ -132,21 +132,17 @@
     "--mod-textfield-icon-spacing-block-invalid",
     "--mod-textfield-icon-spacing-block-valid",
     "--mod-textfield-icon-spacing-inline-end-invalid",
-    "--mod-textfield-icon-spacing-inline-end-quiet-invalid",
-    "--mod-textfield-icon-spacing-inline-end-quiet-valid",
     "--mod-textfield-icon-spacing-inline-end-valid",
     "--mod-textfield-icon-spacing-inline-start-invalid",
     "--mod-textfield-icon-spacing-inline-start-valid",
     "--mod-textfield-label-spacing-block",
-    "--mod-textfield-label-spacing-block-quiet",
     "--mod-textfield-label-spacing-inline-side-label",
+    "--mod-textfield-line-height",
     "--mod-textfield-min-width",
     "--mod-textfield-placeholder-font-size",
     "--mod-textfield-spacing-block-end",
-    "--mod-textfield-spacing-block-quiet",
     "--mod-textfield-spacing-block-start",
     "--mod-textfield-spacing-inline",
-    "--mod-textfield-spacing-inline-quiet",
     "--mod-textfield-text-color-default",
     "--mod-textfield-text-color-disabled",
     "--mod-textfield-text-color-focus",
@@ -174,11 +170,13 @@
     "--spectrum-textfield-border-color-invalid-keyboard-focus",
     "--spectrum-textfield-border-color-keyboard-focus",
     "--spectrum-textfield-border-width",
+    "--spectrum-textfield-character-count-color",
     "--spectrum-textfield-character-count-font-family",
     "--spectrum-textfield-character-count-font-size",
     "--spectrum-textfield-character-count-font-weight",
+    "--spectrum-textfield-character-count-line-height",
+    "--spectrum-textfield-character-count-line-height-cjk",
     "--spectrum-textfield-character-count-spacing-block",
-    "--spectrum-textfield-character-count-spacing-block-quiet",
     "--spectrum-textfield-character-count-spacing-block-side",
     "--spectrum-textfield-character-count-spacing-inline",
     "--spectrum-textfield-character-count-spacing-inline-side",
@@ -197,22 +195,19 @@
     "--spectrum-textfield-icon-spacing-block-invalid",
     "--spectrum-textfield-icon-spacing-block-valid",
     "--spectrum-textfield-icon-spacing-inline-end-invalid",
-    "--spectrum-textfield-icon-spacing-inline-end-quiet-invalid",
-    "--spectrum-textfield-icon-spacing-inline-end-quiet-valid",
     "--spectrum-textfield-icon-spacing-inline-end-valid",
     "--spectrum-textfield-icon-spacing-inline-start-invalid",
     "--spectrum-textfield-icon-spacing-inline-start-valid",
     "--spectrum-textfield-input-line-height",
     "--spectrum-textfield-label-spacing-block",
-    "--spectrum-textfield-label-spacing-block-quiet",
     "--spectrum-textfield-label-spacing-inline-side-label",
+    "--spectrum-textfield-line-height",
+    "--spectrum-textfield-line-height-cjk",
     "--spectrum-textfield-min-width",
     "--spectrum-textfield-placeholder-font-size",
     "--spectrum-textfield-spacing-block-end",
-    "--spectrum-textfield-spacing-block-quiet",
     "--spectrum-textfield-spacing-block-start",
     "--spectrum-textfield-spacing-inline",
-    "--spectrum-textfield-spacing-inline-quiet",
     "--spectrum-textfield-text-color-default",
     "--spectrum-textfield-text-color-disabled",
     "--spectrum-textfield-text-color-focus",
@@ -226,57 +221,51 @@
   ],
   "global": [
     "--spectrum-animation-duration-100",
-    "--spectrum-border-width-100",
-    "--spectrum-character-count-to-field-quiet-extra-large",
-    "--spectrum-character-count-to-field-quiet-large",
-    "--spectrum-character-count-to-field-quiet-medium",
-    "--spectrum-character-count-to-field-quiet-small",
+    "--spectrum-border-width-200",
     "--spectrum-checkmark-icon-size-100",
     "--spectrum-checkmark-icon-size-200",
     "--spectrum-checkmark-icon-size-300",
     "--spectrum-checkmark-icon-size-75",
+    "--spectrum-cjk-line-height-100",
     "--spectrum-component-bottom-to-text-100",
     "--spectrum-component-bottom-to-text-200",
+    "--spectrum-component-bottom-to-text-300",
     "--spectrum-component-bottom-to-text-75",
     "--spectrum-component-edge-to-text-100",
     "--spectrum-component-edge-to-text-200",
+    "--spectrum-component-edge-to-text-300",
     "--spectrum-component-edge-to-text-75",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
     "--spectrum-component-top-to-text-100",
-    "--spectrum-corner-radius-100",
+    "--spectrum-component-top-to-text-200",
+    "--spectrum-component-top-to-text-300",
+    "--spectrum-component-top-to-text-75",
+    "--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-medium-size-extra-large",
+    "--spectrum-corner-radius-medium-size-large",
+    "--spectrum-corner-radius-medium-size-medium",
+    "--spectrum-corner-radius-medium-size-small",
+    "--spectrum-disabled-border-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-field-default-width-extra-large",
+    "--spectrum-field-default-width-large",
+    "--spectrum-field-default-width-medium",
+    "--spectrum-field-default-width-small",
     "--spectrum-field-edge-to-alert-icon-extra-large",
     "--spectrum-field-edge-to-alert-icon-large",
     "--spectrum-field-edge-to-alert-icon-medium",
-    "--spectrum-field-edge-to-alert-icon-quiet",
     "--spectrum-field-edge-to-alert-icon-small",
-    "--spectrum-field-edge-to-border-quiet",
-    "--spectrum-field-edge-to-text-quiet",
     "--spectrum-field-edge-to-validation-icon-extra-large",
     "--spectrum-field-edge-to-validation-icon-large",
     "--spectrum-field-edge-to-validation-icon-medium",
-    "--spectrum-field-edge-to-validation-icon-quiet",
     "--spectrum-field-edge-to-validation-icon-small",
     "--spectrum-field-label-to-component",
-    "--spectrum-field-label-to-component-quiet-extra-large",
-    "--spectrum-field-label-to-component-quiet-large",
-    "--spectrum-field-label-to-component-quiet-medium",
-    "--spectrum-field-label-to-component-quiet-small",
-    "--spectrum-field-text-to-alert-icon-extra-large",
-    "--spectrum-field-text-to-alert-icon-large",
-    "--spectrum-field-text-to-alert-icon-medium",
-    "--spectrum-field-text-to-alert-icon-small",
-    "--spectrum-field-text-to-validation-icon-extra-large",
-    "--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",
@@ -289,11 +278,12 @@
     "--spectrum-font-size-300",
     "--spectrum-font-size-75",
     "--spectrum-gray-25",
-    "--spectrum-gray-500",
-    "--spectrum-gray-600",
+    "--spectrum-gray-300",
+    "--spectrum-gray-400",
     "--spectrum-gray-800",
     "--spectrum-gray-900",
     "--spectrum-help-text-to-component",
+    "--spectrum-line-height-100",
     "--spectrum-negative-border-color-default",
     "--spectrum-negative-border-color-focus",
     "--spectrum-negative-border-color-focus-hover",
@@ -305,22 +295,21 @@
     "--spectrum-neutral-content-color-focus-hover",
     "--spectrum-neutral-content-color-hover",
     "--spectrum-neutral-content-color-key-focus",
+    "--spectrum-neutral-subdued-content-color-default",
     "--spectrum-positive-visual-color",
     "--spectrum-regular-font-weight",
     "--spectrum-sans-font-family-stack",
     "--spectrum-side-label-character-count-to-field",
-    "--spectrum-side-label-character-count-top-margin-extra-large",
-    "--spectrum-side-label-character-count-top-margin-large",
-    "--spectrum-side-label-character-count-top-margin-medium",
-    "--spectrum-side-label-character-count-top-margin-small",
-    "--spectrum-spacing-100",
     "--spectrum-spacing-200",
     "--spectrum-texfield-animation-duration",
     "--spectrum-text-area-min-block-size",
-    "--spectrum-text-area-min-block-size-quiet",
     "--spectrum-text-area-min-inline-size",
     "--spectrum-text-area-minimum-height",
     "--spectrum-text-area-minimum-width",
+    "--spectrum-text-to-visual-100",
+    "--spectrum-text-to-visual-200",
+    "--spectrum-text-to-visual-300",
+    "--spectrum-text-to-visual-75",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",
@@ -329,16 +318,23 @@
   "passthroughs": [],
   "high-contrast": [
     "--highcontrast-textfield-border-color",
+    "--highcontrast-textfield-border-color-disabled",
     "--highcontrast-textfield-border-color-focus",
+    "--highcontrast-textfield-border-color-focus-hover",
     "--highcontrast-textfield-border-color-hover",
     "--highcontrast-textfield-border-color-invalid-default",
     "--highcontrast-textfield-border-color-invalid-focus",
+    "--highcontrast-textfield-border-color-invalid-focus-hover",
     "--highcontrast-textfield-border-color-invalid-hover",
     "--highcontrast-textfield-border-color-invalid-keyboard-focus",
     "--highcontrast-textfield-border-color-keyboard-focus",
     "--highcontrast-textfield-focus-indicator-color",
+    "--highcontrast-textfield-icon-color-invalid",
+    "--highcontrast-textfield-icon-color-valid",
     "--highcontrast-textfield-text-color-default",
     "--highcontrast-textfield-text-color-disabled",
+    "--highcontrast-textfield-text-color-focus",
+    "--highcontrast-textfield-text-color-focus-hover",
     "--highcontrast-textfield-text-color-hover",
     "--highcontrast-textfield-text-color-invalid",
     "--highcontrast-textfield-text-color-keyboard-focus",