Ripple should be standalone component

[Garbee]

Currently the ripple effect is tightly bound to the other components using it, such as Radio and Button. This is because those other components are checking for the ripple js class, then creating the proper markup needed within themselves for it. Instead, the ripple component on its own should create the necessary markup in the container element. This will allow it to stand on its own for say, use in the navigation drawer on anchors.

Should be doable without breaking BC since the same class is currently required, we are just switching where the logic is done.

Files tied to creating the ripple container:

button.js
checkbox.js
icon-toggle.js
layout.js
menu.js
radio.js
switch.js
tabs.js

[Garbee]

Due to the scope of this problem and our lack of thorough testing for this functionality currently, I'm pushing this off to V2. We can clean it up as we are refactoring the components.

[chrisknost]

@Garbee

// Simple class to allow ripple animation to be standalone (e.g., a button) .ripple { position: absolute; background: rgba(200,200,200,.5); border-radius: 100%; transform: scale(0.2); opacity:0; pointer-events: none; -webkit-animation: ripple .8s ease-out; -moz-animation: ripple .8s ease-out; animation: ripple .8s ease-out; } // button ripple keyframes @-webkit-keyframes ripple { from { opacity:1; } to { transform: scale(2); opacity: 0; } }

@-moz-keyframes ripple { from { opacity:1; } to { transform: scale(2); opacity: 0; } }

@keyframes ripple { from { opacity:1; } to { transform: scale(2); opacity: 0; } }

[shenzhuxi]

"mdl-js-ripple-effect" was put in different places in "mdl-tabs__tab-bar" and "mdl-layout__tab-bar" examples here https://getmdl.io/components/index.html#layout-section/tabs. Is it because of the same reason?

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
      <div class="mdl-tabs__tab-bar">
          <a href="#starks-panel" class="mdl-tabs__tab is-active">Starks</a>

<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
          <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>