From 5cbb37551ece8208b5829d88165c88fbc6003621 Mon Sep 17 00:00:00 2001 From: Jason Baker Date: Mon, 28 Oct 2024 07:53:44 -0700 Subject: [PATCH] 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 | 2 +- demo/api.md | 46 ++++++++++++++++++------------------- docs/api.md | 6 ----- docs/partials/api.md | 16 ++++++------- src/auro-icon.js | 1 - src/style.scss | 11 ++++----- src/tokens.scss | 4 ++++ 7 files changed, 40 insertions(+), 46 deletions(-) diff --git a/apiExamples/customSize.html b/apiExamples/customSize.html index 3516c38..4bf5ec6 100644 --- a/apiExamples/customSize.html +++ b/apiExamples/customSize.html @@ -1 +1 @@ - + diff --git a/demo/api.md b/demo/api.md index 00b50e1..0ed154d 100644 --- a/demo/api.md +++ b/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 +## Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + +```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); +} +``` + + ### 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.
- +
@@ -254,21 +266,7 @@ Auro icon's by default are set to the value of the `--ds-size-300` token. To cus ```html - + ``` - - -## Theme Support - -The component may be restyled using the following code sample and changing the values of the following token(s). - - - - -```scss -:host { - --ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default); -} -``` - + diff --git a/docs/api.md b/docs/api.md index 3df3c7c..ad9e632 100644 --- a/docs/api.md +++ b/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 | diff --git a/docs/partials/api.md b/docs/partials/api.md index d06f3ca..894474b 100644 --- a/docs/partials/api.md +++ b/docs/partials/api.md @@ -105,9 +105,16 @@ The `auro-icon` by default apply the `primary` selector for color application. T +## Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + ### 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.
@@ -121,10 +128,3 @@ Auro icon's by default are set to the value of the `--ds-size-300` token. To cus - -## Theme Support - -The component may be restyled using the following code sample and changing the values of the following token(s). - - - diff --git a/src/auro-icon.js b/src/auro-icon.js index cb02eb9..eee91b3 100644 --- a/src/auro-icon.js +++ b/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. diff --git a/src/style.scss b/src/style.scss index b59c4e3..8c98bea 100644 --- a/src/style.scss +++ b/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 { diff --git a/src/tokens.scss b/src/tokens.scss index 8b4a189..b1aefdf 100644 --- a/src/tokens.scss +++ b/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); }