feat(button): use latest @spectrum-css/button beta

MIGRATION: All slotted `<sp-icon>` elements expected to be `size="m"` to support the updated style delivery
adobe · Jan 4, 2021 · b3b20ed · b3b20ed
1 parent c35eb86
commit b3b20ed
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 24 deletions.
diff --git a/packages/button/package.json b/packages/button/package.json
@@ -52,7 +52,7 @@
     "author": "",
     "license": "Apache-2.0",
     "devDependencies": {
-        "@spectrum-css/button": "^3.0.0-beta.3"
+        "@spectrum-css/button": "^3.0.0-beta.4"
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",

diff --git a/packages/button/src/button-base.css b/packages/button/src/button-base.css
@@ -29,9 +29,15 @@ governing permissions and limitations under the License.
     -webkit-appearance: none;
 }
 
-slot[name='icon']::slotted(svg) {
+slot[name='icon']::slotted(:not(sp-icon)) {
     fill: currentColor;
     stroke: currentColor;
-    width: var(--spectrum-alias-workflow-icon-size, 18px);
-    height: var(--spectrum-alias-workflow-icon-size, 18px);
+    height: var(
+        --spectrum-alias-workflow-icon-size-m,
+        var(--spectrum-global-dimension-size-225)
+    );
+    width: var(
+        --spectrum-alias-workflow-icon-size-m,
+        var(--spectrum-global-dimension-size-225)
+    );
 }
diff --git a/packages/button/src/spectrum-action-button.css b/packages/button/src/spectrum-action-button.css
@@ -101,7 +101,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         50% -
             var(
                 --spectrum-actionbutton-icon-size,
-                var(--spectrum-alias-workflow-icon-size)
+                var(--spectrum-alias-workflow-icon-size-m)
             ) / 2
     );
 }
@@ -111,7 +111,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         50% -
             var(
                 --spectrum-actionbutton-icon-size,
-                var(--spectrum-alias-workflow-icon-size)
+                var(--spectrum-alias-workflow-icon-size-m)
             ) / 2
     );
 }
@@ -122,7 +122,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         50% -
             var(
                 --spectrum-actionbutton-icon-size,
-                var(--spectrum-alias-workflow-icon-size)
+                var(--spectrum-alias-workflow-icon-size-m)
             ) / 2
     );
 }
@@ -255,10 +255,6 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         --spectrum-actionbutton-background-color-key-focus,
         var(--spectrum-global-color-gray-50)
     );
-    border-color: var(
-        --spectrum-actionbutton-border-color-key-focus,
-        var(--spectrum-alias-border-color-focus)
-    );
     box-shadow: 0 0 0
         var(--spectrum-button-primary-border-size-increase-key-focus, 1px)
         var(
@@ -270,6 +266,15 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-hover)
     );
 }
+.button:focus-visible,
+.button:focus-visible:active {
+    /* .spectrum-ActionButton.focus-ring,
+   * .spectrum-ActionButton.focus-ring:active */
+    border-color: var(
+        --spectrum-actionbutton-border-color-key-focus,
+        var(--spectrum-alias-border-color-focus)
+    );
+}
 .button:focus-visible ::slotted([slot='icon']) {
     /* .spectrum-ActionButton.focus-ring .spectrum-Icon */
     color: var(
@@ -375,6 +380,13 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
         var(--spectrum-alias-text-color-hover)
     );
 }
+:host([selected]) .button:focus-visible:active {
+    /* .spectrum-ActionButton.is-selected.focus-ring:active */
+    border-color: var(
+        --spectrum-actionbutton-border-color-key-focus,
+        var(--spectrum-alias-border-color-focus)
+    );
+}
 :host([selected]) .button:focus-visible ::slotted([slot='icon']) {
     /* .spectrum-ActionButton.is-selected.focus-ring .spectrum-Icon */
     color: var(
@@ -839,7 +851,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
     border-color: var(
         --spectrum-actionbutton-quiet-border-color-selected,
-        var(--spectrum-alias-border-color)
+        var(--spectrum-global-color-gray-300)
     );
     color: var(
         --spectrum-actionbutton-quiet-text-color-selected,
@@ -869,7 +881,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
     border-color: var(
         --spectrum-actionbutton-quiet-border-color-selected-hover,
-        var(--spectrum-alias-border-color-hover)
+        var(--spectrum-global-color-gray-300)
     );
     color: var(
         --spectrum-actionbutton-quiet-text-color-selected-hover,
@@ -884,7 +896,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     );
     border-color: var(
         --spectrum-actionbutton-quiet-border-color-selected-down,
-        var(--spectrum-alias-border-color-down)
+        var(--spectrum-global-color-gray-300)
     );
     color: var(
         --spectrum-actionbutton-quiet-text-color-selected-down,

diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css
@@ -37,7 +37,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
                 var(--spectrum-global-dimension-static-size-25)
             ) * -1
     );
-    transition: box-shadow var(--spectrum-global-animation-duration-100, 0.13s)
+    transition: opacity var(--spectrum-global-animation-duration-100, 0.13s)
             ease-out,
         margin var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
 }
@@ -72,7 +72,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     padding: var(--spectrum-global-dimension-size-50)
         calc(
             var(
-                    --spectrum-button-primary-padding-x,
+                    --spectrum-button-primary-text-padding-x,
                     var(--spectrum-global-dimension-size-200)
                 ) -
                 var(

diff --git a/packages/button/src/spectrum-clear-button.css b/packages/button/src/spectrum-clear-button.css
@@ -37,7 +37,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
                 var(--spectrum-global-dimension-static-size-25)
             ) * -1
     );
-    transition: box-shadow var(--spectrum-global-animation-duration-100, 0.13s)
+    transition: opacity var(--spectrum-global-animation-duration-100, 0.13s)
             ease-out,
         margin var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
 }

diff --git a/packages/button/src/spectrum-fieldbutton.css b/packages/button/src/spectrum-fieldbutton.css
@@ -22,18 +22,18 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 .button {
     /* .spectrum-FieldButton */
     height: var(
-        --spectrum-dropdown-height,
+        --spectrum-picker-height,
         var(--spectrum-global-dimension-size-400)
     );
     padding: 0
         var(
-            --spectrum-dropdown-padding-x,
+            --spectrum-picker-padding-x,
             var(--spectrum-global-dimension-size-150)
         );
     font-family: inherit;
     font-weight: 400;
     font-size: var(
-        --spectrum-dropdown-text-size,
+        --spectrum-picker-text-size,
         var(--spectrum-alias-font-size-default)
     );
     line-height: normal;
@@ -44,15 +44,15 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
     padding-top: 0;
     padding-bottom: 0;
     padding-left: var(
-        --spectrum-dropdown-padding-x,
+        --spectrum-picker-padding-x,
         var(--spectrum-global-dimension-size-150)
     );
     padding-right: var(
-        --spectrum-dropdown-padding-x,
+        --spectrum-picker-padding-x,
         var(--spectrum-global-dimension-size-150)
     );
     border-width: var(
-        --spectrum-dropdown-border-size,
+        --spectrum-picker-border-size,
         var(--spectrum-alias-border-size-thin)
     );
     border-style: solid;
@@ -84,7 +84,7 @@ THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
 .button.is-open {
     /* .spectrum-FieldButton.is-open */
     border-width: var(
-        --spectrum-dropdown-border-size,
+        --spectrum-picker-border-size,
         var(--spectrum-alias-border-size-thin)
     );
 }