Skip to content

Commit a267f34

Browse files
pgbrosspgbross
pgbross
authored and
pgbross
committed
fix(mdc-button): Remove compact variant as removed from material-components-web@0.33.0
1 parent b17c83a commit a267f34

File tree

3 files changed

+72
-77
lines changed

3 files changed

+72
-77
lines changed

‎components/button/README.md

Lines changed: 29 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -17,56 +17,51 @@ var vm = new Vue({
1717

1818
### events
1919

20-
| event | args | Description |
21-
|-------|------|-------------|
22-
|`@click`||emitted on click |
23-
20+
| event | args | Description |
21+
| -------- | ---- | ---------------- |
22+
| `@click` | | emitted on click |
2423

2524
### props
2625

27-
| prop | Type | Default | Description |
28-
|-------|------|---------|-------------|
29-
|`disabled`|String|| disable the button |
30-
|`accent`|Boolean|| secondary color theme |
31-
|`raised`| Boolean|| a contained button that is elevated upon the surface |
32-
|`unelevated`| Boolean|| a contained button that is flush with the surface |
33-
|`stroked`| Boolean|| a contained button that is flush with the surface and has a visible border(*)|
34-
|`dense`| String|| compresses the button text to make it slightly smaller |
35-
|`compact`| Boolean|| reduces the amount of horizontal padding in the button |
36-
|`event`|String| optional | optional event to emit on click |
37-
|`event-target`|Object| vm.$root | optional event target, defaults to root bus |
38-
|`event-args`|Array| [] | optional event args |
39-
|`href`|String|| link's href, renders anchor (see notes below) |
40-
|`to`|String, Object| undefined | router-link property _(*)_ |
41-
|`replace`|Boolean| false | router-link property _(*)_ |
42-
|`append`|Boolean| false | router-link property _(*)_ |
43-
|`exact`|Boolean| false | router-link property _(*)_ |
44-
|`active-class`|String| router-link-active | router-link property _(*)_ |
45-
|`exact-active-class`|String| router-link-exact-active | router-link property _(*)_ |
46-
47-
> _(*)_ Requires [vue-router](https://router.vuejs.org)
26+
| prop | Type | Default | Description |
27+
| -------------------- | -------------- | ------------------------ | ------------------------------------------------------------------------------ |
28+
| `disabled` | String | | disable the button |
29+
| `accent` | Boolean | | secondary color theme |
30+
| `raised` | Boolean | | a contained button that is elevated upon the surface |
31+
| `unelevated` | Boolean | | a contained button that is flush with the surface |
32+
| `stroked` | Boolean | | a contained button that is flush with the surface and has a visible border(\*) |
33+
| `dense` | String | | compresses the button text to make it slightly smaller |
34+
| `event` | String | optional | optional event to emit on click |
35+
| `event-target` | Object | vm.$root | optional event target, defaults to root bus |
36+
| `event-args` | Array | [] | optional event args |
37+
| `href` | String | | link's href, renders anchor (see notes below) |
38+
| `to` | String, Object | undefined | router-link property _(\*)_ |
39+
| `replace` | Boolean | false | router-link property _(\*)_ |
40+
| `append` | Boolean | false | router-link property _(\*)_ |
41+
| `exact` | Boolean | false | router-link property _(\*)_ |
42+
| `active-class` | String | router-link-active | router-link property _(\*)_ |
43+
| `exact-active-class` | String | router-link-exact-active | router-link property _(\*)_ |
44+
45+
> _(\*)_ Requires [vue-router](https://router.vuejs.org)
4846
4947
### text buttons
5048

5149
```html
5250
<mdc-button>Baseline</mdc-button>
53-
<mdc-button compact>Compact</mdc-button>
5451
<mdc-button dense>Dense</mdc-button>
5552
```
5653

5754
### Raised Button
5855

5956
```html
6057
<mdc-button raised>Baseline</mdc-button>
61-
<mdc-button raised compact>Compact</mdc-button>
6258
<mdc-button raised dense>Dense</mdc-button>
6359
```
6460

6561
### Uneleveted buttons
6662

6763
```html
6864
<mdc-button unelevated>Baseline</mdc-button>
69-
<mdc-button unelevated compact>Compact</mdc-button>
7065
<mdc-button unelevated dense>Dense</mdc-button>
7166
```
7267

@@ -97,8 +92,8 @@ If the `to` property is defined, the item behaves as a
9792

9893
#### Accessibility Warning:
9994

100-
> Buttons are expected to be triggered using the Space or Enter key,
101-
> while links are expected to be triggered using the Enter key.
95+
> Buttons are expected to be triggered using the Space or Enter key,
96+
> while links are expected to be triggered using the Enter key.
10297
> Additionally, button and links have different behaviors on right click.
10398
> see this [MDN note](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
10499
@@ -116,9 +111,10 @@ You might want to keep button behavior and do the navigation programatically:
116111
```
117112

118113
```javascript
119-
// register event from some component context
120-
this.$root.$on('my-event', () => doSomething())
114+
// register event from some component context
115+
this.$root.$on('my-event', () => doSomething());
121116
```
122117

123118
### Reference
124-
- <https://material.io/guidelines/components/buttons.html>
119+
120+
* <https://material.io/guidelines/components/buttons.html>

‎components/button/demo.vue

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<div class="mdc-demo">
33
<div class="mdc-demo--container" style="min-height: 40px; padding-bottom: 0">
44
<div class="mdc-demo-button">
5-
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
5+
<mdc-button :dense="dense" :disabled="disabled"
66
:raised="raised" :stroked="stroked" :unelevated="unelevated"
77
:accent="accent">Button</mdc-button>
8-
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
8+
<mdc-button :dense="dense" :disabled="disabled"
99
:raised="raised" :stroked="stroked" :unelevated="unelevated"
1010
:accent="accent">Button</mdc-button>
11-
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
11+
<mdc-button :dense="dense" :disabled="disabled"
1212
:raised="raised" :stroked="stroked" :unelevated="unelevated"
1313
:accent="accent">Button</mdc-button>
1414
</div>
@@ -24,7 +24,6 @@
2424

2525
<div class="button-style-select">
2626
<mdc-checkbox label="disabled" v-model="disabled"></mdc-checkbox>
27-
<mdc-checkbox label="compact" v-model="compact" ></mdc-checkbox>
2827
<mdc-checkbox label="dense" v-model="dense"></mdc-checkbox>
2928
<mdc-checkbox label="accent" v-model="accent"></mdc-checkbox>
3029
</div>
@@ -34,35 +33,40 @@
3433

3534
<script>
3635
export default {
37-
data () {
36+
data() {
3837
return {
39-
type: '',
40-
dense: false,
41-
compact:false,
42-
disabled:false,
43-
accent:false
44-
}
38+
type: '',
39+
dense: false,
40+
disabled: false,
41+
accent: false,
42+
};
4543
},
4644
computed: {
47-
raised () { return this.type == 'raised'},
48-
unelevated () { return this.type == 'unelevated'},
49-
stroked () { return this.type == 'stroked'},
50-
}
51-
}
45+
raised() {
46+
return this.type == 'raised';
47+
},
48+
unelevated() {
49+
return this.type == 'unelevated';
50+
},
51+
stroked() {
52+
return this.type == 'stroked';
53+
},
54+
},
55+
};
5256
</script>
5357

5458

5559
<style>
5660
.mdc-demo-button {
5761
margin: 0 auto;
58-
text-align:center;
62+
text-align: center;
5963
}
6064
61-
.button-type-select, .button-style-select {
65+
.button-type-select,
66+
.button-style-select {
6267
margin: 0 32px;
6368
display: flex;
64-
flex-flow: column nowrap;
69+
flex-flow: column nowrap;
6570
justify-content: flex-start;
6671
}
67-
68-
</style>
72+
</style>

‎components/button/mdc-button.vue

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import mdcButtonBase from './mdc-button-base.vue'
2+
import mdcButtonBase from './mdc-button-base.vue';
33
44
export default {
55
name: 'mdc-button',
@@ -9,41 +9,36 @@ export default {
99
unelevated: Boolean,
1010
stroked: Boolean,
1111
dense: Boolean,
12-
compact: Boolean,
13-
accent: Boolean
12+
accent: Boolean,
1413
},
15-
data () {
14+
data() {
1615
return {
1716
classes: {
1817
'mdc-button': true,
1918
'mdc-button--raised': this.raised,
2019
'mdc-button--unelevated': this.unelevated,
2120
'mdc-button--stroked': this.stroked,
2221
'mdc-button--dense': this.dense,
23-
'mdc-button--compact': this.compact,
24-
'mdc-button--accent': this.accent
25-
}
26-
}
22+
'mdc-button--accent': this.accent,
23+
},
24+
};
2725
},
2826
watch: {
29-
raised () {
30-
this.$set(this.classes, 'mdc-button--raised', this.raised )
27+
raised() {
28+
this.$set(this.classes, 'mdc-button--raised', this.raised);
3129
},
32-
unelevated () {
33-
this.$set(this.classes, 'mdc-button--unelevated', this.unelevated )
30+
unelevated() {
31+
this.$set(this.classes, 'mdc-button--unelevated', this.unelevated);
3432
},
35-
stroked () {
36-
this.$set(this.classes, 'mdc-button--stroked', this.stroked )
33+
stroked() {
34+
this.$set(this.classes, 'mdc-button--stroked', this.stroked);
3735
},
38-
dense () {
39-
this.$set(this.classes, 'mdc-button--dense', this.dense )
36+
dense() {
37+
this.$set(this.classes, 'mdc-button--dense', this.dense);
4038
},
41-
compact () {
42-
this.$set(this.classes, 'mdc-button--compact', this.compact )
39+
accent() {
40+
this.$set(this.classes, 'mdc-button--accent', this.accent);
4341
},
44-
accent () {
45-
this.$set(this.classes, 'mdc-button--accent', this.accent )
46-
},
47-
}
48-
}
42+
},
43+
};
4944
</script>

0 commit comments

Comments
 (0)