feat(chips): add disabled styles

PiperOrigin-RevId: 518055706
material-components · Mar 20, 2023 · 324e856 · 324e856
1 parent 789d23b
commit 324e856
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 2 deletions.
diff --git a/chips/lib/_shared.scss b/chips/lib/_shared.scss
@@ -44,6 +44,7 @@
     align-items: center;
     appearance: none;
     background: none;
+    border: none;
     border-radius: inherit;
     box-sizing: border-box;
     display: flex;
@@ -54,16 +55,40 @@
     position: relative;
     text-decoration: none;
     width: 100%;
+
+    // Container and outline color, separate node for disabled opacity changes
+    &::before {
+      border-radius: inherit;
+      content: '';
+      inset: 0;
+      pointer-events: none;
+      position: absolute;
+    }
   }
 
-  .flat {
-    border: var(--_flat-outline-width) solid var(--_flat-outline-color);
+  .container:not(.disabled) {
+    cursor: pointer;
+  }
+
+  .container.disabled {
+    pointer-events: none;
+  }
 
+  .flat {
     @include elevation.theme(
       (
         level: var(--_flat-container-elevation),
       )
     );
+
+    &::before {
+      border: var(--_flat-outline-width) solid var(--_flat-outline-color);
+    }
+  }
+
+  .flat.disabled::before {
+    border-color: var(--_flat-disabled-outline-color);
+    opacity: var(--_flat-disabled-outline-opacity);
   }
 
   .elevated {
@@ -76,6 +101,19 @@
     );
   }
 
+  .elevated.disabled {
+    @include elevation.theme(
+      (
+        level: var(--_elevated-disabled-container-elevation),
+      )
+    );
+  }
+
+  .elevated.disabled::before {
+    background: var(--_elevated-disabled-container-color);
+    opacity: var(--_elevated-disabled-container-opacity);
+  }
+
   md-elevation {
     inset: 0;
     position: absolute;
@@ -96,6 +134,14 @@
   .label {
     color: var(--_label-text-color);
     font: var(--_label-text-type);
+    text-overflow: ellipsis;
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  .disabled .label {
+    color: var(--_disabled-label-text-color);
+    opacity: var(--_disabled-label-text-opacity);
   }
 }
 

diff --git a/chips/lib/chip.ts b/chips/lib/chip.ts
@@ -34,6 +34,7 @@ export class Chip extends LitElement {
 
   override render() {
     const classes = {
+      disabled: this.disabled,
       elevated: this.elevated,
       flat: !this.elevated,
     };