Rmwc: ToolbarIcon with ripple effect

[kctang]

Hi! I noticed that toolbar icons is without the ripple effect. This seems to be consistent with MWC's demo but is not feels strange.

Additional findings:

• There are discussion to implement ripple from MWC - material-components/material-components-web#993.
• Found a demo that implemented the toolbar with ripple buttons.

Tried:

• Wrapping <ToolbarIcon use="save" /> with <Ripple />.
• Using data-mdc-auto-init="MDCRipple".

...but it does not produce the desired effect, probably because I am not familiar with MWC. Can you provide some guidance how I can have this effect now using <Toolbar> as it is clearly do-able from this demo site.

Thanks!

[jamesmfriedman]

I'm sure theres a way. At a quick glance though, they're using something else to do the ripple that is not part of material-components-web. Check the chrome inspector and you'll see a mat- class instead of mdc

[izakfilmalter]

@kctang I have been using the icon button instead.

[jamesmfriedman]

Bad news @izakfilmalter, I removed it since it was non-standard and forced me to inline a bunch of styles. I'm polishing up V1 right now. Either way, shouldn't be hard to replicate.

[jamesmfriedman]

@kctang, the short answer is material-components-web doesn't have ripple effects for menu icons yet, but I created a sandbox to show you a few hacks you could use.

Basically, you can use the IconToggle, or wrap the buttons in a ripple and adjust the styles until they look normal.
https://codesandbox.io/s/2xp677qxyy

[kctang]

@jamesmfriedman You're awesome!

[theophanemayaud]

I think the problem from material-components-web is referenced here since december 2016... :
https://github.com/material-components/material-components-web/issues/12

Thanks @jamesmfriedman for the examples on how to shortcut the implementation from MCW, but wouldn't it be cleaner to restore the icon button and have it as "while waiting from MCW" ?
Also, you closed this because it's only a problem from MCW, but where can we reference to implement it once MCW has it ? :)

[jamesmfriedman]

We're maintaining RMWC as unopinionated. Specifically, RMWC does not ship with styles. Since the non-standard icon button required styles and it wasn't standard, it was removed :). It's relatively easy to create that in your own app if it's something you want to use, and the code is still available in the git history.