fix(material/button): increase touch target for icon buttons #30380
Conversation
essjay05
requested review from
crisbeto and
wagnermaciel
and removed request for
a team
Updates Angular Components Button styles for icon buttons to add pseudo class styles to increase the icon buttons' target size. Fixes b/378903269
essjay05
force-pushed
the
increase-icon-button-touch-target
branch
from
098a039 to
4051dd0
Compare
Updates previous fix to increasing Angular Components Icon Button by removing the pseudo class styles and targeting the correct class .mat-mdc-button-touch-target instead. Also, removes any redundant styles simplifies the necessary styles to increase the touch target.
|
|
||
| .mat-mdc-button-touch-target { | ||
| display: block; | ||
| opacity: 0; |
There was a problem hiding this comment.
This element is already transparent so I'm not sure what the opacity is doing here.
| } | ||
|
|
||
| .mat-mdc-button-touch-target { | ||
| display: block; |
There was a problem hiding this comment.
This is controlled through the touch-target-display token. The problem we had was that in some densities the buttons become too small and the touch targets overlap when icon buttons are next to each other. It might be better to tackle this through documentation than to increase the touch target.
There was a problem hiding this comment.
Hi @crisbeto! Noted! Thanks for the explanation. It looks like in the dev-app demo is where specifically that touch-target-display token seems to be applying the display: none and that in the actual XAP gallery that the touch target is already 48x48 and clickable outside the visual grey icon button. I'm closing this as WAI.
|
Closing because it looks like outside of dev-app the icon is WAI. Will make a separate document update to note/be aware of making icon button touch-target 48x48. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
2 participants
Updates Angular Components Button styles for icon buttons to add pseudo class styles to increase the icon buttons' target size.
Before screenshot
Updated after screenshot with refactor:
After screenshot
Fixes b/378903269