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.

Sign up for GitHub

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

Jump to bottom

Mat Stroked Button - Issue - Ripple Border Radius #13738

Closed
Venipa opened this issue Oct 22, 2018 · 1 comment · Fixed by #13745
Closed

Mat Stroked Button - Issue - Ripple Border Radius #13738

Venipa opened this issue Oct 22, 2018 · 1 comment · Fixed by #13745
Assignees
@devversion
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Venipa
Copy link

Venipa commented Oct 22, 2018

Bug, feature request, or proposal:

image

What is the expected behavior?

filled ripple

What is the current behavior?

border radius higher then the button radius?

What are the steps to reproduce?

https://material.angular.io/components/button/examples
Stroked Buttons

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Chrome,
Edge

Is there anything else we should know?

After seeing such thing people cant ignore it, tho its a small issue there.
@devversion devversion self-assigned this Oct 22, 2018
@devversion devversion added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Oct 22, 2018
devversion added a commit to devversion/material2 that referenced this issue Oct 22, 2018
@devversion
fix(stroked-button): ripples and focus overlay have incorrect radius
b5597d4 
* Due to the fact that stroked buttons have a border that reduces the available space for child elements, the absolute positioned ripple container and focus overlay do not match the `border-radius` with the actual button element. In order to fix this in a non-breaking way, we just use `overflow: hidden` for stroked buttons as compared to just using `overflow: hidden` in general for buttons (like it has been done with angular#9424)

Fixes angular#13738
devversion added a commit to devversion/material2 that referenced this issue Oct 22, 2018
@devversion
fix(stroked-button): ripples and focus overlay have incorrect radius
3506c93 
* Due to the fact that stroked buttons have a border that reduces the available space for child elements, the absolute positioned ripple container and focus overlay do not match the `border-radius` with the actual button element. In order to fix this in a non-breaking way, we just use `overflow: hidden` for stroked buttons as compared to just using `overflow: hidden` in general for buttons (like it has been done with angular#9424)

Fixes angular#13738
@devversion devversion mentioned this issue Oct 22, 2018
Merged
mmalerba pushed a commit that referenced this issue Oct 23, 2018
@devversion @mmalerba
fix(stroked-button): ripples and focus overlay have incorrect radius (#…
4cdf5ba 
…13745)

Due to the fact that stroked buttons have a border that reduces the available space for child elements, the absolute positioned ripple container and focus overlay do not match the `border-radius` with the actual button element. 

In order to fix this in a non-breaking way, we just use `overflow: hidden` for stroked buttons as compared to just using `overflow: hidden` in general for buttons (like it has been done with #9424)

![image](https://user-images.githubusercontent.com/4987015/47302045-c5c32c00-d620-11e8-9d58-bc34b421943f.png)



Fixes #13738
mmalerba pushed a commit that referenced this issue Oct 23, 2018
@devversion @mmalerba
fix(stroked-button): ripples and focus overlay have incorrect radius (#…
7877404 
…13745)

Due to the fact that stroked buttons have a border that reduces the available space for child elements, the absolute positioned ripple container and focus overlay do not match the `border-radius` with the actual button element. 

In order to fix this in a non-breaking way, we just use `overflow: hidden` for stroked buttons as compared to just using `overflow: hidden` in general for buttons (like it has been done with #9424)

![image](https://user-images.githubusercontent.com/4987015/47302045-c5c32c00-d620-11e8-9d58-bc34b421943f.png)



Fixes #13738
devversion added a commit to devversion/material2 that referenced this issue Oct 31, 2018
@devversion
fix(button): stroked button crops applied badges
368e60d 
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 added a commit to devversion/material2 that referenced this issue Oct 31, 2018
@devversion
fix(button): stroked button crops applied badges
56fce6e 
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 mentioned this issue Oct 31, 2018
Merged
jelbourn pushed a commit that referenced this issue Nov 1, 2018
@devversion @jelbourn
fix(button): stroked button crops applied badges (#13912)
4b431fe 
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
atscott pushed a commit to atscott/components that referenced this issue Nov 5, 2018
@devversion @atscott
fix(button): stroked button crops applied badges (angular#13912)
360a47e 
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 issue Nov 6, 2018
@devversion @jelbourn
fix(button): stroked button crops applied badges (#13912)
835dc9e 
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 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(stroked-button): ripples and focus overlay have incorrect radius devversion/material2
2 participants
@devversion @Venipa