perf(styles): update styles for icon only buttons

AlaskaAirlines · Feb 14, 2024 · 99f5488 · 99f5488
1 parent 1c434e1
commit 99f5488
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 15 deletions.
diff --git a/apiExamples/iconOnlySlim.html b/apiExamples/iconOnlySlim.html
@@ -1,9 +1,9 @@
 <auro-button aria-label="home-filled" iconOnly slim>
-  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="home-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
 </auro-button>
 <auro-button aria-label="arrow-left" variant="secondary" iconOnly slim>
-  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="arrow-left" slot="icon"></auro-icon>
+  <auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
 </auro-button>
 <auro-button aria-label="heart-filled" variant="tertiary" iconOnly slim>
-  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
 </auro-button>
diff --git a/demo/api.md b/demo/api.md
@@ -247,13 +247,13 @@ Be sure to use the `customColor` and `customSize` attributes on the `auro-icon`
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconOnlySlim.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/iconOnlySlim.html -->
   <auro-button aria-label="home-filled" iconOnly slim>
-    <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="home-filled" slot="icon"></auro-icon>
+    <auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
   </auro-button>
   <auro-button aria-label="arrow-left" variant="secondary" iconOnly slim>
-    <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="arrow-left" slot="icon"></auro-icon>
+    <auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
   </auro-button>
   <auro-button aria-label="heart-filled" variant="tertiary" iconOnly slim>
-    <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
+    <auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -264,13 +264,13 @@ Be sure to use the `customColor` and `customSize` attributes on the `auro-icon`
 
 ```html
 <auro-button aria-label="home-filled" iconOnly slim>
-  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="home-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
 </auro-button>
 <auro-button aria-label="arrow-left" variant="secondary" iconOnly slim>
-  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="arrow-left" slot="icon"></auro-icon>
+  <auro-icon customColor customSize category="interface" name="arrow-left" slot="icon"></auro-icon>
 </auro-button>
 <auro-button aria-label="heart-filled" variant="tertiary" iconOnly slim>
-  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize category="interface" name="heart-filled" slot="icon"></auro-icon>
 </auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/src/style.scss b/src/style.scss
@@ -355,26 +355,37 @@ slot {
     padding: var(--ds-size-100, $ds-size-100) var(--ds-size-200, $ds-size-200);
     font-size: var(--ds-text-body-size-sm, $ds-text-body-size-sm);
     min-width: unset;
-    min-height: 2.25rem;
-    max-height: 2.25rem;
+    min-height: calc(var(--ds-size-500, $ds-size-500) - var(--ds-size-50, $ds-size-50));
+    max-height: calc(var(--ds-size-500, $ds-size-500) - var(--ds-size-50, $ds-size-50));
   }
 
+  // auro-button--iconOnly
   &--iconOnly {
     ::slotted(auro-icon) {
       width: var(--ds-size-300, $ds-size-300);
       height: var(--ds-size-300, $ds-size-300);
     }
 
-    padding-left: calc(var(--ds-size-100, $ds-size-100) - var(--ds-size-25, $ds-size-25));
-    padding-right: calc(var(--ds-size-100, $ds-size-100) - var(--ds-size-25, $ds-size-25));
+    padding: 0 var(--ds-size-100, $ds-size-100);
 
     border-radius: 100px;
     min-width: unset;
+
+    height: var(--ds-size-600, $ds-size-600);
+    width: var(--ds-size-500, $ds-size-500);
   }
 
+  // auro-button--iconOnlySlim
   &--iconOnlySlim {
-    padding-left: var(--ds-size-50, $ds-size-50);
-    padding-right: var(--ds-size-50, $ds-size-50);
+    ::slotted(auro-icon) {
+      width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
+      height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
+    }
+
+    padding: 0 var(--ds-size-50, $ds-size-50);
+
+    height: calc(var(--ds-size-400, $ds-size-400) + var(--ds-size-50, $ds-size-50));
+    width: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-50, $ds-size-50));
   }
 
   // auro-button--rounded