From 6657e6f40c93fc445e98264e592f8256a83eadfc Mon Sep 17 00:00:00 2001
From: Will Ernest <34519388+williamernest@users.noreply.github.com>
Date: Mon, 23 Apr 2018 14:41:13 -0700
Subject: [PATCH] fix(card): Rename stroke to outline (#2633)

BREAKING CHANGE: Renames variant, classes and mixins containing the word stroke to use the word outline.
---
 demos/card.html                   | 2 +-
 demos/shape.html                  | 2 +-
 demos/shape.scss                  | 2 +-
 packages/mdc-card/README.md       | 4 ++--
 packages/mdc-card/_mixins.scss    | 2 +-
 packages/mdc-card/_variables.scss | 4 ++--
 packages/mdc-card/mdc-card.scss   | 4 ++--
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/demos/card.html b/demos/card.html
index bc33708e5df..fe0447d4ca0 100644
--- a/demos/card.html
+++ b/demos/card.html
@@ -99,7 +99,7 @@ <h3 class="demo-card__subtitle mdc-typography--subtitle2">by Kurt Wagner</h3>
       </section>
 
       <section class="demo-card-collection">
-        <div class="mdc-card mdc-card--stroked demo-card">
+        <div class="mdc-card mdc-card--outlined demo-card">
           <div class="demo-card-article-group-heading mdc-typography--subtitle2">Headlines</div>
 
           <hr class="mdc-list-divider">
diff --git a/demos/shape.html b/demos/shape.html
index 4ea00301ec8..0da403ba42d 100644
--- a/demos/shape.html
+++ b/demos/shape.html
@@ -88,7 +88,7 @@ <h2 class="mdc-typography--headline4">Stroked</h2>
         <h1 class="mdc-typography--headline3">Card</h1>
 
         <div class="mdc-shape-container card-container">
-          <div class="mdc-card mdc-card--stroked demo-card">
+          <div class="mdc-card mdc-card--outlined demo-card">
             <a class="mdc-card__primary-action demo-card__primary-action" href="#">
               <div class="demo-card__row">
                 <div class="mdc-card__media mdc-card__media--square demo-card__media"></div>
diff --git a/demos/shape.scss b/demos/shape.scss
index 673476d471c..f013e58bacd 100644
--- a/demos/shape.scss
+++ b/demos/shape.scss
@@ -61,7 +61,7 @@
 
 .card-container {
   @include mdc-shape-angled-corner($mdc-theme-background, 24px, 4px);
-  @include mdc-shape-angled-corner-stroke($mdc-card-stroke-width, $mdc-card-stroke-color);
+  @include mdc-shape-angled-corner-stroke($mdc-card-outline-width, $mdc-card-outline-color);
 }
 
 .demo-card {
diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md
index d98afb77237..9547795fe56 100644
--- a/packages/mdc-card/README.md
+++ b/packages/mdc-card/README.md
@@ -171,7 +171,7 @@ elements:
 CSS Class | Description
 --- | ---
 `mdc-card` | Mandatory, for the card element
-`mdc-card--stroked` | Removes the shadow and displays a hairline stroke instead
+`mdc-card--outlined` | Removes the shadow and displays a hairline outline instead
 `mdc-card__primary-action` | The main tappable area of the card. Typically contains most (or all) card content _except_ `mdc-card__actions`. Only applicable to cards that have a primary action that the main surface should trigger.
 `mdc-card__media` | Media area that displays a custom `background-image` with `background-size: cover`
 `mdc-card__media--square` | Automatically scales the media area's height to equal its width
@@ -190,6 +190,6 @@ CSS Class | Description
 Mixin | Description
 --- | ---
 `mdc-card-fill-color($color)` | Sets the fill color of a card
-`mdc-card-stroke($color, $thickness)` | Sets the color and thickness of a card's stroke (but does _not_ remove its shadow)
+`mdc-card-outline($color, $thickness)` | Sets the color and thickness of a card's outline (but does _not_ remove its shadow)
 `mdc-card-corner-radius($radius)` | Sets the corner radius of a card
 `mdc-card-media-aspect-ratio($x, $y)` | Maintains the given aspect ratio on a `mdc-card__media` subelement by dynamically scaling its height relative to its width
diff --git a/packages/mdc-card/_mixins.scss b/packages/mdc-card/_mixins.scss
index 30a929cc3b1..6e91947d7e2 100644
--- a/packages/mdc-card/_mixins.scss
+++ b/packages/mdc-card/_mixins.scss
@@ -24,7 +24,7 @@
   @include mdc-theme-prop(background-color, $color);
 }
 
-@mixin mdc-card-stroke($color, $thickness: $mdc-card-stroke-width) {
+@mixin mdc-card-outline($color, $thickness: $mdc-card-outline-width) {
   border: $thickness solid mdc-theme-prop-value($color);
 }
 
diff --git a/packages/mdc-card/_variables.scss b/packages/mdc-card/_variables.scss
index b81a9af1e6f..67f43a3d930 100644
--- a/packages/mdc-card/_variables.scss
+++ b/packages/mdc-card/_variables.scss
@@ -16,5 +16,5 @@
 
 @import "@material/theme/mixins";
 
-$mdc-card-stroke-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
-$mdc-card-stroke-width: 1px;
+$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
+$mdc-card-outline-width: 1px;
diff --git a/packages/mdc-card/mdc-card.scss b/packages/mdc-card/mdc-card.scss
index 2686259f225..c8a75837809 100644
--- a/packages/mdc-card/mdc-card.scss
+++ b/packages/mdc-card/mdc-card.scss
@@ -30,9 +30,9 @@
   @include mdc-card-container-layout_;
 }
 
-.mdc-card--stroked {
+.mdc-card--outlined {
   @include mdc-elevation(0);
-  @include mdc-card-stroke($mdc-card-stroke-color);
+  @include mdc-card-outline($mdc-card-outline-color);
 }
 
 //