feat(button): Rename stroke property to outline as per MDCWeb 0.35.0

material-components/material-components-web#2632 BREAKING CHANGE: Rename button stroke property to outline
stasson · Apr 29, 2018 · b346320 · b346320
1 parent 7aa9a33
commit b346320
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 36 deletions.
diff --git a/components/button/README.md b/components/button/README.md
@@ -28,7 +28,7 @@ var vm = new Vue({
 | `disabled`           | String         |                          | disable the button                                                             |
 | `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(\*) |
+| `outlined`           | 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                                    |
@@ -123,7 +123,7 @@ You might want to keep button behaviour and do the navigation programatically:
 
 ```javascript
 // register event from some component context
-this.$root.$on('my-event', () => doSomething());
+this.$root.$on('my-event', () => doSomething())
 ```
 
 ### Reference

diff --git a/components/button/demo.vue b/components/button/demo.vue
@@ -6,27 +6,9 @@
       <div
         ref="buttons"
         class="mdc-demo-button">
-        <mdc-button
-          :dense="dense"
-          :disabled="disabled"
-          :raised="raised"
-          :stroked="stroked"
-          :unelevated="unelevated"
-          :accent="accent">Button</mdc-button>
-        <mdc-button
-          :dense="dense"
-          :disabled="disabled"
-          :raised="raised"
-          :stroked="stroked"
-          :unelevated="unelevated"
-          :accent="accent">Button</mdc-button>
-        <mdc-button
-          :dense="dense"
-          :disabled="disabled"
-          :raised="raised"
-          :stroked="stroked"
-          :unelevated="unelevated"
-          :accent="accent">Button</mdc-button>
+        <mdc-button v-bind="buttonProps">Button</mdc-button>
+        <mdc-button v-bind="buttonProps">Button</mdc-button>
+        <mdc-button v-bind="buttonProps">Button</mdc-button>
       </div>
     </div>
 
@@ -47,7 +29,7 @@
           name="button-type"/>
         <mdc-radio
           v-model="type"
-          label="stroked"
+          label="outlined"
           name="button-type"/>
       </div>
 
@@ -74,19 +56,22 @@ export default {
   },
   computed: {
     raised() {
-      if (this.$refs.buttons) {
-        this.$nextTick(() => {
-          let children = [...this.$refs.buttons.children]
-          children.forEach(({ __vue__ }) => __vue__.ripple.layout())
-        })
-      }
       return this.type == 'raised'
     },
     unelevated() {
       return this.type == 'unelevated'
     },
-    stroked() {
-      return this.type == 'stroked'
+    outlined() {
+      return this.type == 'outlined'
+    },
+    buttonProps() {
+      return {
+        dense: this.dense,
+        disabled: this.disabled,
+        raised: this.raised,
+        outlined: this.outlined,
+        unelevated: this.unelevated,
+      }
     }
   }
 }

diff --git a/components/button/mdc-button.vue b/components/button/mdc-button.vue
@@ -7,7 +7,7 @@ export default {
   props: {
     raised: Boolean,
     unelevated: Boolean,
-    stroked: Boolean,
+    outlined: Boolean,
     dense: Boolean
   },
   data() {
@@ -16,7 +16,7 @@ export default {
         'mdc-button': true,
         'mdc-button--raised': this.raised,
         'mdc-button--unelevated': this.unelevated,
-        'mdc-button--stroked': this.stroked,
+        'mdc-button--outlined': this.outlined,
         'mdc-button--dense': this.dense
       }
     }
@@ -28,8 +28,8 @@ export default {
     unelevated() {
       this.$set(this.classes, 'mdc-button--unelevated', this.unelevated)
     },
-    stroked() {
-      this.$set(this.classes, 'mdc-button--stroked', this.stroked)
+    outlined() {
+      this.$set(this.classes, 'mdc-button--outlined', this.outlined)
     },
     dense() {
       this.$set(this.classes, 'mdc-button--dense', this.dense)