Skip to content

Commit fd3e124

Browse files
committed
feat(button): add button accent property
closes #147
1 parent 8d5757d commit fd3e124

File tree

4 files changed

+43
-8
lines changed

4 files changed

+43
-8
lines changed

components/button/README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ var vm = new Vue({
1010
buttonDisabled: false
1111
},
1212
methods: {
13-
onClick () {...}
13+
onClick () {...}
1414
}
1515
})
1616
```
@@ -27,6 +27,7 @@ var vm = new Vue({
2727
| prop | Type | Default | Description |
2828
|-------|------|---------|-------------|
2929
|`disabled`|String|| disable the button |
30+
|`accent`|Boolean|| secondary color theme |
3031
|`raised`| Boolean|| a contained button that is elevated upon the surface |
3132
|`unelevated`| Boolean|| a contained button that is flush with the surface |
3233
|`stroked`| Boolean|| a contained button that is flush with the surface and has a visible border(*)|

components/button/demo.vue

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@
33
<div class="mdc-demo--container">
44
<div class="mdc-demo-button">
55
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
6-
:raised="raised" :stroked="stroked" :unelevated="unelevated">Button</mdc-button>
6+
:raised="raised" :stroked="stroked" :unelevated="unelevated"
7+
:accent="accent">Button</mdc-button>
78
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
8-
:raised="raised" :stroked="stroked" :unelevated="unelevated">Button</mdc-button>
9+
:raised="raised" :stroked="stroked" :unelevated="unelevated"
10+
:accent="accent">Button</mdc-button>
911
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
10-
:raised="raised" :stroked="stroked" :unelevated="unelevated">Button</mdc-button>
12+
:raised="raised" :stroked="stroked" :unelevated="unelevated"
13+
:accent="accent">Button</mdc-button>
1114
</div>
1215
</div>
1316

@@ -23,6 +26,7 @@
2326
<mdc-checkbox label="disabled" v-model="disabled"></mdc-checkbox>
2427
<mdc-checkbox label="compact" v-model="compact" ></mdc-checkbox>
2528
<mdc-checkbox label="dense" v-model="dense"></mdc-checkbox>
29+
<mdc-checkbox label="accent" v-model="accent"></mdc-checkbox>
2630
</div>
2731
</div>
2832
</div>
@@ -31,7 +35,13 @@
3135
<script>
3236
export default {
3337
data () {
34-
return {type: '', dense: false, compact:false, disabled:false}
38+
return {
39+
type: '',
40+
dense: false,
41+
compact:false,
42+
disabled:false,
43+
accent:false
44+
}
3545
},
3646
computed: {
3747
raised () { return this.type == 'raised'},

components/button/mdc-button.vue

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@ export default {
99
unelevated: Boolean,
1010
stroked: Boolean,
1111
dense: Boolean,
12-
compact: Boolean
12+
compact: Boolean,
13+
accent: Boolean
1314
},
1415
data () {
1516
return {
@@ -19,7 +20,8 @@ export default {
1920
'mdc-button--unelevated': this.unelevated,
2021
'mdc-button--stroked': this.stroked,
2122
'mdc-button--dense': this.dense,
22-
'mdc-button--compact': this.compact
23+
'mdc-button--compact': this.compact,
24+
'mdc-button--accent': this.accent
2325
}
2426
}
2527
},
@@ -39,6 +41,9 @@ export default {
3941
compact () {
4042
this.$set(this.classes, 'mdc-button--compact', this.compact )
4143
},
44+
accent () {
45+
this.$set(this.classes, 'mdc-button--accent', this.accent )
46+
},
4247
}
4348
}
4449
</script>

components/button/styles.scss

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,27 @@
11
@import "@material/button/mdc-button";
22

3+
.mdc-button--accent {
4+
5+
&.mdc-button {
6+
@include mdc-button-ink-color(secondary);
7+
@include mdc-states(secondary);
8+
}
9+
10+
&.mdc-button--raised,
11+
&.mdc-button--unelevated {
12+
@include mdc-button-container-fill-color(secondary);
13+
@include mdc-button-ink-color(text-primary-on-secondary);
14+
@include mdc-states(text-primary-on-secondary);
15+
}
16+
17+
&.mdc-button--stroked {
18+
@include mdc-button-stroke-color(secondary);
19+
}
20+
21+
}
322

423
.mdc-button {
524
.mdc-icon {
625
@extend .mdc-button__icon;
726
}
8-
}
27+
}

0 commit comments

Comments
 (0)