From b90c9113b1ca74a5280cecaa011b35d5c3ead860 Mon Sep 17 00:00:00 2001
From: Mats Pfeiffer <mats.pfeiffer@googlemail.com>
Date: Tue, 24 Apr 2018 09:26:03 +0200
Subject: [PATCH] feat(button): Synchronise with mdc-web (#96)

BREAKING CHANGES: Stroked prop is renamed to outlined.
---
 components/button/Button.vue |  4 ++--
 components/button/README.md  |  2 +-
 demo/views/ButtonView.vue    | 12 ++++++------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/components/button/Button.vue b/components/button/Button.vue
index 71a0bd8f5..edf063d91 100644
--- a/components/button/Button.vue
+++ b/components/button/Button.vue
@@ -36,7 +36,7 @@ export default {
       type: Boolean,
       default: false
     },
-    stroked: {
+    outlined: {
       type: Boolean,
       default: false
     },
@@ -64,7 +64,7 @@ export default {
       return {
         '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
       }
     }
diff --git a/components/button/README.md b/components/button/README.md
index fc20d769b..05df38a26 100644
--- a/components/button/README.md
+++ b/components/button/README.md
@@ -22,7 +22,7 @@
 |------|------|---------|-------------|
 | raised | Boolean | false | raised button |
 | unelevated | Boolean | false | unelevated button |
-| stroked | Boolean | false | stroked button |
+| outlined | Boolean | false | outlined button |
 | dense | Boolean | false | dense button |
 | interactive | Boolean | false | button with ripple effect |
 | href | String | ' ' | link button |
diff --git a/demo/views/ButtonView.vue b/demo/views/ButtonView.vue
index 1c16a93cd..c5c33ae91 100644
--- a/demo/views/ButtonView.vue
+++ b/demo/views/ButtonView.vue
@@ -100,20 +100,20 @@
       </m-layout-grid-inner>
     </m-layout-grid-cell>
     <m-layout-grid-cell :span="12">
-      <m-typo-title>Stroked</m-typo-title>
+      <m-typo-title>Outlined</m-typo-title>
       <m-layout-grid-inner>
         <m-layout-grid-cell :span="2">
-          <m-button stroked>baseline</m-button>
+          <m-button outlined>baseline</m-button>
         </m-layout-grid-cell>
         <m-layout-grid-cell :span="2">
           <m-button
-            stroked
+            outlined
             interactive>
             interactive
           </m-button>
         </m-layout-grid-cell>
         <m-layout-grid-cell :span="2">
-          <m-button stroked>
+          <m-button outlined>
             <m-icon
               slot="icon"
               icon="cloud"/>
@@ -122,14 +122,14 @@
         </m-layout-grid-cell>
         <m-layout-grid-cell :span="2">
           <m-button
-            stroked
+            outlined
             dense>
             dense
           </m-button>
         </m-layout-grid-cell>
         <m-layout-grid-cell :span="2">
           <m-button
-            stroked
+            outlined
             disabled>
             disabled
           </m-button>