docs(examples): update demo examples and documentation

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

Hide file tree

Showing 8 changed files with 26 additions and 26 deletions.
diff --git a/apiExamples/iconOnly.html b/apiExamples/iconOnly.html
@@ -1,9 +1,9 @@
 <auro-button aria-label="home-filled" iconOnly>
-  <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>
-  <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>
-  <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/apiExamples/rounded.html b/apiExamples/rounded.html
@@ -1,3 +1,3 @@
 <auro-button aria-label="arrow-up" rounded iconOnly>
-  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+  <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
diff --git a/apiExamples/roundedRightAlign.html b/apiExamples/roundedRightAlign.html
@@ -1,4 +1,4 @@
 <auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
   Text is now shown!
-  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+  <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
diff --git a/apiExamples/roundedTextWithIcon.html b/apiExamples/roundedTextWithIcon.html
@@ -1,4 +1,4 @@
 <auro-button aria-label="in-flight" rounded>
   Back to Top
-  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+  <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
diff --git a/apiExamples/toggledText.html b/apiExamples/toggledText.html
@@ -1,4 +1,4 @@
 <auro-button aria-label="arrow-up" rounded iconOnly id="toggledTextElem">
   Text is now shown!
-  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+  <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
diff --git a/demo/api.md b/demo/api.md
@@ -200,21 +200,21 @@ Be sure to use the customColor attribute on the `auro-icon` component to allow c
 
 Use the `iconOnly` attribute with the `auro-button` element for a style specific to having only an `auro-icon` as the button's content.
 
-Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
+Be sure to use the `customColor` attribute on the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
 
 **Recommended**: We strongly encourage the users of the icon only `auro-button` to use the `aria-label` attribute. Without this attribute, the screenreaders will not properly describe the button content to it's users.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/iconOnly.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/iconOnly.html -->
   <auro-button aria-label="home-filled" iconOnly>
-    <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>
-    <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>
-    <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>
@@ -225,13 +225,13 @@ Be sure to also use the `customColor` and `customSize` attributes on the `auro-i
 
 ```html
 <auro-button aria-label="home-filled" iconOnly>
-  <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>
-  <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>
-  <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 -->
@@ -241,7 +241,7 @@ 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.
+Be sure to 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) -->
@@ -288,7 +288,7 @@ Use the `rounded` attribute in conjunction with the `iconOnly` attribute for an
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/rounded.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/rounded.html -->
   <auro-button aria-label="arrow-up" rounded iconOnly>
-    <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+    <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -299,7 +299,7 @@ Use the `rounded` attribute in conjunction with the `iconOnly` attribute for an
 
 ```html
 <auro-button aria-label="arrow-up" rounded iconOnly>
-  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+  <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -314,7 +314,7 @@ This example demonstrates a `rounded` `auro-button` with text and an `auro-icon`
   <!-- The below content is automatically added from ./../../apiExamples/roundedTextWithIcon.html -->
   <auro-button aria-label="in-flight" rounded>
     Back to Top
-    <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+    <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -326,7 +326,7 @@ This example demonstrates a `rounded` `auro-button` with text and an `auro-icon`
 ```html
 <auro-button aria-label="in-flight" rounded>
   Back to Top
-  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+  <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -366,7 +366,7 @@ The `rounded` attribute supports the ability to hide/show the text of the `auro-
   <!-- The below content is automatically added from ./../../apiExamples/toggledText.html -->
   <auro-button aria-label="arrow-up" rounded iconOnly id="toggledTextElem">
     Text is now shown!
-    <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+    <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -378,7 +378,7 @@ The `rounded` attribute supports the ability to hide/show the text of the `auro-
 ```html
 <auro-button aria-label="arrow-up" rounded iconOnly id="toggledTextElem">
   Text is now shown!
-  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+  <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -420,7 +420,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin
   <!-- The below content is automatically added from ./../../apiExamples/roundedRightAlign.html -->
   <auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
     Text is now shown!
-    <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+    <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
   </auro-button>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -432,7 +432,7 @@ This example shows a `rounded` `auro-button` that is right-aligned, demonstratin
 ```html
 <auro-button aria-label="in-flight" rounded iconOnly id="rightAlignElem" style="float: right;">
   Text is now shown!
-  <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+  <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
 </auro-button>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/docs/partials/api.md b/docs/partials/api.md
@@ -90,7 +90,7 @@ Be sure to use the customColor attribute on the `auro-icon` component to allow c
 
 Use the `iconOnly` attribute with the `auro-button` element for a style specific to having only an `auro-icon` as the button's content.
 
-Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
+Be sure to use the `customColor` attribute on the `auro-icon` component to allow colors set in your parent element to pass through to the icon.
 
 **Recommended**: We strongly encourage the users of the icon only `auro-button` to use the `aria-label` attribute. Without this attribute, the screenreaders will not properly describe the button content to it's users.
 
@@ -112,7 +112,7 @@ 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.
+Be sure to 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) -->

diff --git a/test/auro-button.test.js b/test/auro-button.test.js
@@ -215,7 +215,7 @@ describe('auro-button', () => {
   it('default slot is not in DOM when iconOnly attribute is present', async () => {
     const el = await fixture(html`
       <auro-button rounded iconOnly>
-        <auro-icon customSize customcolor category="interface" name="arrow-up" slot="icon"></auro-icon>
+        <auro-icon customColor category="interface" name="arrow-up" slot="icon"></auro-icon>
       </auro-button>
     `);