From c45379418ba658210ac1ddfc81647e724693bd16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9rgio=20Gomes?= <sgomes@google.com>
Date: Thu, 11 Dec 2014 16:34:23 +0000
Subject: [PATCH] Fixing up ripple CSS classes across the board.

---
 app/styleguide/button/_button.scss       |  6 +++---
 app/styleguide/button/button.js          |  4 ++--
 app/styleguide/button/demo.html          | 24 ++++++++++++------------
 app/styleguide/checkbox/_checkbox.scss   |  2 +-
 app/styleguide/checkbox/checkbox.js      | 10 +++++-----
 app/styleguide/checkbox/demo.html        |  8 ++++----
 app/styleguide/dropdown-menu/demo.html   | 10 +++++-----
 app/styleguide/item/demo.html            | 12 ++++++------
 app/styleguide/item/item.js              |  4 ++--
 app/styleguide/radio/_radio.scss         |  2 +-
 app/styleguide/radio/demo.html           |  6 +++---
 app/styleguide/radio/radio.js            | 10 +++++-----
 app/styleguide/ripple/_ripple.scss       | 17 ++++++++---------
 app/styleguide/ripple/ripple.js          |  6 +++---
 app/styleguide/textfield/_textfield.scss |  8 ++++----
 app/styleguide/textfield/demo.html       |  2 +-
 app/styleguide/textfield/textfield.js    |  8 ++++----
 17 files changed, 69 insertions(+), 70 deletions(-)

diff --git a/app/styleguide/button/_button.scss b/app/styleguide/button/_button.scss
index eeac26bd..fcd13e98 100644
--- a/app/styleguide/button/_button.scss
+++ b/app/styleguide/button/_button.scss
@@ -130,7 +130,7 @@ $button-icon-focus-color: $button-focus-color;
         background-color: $button-active-color-alt;
       }
 
-      & .Ripple {
+      & .wsk-ripple {
         background: $button-ripple-color-alt;
       }
     }
@@ -195,7 +195,7 @@ $button-icon-focus-color: $button-focus-color;
         background-color: $button-fab-active-color-alt;
       }
 
-      & .Ripple {
+      & .wsk-ripple {
         background: $button-ripple-color-alt;
       }
     }
@@ -240,7 +240,7 @@ $button-icon-focus-color: $button-focus-color;
     z-index: 0;
     overflow: hidden;
 
-    .wsk-button[disabled] & .Ripple {
+    .wsk-button[disabled] & .wsk-ripple {
       background-color: transparent;
     }
   }
diff --git a/app/styleguide/button/button.js b/app/styleguide/button/button.js
index d469160a..81996aa7 100644
--- a/app/styleguide/button/button.js
+++ b/app/styleguide/button/button.js
@@ -10,11 +10,11 @@ window.addEventListener('load', function() {
   for (var i = 0; i < buttonElements.length; i++) {
     var buttonElement = buttonElements[i];
     var blurHandler = blurHandlerGenerator(buttonElement);
-    if (buttonElement.classList.contains('RippleEffect')) {
+    if (buttonElement.classList.contains('wsk-js-ripple-effect')) {
       var rippleContainer = document.createElement('span');
       rippleContainer.classList.add('wsk-button__ripple-container');
       var ripple = document.createElement('span');
-      ripple.classList.add('Ripple');
+      ripple.classList.add('wsk-ripple');
       rippleContainer.appendChild(ripple);
       ripple.addEventListener('mouseup', blurHandler);
       buttonElement.appendChild(rippleContainer);
diff --git a/app/styleguide/button/demo.html b/app/styleguide/button/demo.html
index e575ef7d..22b26337 100644
--- a/app/styleguide/button/demo.html
+++ b/app/styleguide/button/demo.html
@@ -22,10 +22,10 @@
 
     <h2>With Ripples</h2>
 
-    <div class="button-block">Flat: <button class="wsk-button wsk-js-button RippleEffect">Flat</button></div>
-    <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised RippleEffect">Raised</button></div>
-    <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab RippleEffect">♥</button></div>
-    <div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon RippleEffect">♥</button></div>
+    <div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect">Flat</button></div>
+    <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect">Raised</button></div>
+    <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect">♥</button></div>
+    <div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect">♥</button></div>
 
     <h2>.wsk-button--colored</h2>
 
@@ -35,20 +35,20 @@
 
     <h2>With Ripples</h2>
 
-    <div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-button--colored RippleEffect">Flat</button></div>
-    <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored RippleEffect">Raised</button></div>
-    <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored RippleEffect">♥</button></div>
+    <div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-button--colored wsk-js-ripple-effect">Flat</button></div>
+    <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-button--colored wsk-js-ripple-effect">Raised</button></div>
+    <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-js-ripple-effect">♥</button></div>
 
     <h2>.wsk-button--mini-fab</h2>
 
-    <div class="button-block"><button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab RippleEffect">♥</button></div>
+    <div class="button-block"><button class="wsk-button wsk-js-button wsk-button--fab wsk-button--colored wsk-button--mini-fab wsk-js-ripple-effect">♥</button></div>
 
     <h2>Disabled</h2>
 
-    <div class="button-block">Flat: <button class="wsk-button wsk-js-button RippleEffect" disabled>Flat</button></div>
-    <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised RippleEffect" disabled>Raised</button></div>
-    <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab RippleEffect" disabled>♥</button></div>
-    <div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon RippleEffect" disabled>♥</button></div>
+    <div class="button-block">Flat: <button class="wsk-button wsk-js-button wsk-js-ripple-effect" disabled>Flat</button></div>
+    <div class="button-block">Raised: <button class="wsk-button wsk-js-button wsk-button--raised wsk-js-ripple-effect" disabled>Raised</button></div>
+    <div class="button-block">FAB: <button class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect" disabled>♥</button></div>
+    <div class="button-block">Icon: <button class="wsk-button wsk-js-button wsk-button--icon wsk-js-ripple-effect" disabled>♥</button></div>
   </div>
     <!-- build:js(app/styleguide/button/) ../../scripts/main.min.js -->
     <script src="button.js"></script>
diff --git a/app/styleguide/checkbox/_checkbox.scss b/app/styleguide/checkbox/_checkbox.scss
index cd569d45..120d7873 100644
--- a/app/styleguide/checkbox/_checkbox.scss
+++ b/app/styleguide/checkbox/_checkbox.scss
@@ -58,7 +58,7 @@ $checkboxColor: nth($primaryPalette, 6);
   -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
 }
 
-.Checkbox-rippleContainer .Ripple {
+.Checkbox-rippleContainer .wsk-ripple {
   background: $checkboxColor;
 }
 
diff --git a/app/styleguide/checkbox/checkbox.js b/app/styleguide/checkbox/checkbox.js
index f5082ac6..2debd255 100644
--- a/app/styleguide/checkbox/checkbox.js
+++ b/app/styleguide/checkbox/checkbox.js
@@ -14,14 +14,14 @@ function Checkbox(l) {
   var fakeCheckbox = document.createElement('span');
   fakeCheckbox.classList.add('Checkbox');
   fakeCheckbox.tabIndex = 0;
-  if (checkboxElement.classList.contains('RippleEffect')) {
-    checkboxElement.classList.add('RippleEffect--recentering');
+  if (checkboxElement.classList.contains('wsk-js-ripple-effect')) {
+    checkboxElement.classList.add('wsk-ripple--recentering');
     var rippleContainer = document.createElement('span');
     rippleContainer.classList.add('Checkbox-rippleContainer');
-    rippleContainer.classList.add('RippleEffect');
-    rippleContainer.classList.add('RippleEffect--recentering');
+    rippleContainer.classList.add('wsk-js-ripple-effect');
+    rippleContainer.classList.add('wsk-ripple--recentering');
     var ripple = document.createElement('span');
-    ripple.classList.add('Ripple');
+    ripple.classList.add('wsk-ripple');
 
     rippleContainer.appendChild(ripple);
     labelElement.insertBefore(rippleContainer,
diff --git a/app/styleguide/checkbox/demo.html b/app/styleguide/checkbox/demo.html
index 18505bd2..aecbe583 100644
--- a/app/styleguide/checkbox/demo.html
+++ b/app/styleguide/checkbox/demo.html
@@ -15,16 +15,16 @@
 
   <div class="preview-block">
 
-  <input type="checkbox" id="checkbox-1" class="Checkbox RippleEffect" />
+  <input type="checkbox" id="checkbox-1" class="Checkbox wsk-js-ripple-effect" />
   <label class="Checkbox-label" for="checkbox-1">Check me out</label>
 
-  <input type="checkbox" id="checkbox-2" class="Checkbox RippleEffect" />
+  <input type="checkbox" id="checkbox-2" class="Checkbox wsk-js-ripple-effect" />
   <label class="Checkbox-label" for="checkbox-2">I'm just a Material girl in a Material world</label>
 
-  <input type="checkbox" id="checkbox-3" class="Checkbox RippleEffect" />
+  <input type="checkbox" id="checkbox-3" class="Checkbox wsk-js-ripple-effect" />
   <label class="Checkbox-label" for="checkbox-3">But I work in all browsers</label>
 
-  <input type="checkbox" id="checkbox-4" class="Checkbox RippleEffect" />
+  <input type="checkbox" id="checkbox-4" class="Checkbox wsk-js-ripple-effect" />
   <label class="Checkbox-label" for="checkbox-4">Try using checkboxes</label>
 
   </div>
diff --git a/app/styleguide/dropdown-menu/demo.html b/app/styleguide/dropdown-menu/demo.html
index 9b308a3d..529c7a0b 100644
--- a/app/styleguide/dropdown-menu/demo.html
+++ b/app/styleguide/dropdown-menu/demo.html
@@ -15,12 +15,12 @@
   <body>
 
   <div class="preview-block">
-    
+
     <ul class="DropdownMenu">
-      <button class="PaperItem RippleEffect">5.0 Lollipop</button>
-      <button class="PaperItem RippleEffect">4.4 KitKat</button>
-      <button disabled class="PaperItem RippleEffect">4.3 Jelly Bean</button>
-      <button class="PaperItem RippleEffect">Android History</button>
+      <button class="PaperItem wsk-js-ripple-effect">5.0 Lollipop</button>
+      <button class="PaperItem wsk-js-ripple-effect">4.4 KitKat</button>
+      <button disabled class="PaperItem wsk-js-ripple-effect">4.3 Jelly Bean</button>
+      <button class="PaperItem wsk-js-ripple-effect">Android History</button>
     </ul>
 
   </div>
diff --git a/app/styleguide/item/demo.html b/app/styleguide/item/demo.html
index 766a8da3..a206c6cf 100644
--- a/app/styleguide/item/demo.html
+++ b/app/styleguide/item/demo.html
@@ -15,15 +15,15 @@
   <body>
 
   <div class="preview-block">
-    
-    <button class="PaperItem RippleEffect">Australia</button>
-    <button class="PaperItem RippleEffect">Canada</button>
-    <button disabled class="PaperItem RippleEffect">United States of America</button>
-    <button class="PaperItem RippleEffect">United Kingdom</button>
+
+    <button class="PaperItem wsk-js-ripple-effect">Australia</button>
+    <button class="PaperItem wsk-js-ripple-effect">Canada</button>
+    <button disabled class="PaperItem wsk-js-ripple-effect">United States of America</button>
+    <button class="PaperItem wsk-js-ripple-effect">United Kingdom</button>
 
     <br />
 
-    <a href="#" class="PaperItem RippleEffect">Web Starter Kit</a>
+    <a href="#" class="PaperItem wsk-js-ripple-effect">Web Starter Kit</a>
 
   </div>
 
diff --git a/app/styleguide/item/item.js b/app/styleguide/item/item.js
index 5b8f5e0d..d43f476a 100644
--- a/app/styleguide/item/item.js
+++ b/app/styleguide/item/item.js
@@ -2,12 +2,12 @@
 
 window.addEventListener('load', function() {
   var itemElementsWithRipples =
-      document.querySelectorAll('.PaperItem.RippleEffect');
+      document.querySelectorAll('.PaperItem.wsk-js-ripple-effect');
   for (var i = 0; i < itemElementsWithRipples.length; i++) {
     var rippleContainer = document.createElement('span');
     rippleContainer.classList.add('PaperItem-rippleContainer');
     var ripple = document.createElement('span');
-    ripple.classList.add('Ripple');
+    ripple.classList.add('wsk-ripple');
     rippleContainer.appendChild(ripple);
     itemElementsWithRipples[i].appendChild(rippleContainer);
   }
diff --git a/app/styleguide/radio/_radio.scss b/app/styleguide/radio/_radio.scss
index 21eb878f..04542532 100644
--- a/app/styleguide/radio/_radio.scss
+++ b/app/styleguide/radio/_radio.scss
@@ -87,7 +87,7 @@ $radio-ripple-size: 42px;
   overflow: hidden;
   -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
 
-  & .Ripple {
+  & .wsk-ripple {
     background: $radio-color;
   }
 }
diff --git a/app/styleguide/radio/demo.html b/app/styleguide/radio/demo.html
index 39c14229..2cc5c2d1 100644
--- a/app/styleguide/radio/demo.html
+++ b/app/styleguide/radio/demo.html
@@ -17,17 +17,17 @@
 
   <section class="preview-block">
     <label class="wsk-radio-button__label">
-      <input type="radio" class="wsk-radio-button RippleEffect" name="wifi[]" value="1" checked />
+      <input type="radio" class="wsk-radio-button wsk-js-ripple-effect" name="wifi[]" value="1" checked />
       Always
     </label>
 
     <label class="wsk-radio-button__label">
-      <input type="radio" class="wsk-radio-button RippleEffect" name="wifi[]" value="2" />
+      <input type="radio" class="wsk-radio-button wsk-js-ripple-effect" name="wifi[]" value="2" />
       Only when plugged in
     </label>
 
     <label class="wsk-radio-button__label">
-      <input type="radio" class="wsk-radio-button RippleEffect" name="wifi[]" value="3" />
+      <input type="radio" class="wsk-radio-button wsk-js-ripple-effect" name="wifi[]" value="3" />
       Never
     </label>
   </section>
diff --git a/app/styleguide/radio/radio.js b/app/styleguide/radio/radio.js
index 8d68544e..f64a049d 100644
--- a/app/styleguide/radio/radio.js
+++ b/app/styleguide/radio/radio.js
@@ -10,15 +10,15 @@ function RadioButton(btnElement, labelElement) {
   labelElement.insertBefore(outerCircle, btnElement);
   labelElement.appendChild(innerCircle);
 
-  if (btnElement.classList.contains('RippleEffect')) {
-    btnElement.classList.add('RippleEffect--recentering');
+  if (btnElement.classList.contains('wsk-js-ripple-effect')) {
+    btnElement.classList.add('wsk-ripple--recentering');
     var rippleContainer = document.createElement('span');
     rippleContainer.classList.add('wsk-radio-button__ripple-container');
-    rippleContainer.classList.add('RippleEffect');
-    rippleContainer.classList.add('RippleEffect--recentering');
+    rippleContainer.classList.add('wsk-js-ripple-effect');
+    rippleContainer.classList.add('wsk-ripple--recentering');
 
     var ripple = document.createElement('span');
-    ripple.classList.add('Ripple');
+    ripple.classList.add('wsk-ripple');
 
     rippleContainer.appendChild(ripple);
     labelElement.appendChild(rippleContainer);
diff --git a/app/styleguide/ripple/_ripple.scss b/app/styleguide/ripple/_ripple.scss
index 2a53d38f..8a512cb1 100644
--- a/app/styleguide/ripple/_ripple.scss
+++ b/app/styleguide/ripple/_ripple.scss
@@ -1,10 +1,9 @@
 @import "../palette/palette";
 @import "../animation/animation";
 
-// Ripple Color
 $ripple-bg-color: nth($paletteGrey, 10);
 
-.Ripple {
+.wsk-ripple {
   background       : $ripple-bg-color;
   border-radius    : 50%;
   height           : 50px;
@@ -15,12 +14,12 @@ $ripple-bg-color: nth($paletteGrey, 10);
   top              : 0;
   transform        : translate(-50%, -50%);
   width            : 50px;
-  overflow: hidden;
-}
+  overflow         : hidden;
 
-.Ripple.is-animating {
-  transition        : transform 0.6s $animation-curve-linear-out-slow-in,
-                      width 0.6s $animation-curve-linear-out-slow-in,
-                      height 0.6s $animation-curve-linear-out-slow-in,
-                      opacity 0.6s $animation-curve-linear-out-slow-in;
+  &.is-animating {
+    transition: transform 0.6s $animation-curve-linear-out-slow-in,
+    width 0.6s $animation-curve-linear-out-slow-in,
+    height 0.6s $animation-curve-linear-out-slow-in,
+    opacity 0.6s $animation-curve-linear-out-slow-in;
+  }
 }
diff --git a/app/styleguide/ripple/ripple.js b/app/styleguide/ripple/ripple.js
index ae40a4d5..c21ed863 100644
--- a/app/styleguide/ripple/ripple.js
+++ b/app/styleguide/ripple/ripple.js
@@ -2,7 +2,7 @@
 
 function RippleOwner(el, recentering) {
   var parentElement = el;
-  var rippleElement = parentElement.querySelector('.Ripple');
+  var rippleElement = parentElement.querySelector('.wsk-ripple');
   var frameCount = 0;
   var rippleSize;
   var x;
@@ -118,11 +118,11 @@ RippleOwner.prototype.downHandler = function(evt) {
 };
 
 window.addEventListener('load', function() {
-  var rippleElements = document.querySelectorAll('.RippleEffect');
+  var rippleElements = document.querySelectorAll('.wsk-js-ripple-effect');
   for (var i = 0; i < rippleElements.length; i++) {
     var rippleElement = rippleElements[i];
     var recentering =
-        rippleElement.classList.contains('RippleEffect--recentering');
+        rippleElement.classList.contains('wsk-ripple--recentering');
     new RippleOwner(rippleElement, recentering);
   }
 });
diff --git a/app/styleguide/textfield/_textfield.scss b/app/styleguide/textfield/_textfield.scss
index 76004456..66906570 100644
--- a/app/styleguide/textfield/_textfield.scss
+++ b/app/styleguide/textfield/_textfield.scss
@@ -140,7 +140,7 @@ $input-text-expandable-search-icon-highlight-color: $input-text-highlight-color;
   display  : inline-block;
 
   // Safari (possibly others) need to be convinced that this field is actually
-  // visible, otherwise it cannot be tabbed to nor focused via a <label>. 
+  // visible, otherwise it cannot be tabbed to nor focused via a <label>.
   // TODO: In some cases (Retina displays), this is big enough to render the
   // inner element :(
   max-width: 0.1px;
@@ -152,7 +152,7 @@ $input-text-expandable-search-icon-highlight-color: $input-text-highlight-color;
   // in many browsers (Chrome, Firefox) only animates the inner visual style
   // of the input - the outer bounding box still 'jumps'.
   // Thus assume a sensible maximum, and animate to/from that value.
-  max-width: 600px;  
+  max-width: 600px;
 }
 
 .wsk-textfield-expandable-icon {
@@ -166,7 +166,7 @@ $input-text-expandable-search-icon-highlight-color: $input-text-highlight-color;
 
 .wsk-textfield-expandable-icon:hover {
   border-color: $input-text-expandable-search-icon-highlight-color;
-  cursor      : pointer;  
+  cursor      : pointer;
 }
 
 .wsk-textfield-expandable-icon .wsk-textfield-expandable-icon-search {
@@ -210,7 +210,7 @@ $input-text-expandable-search-icon-highlight-color: $input-text-highlight-color;
   -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
 }
 
-.wsk-textfield-expandable-icon__ripple__container .Ripple {
+.wsk-textfield-expandable-icon__ripple__container .wsk-ripple {
   background: $input-text-expandable-search-icon-highlight-color;
 }
 
diff --git a/app/styleguide/textfield/demo.html b/app/styleguide/textfield/demo.html
index 08bf8fc1..ccb9fc98 100644
--- a/app/styleguide/textfield/demo.html
+++ b/app/styleguide/textfield/demo.html
@@ -34,7 +34,7 @@
 
       <div class="wsk-input">
         <input class="wsk-textfield wsk-js-textfield wsk-textfield--floating-label" type="text" name="sample" />
-        <label for="sample">Text Input</label>
+        <label class="wsk-label" for="sample">Text Input</label>
       </div>
 
       <div class="wsk-input">
diff --git a/app/styleguide/textfield/textfield.js b/app/styleguide/textfield/textfield.js
index 682f7a32..4378aeb0 100644
--- a/app/styleguide/textfield/textfield.js
+++ b/app/styleguide/textfield/textfield.js
@@ -44,12 +44,12 @@ function ExpandableIcon(iconElement) {
   var container = document.createElement('span');
   iconElement.appendChild(container);
 
-  container.classList.add('input__expandable__icon__ripple__container');
-  container.classList.add('RippleEffect');
-  container.classList.add('RippleEffect--recentering');
+  container.classList.add('wsk-textfield-expandable-icon__ripple__container');
+  container.classList.add('wsk-js-ripple-effect');
+  container.classList.add('wsk-ripple--recentering');
 
   var ripple = document.createElement('span');
-  ripple.classList.add('Ripple');
+  ripple.classList.add('wsk-ripple');
   container.appendChild(ripple);
 }