fix(button): Rename stroke to outline (#2632)

BREAKING CHANGE: Renames variant, classes and mixins containing stroke to use outline.
material-components · Apr 23, 2018 · 0033990 · 0033990
1 parent 80cb942
commit 0033990
Show file tree

Hide file tree

Showing 22 changed files with 128 additions and 128 deletions.
diff --git a/demos/button.html b/demos/button.html
@@ -194,29 +194,29 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--headline6">Stroked Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Outlined Button (Experimental)</legend>
           <div>
-            <button class="mdc-button mdc-button--stroked">
+            <button class="mdc-button mdc-button--outlined">
               Baseline
             </button>
-            <button class="mdc-button mdc-button--stroked mdc-button--dense">
+            <button class="mdc-button mdc-button--outlined mdc-button--dense">
               Dense
             </button>
-            <button class="mdc-button mdc-button--stroked secondary-stroked-button">
+            <button class="mdc-button mdc-button--outlined secondary-outlined-button">
               Secondary
             </button>
-            <button class="mdc-button mdc-button--stroked">
+            <button class="mdc-button mdc-button--outlined">
               <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
-            <button class="mdc-button mdc-button--stroked">
+            <button class="mdc-button mdc-button--outlined">
               <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
               SVG Icon
             </button>
-            <a href="javascript:void(0)" class="mdc-button mdc-button--stroked">
+            <a href="javascript:void(0)" class="mdc-button mdc-button--outlined">
               Link
             </a>
           </div>
@@ -228,8 +228,8 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
             <button class="mdc-button mdc-button--unelevated big-round-corner-button">
               Corner Radius
             </button>
-            <button class="mdc-button mdc-button--stroked thick-stroke-button">
-              Thick Stroke Width
+            <button class="mdc-button mdc-button--outlined thick-outline-button">
+              Thick Outline Width
             </button>
           </div>
         </fieldset>
@@ -241,7 +241,7 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Ink Color
             </button>
-            <button class="mdc-button mdc-button--stroked demo-icon-color">
+            <button class="mdc-button mdc-button--outlined demo-icon-color">
               <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon Color
             </button>
@@ -338,29 +338,29 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
         </fieldset>
 
         <fieldset>
-          <legend class="mdc-typography--headline6">Stroked Button (Experimental)</legend>
+          <legend class="mdc-typography--headline6">Outlined Button (Experimental)</legend>
           <div>
-            <button class="mdc-button mdc-button--stroked" data-demo-no-js>
+            <button class="mdc-button mdc-button--outlined" data-demo-no-js>
               Baseline
             </button>
-            <button class="mdc-button mdc-button--stroked mdc-button--dense" data-demo-no-js>
+            <button class="mdc-button mdc-button--outlined mdc-button--dense" data-demo-no-js>
               Dense
             </button>
-            <button class="mdc-button mdc-button--stroked secondary-stroked-button" data-demo-no-js>
+            <button class="mdc-button mdc-button--outlined secondary-outlined-button" data-demo-no-js>
               Secondary
             </button>
-            <button class="mdc-button mdc-button--stroked" data-demo-no-js>
+            <button class="mdc-button mdc-button--outlined" data-demo-no-js>
               <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
-            <button class="mdc-button mdc-button--stroked" data-demo-no-js>
+            <button class="mdc-button mdc-button--outlined" data-demo-no-js>
               <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
               SVG Icon
             </button>
-            <a href="javascript:void(0)" class="mdc-button mdc-button--stroked" data-demo-no-js>
+            <a href="javascript:void(0)" class="mdc-button mdc-button--outlined" data-demo-no-js>
               Link
             </a>
           </div>
@@ -372,8 +372,8 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
             <button class="mdc-button mdc-button--unelevated big-round-corner-button" data-demo-no-js>
               Big Corner Radius
             </button>
-            <button class="mdc-button mdc-button--stroked thick-stroke-button" data-demo-no-js>
-              Thick Stroke Width
+            <button class="mdc-button mdc-button--outlined thick-outline-button" data-demo-no-js>
+              Thick Outline Width
             </button>
           </div>
         </fieldset>
@@ -385,7 +385,7 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Ink Color
             </button>
-            <button class="mdc-button mdc-button--stroked demo-icon-color" data-demo-no-js>
+            <button class="mdc-button mdc-button--outlined demo-icon-color" data-demo-no-js>
               <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon Color
             </button>

diff --git a/demos/button.scss b/demos/button.scss
@@ -31,18 +31,18 @@
   @include mdc-button-filled-accessible($mdc-theme-secondary);
 }
 
-.mdc-button.secondary-stroked-button {
+.mdc-button.secondary-outlined-button {
   @include mdc-button-ink-color($mdc-theme-secondary);
-  @include mdc-button-stroke-color($mdc-theme-secondary);
+  @include mdc-button-outline-color($mdc-theme-secondary);
 
 }
 
 .mdc-button.big-round-corner-button {
   @include mdc-button-corner-radius(8px);
 }
 
-.mdc-button.thick-stroke-button {
-  @include mdc-button-stroke-width(4px);
+.mdc-button.thick-outline-button {
+  @include mdc-button-outline-width(4px);
 }
 
 .demo-ink-color {

diff --git a/demos/checkbox.html b/demos/checkbox.html
@@ -98,10 +98,10 @@ <h2>CSS Only</h2>
             <label for="basic-checkbox">Default checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked" onclick="this.parentElement.parentElement.hasAttribute('dir') ? this.parentElement.parentElement.removeAttribute('dir') : this.parentElement.parentElement.setAttribute('dir', 'rtl');">
+            <button type="button" class="mdc-button mdc-button--outlined" onclick="this.parentElement.parentElement.hasAttribute('dir') ? this.parentElement.parentElement.removeAttribute('dir') : this.parentElement.parentElement.setAttribute('dir', 'rtl');">
               Toggle RTL
             </button>
-            <button type="button" class="mdc-button mdc-button--stroked" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">
+            <button type="button" class="mdc-button mdc-button--outlined" onclick="document.querySelector('.mdc-form-field').classList.toggle('mdc-form-field--align-end');">
               <span>Toggle <code>--align-end</code></span>
             </button>
           </div>
@@ -214,8 +214,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox">Default checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate"><span>Toggle <code>indeterminate</code></span></button>
-            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled"><span>Toggle <code>disabled</code></span></button>
+            <button type="button" class="mdc-button mdc-button--outlined toggle-indeterminate"><span>Toggle <code>indeterminate</code></span></button>
+            <button type="button" class="mdc-button mdc-button--outlined toggle-disabled"><span>Toggle <code>disabled</code></span></button>
           </div>
         </div>
         <div>
@@ -239,8 +239,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-indeterminate">Indeterminate checkbox</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate"><span>Toggle <code>indeterminate</code></span></button>
-            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled"><span>Toggle <code>disabled</code></span></button>
+            <button type="button" class="mdc-button mdc-button--outlined toggle-indeterminate"><span>Toggle <code>indeterminate</code></span></button>
+            <button type="button" class="mdc-button mdc-button--outlined toggle-disabled"><span>Toggle <code>disabled</code></span></button>
           </div>
           <script>
             document.getElementById('native-js-checkbox-indeterminate').indeterminate = true;
@@ -266,8 +266,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-custom-all">Custom colored checkbox (stroke, fill, ripple, and focus)</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate"><span>Toggle <code>indeterminate</code></span></button>
-            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled"><span>Toggle <code>disabled</code></span></button>
+            <button type="button" class="mdc-button mdc-button--outlined toggle-indeterminate"><span>Toggle <code>indeterminate</code></span></button>
+            <button type="button" class="mdc-button mdc-button--outlined toggle-disabled"><span>Toggle <code>disabled</code></span></button>
           </div>
         </div>
         <div>
@@ -290,8 +290,8 @@ <h2>With JavaScript</h2>
             <label for="native-js-checkbox-custom-stroke-and-fill">Custom colored checkbox (stroke and fill only)</label>
           </div>
           <div class="demo-toggle-group">
-            <button type="button" class="mdc-button mdc-button--stroked toggle-indeterminate"><span>Toggle <code>indeterminate</code></span></button>
-            <button type="button" class="mdc-button mdc-button--stroked toggle-disabled"><span>Toggle <code>disabled</code></span></button>
+            <button type="button" class="mdc-button mdc-button--outlined toggle-indeterminate"><span>Toggle <code>indeterminate</code></span></button>
+            <button type="button" class="mdc-button mdc-button--outlined toggle-disabled"><span>Toggle <code>disabled</code></span></button>
           </div>
         </div>
       </section>

diff --git a/demos/drawer/permanent-drawer-above-toolbar.html b/demos/drawer/permanent-drawer-above-toolbar.html
@@ -151,14 +151,14 @@ <h1 class="mdc-typography--headline4">Permanent Drawer</h1>
         </div>
 
         <div class="extra-content-wrapper">
-          <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
+          <button type="button" class="mdc-button mdc-button--outlined mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
         </div>
         <div class="extra-content-wrapper">
-          <button id="toggle-wide" class="mdc-button mdc-button--stroked mdc-button--dense">Toggle extra-wide content</button>
+          <button id="toggle-wide" class="mdc-button mdc-button--outlined mdc-button--dense">Toggle extra-wide content</button>
           <div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
         </div>
         <div class="extra-content-wrapper">
-          <button id="toggle-tall" class="mdc-button mdc-button--stroked mdc-button--dense">Toggle extra-tall content</button>
+          <button id="toggle-tall" class="mdc-button mdc-button--outlined mdc-button--dense">Toggle extra-tall content</button>
           <div id="extra-tall-content" class="mdc-elevation--z2">&nbsp;</div>
         </div>
       </main>

diff --git a/demos/drawer/permanent-drawer-below-toolbar.html b/demos/drawer/permanent-drawer-below-toolbar.html
@@ -143,14 +143,14 @@ <h1 class="mdc-typography--headline4">Permanent Drawer</h1>
         </div>
 
         <div class="extra-content-wrapper">
-          <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
+          <button type="button" class="mdc-button mdc-button--outlined mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
         </div>
         <div class="extra-content-wrapper">
-          <button id="toggle-wide" class="mdc-button mdc-button--stroked mdc-button--dense">Toggle extra-wide content</button>
+          <button id="toggle-wide" class="mdc-button mdc-button--outlined mdc-button--dense">Toggle extra-wide content</button>
           <div id="extra-wide-content" class="mdc-elevation--z2">&nbsp;</div>
         </div>
         <div class="extra-content-wrapper">
-          <button id="toggle-tall" class="mdc-button mdc-button--stroked mdc-button--dense">Toggle extra-tall content</button>
+          <button id="toggle-tall" class="mdc-button mdc-button--outlined mdc-button--dense">Toggle extra-tall content</button>
           <div id="extra-tall-content" class="mdc-elevation--z2">&nbsp;</div>
         </div>
       </main>

diff --git a/demos/drawer/persistent-drawer.html b/demos/drawer/persistent-drawer.html
@@ -138,7 +138,7 @@ <h1 class="mdc-typography--headline4">Persistent Drawer</h1>
             <label for="theme-radio-accessible">Accessible Theme</label>
           </div>
         </div>
-        <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
+        <button type="button" class="mdc-button mdc-button--outlined mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
       </main>
 
       <script src="/assets/material-components-web.js" async></script>

diff --git a/demos/drawer/temporary-drawer.html b/demos/drawer/temporary-drawer.html
@@ -126,7 +126,7 @@ <h1 class="mdc-typography--headline4">Temporary Drawer</h1>
         </div>
       </div>
       <div class="extra-content-wrapper">
-        <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
+        <button type="button" class="mdc-button mdc-button--outlined mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button>
       </div>
     </main>
 

diff --git a/demos/shape.html b/demos/shape.html
@@ -46,7 +46,7 @@
           <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-left"></div>
         </div>
         <div class="mdc-shape-container four-corner-container four-corner-container--stroked">
-          <button class="mdc-button mdc-button--stroked">Stroked Button</button>
+          <button class="mdc-button mdc-button--outlined">Stroked Button</button>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-left"></div>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-right"></div>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-right"></div>
@@ -73,12 +73,12 @@ <h2 class="mdc-typography--headline4">Filled</h2>
 
         <h2 class="mdc-typography--headline4">Stroked</h2>
         <div class="mdc-shape-container two-corner-container two-corner-container--stroked">
-          <button class="mdc-button mdc-button--stroked">Skip</button>
+          <button class="mdc-button mdc-button--outlined">Skip</button>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-left"></div>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-right"></div>
         </div>
         <div class="mdc-shape-container four-corner-container four-corner-container--stroked">
-          <button class="mdc-button mdc-button--stroked">Finish</button>
+          <button class="mdc-button mdc-button--outlined">Finish</button>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-left"></div>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--top-right"></div>
           <div class="mdc-shape-container__corner mdc-shape-container__corner--bottom-right"></div>

diff --git a/demos/theme/index.html b/demos/theme/index.html
@@ -285,8 +285,8 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
             <button class="mdc-button mdc-button--unelevated">
               Unelevated
             </button>
-            <button class="mdc-button mdc-button--stroked">
-              Stroked
+            <button class="mdc-button mdc-button--outlined">
+              Outlined
             </button>
           </div>
         </fieldset>
@@ -304,8 +304,8 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
             <button class="mdc-button mdc-button--unelevated">
               Unelevated
             </button>
-            <button class="mdc-button mdc-button--stroked">
-              Stroked
+            <button class="mdc-button mdc-button--outlined">
+              Outlined
             </button>
           </div>
         </fieldset>
@@ -419,10 +419,10 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
             <label for="disabled-checkbox" id="disabled-checkbox-label">Disabled</label>
           </div>
 
-          <button type="button" class="mdc-button mdc-button--stroked demo-checkbox-toggle-button" id="checkbox-toggle--indeterminate">
+          <button type="button" class="mdc-button mdc-button--outlined demo-checkbox-toggle-button" id="checkbox-toggle--indeterminate">
             <span>Toggle <code class="demo-button__code">indeterminate</code></span>
           </button>
-          <button type="button" class="mdc-button mdc-button--stroked demo-checkbox-toggle-button" id="checkbox-toggle--align-end">
+          <button type="button" class="mdc-button mdc-button--outlined demo-checkbox-toggle-button" id="checkbox-toggle--align-end">
             <span>Toggle <code class="demo-button__code">--align-end</code></span>
           </button>
         </div>