Skip to content

Conversation

@crisbeto
Copy link
Member

@crisbeto crisbeto commented May 31, 2021

Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes #22799.

For reference, here's what the touch targets look like at different densities:
Angular_Material_-_Google_Chrome_2021-05-31_17-50-16
Angular_Material_-_Google_Chrome_2021-05-31_17-50-35
Angular_Material_-_Google_Chrome_2021-05-31_17-50-44
Angular_Material_-_Google_Chrome_2021-05-31_17-50-53

@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release labels May 31, 2021
@crisbeto crisbeto requested review from andrewseguin and mmalerba May 31, 2021 16:18
@google-cla google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label May 31, 2021
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mmalerba mmalerba added the action: merge The PR is ready for merge by the caretaker label Jun 1, 2021
Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes angular#22799.
@crisbeto crisbeto force-pushed the 22799/mdc-button-touch-target branch from 4cb4e30 to af46e74 Compare June 2, 2021 17:35
@andrewseguin andrewseguin merged commit 793e1f1 into angular:master Jun 7, 2021
andrewseguin pushed a commit that referenced this pull request Jun 7, 2021
Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes #22799.

(cherry picked from commit 793e1f1)
andrewseguin added a commit to andrewseguin/components that referenced this pull request Jun 8, 2021
andrewseguin added a commit that referenced this pull request Jun 9, 2021
andrewseguin added a commit that referenced this pull request Jun 9, 2021
crisbeto added a commit to crisbeto/material2 that referenced this pull request Jun 9, 2021
This is a reimplementation of angular#22846 which includes a fix for RTL layouts.

Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes angular#22799.
crisbeto added a commit to crisbeto/material2 that referenced this pull request Jun 9, 2021
This is a reimplementation of angular#22846 which includes a fix for RTL layouts.

Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes angular#22799.
wagnermaciel pushed a commit that referenced this pull request Jun 14, 2021
This is a reimplementation of #22846 which includes a fix for RTL layouts.

Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes #22799.
wagnermaciel pushed a commit that referenced this pull request Jun 14, 2021
This is a reimplementation of #22846 which includes a fix for RTL layouts.

Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes #22799.

(cherry picked from commit 3284496)
@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 Jul 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(material-experimental/mdc-button): should have 48px touch target at default density level

3 participants