eui
eui copied to clipboard
[Emotion] Convert EuiBadgeGroup, EuiBetaBadge, and EuiNotificationBadge
Summary
Follow up to #6224 - converts all remaining Sass in badge-adjacent components to Emotion. I recommend following along by commit and peeking at commit messages for more context.
Checklist
- [x] Checked in both light and dark modes
- [x] Checked in mobile
- [x] Checked in Chrome, Safari, Edge, and Firefox
- [x] Checked Code Sandbox works for any docs examples
- [x] Added or updated jest and cypress tests
- [x] A changelog entry exists and is marked appropriately
~- [ ] Props have proper autodocs and playground toggles~ ~- [ ] Added documentation~ ~- [ ] Checked for breaking changes and labeled appropriately~ ~- [ ] Checked for accessibility including keyboard-only and screenreader modes~ ~- [ ] Updated the Figma library counterpart~
Things to look out for when moving styles
- [x] Convert side specific padding, margin, and position to
-inlineand-block(Logical properties) - [x] Reduce specificity where possible (usually by reducing class name chaining)
- [x] All animations or transitions are wrapped in
euiCanAnimate - [x] Use
gapproperty to add margin between items if using flex - [x] Delete any className maps if not being used in Kibana. If used in Kibana, consider converting to a
dataattribute instead - [x] Delete any Amsterdam override .scss files
- [x] Can any still existing
.jsfiles be converted to TS? (e.g., docs files)
~- [ ] Anything in the backlog that could be a quick fix for that component?~ ~- [ ] Convert component-specific Sass vars to exported JS versions~ ~- [ ] Convert global Sass vars to JS version like sizing~
QA
- [x] Does the output CSS match the previous CSS / as expected
- [x] Does the rendered class read as expected
- [x]
shouldRenderCustomStyles()passes with parent component and any nestedchildProps(e.g.tooltipProps, buttonProps)
CCing @daveyholler in on this once, since he was pairing/following along as I worked on some of these - figured he might be curious to see the end result :)
Preview documentation changes for this PR: https://eui.elastic.co/pr_6258/
Preview documentation changes for this PR: https://eui.elastic.co/pr_6258/
jenkins test this
Preview documentation changes for this PR: https://eui.elastic.co/pr_6258/