Skip to content

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