fix: address is-active state for complete buttons

AlaskaAirlines · Sep 20, 2019 · 92e36f6 · 92e36f6
1 parent 49971a8
commit 92e36f6
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git a/demo/index.html b/demo/index.html
@@ -98,6 +98,12 @@ <h1>ods-button</h1>
         </template>
       </demo-snippet>
 
+      <demo-snippet>
+        <template>
+          <ods-button arialabel="submit" title="Process flow type complete" isactive flowtype="complete">Process flow type complete (active state)</ods-button>
+        </template>
+      </demo-snippet>
+
       <h2>Element &#60;ods-button&#62;</h2>
 
       <pre><code>class OdsButton extends LitElement</code></pre>

diff --git a/src/dancing-dots.json b/src/dancing-dots.json
@@ -19,6 +19,9 @@
       "background": {
         "color": {"value": "var(--color-base-white)"}
       },
+      "complete": {
+        "backgroundColor": { "value": "var(--color-base-orca)" }
+      },
       "secondary": {
         "background": {
           "color": {"value": "var(--color-brand-blue-atlas-base)"}

diff --git a/src/ods-button.js b/src/ods-button.js
@@ -91,7 +91,15 @@ class OdsButton extends LitElement {
         aria-label="${ifDefined(this.arialabel ? this.arialabel : undefined)}"
         aria-labelledby="${ifDefined(this.arialabelledby ? this.arialabelledby : undefined)}"
         ?autofocus="${this.autofocus}"
-        class="button ${this.getButtontype(this.buttontype)} ${this.getButtonState(this.isactive)} ${this.getButtonContext(this.outercontext)} ${this.getButtonApperance(this.condensed)} ${this.getButtonFlowtype(this.flowtype)}"
+
+        class="button
+          ${this.getButtontype(this.buttontype)}
+          ${this.getButtonFlowtype(this.flowtype)}
+          ${this.getButtonState(this.isactive)}
+          ${this.getButtonContext(this.outercontext)}
+          ${this.getButtonApperance(this.condensed)}
+          "
+
         ?disabled="${this.isDisabled(this.disabled, this.isactive)}"
         form="${ifDefined(this.form ? this.form : undefined)}"
         formaction="${ifDefined(this.formaction ? this.formaction : undefined)}"

diff --git a/src/style.scss b/src/style.scss
@@ -134,6 +134,25 @@ span {
     color: var(--ods-button-complete-color);
     border-color: var(--ods-button-complete-background-color);
 
+    .block {
+      background-color: var(--dancingdots-block-complete-background-color);
+    }
+
+    &.is-active {
+      &:disabled {
+        background-color: var(--ods-button-complete-background-color);
+        color: var(--ods-button-complete-color);
+        border-color: var(--ods-button-complete-background-color);
+
+        :host(:not(.is-touching)) & {
+          &:hover {
+            background-color: var(--ods-button-complete-background-color);
+            color: var(--ods-button-complete-color);
+          }
+        }
+      }
+    }
+
     :host(:not(.is-touching)) & {
       &:hover {
         background-color: var(--ods-button-complete-hover-background-color);