[Feature Request] Ripple effect should be self-sufficient

[nickretallack]

I tried to put an mdl-js-ripple-effect on a mdl-navigation__link but it just threw an error:

Uncaught TypeError: Cannot read property 'classList' of null

I'm having trouble inserting break points into the minified code to find out why. Anyway, it'd be nice if ink effects could work on arbitrary divs. Or at least if they would support mdl-navigation__link like they do the very similar mdl-menu__item

[nickretallack]

I found a simple way to get it to work. Check it out. All you have to do is make the element positioned, give it overflow:hidden, and put a <span class="mdl-ripple"/> inside of it. This would be a great default behavior for mdl-js-ripple-effect if it can't find the mdl-ripple element it's looking for.

[Garbee]

I think this is more a problem with the ripple component not being built to stand by itself.

The button JS handles setting up the ripple effect for itself for example. Ideally, this logic should be handled within the ripple JS so you can just toss it into anything and it would work.

I think this is an artifact from the WSK library setup. We can document what is needed for the ripple element now, but fixing it properly may not be possible until the next major.

[kctang]

@nickretallack thanks for the tip! works great.

[traviskaufman]

Closing; superseded by #4467

The v2 ripple will be much more self-contained than v1, and any limitations on where it can be placed within the DOM will be well documented.

We are still in the very early stages of v2 and are currently working towards an alpha. Our master branch is where all v2 work is happening if you are interested in keeping up with its progress. 😄