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(alert): ensure border-radius
is consistent for prescribed slots
#6368
fix(alert): ensure border-radius
is consistent for prescribed slots
#6368
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Other than a small comment, this LGTM! 🚀
@@ -398,7 +398,7 @@ export class Alert implements OpenCloseComponent, LoadableComponent, T9nComponen | |||
@State() queued = false; | |||
|
|||
/** the close button element */ | |||
private closeButton?: HTMLButtonElement; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is fine for now, but for the future, let's keep these cleanup changes separate unless the code specific PR changes require a refactor or if it's in the modified line vicinity. Reasoning: there are no additional changes here that relevant to the PR.
@Elijbet I forgot to add, can you revisit the PR title to summarize the changes from a consumer perspective (i.e., what does this fix for users)? |
border-radius
border-radius
border-radius
was fixed
border-radius
was fixedborder-radius
is consistent for prescribed slots
border-radius
is consistent for prescribed slotsborder-radius
is consistent for prescribed slots
Related Issue: #6348
Summary
The bottom left corner radius was missing when the icon was present. Upon inspection, it was clear that slots added around content don't have the proper radius set and end up covering the radius on the host. For each occasion the slot is placed against either end of the host, I adjusted the relevant radius to match the host container.
Because the close button is now always present, the cases addressed are the right side of the close button and the left side of the content (no icon) along with the left side of the icon (when placed in front of the content).
Added a screenshot for the radius with options where
icon
is present and absent.