perf(icon): update to use beta of auro-icon with theme support

AlaskaAirlines · Jun 20, 2024 · bbdb73d · bbdb73d
1 parent 894faa2
commit bbdb73d
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 145 deletions.
diff --git a/demo/api.html b/demo/api.html
@@ -34,7 +34,6 @@
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <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/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-radio@latest/dist/auro-radio__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>

diff --git a/demo/index.html b/demo/index.html
@@ -37,7 +37,6 @@
     </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <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/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-radio@latest/dist/auro-radio__bundled.js" type="module"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@aurodesignsystem/auro-formvalidation": "^1.0.3",
+    "@aurodesignsystem/auro-icon": "^5.0.0-beta.1",
     "@aurodesignsystem/auro-library": "^2.6.0",
     "chalk": "^5.2.0",
     "cleave.js": "^1.6.0",
@@ -33,7 +34,6 @@
   },
   "devDependencies": {
     "@alaskaairux/icons": "^4.41.1",
-    "@aurodesignsystem/auro-icon": "^4.3.1",
     "@aurodesignsystem/design-tokens": "^4.7.0",
     "@aurodesignsystem/eslint-config": "^1.3.1",
     "@aurodesignsystem/webcorestylesheets": "^5.1.1",
@@ -156,6 +156,7 @@
     "build:docs": "node scripts/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:sass:component": "for file in src/*.scss; do npx sass --no-source-map \"$file:${file%.scss}.css\"; done",
+    "build:version": "node scripts/version.mjs",
     "build:watch": "nodemon -e scss,js --watch src --exec npm run build:dev:assets",
     "bundler": "rollup -c",
     "bundler:test": "rollup -c -w",
@@ -167,7 +168,7 @@
     "demo:update:index": "node ./scripts/prepForBuild",
     "dev": "concurrently --kill-others 'npm run build:watch' 'npm run serve'",
     "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
-    "esLint": "./node_modules/.bin/eslint src/**/*.js",
+    "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
     "linters": "npm-run-all scssLint esLint",
     "preCommit": "node scripts/pre-commit.mjs",
     "postCss:component": "node ./scripts/postCss.mjs",

diff --git a/scripts/version.mjs b/scripts/version.mjs
@@ -0,0 +1,3 @@
+import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';
+
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon');
diff --git a/src/auro-input.js b/src/auro-input.js
@@ -3,17 +3,30 @@
 
 // ---------------------------------------------------------------------
 
-/* eslint-disable complexity */
+/* eslint-disable complexity, lit/binding-positions, lit/no-invalid-html */
 
-import { html } from "lit";
+import { html } from 'lit/static-html.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import i18n from './i18n.js';
 import BaseInput from './base-input.js';
 
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+import iconVersion from './iconVersion';
+
 // build the component class
 export class AuroInput extends BaseInput {
+  constructor() {
+    super();
+
+    /**
+     * Generate unique names for dependency components.
+     */
+    const versioning = new AuroDependencyVersioning();
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+  }
 
   /**
    * Function to determine if the input is meant to render an icon visualizing the input type.
@@ -55,12 +68,25 @@ export class AuroInput extends BaseInput {
                This should be cleaned up when auro-icon issue #31 is resolved. -->
             ${this.inputIconName
             ? repeat([this.inputIconName], (val) => val, (name) => html`
-              <auro-icon class="accentIcon" category="payment" name="${name}" part="accentIcon" customColor></auro-icon>
+              <${this.iconTag}
+                class="accentIcon"
+                category="payment"
+                name="${name}"
+                part="accentIcon"
+                ?disabled="${this.disabled}">
+              </${this.iconTag}>
             `) : undefined
             }
 
             ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear'
-            ? html`<auro-icon class="accentIcon" category="interface" name="calendar" part="accentIcon" customColor></auro-icon>`
+            ? html`
+              <${this.iconTag}
+                class="accentIcon"
+                category="interface"
+                name="calendar"
+                part="accentIcon"
+                ?disabled="${this.disabled}">
+              </${this.iconTag}>`
             : undefined
             }
           </div>
@@ -100,18 +126,35 @@ export class AuroInput extends BaseInput {
           ?hasValue="${this.hasValue}">
           ${this.validity && this.validity !== 'valid' ? html`
             <div class="notification alertNotification">
-              ${this.alertSvg}
+              <${this.iconTag}
+                category="alert"
+                name="error-stroke"
+                customSize
+                error>
+              </${this.iconTag}>
             </div>
           ` : undefined}
           ${this.hasValue ? html`
             ${this.type === 'password' ? html`
-              <div class="notification passwordBtn">
+              <div class="notification">
                 <button
                   aria-hidden="true"
                   tabindex="-1"
                   @click="${this.handleClickShowPassword}"
-                  class="notificationBtn">
-                  ${this.showPassword ? this.hidePassword : this.viewPassword}
+                  class="notificationBtn passwordBtn">
+                  ${this.showPassword ? html`
+                    <${this.iconTag}
+                      category="interface"
+                      name="hide-password-stroke"
+                      customSize>
+                    </${this.iconTag}>
+                  ` : html`
+                    <${this.iconTag}
+                      category="interface"
+                      name="view-password-stroke"
+                      customSize>
+                    </${this.iconTag}>
+                  `}
                 </button>
               </div>
             ` : undefined}
@@ -122,7 +165,13 @@ export class AuroInput extends BaseInput {
                   aria-hidden="true"
                   tabindex="-1"
                   @click="${this.handleClickClear}">
-                  ${this.readonly ? undefined : this.closeSvg}
+                  ${this.readonly ? undefined : html`
+                    <${this.iconTag}
+                      category="interface"
+                      name="x-lg"
+                      customSize>
+                    </${this.iconTag}>
+                  `}
                 </button>
               </div>
             ` : undefined}

diff --git a/src/base-input.js b/src/base-input.js
@@ -15,10 +15,6 @@ import styleCss from "./style-css.js";
 import colorCss from "./color-css.js";
 import tokensCss from "./tokens-css.js";
 
-import closelg from '@alaskaairux/icons/dist/icons/interface/x-sm.mjs';
-import viewPassword from '@alaskaairux/icons/dist/icons/interface/view-password.mjs';
-import hidePassword from '@alaskaairux/icons/dist/icons/interface/hide-password.mjs';
-import alert from '@alaskaairux/icons/dist/icons/alert/error.mjs';
 import Cleave from 'cleave.js';
 import i18n, {notifyOnLangChange, stopNotifyingOnLangChange} from './i18n.js';
 import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js';
@@ -107,10 +103,6 @@ export default class BaseInput extends LitElement {
    */
   privateDefaults() {
     this.validation = new AuroFormValidation();
-    this.closeSvg = this.getIconAsHtml(closelg);
-    this.alertSvg = this.getIconAsHtml(alert);
-    this.hidePassword = this.getIconAsHtml(hidePassword);
-    this.viewPassword = this.getIconAsHtml(viewPassword);
     this.inputIconName = undefined;
     this.inputMode = '';
     this.showPassword = false;

diff --git a/src/color.scss b/src/color.scss
@@ -28,12 +28,12 @@ input {
   color: var(--ds-color-input-text-color);
 
   &::placeholder {
-    color: var(--ds-auro-input-placeholder-text-color);
+    color: transparent;
   }
 
   &:focus {
     &::placeholder {
-      --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
+      color: var(--ds-auro-input-placeholder-text-color);
     }
   }
 
@@ -46,14 +46,6 @@ label {
   color: var(--ds-auro-input-label-text-color);
 }
 
-.alertNotification {
-  color: var(--ds-auro-input-alert-icon-color);
-}
-
-.typeIcon {
-  color: var(--ds-auro-input-type-icon-color);
-}
-
 :host(:not([bordered], [borderless])) {
   .wrapper {
     border-bottom-color: var(--ds-auro-input-border-color);
@@ -98,6 +90,5 @@ label {
 
 :host([disabled]) {
   --ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #{$ds-color-border-ui-disabled-default});
-  --ds-auro-input-type-icon-color: var(--ds-color-text-disabled-default, #{$ds-color-text-disabled-default});
   --ds-auro-input-label-text-color: var(--ds-color-text-disabled-default, #{$ds-color-text-disabled-default});
 }
diff --git a/src/iconVersion.js b/src/iconVersion.js
@@ -0,0 +1 @@
+export default '5.0.0-beta.1'
diff --git a/src/styles/notificationIcons.scss b/src/styles/notificationIcons.scss
@@ -7,7 +7,7 @@
   flex-direction: row;
   align-items: center;
 
-  auro-icon {
+  [auro-icon] {
     height: var(--ds-size-300, $ds-size-300);
     width: var(--ds-size-300, $ds-size-300);
     margin-right: var(--ds-size-100, $ds-size-100);
@@ -31,17 +31,27 @@
 }
 
 .notification {
-  height: var(--ds-size-300, $ds-size-300);
-  width: var(--ds-size-300, $ds-size-300);
-
   &:not(:first-of-type) {
-    margin-left: var(--ds-size-100, $ds-size-100);
+    margin-left: var(--ds-size-150, $ds-size-150);
   }
 }
 
+.alertNotification {
+  height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25));
+  width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); 
+}
+
+.clearBtn {
+  height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25));
+  width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); 
+}
+
+.passwordBtn {
+  height: calc(var(--ds-size-300, $ds-size-300));
+  width: calc(var(--ds-size-300, $ds-size-300));
+}
+
 .notificationBtn {
-  height: 100%;
-  width: 100%;
   padding: 0;
   border: 0;
   background: unset;

diff --git a/src/tokens.scss b/src/tokens.scss
@@ -1,12 +1,10 @@
-:host {
-  --ds-auro-input-alert-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
-  --ds-auro-input-background-color: var(--ds-color-background-primary-100-default, $ds-color-background-primary-100-default);
+:root {
+  --ds-auro-input-background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
   --ds-auro-input-border-color: var(--ds-color-border-secondary-default, $ds-color-border-secondary-default);
   --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, $ds-color-text-ui-focus-default);
   --ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, $ds-color-text-tertiary-default);
   --ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, $ds-color-text-tertiary-default);
   --ds-auro-input-notification-icon-color: var(--ds-color-alert-error-default, $ds-color-alert-error-default);
-  --ds-auro-input-placeholder-text-color: transparent;
+  --ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
   --ds-auro-input-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);
-  --ds-auro-input-type-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);
 }
diff --git a/test/auro-input.test.js b/test/auro-input.test.js
@@ -76,7 +76,7 @@ describe('auro-input', () => {
       <auro-input type="password" value="password" label="password"></auro-input>
     `);
 
-    const toggle = el.shadowRoot.querySelector('.passwordBtn button');
+    const toggle = el.shadowRoot.querySelector('.passwordBtn');
     const input = el.shadowRoot.querySelector('input');
 
     input.focus();