chore(checkbox): Rename checkmark path for BEM (#2096)

patrickrodee · web-flow · commit 015c66bb5ec9 · 2018-01-26T08:46:17.000-08:00
Change `mdc-checkbox__checkmark__path` to `mdc-checkbox__checkmark-path`
across all files.

BREAKING CHANGE: all checkboxes need to update the SVG path's class from
`mdc-checkbox__checkmark__path` to `mdc-checkbox__checkmark-path`.
diff --git a/demos/button.html b/demos/button.html
@@ -99,7 +99,7 @@
             <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-disabled" aria-labelledby="toggle-disabled-label">
             <div class="mdc-checkbox__background">
               <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59">
+                <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59">
               </svg>
               <div class="mdc-checkbox__mixedmark"></div>
             </div>
diff --git a/demos/card.html b/demos/card.html
@@ -149,7 +149,7 @@ <h2 class="mdc-card__subtitle">Subtitle here</h2>
               <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+                  <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
                 </svg>
                 <div class="mdc-checkbox__mixedmark"></div>
               </div>
diff --git a/demos/checkbox.html b/demos/checkbox.html
@@ -76,7 +76,7 @@
           <div class="mdc-checkbox__background">
             <svg class="mdc-checkbox__checkmark"
                  viewBox="0 0 24 24">
-              <path class="mdc-checkbox__checkmark__path"
+              <path class="mdc-checkbox__checkmark-path"
                     fill="none"
                     stroke="white"
                     d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -98,7 +98,7 @@ <h2>CSS Only</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -123,7 +123,7 @@ <h2>CSS Only</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -142,7 +142,7 @@ <h2>CSS Only</h2>
                 <div class="mdc-checkbox__background">
                   <svg class="mdc-checkbox__checkmark"
                        viewBox="0 0 24 24">
-                    <path class="mdc-checkbox__checkmark__path"
+                    <path class="mdc-checkbox__checkmark-path"
                           fill="none"
                           stroke="white"
                           d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -165,7 +165,7 @@ <h2>CSS Only</h2>
                 <div class="mdc-checkbox__background">
                   <svg class="mdc-checkbox__checkmark"
                        viewBox="0 0 24 24">
-                    <path class="mdc-checkbox__checkmark__path"
+                    <path class="mdc-checkbox__checkmark-path"
                           fill="none"
                           stroke="white"
                           d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -185,7 +185,7 @@ <h2>CSS Only</h2>
                 <div class="mdc-checkbox__background">
                   <svg class="mdc-checkbox__checkmark"
                        viewBox="0 0 24 24">
-                    <path class="mdc-checkbox__checkmark__path"
+                    <path class="mdc-checkbox__checkmark-path"
                           fill="none"
                           stroke="white"
                           d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -210,7 +210,7 @@ <h2>With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -235,7 +235,7 @@ <h2>With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -262,7 +262,7 @@ <h2>With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -286,7 +286,7 @@ <h2>With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -314,7 +314,7 @@ <h2>Dark Theme (mdc-theme--dark) - With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -335,7 +335,7 @@ <h2>Dark Theme (mdc-theme--dark) - With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -355,7 +355,7 @@ <h2>Dark Theme (mdc-theme--dark) - With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -378,7 +378,7 @@ <h2>Dark Theme (mdc-theme--dark) - With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -398,7 +398,7 @@ <h2>Dark Theme (mdc-theme--dark) - With JavaScript</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -422,7 +422,7 @@ <h2>Dark Theme (mdc-checkbox--theme-dark) - CSS Only</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -443,7 +443,7 @@ <h2>Dark Theme (mdc-checkbox--theme-dark) - CSS Only</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -463,7 +463,7 @@ <h2>Dark Theme (mdc-checkbox--theme-dark) - CSS Only</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -486,7 +486,7 @@ <h2>Dark Theme (mdc-checkbox--theme-dark) - CSS Only</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -506,7 +506,7 @@ <h2>Dark Theme (mdc-checkbox--theme-dark) - CSS Only</h2>
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
diff --git a/demos/dialog.html b/demos/dialog.html
@@ -178,7 +178,7 @@ <h2 id="mdc-dialog-with-list-label" class="mdc-dialog__header__title">
             <div class="mdc-checkbox__background">
               <svg class="mdc-checkbox__checkmark"
                   viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark__path"
+                <path class="mdc-checkbox__checkmark-path"
                       fill="none"
                       stroke="white"
                       d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
diff --git a/demos/grid-list.html b/demos/grid-list.html
@@ -94,7 +94,7 @@
             <input type="checkbox" class="mdc-checkbox__native-control" id="toggle-rtl" aria-labelledby="toggle-rtl-label" />
             <div class="mdc-checkbox__background">
               <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+                <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
               </svg>
               <div class="mdc-checkbox__mixedmark"></div>
             </div>
diff --git a/demos/list.html b/demos/list.html
@@ -103,7 +103,7 @@
                    aria-labelledby="toggle-rtl-label" />
             <div class="mdc-checkbox__background">
               <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white"
+                <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
                       d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
               </svg>
               <div class="mdc-checkbox__mixedmark"></div>
diff --git a/demos/snackbar.html b/demos/snackbar.html
@@ -91,7 +91,7 @@ <h2 class="mdc-typography--title">Basic Example</h2>
             <input type="checkbox" class="mdc-checkbox__native-control" id="multiline" aria-labelledby="multiline-label" />
             <div class="mdc-checkbox__background">
               <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+                <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
               </svg>
               <div class="mdc-checkbox__mixedmark"></div>
             </div>
@@ -105,7 +105,7 @@ <h2 class="mdc-typography--title">Basic Example</h2>
             <input type="checkbox" class="mdc-checkbox__native-control" id="action-on-bottom" aria-labelledby="action-on-bottom-label" />
             <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white"
+                  <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
                       d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                 </svg>
               <div class="mdc-checkbox__mixedmark"></div>
@@ -120,7 +120,7 @@ <h2 class="mdc-typography--title">Basic Example</h2>
               <input type="checkbox" checked class="mdc-checkbox__native-control" id="dismiss-on-action" aria-labelledby="dismiss-on-action-label" />
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white"
+                  <path class="mdc-checkbox__checkmark-path" fill="none" stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
                 </svg>
               <div class="mdc-checkbox__mixedmark"></div>
diff --git a/demos/theme/index.html b/demos/theme/index.html
@@ -420,7 +420,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -439,7 +439,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -459,7 +459,7 @@ <h3 class="mdc-typography--headline demo-component-section__heading">
               <div class="mdc-checkbox__background">
                 <svg class="mdc-checkbox__checkmark"
                      viewBox="0 0 24 24">
-                  <path class="mdc-checkbox__checkmark__path"
+                  <path class="mdc-checkbox__checkmark-path"
                         fill="none"
                         stroke="white"
                         d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
diff --git a/packages/mdc-checkbox/README.md b/packages/mdc-checkbox/README.md
@@ -47,7 +47,7 @@ npm install --save @material/checkbox
   <div class="mdc-checkbox__background">
     <svg class="mdc-checkbox__checkmark"
          viewBox="0 0 24 24">
-      <path class="mdc-checkbox__checkmark__path"
+      <path class="mdc-checkbox__checkmark-path"
             fill="none"
             stroke="white"
             d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -76,7 +76,7 @@ easily position checkboxes and their labels.
     <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark"
            viewBox="0 0 24 24">
-        <path class="mdc-checkbox__checkmark__path"
+        <path class="mdc-checkbox__checkmark-path"
               fill="none"
               stroke="white"
               d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
@@ -104,7 +104,7 @@ Note that `mdc-checkbox--disabled` is necessary on the root element of CSS-only
   <div class="mdc-checkbox__background">
     <svg class="mdc-checkbox__checkmark"
          viewBox="0 0 24 24">
-      <path class="mdc-checkbox__checkmark__path"
+      <path class="mdc-checkbox__checkmark-path"
             fill="none"
             stroke="white"
             d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
diff --git a/packages/mdc-checkbox/_mixins.scss b/packages/mdc-checkbox/_mixins.scss
@@ -68,7 +68,7 @@
 }
 
 @mixin mdc-checkbox-ink-color($color) {
-  .mdc-checkbox__checkmark__path {
+  .mdc-checkbox__checkmark-path {
     // !important is needed here because a stroke must be set as an attribute on the SVG in order
     // for line animation to work properly.
     @include mdc-theme-prop(stroke, $color, $important: true);
@@ -162,7 +162,7 @@
   }
 
   &-unchecked-checked {
-    .mdc-checkbox__checkmark__path {
+    .mdc-checkbox__checkmark-path {
       // Instead of delaying the animation, we simply multiply its length by 2 and begin the
       // animation at 50% in order to prevent a flash of styles applied to a checked checkmark
       // as the background is fading in before the animation begins.
@@ -179,7 +179,7 @@
   }
 
   &-checked-unchecked {
-    .mdc-checkbox__checkmark__path {
+    .mdc-checkbox__checkmark-path {
       animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-checked-unchecked-checkmark-path;
       transition: none;
     }
@@ -352,7 +352,7 @@
 
 // Check mark path
 
-@mixin mdc-checkbox__checkmark__path_ {
+@mixin mdc-checkbox__checkmark-path_ {
   transition:
     mdc-checkbox-transition-exit(
       stroke-dashoffset,
@@ -364,7 +364,7 @@
   stroke-dasharray: $mdc-checkbox-mark-path-length_;
 }
 
-@mixin mdc-checkbox__checkmark__path--marked_ {
+@mixin mdc-checkbox__checkmark-path--marked_ {
   stroke-dashoffset: 0;
 }
 
diff --git a/packages/mdc-checkbox/mdc-checkbox.scss b/packages/mdc-checkbox/mdc-checkbox.scss
@@ -52,8 +52,8 @@
   @include mdc-checkbox__checkmark_;
 }
 
-.mdc-checkbox__checkmark__path {
-  @include mdc-checkbox__checkmark__path_;
+.mdc-checkbox__checkmark-path {
+  @include mdc-checkbox__checkmark-path_;
 }
 
 .mdc-checkbox__mixedmark {
@@ -64,7 +64,7 @@
 .mdc-checkbox--upgraded {
   .mdc-checkbox__background,
   .mdc-checkbox__checkmark,
-  .mdc-checkbox__checkmark__path,
+  .mdc-checkbox__checkmark-path,
   .mdc-checkbox__mixedmark {
     @include mdc-checkbox__child--upgraded_;
   }
@@ -78,8 +78,8 @@
 .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
   @include mdc-checkbox__background--marked_;
 
-  .mdc-checkbox__checkmark__path {
-    @include mdc-checkbox__checkmark__path--marked_;
+  .mdc-checkbox__checkmark-path {
+    @include mdc-checkbox__checkmark-path--marked_;
   }
 }
 
diff --git a/packages/mdc-form-field/README.md b/packages/mdc-form-field/README.md
@@ -55,7 +55,7 @@ successive sibling is a `label` element. This means it will work for MDC Web for
     <div class="mdc-checkbox__background">
       <svg class="mdc-checkbox__checkmark"
            viewBox="0 0 24 24">
-        <path class="mdc-checkbox__checkmark__path"
+        <path class="mdc-checkbox__checkmark-path"
               fill="none"
               stroke="white"
               d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
diff --git a/test/unit/mdc-checkbox/mdc-checkbox.test.js b/test/unit/mdc-checkbox/mdc-checkbox.test.js
@@ -38,7 +38,7 @@ function getFixture() {
       <div class="mdc-checkbox__background">
         <svg class="mdc-checkbox__checkmark"
              viewBox="0 0 24 24">
-          <path class="mdc-checkbox__checkmark__path"
+          <path class="mdc-checkbox__checkmark-path"
                 fill="none"
                 stroke="white"
                 d="M4.1,12.7 9,17.6 20.3,6.3"/>

Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`@mixin mdc-checkbox-ink-color($color) {`
`71`		`- .mdc-checkbox__checkmark__path {`
	`71`	`+ .mdc-checkbox__checkmark-path {`
`72`	`72`	`// !important is needed here because a stroke must be set as an attribute on the SVG in order`
`73`	`73`	`// for line animation to work properly.`
`74`	`74`	`@include mdc-theme-prop(stroke, $color, $important: true);`
`@@ -162,7 +162,7 @@`
`162`	`162`	`}`
`163`	`163`
`164`	`164`	`&-unchecked-checked {`
`165`		`- .mdc-checkbox__checkmark__path {`
	`165`	`+ .mdc-checkbox__checkmark-path {`
`166`	`166`	`// Instead of delaying the animation, we simply multiply its length by 2 and begin the`
`167`	`167`	`// animation at 50% in order to prevent a flash of styles applied to a checked checkmark`
`168`	`168`	`// as the background is fading in before the animation begins.`
`@@ -179,7 +179,7 @@`
`179`	`179`	`}`
`180`	`180`
`181`	`181`	`&-checked-unchecked {`
`182`		`- .mdc-checkbox__checkmark__path {`
	`182`	`+ .mdc-checkbox__checkmark-path {`
`183`	`183`	`animation: $mdc-checkbox-transition-duration linear 0s mdc-checkbox-checked-unchecked-checkmark-path;`
`184`	`184`	`transition: none;`
`185`	`185`	`}`
`@@ -352,7 +352,7 @@`
`352`	`352`
`353`	`353`	`// Check mark path`
`354`	`354`
`355`		`-@mixin mdc-checkbox__checkmark__path_ {`
	`355`	`+@mixin mdc-checkbox__checkmark-path_ {`
`356`	`356`	`transition:`
`357`	`357`	`mdc-checkbox-transition-exit(`
`358`	`358`	`stroke-dashoffset,`
`@@ -364,7 +364,7 @@`
`364`	`364`	`stroke-dasharray: $mdc-checkbox-mark-path-length_;`
`365`	`365`	`}`
`366`	`366`
`367`		`-@mixin mdc-checkbox__checkmark__path--marked_ {`
	`367`	`+@mixin mdc-checkbox__checkmark-path--marked_ {`
`368`	`368`	`stroke-dashoffset: 0;`
`369`	`369`	`}`
`370`	`370`