feat(button): add button accent property

closes #147
stasson · Jan 7, 2018 · fd3e124 · fd3e124
1 parent 8d5757d
commit fd3e124
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 8 deletions.
diff --git a/components/button/README.md b/components/button/README.md
@@ -10,7 +10,7 @@ var vm = new Vue({
     buttonDisabled: false
   },
   methods: {
-    onClick () {...} 
+    onClick () {...}
   }
 })
 ```
@@ -27,6 +27,7 @@ var vm = new Vue({
 | prop | Type | Default | Description |
 |-------|------|---------|-------------|
 |`disabled`|String|| disable the button |
+|`accent`|Boolean|| secondary color theme |
 |`raised`| Boolean|| a contained button that is elevated upon the surface |
 |`unelevated`| Boolean|| a contained button that is flush with the surface |
 |`stroked`| Boolean|| a contained button that is flush with the surface and has a visible border(*)|

diff --git a/components/button/demo.vue b/components/button/demo.vue
@@ -3,11 +3,14 @@
     <div class="mdc-demo--container">
       <div class="mdc-demo-button">
         <mdc-button :dense="dense" :compact="compact" :disabled="disabled" 
-          :raised="raised" :stroked="stroked" :unelevated="unelevated">Button</mdc-button>
+          :raised="raised" :stroked="stroked" :unelevated="unelevated" 
+          :accent="accent">Button</mdc-button>
         <mdc-button :dense="dense" :compact="compact" :disabled="disabled"
-          :raised="raised" :stroked="stroked" :unelevated="unelevated">Button</mdc-button>
+          :raised="raised" :stroked="stroked" :unelevated="unelevated" 
+          :accent="accent">Button</mdc-button>
         <mdc-button :dense="dense" :compact="compact" :disabled="disabled"
-          :raised="raised" :stroked="stroked" :unelevated="unelevated">Button</mdc-button>
+          :raised="raised" :stroked="stroked" :unelevated="unelevated"
+          :accent="accent">Button</mdc-button>
       </div>  
     </div>  
 
@@ -23,6 +26,7 @@
         <mdc-checkbox label="disabled" v-model="disabled"></mdc-checkbox>
         <mdc-checkbox label="compact" v-model="compact" ></mdc-checkbox>
         <mdc-checkbox label="dense"  v-model="dense"></mdc-checkbox>
+        <mdc-checkbox label="accent"  v-model="accent"></mdc-checkbox>
       </div>
     </div>
   </div>
@@ -31,7 +35,13 @@
 <script>
 export default {
   data () {
-    return {type: '', dense: false, compact:false, disabled:false}
+    return {
+      type: '', 
+      dense: false, 
+      compact:false, 
+      disabled:false, 
+      accent:false
+    }
   },
   computed: {
     raised () { return this.type == 'raised'},

diff --git a/components/button/mdc-button.vue b/components/button/mdc-button.vue
@@ -9,7 +9,8 @@ export default {
     unelevated: Boolean,
     stroked: Boolean,
     dense: Boolean,
-    compact: Boolean
+    compact: Boolean, 
+    accent: Boolean
   },
   data () {
     return {
@@ -19,7 +20,8 @@ export default {
         'mdc-button--unelevated': this.unelevated,
         'mdc-button--stroked': this.stroked,
         'mdc-button--dense': this.dense,
-        'mdc-button--compact': this.compact
+        'mdc-button--compact': this.compact,
+        'mdc-button--accent': this.accent
       }
     }
   },
@@ -39,6 +41,9 @@ export default {
     compact () {
       this.$set(this.classes, 'mdc-button--compact', this.compact )
     },
+    accent () {
+      this.$set(this.classes, 'mdc-button--accent', this.accent )
+    },
   }
 }
 </script>
diff --git a/components/button/styles.scss b/components/button/styles.scss
@@ -1,8 +1,27 @@
 @import "@material/button/mdc-button";
 
+.mdc-button--accent {
+
+  &.mdc-button {
+    @include mdc-button-ink-color(secondary);
+    @include mdc-states(secondary);
+  }
+
+  &.mdc-button--raised,
+  &.mdc-button--unelevated {
+    @include mdc-button-container-fill-color(secondary);
+    @include mdc-button-ink-color(text-primary-on-secondary);
+    @include mdc-states(text-primary-on-secondary);
+  }
+
+  &.mdc-button--stroked {
+    @include mdc-button-stroke-color(secondary);
+  }
+
+}
 
 .mdc-button {
   .mdc-icon {
     @extend .mdc-button__icon;
   }
-}
+}