fix(slim): render icon in icononly slim example #245

AlaskaAirlines · Feb 14, 2024 · 380e8c0 · 380e8c0
1 parent f11d9c5
commit 380e8c0
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 14 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 category="interface" name="home-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" 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 category="interface" name="arrow-left" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" 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 category="interface" name="heart-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
 </auro-button>
diff --git a/demo/api.md b/demo/api.md
@@ -241,17 +241,19 @@ Be sure to also use the `customColor` and `customSize` attributes on the `auro-i
 
 Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` element for a slimmer icon only button with less padding.
 
+Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component, as well as add `height` and `width` styles to the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
+
 <div class="exampleWrapper">
   <!-- 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 category="interface" name="home-filled" slot="icon"></auro-icon>
+    <auro-icon customColor customSize style="width: 20px; height: 20px;" 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 category="interface" name="arrow-left" slot="icon"></auro-icon>
+    <auro-icon customColor customSize style="width: 20px; height: 20px;" 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 category="interface" name="heart-filled" slot="icon"></auro-icon>
+    <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -262,13 +264,13 @@ Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` el
 
 ```html
 <auro-button aria-label="home-filled" iconOnly slim>
-  <auro-icon customColor customSize category="interface" name="home-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" 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 category="interface" name="arrow-left" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" 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 category="interface" name="heart-filled" slot="icon"></auro-icon>
+  <auro-icon customColor customSize style="width: 20px; height: 20px;" category="interface" name="heart-filled" slot="icon"></auro-icon>
 </auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -112,6 +112,8 @@ Be sure to also use the `customColor` and `customSize` attributes on the `auro-i
 
 Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` element for a slimmer icon only button with less padding.
 
+Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component, as well as add `height` and `width` styles to the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
+
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconOnlySlim.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/src/style.scss b/src/style.scss
@@ -373,11 +373,6 @@ slot {
   }
 
   &--iconOnlySlim {
-    ::slotted(auro-icon) {
-      width: calc(var(--ds-size-300, $ds-size-300) - var(--ds-size-50, $ds-size-50));
-      height: calc(var(--ds-size-300, $ds-size-300) - var(--ds-size-50, $ds-size-50));
-    }
-
     padding-left: var(--ds-size-50, $ds-size-50);
     padding-right: var(--ds-size-50, $ds-size-50);
   }