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.

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

fix(button): stroked button crops applied badges #13912

Merged

Conversation

devversion
Copy link
Member

Since we hide overflow for stroked buttons in order to properly handle the border-radius for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the overflow: hidden and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep #13738 resolved, we ensure that the child elements fully cover the actual button element for the correct border radius.

Fixes #13909

Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep angular#13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes angular#13909
@devversion devversion added the target: patch This PR is targeted for the next patch release label Oct 31, 2018
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Oct 31, 2018
Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

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

LGTM, but I'm not sure whether we shouldn't defer it to a minor. AFAIK the change in overflow could have some layout implications.

@devversion
Copy link
Member Author

We added the overflow: hidden with 4cdf5ba, so I guess it's kind of like a revert for the next patch version.

Copy link
Member

@josephperrott josephperrott left a comment

Choose a reason for hiding this comment

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

LGTM

@josephperrott
Copy link
Member

I think it should be fine for this to be in patch

@josephperrott josephperrott added pr: lgtm action: merge The PR is ready for merge by the caretaker P2 The issue is important to a large percentage of users, with a workaround regression This issue is related to a regression labels Nov 1, 2018
@josephperrott
Copy link
Member

Looks like this actually fixes a regression caused in anchor buttons by #13745.

The vertical spacing was messed up by overflow: hidden on <a mat-stroked-button> elements.

@jelbourn jelbourn merged commit 4b431fe into angular:master Nov 1, 2018
@devversion devversion deleted the fix/button-stroked-clips-badges branch November 1, 2018 21:45
atscott pushed a commit to atscott/components that referenced this pull request Nov 5, 2018
Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep angular#13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes angular#13909
jelbourn pushed a commit that referenced this pull request Nov 6, 2018
Since we hide overflow for stroked buttons in order to properly handle the `border-radius` for the child ripple container and focus overlay, badges which are applied on the button will be clipped.

In order to fix this bug, we just remove the `overflow: hidden` and go back to the initial implemenation where the border radius is inherited for the child elements. Just to keep #13738 resolved, we ensure that the child elements fully cover the actual button element for the _correct_ border radius.

Fixes #13909
@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 10, 2019
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 regression This issue is related to a regression target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

mat-stroked-button with matBadge is cropped
5 participants