Skip to content

[EuiComboBox] Center enter badge in option #5890

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
Merged
merged 4 commits into from
May 17, 2022
Merged

[EuiComboBox] Center enter badge in option #5890

merged 4 commits into from
May 17, 2022

Conversation

@claudia-correia
Copy link
Contributor

@claudia-correia claudia-correia commented May 10, 2022 •
edited by cee-chen
Loading

Summary

This PR centers the enter badge in the Combo Box option, by setting align-self to center, instead of flex-start. Because centering the badge would actually cause the badge to not be centered with smaller rowHeights, I also increased the default rowHeight to be 34.

This is the badge with a default rowHeight of 29, after setting align-self to center:

Screenshot 2022-05-10 at 12 40 08

I believe this can be caused by the margin being set to -4 for the EuiFlexGroup:

Screenshot 2022-05-10 at 12 39 54

This is the badge after changing the default rowHeight to 34:

Screenshot 2022-05-10 at 12 41 23

Closes #5873

Checklist

  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • A changelog entry exists and is marked appropriately

@claudia-correia claudia-correia requested a review from cee-chen May 10, 2022 14:14
@claudia-correia claudia-correia mentioned this pull request May 10, 2022
Closed
@kibanamachine
Copy link

kibanamachine commented May 10, 2022

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

@cchaos cchaos requested a review from elizabetdev May 10, 2022 15:48
@kibanamachine
Copy link

kibanamachine commented May 16, 2022

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

@claudia-correia claudia-correia marked this pull request as ready for review May 16, 2022 13:18
@kibanamachine
Copy link

kibanamachine commented May 16, 2022

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

@claudia-correia claudia-correia requested a review from cee-chen May 17, 2022 16:42
@kibanamachine
Copy link

kibanamachine commented May 17, 2022

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

cee-chen
cee-chen approved these changes May 17, 2022
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

This looks good to me - super happy we could fix it in ~2 lines of CSS! Since it's a CSS-only change, @miukimiu or @cchaos, do you want to review before merge?

elizabetdev
elizabetdev approved these changes May 17, 2022
View reviewed changes
Copy link
Contributor

@elizabetdev elizabetdev left a comment

Choose a reason for hiding this comment

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

Obrigada @claudia-correia! 🇵🇹

LGTM! 🎉

Tested in Chrome, Safari, Edge, and Firefox.

@cee-chen cee-chen merged commit f338de4 into elastic:main May 17, 2022
@breehall breehall mentioned this pull request May 18, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

2 more reviewers

@cee-chen cee-chen cee-chen approved these changes

@elizabetdev elizabetdev elizabetdev approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[EuiComboBox] Enter badge is not centered

4 participants

@claudia-correia @kibanamachine @cee-chen @elizabetdev