feat(mdc-chips): Implement checkmark for filter chips

stasson · Mar 20, 2018 · 40e6caa · 40e6caa
1 parent c2daafc
commit 40e6caa
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/components/chips/demo.vue b/components/chips/demo.vue
@@ -43,6 +43,14 @@
       <mdc-chip trailing-icon="cancel">Shoes</mdc-chip>
       <mdc-chip trailing-icon="cancel">Accessories</mdc-chip>
     </mdc-chip-set>
+
+    <h3>Filter Chips with leading icon</h3>
+    <mdc-chip-set filter>
+      <mdc-chip leading-icon="face" trailing-icon="cancel">Tops</mdc-chip>
+      <mdc-chip leading-icon="face" trailing-icon="cancel">Bottoms</mdc-chip>
+      <mdc-chip leading-icon="face" trailing-icon="cancel">Shoes</mdc-chip>
+      <mdc-chip leading-icon="face" trailing-icon="cancel">Accessories</mdc-chip>
+    </mdc-chip-set>
   </section>
 
   <section class="mdc-demo">

diff --git a/components/chips/mdc-chip-set.vue b/components/chips/mdc-chip-set.vue
@@ -13,6 +13,9 @@ export default {
     choice: [Boolean],
     filter: [Boolean],
   },
+  provide() {
+    return { mdcChipSet: this };
+  },
   data() {
     return {
       classes: {

diff --git a/components/chips/mdc-chip.vue b/components/chips/mdc-chip.vue
@@ -3,6 +3,12 @@
   <i ref="leadingIcon" class="mdc-chip__icon mdc-chip__icon--leading" 
     :class="leadingClasses" v-if="haveleadingIcon"
   >{{leadingIcon}}</i>
+  <div class="mdc-chip__checkmark" v-if="isFilter">
+    <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
+      <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
+            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
+    </svg>
+  </div>
   <div class="mdc-chip__text">
     <slot></slot>
   </div>
@@ -26,6 +32,7 @@ export default {
     leadingIconClasses: [Object],
     trailingIconClasses: [Object],
   },
+  inject: ['mdcChipSet'],
   data() {
     return {
       classes: {
@@ -101,6 +108,9 @@ export default {
     this.ripple.init();
   },
   computed: {
+    isFilter() {
+      return this.mdcChipSet && this.mdcChipSet.filter;
+    },
     haveleadingIcon() {
       return !!this.leadingIcon || this.leadingIconClasses;
     },