perf: update to support latest version of auro-icon

AlaskaAirlines · Nov 5, 2024 · ca74499 · ca74499
1 parent ca34000
commit ca74499
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 17 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 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 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 category="interface" name="heart-filled" slot="icon"></auro-icon>
 </auro-button>
diff --git a/demo/api.html b/demo/api.html
@@ -34,6 +34,7 @@
     </script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-alert@latest/dist/auro-alert__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js"></script>

diff --git a/demo/api.md b/demo/api.md
@@ -267,13 +267,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 category="interface" name="home-filled" slot="icon"></auro-icon>
+    <auro-icon customColor 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 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 category="interface" name="heart-filled" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -284,13 +284,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 category="interface" name="home-filled" slot="icon"></auro-icon>
+  <auro-icon customColor 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 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 category="interface" name="heart-filled" slot="icon"></auro-icon>
 </auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/demo/api.min.js b/demo/api.min.js
diff --git a/demo/index.min.js b/demo/index.min.js
diff --git a/src/style.scss b/src/style.scss
@@ -231,8 +231,10 @@ slot {
   // auro-button--iconOnly
   &--iconOnly {
     ::slotted(auro-icon) {
-      width: var(--ds-size-300, $ds-size-300);
-      height: var(--ds-size-300, $ds-size-300);
+      // width: var(--ds-size-300, $ds-size-300);
+      // height: var(--ds-size-300, $ds-size-300);
+
+      --ds-auro-icon-size: var(--ds-size-300, $ds-size-300);
     }
 
     padding: 0 var(--ds-size-100, $ds-size-100);
@@ -247,8 +249,10 @@ slot {
   // auro-button--iconOnlySlim
   &--iconOnlySlim {
     ::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));
+      // 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));
+
+      --ds-auro-icon-size: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50));
     }
 
     padding: 0 var(--ds-size-50, $ds-size-50);
@@ -268,8 +272,10 @@ slot {
     transition: all 300ms ease-out;
 
     ::slotted(auro-icon) {
-      width: var(--ds-size-300, $ds-size-300);
-      height: var(--ds-size-300, $ds-size-300);
+      // width: var(--ds-size-300, $ds-size-300);
+      // height: var(--ds-size-300, $ds-size-300);
+
+      --ds-auro-icon-size: var(--ds-size-300, $ds-size-300);
     }
   }
 }