Proposal: Provide public access to a button's ripple

[willshowell]

Bug, feature request, or proposal:

Proposal

What is the proposed behavior?

Public access to the MdRipple within a button, nav-list-item, etc

What is the use-case or motivation?

I'd like to programmatically trigger a button's ripple to call attention to it. Under feature discovery, there is discussion of using ripples to guide users through flows: "Ripples guide users through subsequent steps".

Currently, there is no good way (if any?) to access the button's ripple. I suppose I could create a new rippled component and position and mask it correctly, but that seems needlessly complex.

[devversion]

Thinking about a good way to expose the ripple instance.. Any ideas already?

[willshowell]

Why not just a public @ViewChild(MdRipple) in button.ts?

[devversion]

Hm yeah. We might be able to just make that public. For most of the components like md-slide-toggle, md-checkbox and md-radio we already have a reference to the MdRipple directive.

Need to discuss this first with @jelbourn. Not sure if we should expose the underlying ripple instance.

[jelbourn]

The launch method on MdRipple doesn't exactly have an API that would make it easy to say something like button.ripple.launch(). If we were going to expose the instance, I'd want to have a simpler user-facing API.

[devversion]

Basically for components like the slide-toggle, radio etc. we provide a ripple config that will be used when calling slide-toggle.ripple.launch().

For buttons it will be a bit more weird because the ripples don't launch from the center.

[willshowell]

I think I see the difficulty. With a normal button, if you just used launch() it would render from the top left of the viewport and only barely show up within the button's bounds.

It would seem ideal to be able to pass an override config through launch() that would merge with the preexisting config:

this.button.ripple.launch(0, 0, { centered: true });

Overall, I agree with @jelbourn that the api could/should be simplified. It isn't exactly clear how pageX, pageY, and centered all interact, and it doesn't seem like there's a good way to trigger a ripple from, say, the bottom left corner of a component.

[devversion]

@willshowell Exactly, the ripple would render from the top-left.

And regarding positioning, I personally think that such positioning stuff shouldn't be part of the ripple service. The service was designed to be very low-level since it is mostly used internal.

What I think would be a better way, is like a TypeScript mixin (e.g #3944) that will provide a custom launchRipple method on the button.

This mixin could be responsible for more API-friendly ways of launching ripples on a component.

Although I still don't think that we should provide APIs for bottom-left, bottom-right etc. positions.

[willshowell]

Big fan of the mixins idea!