feat(button): Implement stroked button (#1194)

closes #987
material-components · Aug 30, 2017 · 56bf37d · 56bf37d
1 parent a8b9099
commit 56bf37d
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 0 deletions.
diff --git 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
@@ -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 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.               |

diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss
@@ -94,6 +94,23 @@
   }
 }
 
+.mdc-button--stroked {
+  @include mdc-theme-prop(border-color, text-primary-on-light);
+
+  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);
+  }
+
+  // postcss-bem-linter: ignore
+  &.mdc-button--dense {
+    line-height: 27px;  // To accommodate odd font size of dense button
+  }
+}
+
 .mdc-button--compact {
   padding: 0 8px;
 }
@@ -134,6 +151,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 +193,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