feat(infield-button): new s2 migration (#3642)

* feat(infield-button): new s2 migration

* chore(infield-button): restoring s2 files

* feat(infieldbutton): adding downstate function

* chore(infieldbutton): removing metadata files

* feat(infieldbutton): add supported icons story, add inline side edge tokens, update css

* chore(infieldbutton): restoring metadata files

* feat(infieldbutton): adding metadata file

* feat(infieldbutton): fixing template and story

* chore(ifbutton): restoring metadata

* feat(ifbutton): updating custom tokens

* feat(ifbutton): fixing typos and stuff

* feat(ifbutton): adding metadata file

* feat(ifbutton): adding field edge to icon tokens

* feat(ifbutton): swap custom token sizes and fix story typo

* feat(ifbutton): adding new metadata

* feat(ifbutton): adding minimum perspective on smallest button size

* feat(ifbutton): moving active interaction to style selector

* chore(ifbutton): restoring metadata

* feat(ifbutton): adjusting mod

* chore(ifbutton): restoring actual mod

* feat(ifbutton): adding click function to button element

* feat(ifbutton): add minus click function for stepper

Author: aramos-adobe

.changeset/true-shrimps-dream.md

@@ -0,0 +1,34 @@
+---
+"@spectrum-css/infieldbutton": major
+---
+
+### In-field button S2 Migration
+
+In-field buttons are used to represent actions within input fields. They’re currently used inside number field. This component has updated colors, corner radius, and icons compared to the Spectrum 1 version. The “Error” and “Key-focus” variants have been removed, since this now utilizes those states from the parent component.
+
+The position styles and controls have also been removed now that there's a consistent corner radius.
+
+#### Removed mods
+
+Due to deprecation of the position variants in the infield button, some spacing and border radius mods have been removed.
+
+`--mod-infield-button-inner-edge-to-fill`
+`--mod-infield-button-stacked-border-radius-reset`
+`--mod-infield-button-stacked-bottom-border-block-end-width`
+`--mod-infield-button-stacked-bottom-border-radius-end-end`
+`--mod-infield-button-stacked-bottom-border-radius-end-start`
+`--mod-infield-button-stacked-fill-padding-inline`
+`--mod-infield-button-stacked-fill-padding-inner`
+
+#### New tokens
+
+These new tokens are the inline variant & stepper (number field) use case. The padding changes here.
+
+`--spectrum-in-field-button-side-edge-to-fill-small`
+`--spectrum-in-field-button-side-edge-to-fill-medium`
+`--spectrum-in-field-button-side-edge-to-fill-large`
+`--spectrum-in-field-button-side-edge-to-fill-extra-large`
+`--spectrum-field-edge-to-icon-75`
+`--spectrum-field-edge-to-icon-100`
+`--spectrum-field-edge-to-icon-200`
+`--spectrum-field-edge-to-icon-300`

components/infieldbutton/dist/metadata.json

@@ -2,25 +2,21 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-InfieldButton",
-    ".spectrum-InfieldButton--bottom .spectrum-InfieldButton-fill",
-    ".spectrum-InfieldButton--left .spectrum-InfieldButton-fill",
-    ".spectrum-InfieldButton--right .spectrum-InfieldButton-fill",
-    ".spectrum-InfieldButton--top .spectrum-InfieldButton-fill",
+    ".spectrum-InfieldButton--quiet",
+    ".spectrum-InfieldButton--quiet:disabled",
+    ".spectrum-InfieldButton--quiet:not(:disabled):active",
+    ".spectrum-InfieldButton--quiet:not(:disabled):focus-visible",
+    ".spectrum-InfieldButton--quiet:not(:disabled):hover",
     ".spectrum-InfieldButton-fill",
     ".spectrum-InfieldButton-icon",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--bottom",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeL",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeS",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--bottom.spectrum-InfieldButton--sizeXL",
+    ".spectrum-InfieldButton-inline",
+    ".spectrum-InfieldButton-inline .spectrum-InfieldButton",
+    ".spectrum-InfieldButton-inline > .spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
     ".spectrum-InfieldButton.spectrum-InfieldButton--quiet",
     ".spectrum-InfieldButton.spectrum-InfieldButton--quiet:disabled",
     ".spectrum-InfieldButton.spectrum-InfieldButton--sizeL",
     ".spectrum-InfieldButton.spectrum-InfieldButton--sizeS",
     ".spectrum-InfieldButton.spectrum-InfieldButton--sizeXL",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--top",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeL",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeS",
-    ".spectrum-InfieldButton.spectrum-InfieldButton--top.spectrum-InfieldButton--sizeXL",
     ".spectrum-InfieldButton:active",
     ".spectrum-InfieldButton:disabled",
     ".spectrum-InfieldButton:focus-visible",
@@ -30,8 +26,6 @@
     ".spectrum-InfieldButton:not(:disabled):hover"
   ],
   "modifiers": [
-    "--mod-infield-border-color",
-    "--mod-infield-border-color-quiet",
     "--mod-infield-button-background-color",
     "--mod-infield-button-background-color-disabled",
     "--mod-infield-button-background-color-down",
@@ -48,10 +42,8 @@
     "--mod-infield-button-border-color-disabled",
     "--mod-infield-button-border-color-quiet-disabled",
     "--mod-infield-button-border-radius",
-    "--mod-infield-button-border-radius-reset",
-    "--mod-infield-button-border-width",
-    "--mod-infield-button-border-width-quiet",
     "--mod-infield-button-edge-to-fill",
+    "--mod-infield-button-field-edge-to-icon",
     "--mod-infield-button-fill-justify-content",
     "--mod-infield-button-fill-padding",
     "--mod-infield-button-height",
@@ -63,84 +55,69 @@
     "--mod-infield-button-icon-color-hover-disabled",
     "--mod-infield-button-icon-color-key-focus",
     "--mod-infield-button-icon-color-key-focus-disabled",
-    "--mod-infield-button-inner-edge-to-fill",
-    "--mod-infield-button-stacked-border-radius-reset",
-    "--mod-infield-button-stacked-bottom-border-block-end-width",
-    "--mod-infield-button-stacked-bottom-border-radius-end-end",
-    "--mod-infield-button-stacked-bottom-border-radius-end-start",
-    "--mod-infield-button-stacked-fill-padding-inline",
-    "--mod-infield-button-stacked-fill-padding-inner",
-    "--mod-infield-button-stacked-fill-padding-outer",
-    "--mod-infield-button-stacked-top-border-radius-start-start",
-    "--mod-infield-button-width",
-    "--mod-infield-button-width-stacked"
+    "--mod-infield-button-side-edge-to-fill",
+    "--mod-infield-button-width"
   ],
   "component": [
-    "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large",
-    "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large",
-    "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium",
-    "--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small",
-    "--spectrum-in-field-button-edge-to-fill",
-    "--spectrum-in-field-button-fill-stacked-inner-border-rounding",
-    "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large",
-    "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large",
-    "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium",
-    "--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small",
-    "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large",
-    "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large",
-    "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium",
-    "--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small",
-    "--spectrum-in-field-button-stacked-inner-edge-to-fill",
-    "--spectrum-in-field-button-width-stacked-extra-large",
-    "--spectrum-in-field-button-width-stacked-large",
-    "--spectrum-in-field-button-width-stacked-medium",
-    "--spectrum-in-field-button-width-stacked-small",
+    "--spectrum-in-field-button-edge-to-fill-extra-large",
+    "--spectrum-in-field-button-edge-to-fill-large",
+    "--spectrum-in-field-button-edge-to-fill-medium",
+    "--spectrum-in-field-button-edge-to-fill-small",
+    "--spectrum-in-field-button-side-edge-to-fill-extra-large",
+    "--spectrum-in-field-button-side-edge-to-fill-large",
+    "--spectrum-in-field-button-side-edge-to-fill-medium",
+    "--spectrum-in-field-button-side-edge-to-fill-small",
     "--spectrum-infield-button-background-color",
     "--spectrum-infield-button-background-color-down",
     "--spectrum-infield-button-background-color-hover",
-    "--spectrum-infield-button-background-color-key-focus",
-    "--spectrum-infield-button-border-color",
     "--spectrum-infield-button-border-radius",
-    "--spectrum-infield-button-border-radius-reset",
-    "--spectrum-infield-button-border-width",
+    "--spectrum-infield-button-downstate-perspective",
     "--spectrum-infield-button-edge-to-fill",
+    "--spectrum-infield-button-field-edge-to-disclosure-icon",
     "--spectrum-infield-button-fill-justify-content",
     "--spectrum-infield-button-fill-padding",
     "--spectrum-infield-button-height",
     "--spectrum-infield-button-icon-color",
     "--spectrum-infield-button-icon-color-down",
     "--spectrum-infield-button-icon-color-hover",
-    "--spectrum-infield-button-icon-color-key-focus",
-    "--spectrum-infield-button-inner-edge-to-fill",
-    "--spectrum-infield-button-stacked-border-radius-reset",
-    "--spectrum-infield-button-stacked-bottom-border-radius-end-start",
-    "--spectrum-infield-button-stacked-fill-padding-inline",
-    "--spectrum-infield-button-stacked-fill-padding-inner",
-    "--spectrum-infield-button-stacked-fill-padding-outer",
-    "--spectrum-infield-button-stacked-top-border-radius-start-start",
+    "--spectrum-infield-button-inline-edge-to-fill",
+    "--spectrum-infield-button-inline-field-edge-to-icon",
     "--spectrum-infield-button-width"
   ],
   "global": [
     "--spectrum-animation-duration-100",
-    "--spectrum-border-width-100",
     "--spectrum-component-height-100",
     "--spectrum-component-height-200",
     "--spectrum-component-height-300",
     "--spectrum-component-height-75",
-    "--spectrum-corner-radius-100",
+    "--spectrum-component-size-difference-down",
+    "--spectrum-component-size-minimum-perspective-down",
+    "--spectrum-component-size-width-ratio-down",
+    "--spectrum-corner-radius-small-size-extra-large",
+    "--spectrum-corner-radius-small-size-large",
+    "--spectrum-corner-radius-small-size-medium",
+    "--spectrum-corner-radius-small-size-small",
     "--spectrum-disabled-background-color",
     "--spectrum-disabled-content-color",
+    "--spectrum-downstate-height",
+    "--spectrum-downstate-width",
+    "--spectrum-field-edge-to-disclosure-icon-100",
+    "--spectrum-field-edge-to-disclosure-icon-200",
+    "--spectrum-field-edge-to-disclosure-icon-300",
+    "--spectrum-field-edge-to-disclosure-icon-75",
+    "--spectrum-field-edge-to-icon-100",
+    "--spectrum-field-edge-to-icon-200",
+    "--spectrum-field-edge-to-icon-300",
+    "--spectrum-field-edge-to-icon-75",
     "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-50",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
-    "--spectrum-neutral-content-color-hover",
-    "--spectrum-neutral-content-color-key-focus"
+    "--spectrum-neutral-content-color-hover"
   ],
   "passthroughs": [],
   "high-contrast": [
-    "--highcontrast-infield-button-border-color",
-    "--highcontrast-infield-button-border-color-active"
+    "--highcontrast-infield-button-background-color",
+    "--highcontrast-infield-button-icon-color"
   ]
 }