Skip to content

Commit

Permalink
fix(mdc-button): Remove compact variant as removed from material-comp…
Browse files Browse the repository at this point in the history 
…onents-web@0.33.0
  • Loading branch information
@pgbross
pgbross authored and pgbross committed Mar 20, 2018
1 parent b17c83a commit a267f34
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 77 deletions.
62 changes: 29 additions & 33 deletions components/button/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,56 +17,51 @@ var vm = new Vue({

### events

| event | args | Description |
|-------|------|-------------|
|`@click`||emitted on click |

| event | args | Description |
| -------- | ---- | ---------------- |
| `@click` | | emitted on click |

### props

| 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(*)|
|`dense`| String|| compresses the button text to make it slightly smaller |
|`compact`| Boolean|| reduces the amount of horizontal padding in the button |
|`event`|String| optional | optional event to emit on click |
|`event-target`|Object| vm.$root | optional event target, defaults to root bus |
|`event-args`|Array| [] | optional event args |
|`href`|String|| link's href, renders anchor (see notes below) |
|`to`|String, Object| undefined | router-link property _(*)_ |
|`replace`|Boolean| false | router-link property _(*)_ |
|`append`|Boolean| false | router-link property _(*)_ |
|`exact`|Boolean| false | router-link property _(*)_ |
|`active-class`|String| router-link-active | router-link property _(*)_ |
|`exact-active-class`|String| router-link-exact-active | router-link property _(*)_ |

> _(*)_ Requires [vue-router](https://router.vuejs.org)
| 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(\*) |
| `dense` | String | | compresses the button text to make it slightly smaller |
| `event` | String | optional | optional event to emit on click |
| `event-target` | Object | vm.$root | optional event target, defaults to root bus |
| `event-args` | Array | [] | optional event args |
| `href` | String | | link's href, renders anchor (see notes below) |
| `to` | String, Object | undefined | router-link property _(\*)_ |
| `replace` | Boolean | false | router-link property _(\*)_ |
| `append` | Boolean | false | router-link property _(\*)_ |
| `exact` | Boolean | false | router-link property _(\*)_ |
| `active-class` | String | router-link-active | router-link property _(\*)_ |
| `exact-active-class` | String | router-link-exact-active | router-link property _(\*)_ |

> _(\*)_ Requires [vue-router](https://router.vuejs.org)
### text buttons

```html
<mdc-button>Baseline</mdc-button>
<mdc-button compact>Compact</mdc-button>
<mdc-button dense>Dense</mdc-button>
```

### Raised Button

```html
<mdc-button raised>Baseline</mdc-button>
<mdc-button raised compact>Compact</mdc-button>
<mdc-button raised dense>Dense</mdc-button>
```

### Uneleveted buttons

```html
<mdc-button unelevated>Baseline</mdc-button>
<mdc-button unelevated compact>Compact</mdc-button>
<mdc-button unelevated dense>Dense</mdc-button>
```

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

#### Accessibility Warning:

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

```javascript
// register event from some component context
this.$root.$on('my-event', () => doSomething())
// register event from some component context
this.$root.$on('my-event', () => doSomething());
```

### Reference
- <https://material.io/guidelines/components/buttons.html>

* <https://material.io/guidelines/components/buttons.html>
46 changes: 25 additions & 21 deletions components/button/demo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@
<div class="mdc-demo">
<div class="mdc-demo--container" style="min-height: 40px; padding-bottom: 0">
<div class="mdc-demo-button">
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
<mdc-button :dense="dense" :disabled="disabled"
:raised="raised" :stroked="stroked" :unelevated="unelevated"
:accent="accent">Button</mdc-button>
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
<mdc-button :dense="dense" :disabled="disabled"
:raised="raised" :stroked="stroked" :unelevated="unelevated"
:accent="accent">Button</mdc-button>
<mdc-button :dense="dense" :compact="compact" :disabled="disabled"
<mdc-button :dense="dense" :disabled="disabled"
:raised="raised" :stroked="stroked" :unelevated="unelevated"
:accent="accent">Button</mdc-button>
</div>
Expand All @@ -24,7 +24,6 @@

<div class="button-style-select">
<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>
Expand All @@ -34,35 +33,40 @@

<script>
export default {
data () {
data() {
return {
type: '',
dense: false,
compact:false,
disabled:false,
accent:false
}
type: '',
dense: false,
disabled: false,
accent: false,
};
},
computed: {
raised () { return this.type == 'raised'},
unelevated () { return this.type == 'unelevated'},
stroked () { return this.type == 'stroked'},
}
}
raised() {
return this.type == 'raised';
},
unelevated() {
return this.type == 'unelevated';
},
stroked() {
return this.type == 'stroked';
},
},
};
</script>


<style>
.mdc-demo-button {
margin: 0 auto;
text-align:center;
text-align: center;
}
.button-type-select, .button-style-select {
.button-type-select,
.button-style-select {
margin: 0 32px;
display: flex;
flex-flow: column nowrap;
flex-flow: column nowrap;
justify-content: flex-start;
}
</style>
</style>
41 changes: 18 additions & 23 deletions components/button/mdc-button.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
import mdcButtonBase from './mdc-button-base.vue'
import mdcButtonBase from './mdc-button-base.vue';
export default {
name: 'mdc-button',
Expand All @@ -9,41 +9,36 @@ export default {
unelevated: Boolean,
stroked: Boolean,
dense: Boolean,
compact: Boolean,
accent: Boolean
accent: Boolean,
},
data () {
data() {
return {
classes: {
'mdc-button': true,
'mdc-button--raised': this.raised,
'mdc-button--unelevated': this.unelevated,
'mdc-button--stroked': this.stroked,
'mdc-button--dense': this.dense,
'mdc-button--compact': this.compact,
'mdc-button--accent': this.accent
}
}
'mdc-button--accent': this.accent,
},
};
},
watch: {
raised () {
this.$set(this.classes, 'mdc-button--raised', this.raised )
raised() {
this.$set(this.classes, 'mdc-button--raised', this.raised);
},
unelevated () {
this.$set(this.classes, 'mdc-button--unelevated', this.unelevated )
unelevated() {
this.$set(this.classes, 'mdc-button--unelevated', this.unelevated);
},
stroked () {
this.$set(this.classes, 'mdc-button--stroked', this.stroked )
stroked() {
this.$set(this.classes, 'mdc-button--stroked', this.stroked);
},
dense () {
this.$set(this.classes, 'mdc-button--dense', this.dense )
dense() {
this.$set(this.classes, 'mdc-button--dense', this.dense);
},
compact () {
this.$set(this.classes, 'mdc-button--compact', this.compact )
accent() {
this.$set(this.classes, 'mdc-button--accent', this.accent);
},
accent () {
this.$set(this.classes, 'mdc-button--accent', this.accent )
},
}
}
},
};
</script>

0 comments on commit a267f34

Please sign in to comment.