fix(Chip): correctly display disabled state

GetTerminus · Dec 16, 2019 · 1c588d0 · 1c588d0
1 parent c1d51ea
commit 1c588d0
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/demo/app/components/chip/chip.component.html b/demo/app/components/chip/chip.component.html
@@ -19,6 +19,11 @@ <h3 tsCardTitle tsVerticalSpacing>Chip</h3>
       Allow selection:
       <input type="checkbox" [(ngModel)]="selectable">
     </label>
+    <br>
+    <label>
+      Disable:
+      <input type="checkbox" [(ngModel)]="disabled">
+    </label>
   </div>
 
 

diff --git a/terminus-ui/chip/src/chip.component.scss b/terminus-ui/chip/src/chip.component.scss
@@ -6,13 +6,13 @@
 
 
 .ts-chip {
-  --chip-fontSize: 14px;
-  --chip-height: #{spacing(large)};
-  --chip-padding: #{spacing(small, 2)} #{spacing(small, 1)};
-  --chip-backgroundColor: #{color(utility, light)};
   --chip-backgroundColor-hover: #{color(utility)};
+  --chip-backgroundColor: #{color(utility, light)};
   --chip-borderRadius: 16px;
   --chip-color: #{color(pure, dark)};
+  --chip-fontSize: 14px;
+  --chip-height: #{spacing(large)};
+  --chip-padding: #{spacing(small, 2)} #{spacing(small, 1)};
   --chip-remove-size: #{spacing(large)};
 
   &:focus,
@@ -23,6 +23,13 @@
         transition: opacity 200ms cubic-bezier(.35, 0, .25, 1);
       }
     }
+
+    .c-chip {
+      &:not(.c-chip--disabled) {
+        --chip-backgroundColor: var(--chip-backgroundColor-hover);
+        transition: opacity 200ms cubic-bezier(.35, 0, .25, 1);
+      }
+    }
   }
 
   &.ts-chip--selected,
@@ -75,6 +82,16 @@
       }
     }
 
+    &.c-chip--disabled {
+      --chip-color: #{color(utility, dark)};
+      padding: var(--chip-padding);
+      pointer-events: none;
+
+      .c-chip__remove {
+        display: none;
+      }
+    }
+
     .c-chip__remove {
       cursor: cursor(pointer);
       display: none;