feat(disabled): support disabled state

AlaskaAirlines · Nov 17, 2021 · 8fce737 · 8fce737
1 parent afe81d8
commit 8fce737
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/demo/demo.md b/demo/demo.md
@@ -604,9 +604,9 @@ The dropdown container will grow in height to the size of the content. A combina
 
 <div class="exampleWrapper">
   <auro-dropdown id="hideExample">
-    <span>
+    <p>
       Lorem ipsum solar
-    </span>
+    </p>
     <auro-button onclick="document.querySelector('#hideExample').hide()">
       Dismiss Dropdown
     </auro-button>
@@ -624,9 +624,9 @@ The dropdown container will grow in height to the size of the content. A combina
 
   ```html
   <auro-dropdown id="hideExample">
-    <span>
+    <p>
       Lorem ipsum solar
-    </span>
+    </p>
     <auro-button onclick="document.querySelector('#hideExample').hide()">
       Dismiss Dropdown
     </auro-button>

diff --git a/src/auro-dropdown.js b/src/auro-dropdown.js
@@ -205,7 +205,7 @@ class AuroDropdown extends LitElement {
           </div>
           ${this.chevron ? html`
             <div id="showStateIcon">
-              <auro-icon category="interface" name="chevron-up"></auro-icon>
+              <auro-icon category="interface" name="chevron-up" customColor style="color: inherit;"></auro-icon>
             </div>
           ` : undefined}
         </div>

diff --git a/src/style.scss b/src/style.scss
@@ -14,15 +14,27 @@
 }
 
 :host([bordered]) {
+  #trigger {
+    border-color: var(--auro-color-border-primary-on-dark);
+
+    &:hover {
+      background-color: var(--auro-color-background-lighter);
+    }
+  }
+}
+
+:host([disabled]) {
+  pointer-events: none;
+
   #trigger,
-  .popover {
-    border-color: gray;
+  #showStateIcon {
+    color: var(--auro-color-text-disabled-on-light);
   }
+}
 
+:host([bordered][disabled]) {
   #trigger {
-    &:hover {
-      border-color: blue;
-    }
+    border-color: var(--auro-color-border-disabled-on-light);
   }
 }
 
@@ -60,6 +72,7 @@
   display: flex;
   align-items: center;
   position: relative;
+  color: var(--auro-color-text-primary-on-light);
 
   &:hover {
     cursor: pointer;
@@ -81,6 +94,7 @@
   position: absolute;
   top: 0;
   right: 0;
+  color: var(--auro-color-icon-primary-on-light);
 
   auro-icon {
     transition: transform 200ms ease-in;