perf(button): use new auro-button flat variant for clear and show pas…

…sword
AlaskaAirlines · Jul 3, 2024 · 2a671d2 · 2a671d2
1 parent 4032727
commit 2a671d2
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 30 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "node": "^18 || ^20"
   },
   "dependencies": {
+    "@aurodesignsystem/auro-button": "^7.3.0-beta.2",
     "@aurodesignsystem/auro-formvalidation": "^1.0.3",
     "@aurodesignsystem/auro-icon": "^5.0.0-beta.1",
     "@aurodesignsystem/auro-library": "^2.6.0",

diff --git a/scripts/version.mjs b/scripts/version.mjs
@@ -1,3 +1,4 @@
 import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';
 
 versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon');
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-button');
diff --git a/src/auro-input.js b/src/auro-input.js
@@ -15,6 +15,8 @@ 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';
+import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
+import buttonVersion from './buttonVersion';
 
 // build the component class
 export class AuroInput extends BaseInput {
@@ -26,6 +28,7 @@ export class AuroInput extends BaseInput {
      */
     const versioning = new AuroDependencyVersioning();
     this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
+    this.buttonTag = versioning.generateTag('auro-button', buttonVersion, AuroButton);
   }
 
   /**
@@ -137,42 +140,44 @@ export class AuroInput extends BaseInput {
           ${this.hasValue ? html`
             ${this.type === 'password' ? html`
               <div class="notification">
-                <button
+                <${this.buttonTag}
+                  variant="flat"
                   aria-hidden="true"
                   tabindex="-1"
                   @click="${this.handleClickShowPassword}"
                   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>
+                  <${this.iconTag}
+                    ?hidden=${!this.showPassword}
+                    customColor
+                    category="interface"
+                    name="hide-password-stroke"
+                    customSize>
+                  </${this.iconTag}>
+                  <${this.iconTag}
+                    ?hidden=${this.showPassword}
+                    customColor
+                    category="interface"
+                    name="view-password-stroke"
+                    customSize>
+                  </${this.iconTag}>
+                </${this.buttonTag}>
               </div>
             ` : undefined}
-            ${!this.disabled ? html`
+            ${!this.disabled && !this.readonly ? html`
               <div class="notification">
-                <button
+                <${this.buttonTag}
+                  variant="flat"
                   class="notificationBtn clearBtn"
                   aria-hidden="true"
                   tabindex="-1"
                   @click="${this.handleClickClear}">
-                  ${this.readonly ? undefined : html`
-                    <${this.iconTag}
-                      category="interface"
-                      name="x-lg"
-                      customSize>
-                    </${this.iconTag}>
-                  `}
-                </button>
+                  <${this.iconTag}
+                    customColor
+                    category="interface"
+                    name="x-lg"
+                    customSize>
+                  </${this.iconTag}>
+                </${this.buttonTag}>
               </div>
             ` : undefined}
           ` : undefined}

diff --git a/src/buttonVersion.js b/src/buttonVersion.js
@@ -0,0 +1 @@
+export default '7.3.0-beta.1'
diff --git a/src/styles/notificationIcons.scss b/src/styles/notificationIcons.scss
@@ -1,6 +1,6 @@
 @import './../../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables.scss';
 
-/* stylelint-disable max-nesting-depth, selector-max-class, selector-max-combinators, selector-max-compound-selectors */
+/* stylelint-disable  selector-max-attribute, max-nesting-depth, selector-max-class, selector-max-combinators, selector-max-compound-selectors */
 
 .typeIcon {
   display: flex;
@@ -32,7 +32,7 @@
 
 .notification {
   &:not(:first-of-type) {
-    margin-left: var(--ds-size-150, $ds-size-150);
+    margin-left: var(--ds-size-100, $ds-size-100);
   }
 }
 
@@ -52,10 +52,23 @@
 }
 
 .notificationBtn {
+  display: block;
   padding: 0;
   border: 0;
   background: unset;
   cursor: pointer;
+  height: var(--ds-size-200, $ds-size-200);
+  width: var(--ds-size-200, $ds-size-200);
+
+  [auro-icon] {
+    display: block;
+    height: var(--ds-size-200, $ds-size-200);
+    width: var(--ds-size-200, $ds-size-200);
+
+    &[hidden] {
+      display: none;
+    }
+  }
 }
 
 :host(:not([bordered])) {

diff --git a/test/auro-input.test.js b/test/auro-input.test.js
@@ -66,7 +66,7 @@ describe('auro-input', () => {
       <auro-input value="other value" label="First name"></auro-input>
     `);
 
-    const clearButton = el.shadowRoot.querySelector('button');
+    const clearButton = el.shadowRoot.querySelector('.clearBtn');
     clearButton.click();
     expect(el.value).to.equal('');
   });