[Amsterdam] Use rounded corners and bolder titles for EuiCallout#3557
[Amsterdam] Use rounded corners and bolder titles for EuiCallout#3557
Conversation
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3557/ |
cchaos
left a comment
There was a problem hiding this comment.
Seems to also be missing the changelog entry. Maybe forgot to push?
As a side-note, we recommend when creating PR's to fork the Repo and create a branch in your own fork. It helps maintain cleanliness in the master EUI repo.
| // Amsterdam Callouts use rounded corners by default, but we don't want to use them here | ||
| .euiFlyoutBody__banner .euiCallOut { | ||
| border-radius: 0; | ||
| } |
There was a problem hiding this comment.
I think this one can be added to the default theme. It won't really have an effect, but then it doesn't require an "override".
There was a problem hiding this comment.
Good point, will add this.
|
The one thing that I notice that we won't be able to do any more is something like this where we may need to emphasize a portion of the callout title. Thoughts?
|
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3557/ |
|
Perhaps we could reduce the default font weight to Medium, and then we can still support adding emphasis via Bold + medium (Figma): Default font weight medium: |
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3557/ |
cchaos
left a comment
There was a problem hiding this comment.
LGTM, just had a few nits that I'll commit for you directly
|
Preview documentation changes for this PR: https://eui.elastic.co/pr_3557/ |
Summary
Initial PR to update the styles for EuiCallout, per discussions we've been having in Figma.
What changed:
Things to address in a different PR:
onCloseprop which conditionally renders acrossicon in the top right to dismiss the callout21pxbut should be24px.Screenshots
"Before" screenshots
I made sure that EuiFlyout banners don't use rounded corners. Are there any other places like this I'm unaware of?
Checklist
- [ ] Props have proper autodocs- [ ] Added documentation examples- [ ] Added or updated jest tests- [ ] Checked for accessibility including keyboard-only and screenreader modes