-
Notifications
You must be signed in to change notification settings - Fork 6.8k
fix(material/slide-toggle): increase slide toggle ripple touch target #31469
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.
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
base: main
Are you sure you want to change the base?
Conversation
Deployed dev-app for 01c65da to: https://ng-dev-previews-comp--pr-angular-components-31469-dev-xl6bs3gm.web.app Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt. |
-1: 36px, | ||
-2: 32px, | ||
-3: 28px, | ||
0: 48px, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think that this is the right way to solve the issue, it just makes the ripple larger and ripples are meant to be decorative. The way we handle the touch target in other components is to have a transparent div
that is always at least 48x48 and isn't affected by density. See .mat-mdc-radio-touch-target
as an example.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This was suggested by @andrewseguin actually instead of #31178.
I'll take a look at mat-mdc-radio-touch-target.
Another issue with increasing the ripple is it can add a scrollbar when the toggle is at the bottom, breaking quite a few screenshot tests.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that #31178 is the proper way to do it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That does actually look like a simpler and better solution that either of the others. Started at #31486.
No description provided.