PolymerElements / paper-icon-button

A Material Design icon button
https://www.webcomponents.org/element/PolymerElements/paper-icon-button
42 stars 44 forks source link

paper-icon-button tap/keydown ripple when focused is too light #110

Open mgiuffrida opened 7 years ago

mgiuffrida commented 7 years ago

Description

The paper-icon-button ripple when tapped (or activated via spacebar) is the same shade as its focus ripple.

Expected outcome

The ripple should presumably be darker, to match paper-button as well as paper-icon-button-light.

Actual outcome

The ripple is lighter than the other buttons' ripples. It doesn't differentiate between focus and pressing.

Live Demo

https://jsfiddle.net/37kmh427/

Steps to reproduce

  1. tap paper-icon-button; see light ripple
  2. tap paper-icon-button-light; see dark ripple
  3. tap paper-button; see dark ripple

Also:

  1. tab to paper-icon-button; see light ripple
  2. press : nothing changes visually
  3. tab to `paper-icon-button-light; see light ripple
  4. press : ripple darkens
  5. tab to paper-button; see no ripple
  6. press : dark ripple appears

Also:

  1. tab to paper-icon-button, then click and hold: ripple shimmers
  2. tab to paper-icon-button-light or paper-button, then click and hold: solid ripple remains for duration of mouse press

jsfiddle-opt

danbeam commented 7 years ago

@mgiuffrida: paper-icon-button-light lazily creates ripples. the lazily created ripple listens for the same events. so, if I understand correctly, the "dark" look is essentially double-handling events and double-showing partially opaque ripples.

I'm not sure this is intended.