feat: add new loading state

This change adds a new loading state which utilizes auro-loader. Disabled state has changed how it applies opacity - rather than a general button opacity the border, bg and font colors are converted to an rgba value with the same opacity in it. This allows for the loader to not have an opacity even when the button is disabled.
AlaskaAirlines · Mar 2, 2021 · ebe9afe · ebe9afe
1 parent 6732e84
commit ebe9afe
Show file tree

Hide file tree

Showing 6 changed files with 178 additions and 14 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -152,6 +152,34 @@ Be sure to use the `customColor` attribute on the auro-icon component to allow c
 
 </auro-accordion>
 
+## Auro Button - Loading State
+
+<div class="exampleWrapper auro_containedButtons">
+  <auro-button loading>Primary</auro-button>
+  <auro-button secondary loading>Secondary</auro-button>
+  <auro-button tertiary loading>Tertiary</auro-button>
+</div>
+
+<div class="exampleWrapper--ondark auro_containedButtons">
+  <auro-button ondark loading>Primary</auro-button>
+  <auro-button ondark secondary loading>Secondary</auro-button>
+  <auro-button ondark tertiary loading>Tertiary</auro-button>
+</div>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+  ```html
+  <auro-button loading>Primary</auro-button>
+  <auro-button secondary loading>Secondary</auro-button>
+  <auro-button tertiary loading>Tertiary</auro-button>
+  <auro-button ondark loading>Primary</auro-button>
+  <auro-button ondark secondary loading>Secondary</auro-button>
+  <auro-button ondark tertiary loading>Tertiary</auro-button>
+  ```
+
+</auro-accordion>
+
 ## Auro Button - onDark
 
 <div class="exampleWrapper--ondark auro_containedButtons">
@@ -201,11 +229,12 @@ Be sure to use the `customColor` attribute on the auro-icon component to allow c
 
 </auro-accordion>
 
-## Auro Button - pass function to button
+## Auro Button - pass a function to button
 
 <div class="exampleWrapper auro_containedButtons">
   <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
   <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
+  <auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
 </div>
 
 <auro-accordion lowProfile justifyRight>
@@ -214,7 +243,42 @@ Be sure to use the `customColor` attribute on the auro-icon component to allow c
   ```html
   <auro-button onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
   <auro-button disabled onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
+  <auro-button loading onclick="alert('YOU CLICKED ME!');">Primary</auro-button>
 
   ```
 
 </auro-accordion>
+
+## Do's and don'ts
+
+Don't combine `disabled` and `loading` attributes on any single instance of `auro-button`. An `auro-button` with `loading` *is* affectively a disabled instance. There is no need for both.
+
+<auro-alerts error noIcon>
+
+  <div class="exampleWrapper">
+    <auro-button loading disabled>Primary</auro-button>
+  </div>
+
+</auro-alerts>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+```html
+<auro-button loading disabled>Primary</auro-button>
+```
+</auro-accordion>
+
+<auro-alerts success noIcon>
+  <div class="exampleWrapper">
+    <auro-button loading>Primary</auro-button>
+  </div>
+</auro-alerts>
+
+<auro-accordion lowProfile justifyRight>
+  <span slot="trigger">See code</span>
+
+```html
+<auro-button loading>Primary</auro-button>
+```
+</auro-accordion>
diff --git a/demo/index.html b/demo/index.html
@@ -28,6 +28,7 @@
     <script type="module" src="../src/auro-button.js"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
     <script src="https://unpkg.com/@alaskaairux/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
+    <script src="https://unpkg.com/@alaskaairux/auro-alerts@latest/dist/auro-alerts__bundled.js" type="module"></script>
     <script type="text/javascript">
       console.log('hello');
     </script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,13 +18,15 @@
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
+    "@alaskaairux/auro-loader": "^1.0.1",
     "chalk": "^4.1.0",
     "lit-element": "^2.4.0"
   },
   "peerDependencies": {
     "@alaskaairux/design-tokens": "^3.0.0",
     "@alaskaairux/webcorestylesheets": "^3.0.0",
     "@alaskaairux/icons": "^4.0.3",
+    "@alaskaairux/auro-button": "^6.0.0",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "focus-visible": "^5.2.0"
   },

diff --git a/src/auro-button.js b/src/auro-button.js
@@ -9,11 +9,13 @@ import { classMap } from 'lit-html/directives/class-map';
 import 'focus-visible/dist/focus-visible.min.js';
 import styleCss from "./style-css.js";
 import styleCssFixed from './style-fixed-css.js';
+import "@alaskaairux/auro-loader";
 
 /**
  * @attr {Boolean} fixed - uses px values instead of rem
  * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless the user overrides it
  * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions. Default value is `false`.
+ * @attr {Boolean} loader - If set to true button text will be replaced with auro-loader, become disabled and not allow for interactions. Default value is `false`.
  * @attr {Boolean} ondark - Set value for on-dark version of auro-button
  * @attr {Boolean} secondary - Set value for secondary version of auro-button
  * @attr {Boolean} tertiary - Set value for tertiary version of auro-button
@@ -46,6 +48,10 @@ class AuroButton extends LitElement {
         type: Boolean,
         reflect: true
       },
+      loading:          {
+        type: Boolean,
+        reflect: true
+      },
       ondark:           {
         type: Boolean,
         reflect: true
@@ -115,7 +121,8 @@ class AuroButton extends LitElement {
       'auro-buttonOndark--secondary': this.secondary && this.ondark,
       'auro-button--tertiary': this.tertiary,
       'auro-buttonOndark--tertiary': this.tertiary && this.ondark,
-      'icon': this.svgIconLeft || this.svgIconRight
+      'icon': this.svgIconLeft || this.svgIconRight,
+      'loading': this.loading
     };
 
     return html`
@@ -124,7 +131,7 @@ class AuroButton extends LitElement {
         aria-labelledby="${ifDefined(this.arialabelledby ? this.arialabelledby : undefined)}"
         ?autofocus="${this.autofocus}"
         class="${classMap(classes)}"
-        ?disabled="${this.disabled}"
+        ?disabled="${this.disabled || this.loading}"
         id="${ifDefined(this.id ? this.id : undefined)}"
         title="${ifDefined(this.title ? this.title : undefined)}"
         name="${ifDefined(this.name ? this.name : undefined)}"
@@ -133,6 +140,7 @@ class AuroButton extends LitElement {
         @click="${() => {}}"
       >
         ${ifDefined(this.svgIconLeft ? this.getIcon(this.svgIconLeft) : undefined)}
+        ${ifDefined(this.loading ? html`<auro-loader pulse></auro-loader>` : undefined)}
         <slot></slot>
         ${ifDefined(this.svgIconRight ? this.getIcon(this.svgIconRight) : undefined)}
       </button>

diff --git a/src/style.scss b/src/style.scss
@@ -90,6 +90,9 @@ slot {
 // Button styles
 .auro-button {
   @include auro_transition(all, 0.15s, ease);
+  $disabledOPacity: .4;
+
+  position: relative;
 
   padding: var(--auro-size-sm) var(--auro-size-lg);
 
@@ -137,6 +140,24 @@ slot {
     transform: scale(0.95);
   }
 
+  &.loading {
+    cursor: not-allowed;
+
+    *:not(auro-loader) {
+      visibility: hidden;
+    }
+
+    auro-loader {
+      color: var(--auro-color-background-darkest);
+    }
+
+    &.auro-buttonOndark {
+      auro-loader {
+        color: var(--auro-color-text-primary-on-dark);
+      }
+    }
+  }
+
   @include auro_breakpoint--sm {
     min-width: 8.75rem;
     width: auto;
@@ -145,12 +166,14 @@ slot {
   &:disabled {
     cursor: not-allowed;
     transform: unset;
-    opacity: .4;
+
+    background-color: rgba($auro-color-ui-default-on-light, $disabledOPacity);
+    border: 1px solid rgba($auro-color-ui-default-on-light, 0);
 
     @media (hover: hover) {
       &:hover {
-        background-color: var(--auro-color-ui-default-on-light);
-        border-color: var(--auro-color-ui-default-on-light);
+        background-color: rgba($auro-color-ui-default-on-light, $disabledOPacity);
+        border: 1px solid rgba($auro-color-ui-default-on-light, 0);
       }
     }
   }
@@ -175,9 +198,19 @@ slot {
     }
 
     &:disabled {
-      &:hover {
-        background-color: var(--auro-color-background-lightest);
-        border-color: var(--auro-color-ui-default-on-light);
+      cursor: not-allowed;
+      transform: unset;
+
+      color: rgba($auro-color-text-link-on-light, $disabledOPacity);
+      background-color: rgba($auro-color-background-lightest, $disabledOPacity);
+      border: 1px solid rgba($auro-color-ui-default-on-light, $disabledOPacity);
+
+      @media (hover: hover) {
+        &:hover {
+          color: rgba($auro-color-text-link-on-light, $disabledOPacity);
+          background-color: rgba($auro-color-background-lightest, $disabledOPacity);
+          border: 1px solid rgba($auro-color-ui-default-on-light, $disabledOPacity);
+        }
       }
     }
   }
@@ -202,10 +235,18 @@ slot {
     }
 
     &:disabled {
+      cursor: not-allowed;
+      transform: unset;
+
+      color: rgba($auro-color-text-link-on-light, $disabledOPacity);
+      background-color: transparent;
+      border: transparent;
+
       @media (hover: hover) {
         &:hover {
+          color: rgba($auro-color-text-link-on-light, $disabledOPacity);
           background-color: transparent;
-          border-color: transparent;
+          border: 1px solid transparent;
         }
       }
     }
@@ -231,10 +272,18 @@ slot {
     }
 
     &:disabled {
+      cursor: not-allowed;
+      transform: unset;
+
+      color: rgba($auro-color-text-primary-on-light, $disabledOPacity);
+      background-color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
+      border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity);
+
       @media (hover: hover) {
         &:hover {
-          background-color: var(--auro-color-ui-default-on-dark);
-          border-color: var(--auro-color-ui-default-on-dark);
+          color: rgba($auro-color-text-primary-on-light, $disabledOPacity);
+          background-color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
+          border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity);
         }
       }
     }
@@ -265,6 +314,23 @@ slot {
           }
         }
       }
+
+      &:disabled {
+        cursor: not-allowed;
+        transform: unset;
+
+        color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
+        background-color: transparent;
+        border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity);
+
+        @media (hover: hover) {
+          &:hover {
+            color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
+            background-color: transparent;
+            border: 1px solid rgba($auro-color-ui-default-on-dark, $disabledOPacity);
+          }
+        }
+      }
     }
 
     // auro-button--tertiary
@@ -289,10 +355,16 @@ slot {
       }
 
       &:disabled {
+        cursor: not-allowed;
+        transform: unset;
+        background-color: transparent;
+        border: transparent;
+
         @media (hover: hover) {
           &:hover {
+            color: rgba($auro-color-ui-default-on-dark, $disabledOPacity);
             background-color: transparent;
-            border-color: transparent;
+            border: transparent;
           }
         }
       }
@@ -309,3 +381,11 @@ slot {
     vertical-align: middle;
   }
 }
+
+auro-loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}