feat(framework-examples): Add ripple support to React checkbox example

[codesuki]

This will only work if the newest checkbox.css is available. So maybe should be merged after a new checkbox version is released (0.1.3?).

Also getMatchesProperty is not exported from Ripple. I might send another pull request since it looks very useful for implementing new components.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If you signed the CLA as a corporation, please let us know the company's name.

[codesuki]

I signed it!

[googlebot]

CLAs look good, thanks!

[traviskaufman]

Thanks for taking the initiative on this! Few changes needed but overall looks good.

[traviskaufman]

perhaps it would be better to call this rippleCss?

[traviskaufman]

what you actually want to check is that the input element is active, rather than the root. See #241

[codesuki]

Makes sense! I was wondering why it's the root. I was using the native js version that you fixed as my guide. Thanks for clearing that up.

[codesuki]

Thanks for the feedback! I'll have a look in about 40 minutes. I'll also reply to the other pullreq seems I messed something up there.

[codesuki]

Fixed!

I have a question about ripple. Maybe you can clear something up for me.
In #211 you are proposing to build a ripple component for each framework.
In general I agree with that and since I started to work on a React wrapper for this project I wanted to implement it correctly, but..

I figured out that the classes and CSS need to be set on the DOM element carrying the specific class like mdc-button, mdc-checkbox, or else it won't work. Which makes sense since they have support for the ripple effect in their CSS.
Maybe I just didn't have the right idea yet but that resulted in passing references which made the code really ugly.

<Ripple><Button/></Ripple>

Here ripple needs a ref of button and also needs to be able to set buttons className, but button is only available in this.props.children to ripple...
Anyway I don't want to go deeper into this here.

I tried using ripple-surface which didn't work at all.

Question 1:
Do you have an idea for a clean implementation of a react component?

Question 2:
Am I right saying that using ripple-surface would result in some generic ripple effect and we should use the proper mdc-button etc. classes to get the real effect?

For now I found it best to just implement the ripple inside the specific class like here:
https://github.com/codesuki/react-material-components/blob/initial/src/button/button.jsx

What do you think?

[traviskaufman]

@codesuki regarding your question,

You're totally right in that the ripple should be a part of a component, not something completely different. E.g. with buttons, a button component would manage a ripple as part of the component itself. This is how we approach it within MDC-Web, although for our components, we simply instruct users to attach a ripple to buttons. The reason for this is that our vanilla buttons require no javascript, so we didn't want to introduce a wrapper component simply to facilitate a ripple

For frameworks like React, JS is always required no matter what the component since it takes care of rendering the component DOM for the end user. In this case, you'll definitely want to manage the ripple within those components, as you've suggested. Perhaps using a higher-order function that creates a component with ripple capabilities would be a sound strategy?

[codesuki]

Thanks for clearing that up! Glad I am on the same page.
I was thinking about a higher order function.. maybe if the need arises I'll go with that.