google / google/material-design-lite
Radial action ripples appear for non-touch events
- Dominant language
- HTML
- Stars
- 32.2k
- Forks
- 4.9k
- PR merge metrics
- No merged PRs in 30d
Description
MDL version: 1.0.6
Browsers: Safari 9.0.1, Firefox 43.0.1, probably others
Operating system: Mac OS X
Operating system version: 10.9.5
URL, if applicable: http://www.getmdl.io/components/index.html#toggles-section
What steps will reproduce the problem:
1. Go to [the toggles demo page](http://www.getmdl.io/components/index.html#toggles-section)
2. Click any checkbox, radiobutton, or switch
3. Watch for the "radial reaction"
What is the expected result? On desktop browsers (can we detect that?), no "radial reaction".
What happens instead of that? I see a "radial reaction" on all browsers.
Please provide any other information below, and attach a screenshot if possible.
At the bottom of [this Material Design spec page](https://www.google.com/design/spec/components/selection-controls.html), it says:
> Use the outer radial reaction only on form factors that favor finger touch, where interaction may obstruct the element completely. For desktop usage with a mouse, you do not need this extra indication.
It's not entirely clear, but I assume this applies to all 3 toggles (checkbox, radiobutton, switch). In any case, it certainly applies to at least the "switch" control, where MDL displays it.
There's [a nifty animation here](https://cloud.githubusercontent.com/assets/234957/10579158/724c517e-766e-11e5-8348-366f830d36a7.gif) (from #1723) that shows this happening.
It only happens when you click on the checkbox itself, not the label.
Interestingly, the [Polymer project checkboxes](https://elements.polymer-project.org/elements/paper-checkbox?view=demo:demo/index.html) call this the "ripple effect", and have an attribute "noink" to disable it.
The [Material Design "Responsive Interaction" page](https://www.google.com/design/spec/animation/responsive-interaction.html) calls it the Touch Ripple (capitalized), and says it "articulates the method and duration of a touch event".
Contributor guide
Assessment
This issue has not been assessed yet.