fix(chips): Only render checkmark on filter chips

matsp · May 16, 2018 · 37f675d · 37f675d
1 parent 23734b6
commit 37f675d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/components/chips/Chip.vue b/components/chips/Chip.vue
@@ -8,7 +8,9 @@
     <slot
       name="leadingIcon"
       v-if="$slots['leadingIcon']"/>
-    <div class="mdc-chip__checkmark" >
+    <div
+      v-if="mdcChipSet && mdcChipSet.filter"
+      class="mdc-chip__checkmark">
       <svg
         class="mdc-chip__checkmark-svg"
         viewBox="-2 -3 30 30">
@@ -45,6 +47,7 @@ export default {
       default: false
     }
   },
+  inject: ['mdcChipSet'],
   data () {
     return {
       slotObserver: undefined
@@ -53,8 +56,7 @@ export default {
   computed: {
     classes () {
       return {
-        'mdc-chip--selected': this.selected,
-        'mdc-chip__icon--leading-hidden': this.selected
+        'mdc-chip--selected': this.selected
       }
     }
   },
@@ -74,7 +76,12 @@ export default {
       if (this.$slots.leadingIcon) {
         this.$slots.leadingIcon.map((n) => {
           n.elm.classList.add('mdc-chip__icon')
-          n.elm.classList.add('mdc-chip__icon--leading')
+          if (this.selected) {
+            n.elm.classList.add('mdc-chip__icon--leading-hidden')
+          } else {
+            n.elm.classList.remove('mdc-chip__icon--leading-hidden')
+            n.elm.classList.add('mdc-chip__icon--leading')
+          }
         })
       }
       if (this.$slots.trailingIcon) {

diff --git a/components/chips/README.md b/components/chips/README.md
@@ -30,17 +30,23 @@ data() {
 |------|------|---------|-------------|
 | choice | Boolean | false | single selection chips in set |
 | filter | Boolean | false | multiple selection chips in set |
-| input | Boolean | false | indicates that the chips in the set are input chips |
+| input | Boolean | false | indicates that the chips in the set are input chips (for converting text in a chip) |
 
 ## Chip
 
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| selected | Boolean | false | state of chip (could be v-modeled) |
+
 ### Slots
 
 | Slot | Description |
 |------|-------------|
 | default | chip content |
 | leadingIcon | leading icon |
-| trailingIcon | trailingIcon |
+| trailingIcon | trailing icon |
 
 ### Reference