From f3275c85c2d1d2c16372a6337eb349246d32d955 Mon Sep 17 00:00:00 2001
From: Yiran Mao <yiranm@google.com>
Date: Sun, 27 Aug 2017 00:50:53 -0400
Subject: [PATCH 1/4] feat(button): Implement stroked button

---
 demos/button.html                   | 48 +++++++++++++++++++++++++++++
 packages/mdc-button/README.md       |  9 ++++++
 packages/mdc-button/mdc-button.scss | 30 ++++++++++++++++++
 3 files changed, 87 insertions(+)

diff --git a/demos/button.html b/demos/button.html
index c754e1556b3..07294003844 100644
--- a/demos/button.html
+++ b/demos/button.html
@@ -201,6 +201,30 @@ <h1 class="mdc-typography--display2">Ripple Enabled</h1>
           </div>
         </fieldset>
 
+        <fieldset>
+          <legend class="mdc-typography--title">Stroked Button</legend>
+          <div>
+            <button class="mdc-button mdc-button--stroked">
+              Baseline
+            </button>
+            <button class="mdc-button mdc-button--stroked mdc-button--compact">
+              Compact
+            </button>
+            <button class="mdc-button mdc-button--stroked mdc-button--dense">
+              Dense
+            </button>
+            <button class="mdc-button mdc-button--stroked mdc-button--primary">
+              Primary
+            </button>
+            <button class="mdc-button mdc-button--stroked mdc-button--accent">
+              Secondary
+            </button>
+            <a href="javascript:void(0)" class="mdc-button mdc-button--stroked">
+              Link
+            </a>
+          </div>
+        </fieldset>
+
         <h1 class="mdc-typography--display2">CSS Only</h1>
         <fieldset>
           <legend class="mdc-typography--title">Text Button</legend>
@@ -273,6 +297,30 @@ <h1 class="mdc-typography--display2">CSS Only</h1>
             </a>
           </div>
         </fieldset>
+
+        <fieldset>
+          <legend class="mdc-typography--title">Stroked Button</legend>
+          <div>
+            <button class="mdc-button mdc-button--stroked" data-demo-no-js>
+              Baseline
+            </button>
+            <button class="mdc-button mdc-button--stroked mdc-button--compact" data-demo-no-js>
+              Compact
+            </button>
+            <button class="mdc-button mdc-button--stroked mdc-button--dense" data-demo-no-js>
+              Dense
+            </button>
+            <button class="mdc-button mdc-button--stroked mdc-button--primary" data-demo-no-js>
+              Primary
+            </button>
+            <button class="mdc-button mdc-button--stroked mdc-button--accent" data-demo-no-js>
+              Secondary
+            </button>
+            <a href="javascript:void(0)" class="mdc-button mdc-button--stroked" data-demo-no-js>
+              Link
+            </a>
+          </div>
+        </fieldset>
       </section>
     </main>
 
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
index 0bca94a52f1..5427fd92f58 100644
--- a/packages/mdc-button/README.md
+++ b/packages/mdc-button/README.md
@@ -71,6 +71,14 @@ semantically correct.
 </button>
 ```
 
+#### Stroked Button
+
+```html
+<button class="mdc-button mdc-button--stroked">
+  Stroked button
+</button>
+```
+
 ### Button state
 
 #### Disabled
@@ -138,6 +146,7 @@ The provided modifiers are:
 | --------------------- | ------------------------------------------------------- |
 | `mdc-button--raised`  | A contained button that is elevated upon the surface.   |
 | `mdc-button--unelevated`  | A contained button that is flush with the surface.  |
+| `mdc-button--stroked`  | A contained button contained by a rectangular shape.  |
 | `mdc-button--dense`   | Compresses the button text to make it slightly smaller. |
 | `mdc-button--compact` | Reduces the amount of horizontal padding in the button. |
 | `mdc-button--primary` | Colors the button with the primary color.               |
diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
index 9b9b08dcdf6..75f4d51e6a2 100644
--- a/packages/mdc-button/mdc-button.scss
+++ b/packages/mdc-button/mdc-button.scss
@@ -94,6 +94,17 @@
   }
 }
 
+.mdc-button--stroked {
+  @include mdc-theme-prop(border-color, text-primary-on-light);
+
+  border-width: 1px;
+  border-style: solid;
+
+  @include mdc-theme-dark(".mdc-button") {
+    @include mdc-theme-prop(border-color, text-primary-on-dark);
+  }
+}
+
 .mdc-button--compact {
   padding: 0 8px;
 }
@@ -134,6 +145,14 @@
       @include mdc-theme-prop(background-color, $theme-style);
       @include mdc-theme-prop(color, text-primary-on-#{$theme-style});
     }
+    // postcss-bem-linter: ignore
+    &.mdc-button--stroked {
+      @include mdc-theme-prop(border-color, $theme-style);
+
+      @include mdc-theme-dark(".mdc-button") {
+        @include mdc-theme-prop(border-color, $theme-style);
+      }
+    }
   }
 }
 
@@ -168,4 +187,15 @@
     }
   }
 }
+
+.mdc-button--stroked {
+  fieldset:disabled &,
+  &:disabled {
+    border-color: rgba(black, .38);
+
+    @include mdc-theme-dark(".mdc-button") {
+      @include mdc-theme-prop(border-color, text-disabled-on-dark);
+    }
+  }
+}
 // postcss-bem-linter: end

From 7a0bb74592aa3d04ca1758a77b001c02836cd819 Mon Sep 17 00:00:00 2001
From: Yiran Mao <yiranm@google.com>
Date: Mon, 28 Aug 2017 15:37:10 -0400
Subject: [PATCH 2/4] fix(button): Correct stroked button vertical alignment.

---
 packages/mdc-button/mdc-button.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
index 75f4d51e6a2..008628a5547 100644
--- a/packages/mdc-button/mdc-button.scss
+++ b/packages/mdc-button/mdc-button.scss
@@ -97,12 +97,17 @@
 .mdc-button--stroked {
   @include mdc-theme-prop(border-color, text-primary-on-light);
 
-  border-width: 1px;
+  border-width: 2px;
   border-style: solid;
+  line-height: 32px;
 
   @include mdc-theme-dark(".mdc-button") {
     @include mdc-theme-prop(border-color, text-primary-on-dark);
   }
+
+  &.mdc-button--dense {
+    line-height: 28px;
+  }
 }
 
 .mdc-button--compact {

From adadf9c93148e6866437e205682ef1ee02186a08 Mon Sep 17 00:00:00 2001
From: Yiran Mao <yiranm@google.com>
Date: Mon, 28 Aug 2017 15:55:13 -0400
Subject: [PATCH 3/4] docs(button): Reword stroked button description.

---
 packages/mdc-button/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
index 5427fd92f58..3471dfc279c 100644
--- a/packages/mdc-button/README.md
+++ b/packages/mdc-button/README.md
@@ -146,7 +146,7 @@ The provided modifiers are:
 | --------------------- | ------------------------------------------------------- |
 | `mdc-button--raised`  | A contained button that is elevated upon the surface.   |
 | `mdc-button--unelevated`  | A contained button that is flush with the surface.  |
-| `mdc-button--stroked`  | A contained button contained by a rectangular shape.  |
+| `mdc-button--stroked`  | A contained button that is flush with the surface and has a visible border. |
 | `mdc-button--dense`   | Compresses the button text to make it slightly smaller. |
 | `mdc-button--compact` | Reduces the amount of horizontal padding in the button. |
 | `mdc-button--primary` | Colors the button with the primary color.               |

From a581d0e36898efbe40a97f625d21016b09af8088 Mon Sep 17 00:00:00 2001
From: Yiran Mao <yiranm@google.com>
Date: Tue, 29 Aug 2017 11:48:39 -0400
Subject: [PATCH 4/4] feat(button): Make densed stroke button accommodate for
 odd font size

---
 packages/mdc-button/mdc-button.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
index 008628a5547..877a4be5304 100644
--- a/packages/mdc-button/mdc-button.scss
+++ b/packages/mdc-button/mdc-button.scss
@@ -105,8 +105,9 @@
     @include mdc-theme-prop(border-color, text-primary-on-dark);
   }
 
+  // postcss-bem-linter: ignore
   &.mdc-button--dense {
-    line-height: 28px;
+    line-height: 27px;  // To accommodate odd font size of dense button
   }
 }