Merge branch 'spectrum-two' into aramos-adobe/css769-combox-s2-migration

Author: aramos-adobe

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"
   ]
 }

components/infieldbutton/stories/template.js

@@ -20,6 +20,8 @@ export const Template = (
 		isActive,
 		isInline,
 		tabIndex = 0,
+		onMinus,
+		onAdd,
 		onclick,
 	} = {},
 	context = {},
@@ -42,6 +44,7 @@ export const Template = (
 					...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 				})}
 				?disabled=${isDisabled}
+				@click=${onMinus}
 				aria-haspopup="listbox"
 				type="button"
 				tabindex=${tabIndex}
@@ -71,6 +74,7 @@ export const Template = (
 						...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 					})}
 					?disabled=${isDisabled}
+					@click=${onAdd}
 					aria-haspopup="listbox"
 					type="button"
 					tabindex=${tabIndex}