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

[Amsterdam] Use rounded corners and bolder titles for EuiCallout #3557

Merged
merged 9 commits into from
Jun 8, 2020
Merged

[Amsterdam] Use rounded corners and bolder titles for EuiCallout #3557

merged 9 commits into from
Jun 8, 2020

Conversation

hbharding
Copy link
Contributor

@hbharding hbharding commented Jun 4, 2020 •
edited
Loading

Summary

Initial PR to update the styles for EuiCallout, per discussions we've been having in Figma.

What changed:

  • Rounded corners
  • Medium font weight for titles

Things to address in a different PR:

  • Add an onClose prop which conditionally renders a cross icon in the top right to dismiss the callout
  • Related to the line-height issue with EuiTitles, the default title size for callouts appears to be 21px but should be 24px.

Screenshots

"Before" screenshots

image

image

I made sure that EuiFlyout banners don't use rounded corners. Are there any other places like this I'm unaware of?
image

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in IE11 and Firefox
    - [ ] Props have proper autodocs
    - [ ] Added documentation examples
    - [ ] Added or updated jest tests
  • Checked for breaking changes and labeled appropriately
    - [ ] Checked for accessibility including keyboard-only and screenreader modes
  • A changelog entry exists and is marked appropriately

@hbharding hbharding requested review from cchaos and daveyholler June 4, 2020 20:23
@hbharding hbharding self-assigned this Jun 4, 2020
@hbharding hbharding changed the title [Amsterdam] Use rounded corners and bold titles [Amsterdam] Use rounded corners and bold titles for EuiCallout Jun 4, 2020
@johnbarrierwilson johnbarrierwilson mentioned this pull request Jun 4, 2020
Closed
@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3557/

daveyholler
daveyholler approved these changes Jun 4, 2020
View reviewed changes
Copy link
Contributor

@daveyholler daveyholler left a comment

Choose a reason for hiding this comment

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

LGTM 👍

cchaos
cchaos reviewed Jun 4, 2020
View reviewed changes
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

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.

src/themes/eui-amsterdam/overrides/_flyout.scss Outdated
Comment on lines 8 to 11
// Amsterdam Callouts use rounded corners by default, but we don't want to use them here
.euiFlyoutBody__banner .euiCallOut {
border-radius: 0;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

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".

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point, will add this.

@cchaos
Copy link
Contributor

cchaos commented Jun 5, 2020

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?

Screen Shot 2020-06-05 at 11 00 35 AM

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3557/

@hbharding
Copy link
Contributor Author

Perhaps we could reduce the default font weight to Medium, and then we can still support adding emphasis via <strong> tags in the title.

Bold + medium (Figma):
image

Default font weight medium:
image
image

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3557/

@hbharding hbharding changed the title [Amsterdam] Use rounded corners and bold titles for EuiCallout [Amsterdam] Use rounded corners and bolder titles for EuiCallout Jun 8, 2020
@hbharding hbharding requested a review from cchaos June 8, 2020 14:49
cchaos
cchaos approved these changes Jun 8, 2020
View reviewed changes
Copy link
Contributor

@cchaos cchaos left a comment

Choose a reason for hiding this comment

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

LGTM, just had a few nits that I'll commit for you directly

@kibanamachine
Copy link

Preview documentation changes for this PR: https://eui.elastic.co/pr_3557/

@hbharding hbharding merged commit ccb3e09 into master Jun 8, 2020
@cchaos cchaos deleted the amsterdam-callout-style branch June 9, 2020 16:40
@thompsongl thompsongl mentioned this pull request Jun 29, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cchaos cchaos cchaos approved these changes

@daveyholler daveyholler daveyholler approved these changes

Assignees

@hbharding hbharding

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@hbharding @kibanamachine @cchaos @daveyholler