fix(button)!: height and accessibility fixes (#1794)

BREAKING CHANGE: removes: `--mod-button-padding-label-top` & `--mod-button-padding-label-bottom`. Use: `--mod-button-top-to-text`& `--mod-button-bottom-to-text` instead.

Additional changes:
* fix(button): update aria-labels for icon only variant
* fix(button): remove unneeded isOpen attribute
* fix(button): override icon size for icon only
* fix(button): update line height
* fix(button): update button padding with custom tokens
* fix(button): remove unneeded aria-labels

components/button/index.css

@@ -17,6 +17,7 @@ governing permissions and limitations under the License.
   --spectrum-button-animation-duration: var(--spectrum-animation-duration-100);
   --spectrum-button-border-radius: var(--spectrum-corner-radius-100);
   --spectrum-button-border-width: var(--spectrum-border-width-200);
+  --spectrum-button-line-height: 1.2; /* Hack to keep buttons at 32px */
 
   --spectrum-button-focus-ring-gap: var(--spectrum-focus-indicator-gap);
   --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));
@@ -38,8 +39,8 @@ governing permissions and limitations under the License.
   --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-75);
   --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-75) - var(--spectrum-button-border-width));
   --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-75);
-  --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-75);
-  --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-75);
+  --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small);
+  --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small);
 }
 
 .spectrum-Button--sizeM {
@@ -54,8 +55,8 @@ governing permissions and limitations under the License.
   --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-100);
   --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-100) - var(--spectrum-button-border-width));
   --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-100);
-  --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-100);
-  --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-100);
+  --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium);
+  --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
 }
 
 .spectrum-Button--sizeL {
@@ -70,8 +71,8 @@ governing permissions and limitations under the License.
   --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-200);
   --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-200) - var(--spectrum-button-border-width));
   --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-200);
-  --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-200);
-  --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-200);
+  --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large);
+  --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large);
 }
 
 .spectrum-Button--sizeXL {
@@ -86,8 +87,8 @@ governing permissions and limitations under the License.
   --spectrum-button-edge-to-visual-only: var(--spectrum-component-pill-edge-to-visual-only-300);
   --spectrum-button-edge-to-text: calc(var(--spectrum-component-pill-edge-to-text-300) - var(--spectrum-button-border-width));
   --spectrum-button-padding-label-to-icon: var(--spectrum-text-to-visual-300);
-  --spectrum-button-padding-label-top: var(--spectrum-component-top-to-text-300);
-  --spectrum-button-padding-label-bottom: var(--spectrum-component-bottom-to-text-300);
+  --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large);
+  --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large);
 
 }
 
@@ -150,10 +151,10 @@ a.spectrum-Button {
 
 .spectrum-Button-label {
   @inherit: %spectrum-ButtonLabel;
-  padding-block-start: calc(var(--mod-button-padding-label-top, var(--spectrum-button-padding-label-top)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
-  padding-block-end: calc(var(--mod-button-padding-label-bottom, var(--spectrum-button-padding-label-bottom)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+  padding-block-start: calc(var(--mod-button-top-to-text, var(--spectrum-button-top-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
+  padding-block-end: calc(var(--mod-button-bottom-to-text, var(--spectrum-button-bottom-to-text)) - var(--mod-button-border-width, var(--spectrum-button-border-width)));
   white-space: nowrap;
-  line-height: var(--spectrum-line-height-100);
+  line-height: var(--mod-button-line-height, var(--spectrum-button-line-height));
   align-self: start;
 }
 

components/button/metadata/button-accent.yml

@@ -14,8 +14,23 @@ sections:
       ### CTA replaced by Accent with Fill
       Replace all `.spectrum-Button--cta` with `.spectrum-Button--accent .spectrum-Button--fill`.
 
+      ### Icon Only
+      Add the `.spectrum-Button--iconOnly` class to apply the correct styling when an icon is used without a label.
+      Provide an `aria-label` on the button itself when using this variant for accessibility.
+
       ### T-shirt sizing
       Button now supports t-shirt sizing and requires that you specify the size of button by adding a `.spectrum-Button--size*` class.
+      
+      ### Change workflow icon size
+
+      Previously, all Buttons used `.spectrum-Icon--sizeS`. This has changed:
+
+      | Button classname           | Workflow icon classname           |
+      | -------------------------- | --------------------------------- |
+      | `.spectrum-Button--sizeS`  | `.spectrum-Icon--sizeS`           |
+      | `.spectrum-Button--sizeM`  | `.spectrum-Icon--sizeM`           |
+      | `.spectrum-Button--sizeL`  | `.spectrum-Icon--sizeL`           |
+      | `.spectrum-Button--sizeXL` | `.spectrum-Icon--sizeXL`          |
 examples:
   - id: button-accent
     name: Sizing
@@ -29,14 +44,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -49,14 +64,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM">
-            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly">
-            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -70,14 +85,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL">
-            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly">
-            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -91,14 +106,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL">
-            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly">
-            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--fill spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -115,14 +130,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent" disabled>
-            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-Button--iconOnly" disabled>
-            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--fill spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -141,14 +156,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeS">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeS spectrum-Button--iconOnly" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -161,14 +176,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM">
-            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly">
-            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeM spectrum-Button--iconOnly" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -182,14 +197,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeL">
-            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly">
-            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeL spectrum-Button--iconOnly" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -203,14 +218,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeXL">
-            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly">
-            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--outline spectrum-Button--accent spectrum-Button--sizeXL spectrum-Button--iconOnly" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeXL" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>
@@ -227,14 +242,14 @@ examples:
           </button>
 
           <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent" disabled>
-            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
             <span class="spectrum-Button-label">Edit</span>
           </button>
 
-          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" disabled>
-            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Edit">
+          <button class="spectrum-Button spectrum-Button--sizeM spectrum-Button--outline spectrum-Button--accent spectrum-Button--iconOnly" aria-label="Edit" disabled>
+            <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-icon-18-Edit" />
             </svg>
           </button>