fix: change how we support custom size #147

BREAKING CHANGE: the old customSize attribute is no longer supported. See new documentation on API page under Theme Support.

apiExamples/customSize.html

@@ -1 +1 @@
-<auro-icon style="width: 30rem" category="interface" name="pin-trip" success customSize></auro-icon>
+<auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" success></auro-icon>

demo/api.md

@@ -5,12 +5,6 @@
 
 auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
 
-## Attributes
-
-| Attribute    | Type      | Description                 |
-|--------------|-----------|-----------------------------|
-| [customSize](#customSize) | `Boolean` | Allows for custom size use. |
-
 ## Properties
 
 | Property         | Attribute        | Type      | Default                                          | Description                                      |
@@ -238,14 +232,32 @@ The `auro-icon` by default apply the `primary` selector for color application. T
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
+
+```scss
+:host {
+  // COLOR
+  --ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
+
+  // SIZE
+  --ds-auro-icon-size: var(--ds-size-300, $ds-size-300);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Custom Size
 
-Auro icon's by default are set to the value of the `--ds-size-300` token. To customize the icon size, add the `customSize` attribute and adjust the `width` of the parent element.
+Auro Icon supports setting a custom size using the `--ds-auro-icon-size` token. The icons height and width will be set to the token value, preserving the square shape that is standard for all icons.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customSize.html) -->
   <!-- The below content is automatically added from ./../../apiExamples/customSize.html -->
-  <auro-icon style="width: 30rem" category="interface" name="pin-trip" success customSize></auro-icon>
+  <auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" success></auro-icon>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -254,21 +266,7 @@ Auro icon's by default are set to the value of the `--ds-size-300` token. To cus
 <!-- The below code snippet is automatically added from ./../../apiExamples/customSize.html -->
 
 ```html
-<auro-icon style="width: 30rem" category="interface" name="pin-trip" success customSize></auro-icon>
+<auro-icon style="--ds-auro-icon-size: 30rem;" category="interface" name="pin-trip" success></auro-icon>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Theme Support
-
-The component may be restyled using the following code sample and changing the values of the following token(s).
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
-<!-- The below code snippet is automatically added from ./../../src/tokens.scss -->
-
-```scss
-:host {
-  --ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
-}
-```
-<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>

docs/api.md

@@ -2,12 +2,6 @@
 
 auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
 
-## Attributes
-
-| Attribute    | Type      | Description                 |
-|--------------|-----------|-----------------------------|
-| `customSize` | `Boolean` | Allows for custom size use. |
-
 ## Properties
 
 | Property         | Attribute        | Type      | Default                                          | Description                                      |

docs/partials/api.md

@@ -105,9 +105,16 @@ The `auro-icon` by default apply the `primary` selector for color application. T
 
 </auro-accordion>
 
+## Theme Support
+
+The component may be restyled using the following code sample and changing the values of the following token(s).
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
 ### Custom Size
 
-Auro icon's by default are set to the value of the `--ds-size-300` token. To customize the icon size, add the `customSize` attribute and adjust the `width` of the parent element.
+Auro Icon supports setting a custom size using the `--ds-auro-icon-size` token. The icons height and width will be set to the token value, preserving the square shape that is standard for all icons.
 
 <div class="exampleWrapper">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../apiExamples/customSize.html) -->
@@ -121,10 +128,3 @@ Auro icon's by default are set to the value of the `--ds-size-300` token. To cus
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
-
-## Theme Support
-
-The component may be restyled using the following code sample and changing the values of the following token(s).
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../../src/tokens.scss) -->
-<!-- AURO-GENERATED-CONTENT:END -->

src/auro-icon.js

@@ -19,7 +19,6 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
 /**
  * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
  *
- * @attr {Boolean} customSize - Allows for custom size use.
  * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
  * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
  * @attr {Boolean} customColor - Removes primary selector.

src/style.scss

@@ -19,18 +19,17 @@
   vertical-align: middle;
   line-height: 1;
   display: inline-block;
+  width: var(--ds-auro-icon-size);
+  height: var(--ds-auro-icon-size);
 
   .logo {
     color: var(--ds-color-brand-midnight-400, $ds-color-brand-midnight-400);
   }
 }
 
-:host([customSize]) {
-  --auro-size-lg:100%;
-  --ds-size-300: 100%;
-
-  width: 100%;
-  height: 100%;
+svg {
+  width: 100% !important; // stylelint-disable-line declaration-no-important
+  height: 100% !important; // stylelint-disable-line declaration-no-important
 }
 
 .label {

src/tokens.scss

@@ -1,3 +1,7 @@
 :host {
+  // COLOR
   --ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
+
+  // SIZE
+  --ds-auro-icon-size: var(--ds-size-300, $ds-size-300);
 }