Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ink ripple inconsistent with material design spec (?) #1434

Closed
rosslavery opened this issue Oct 5, 2016 · 6 comments
Closed

Ink ripple inconsistent with material design spec (?) #1434

rosslavery opened this issue Oct 5, 2016 · 6 comments

Comments

@rosslavery
Copy link

rosslavery commented Oct 5, 2016 •
edited
Loading

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Ink ripples in previous material design implementations trigger the effect on mousedown, rather than mouseup.

What is the current behavior?

The effect is only triggered on mouse up, which is far less noticable than prior implementations.

What are the steps to reproduce?

Material2 demo from the PR that added ripples to buttons: https://dozingcat-material2.firebaseapp.com/button
Material1 demo: https://material.angularjs.org/latest/demo/button

Click the buttons to see the difference. Click and hold your mouse button to make the difference more obvious.

What is the use-case or motivation for changing an existing behavior?

Consistency with the spec.

Which versions of Angular, Material, OS, browsers are affected?

All?
@jelbourn
Copy link
Member

jelbourn commented Oct 5, 2016

We worked directly with the Material Design spec folks on this one and their direction was that the ripple is supposed to trigger on the down and not the up.

@jelbourn jelbourn closed this as completed Oct 5, 2016
@rosslavery
Copy link
Author

rosslavery commented Oct 5, 2016 •
edited
Loading

Hi Jeremy,

I apologize, but I typoed in my original bug report (now corrected). What I meant to say is that the ripples are only being triggered on mouseup, not down. Thus, they are behaving incorrectly according to your comment.

Sorry for the confusion, but check out the two demos and you'll see what I mean.

@jelbourn
Copy link
Member

jelbourn commented Oct 6, 2016

Ah, I was just going based on what you wrote 😄 ; my recollection was that the Material Design person we consulted with gave direction that ours should be the way it is (I just didn't remember which was which).

@traviskaufman will have the definitive answer for this

@rosslavery
Copy link
Author

Gotcha. Most implementations I've seen are consistent with the mousedown approach (Angular 1 Material, Polymer, etc.)

Interested in the official response though!

@rosslavery
Copy link
Author

Not to sound like a broken record, but that the ink ripples still don't appear to match the spec (using beta 10).

In fact, the readme for md-ripple actually specifies:

By default, a ripple is activated when the host element of the md-ripple directive receives mouse or touch events. On a mousedown or touch start, the ripple background fades in.

devversion added a commit to devversion/material2 that referenced this issue Jan 29, 2017
@devversion
fix(ripple): make ripples conform with specs
aa404c5 
This makes the ripple service conform with the specifications and other Material reference implementations.

See https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move

This means the following:

 * Ripples now trigger on `mousedown`
 * Ripples now persists as long as the element is being hold.
 * No longer adds an unnecessary background ripple.
 * Removes the ugly `scale(0.00001)` for ripple animations

Not only visually the ripple has been changed. The whole renderer has been rewritten and now has a very simple API, that can be easily used by developers.

References angular#1434
@devversion devversion mentioned this issue Jan 29, 2017
Merged
devversion added a commit to devversion/material2 that referenced this issue Jan 31, 2017
@devversion
fix(ripple): make ripples conform with specs
36b5e41 
This makes the ripple service conform with the specifications and other Material reference implementations.

See https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move

This means the following:

 * Ripples now trigger on `mousedown`
 * Ripples now persists as long as the element is being hold.
 * No longer adds an unnecessary background ripple.
 * Removes the ugly `scale(0.00001)` for ripple animations

Not only visually the ripple has been changed. The whole renderer has been rewritten and now has a very simple API, that can be easily used by developers.

References angular#1434
devversion added a commit to devversion/material2 that referenced this issue Feb 3, 2017
@devversion
fix(ripple): make ripples conform with specs
250600a 
This makes the ripple service conform with the specifications and other Material reference implementations.

See https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move

This means the following:

 * Ripples now trigger on `mousedown`
 * Ripples now persists as long as the element is being hold.
 * No longer adds an unnecessary background ripple.
 * Removes the ugly `scale(0.00001)` for ripple animations

Not only visually the ripple has been changed. The whole renderer has been rewritten and now has a very simple API, that can be easily used by developers.

References angular#1434
devversion added a commit to devversion/material2 that referenced this issue Feb 9, 2017
@devversion
fix(ripple): make ripples conform with specs
59e8553 
This makes the ripple service conform with the specifications and other Material reference implementations.

See https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move

This means the following:

 * Ripples now trigger on `mousedown`
 * Ripples now persists as long as the element is being hold.
 * No longer adds an unnecessary background ripple.
 * Removes the ugly `scale(0.00001)` for ripple animations

Not only visually the ripple has been changed. The whole renderer has been rewritten and now has a very simple API, that can be easily used by developers.

References angular#1434
tinayuangao pushed a commit that referenced this issue Feb 10, 2017
@devversion @tinayuangao
fix(ripple): make ripples conform with specs (#2859)
6381948 
* fix(ripple): make ripples conform with specs

This makes the ripple service conform with the specifications and other Material reference implementations.

See https://material.io/guidelines/motion/material-motion.html#material-motion-how-does-material-move

This means the following:

 * Ripples now trigger on `mousedown`
 * Ripples now persists as long as the element is being hold.
 * No longer adds an unnecessary background ripple.
 * Removes the ugly `scale(0.00001)` for ripple animations

Not only visually the ripple has been changed. The whole renderer has been rewritten and now has a very simple API, that can be easily used by developers.

References #1434

* Fix linting and IE11 unsupported error

* Ensure style recalculation

* Address comments

* Address feedback

* Document that fade-out duration can't be modified through the speedFactor
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rosslavery @jelbourn