eui icon indicating copy to clipboard operation
eui copied to clipboard

[Emotion] Convert EuiBadgeGroup, EuiBetaBadge, and EuiNotificationBadge

Open cee-chen opened this issue 3 years ago • 2 comments

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 -inline and -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 gap property 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 data attribute instead
  • [x] Delete any Amsterdam override .scss files
  • [x] Can any still existing .js files 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 nested childProps (e.g. tooltipProps, buttonProps)

cee-chen avatar Sep 21 '22 22:09 cee-chen

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 :)

cee-chen avatar Sep 21 '22 22:09 cee-chen

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

kibanamachine avatar Sep 21 '22 22:09 kibanamachine

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

kibanamachine avatar Sep 22 '22 17:09 kibanamachine

jenkins test this

elizabetdev avatar Sep 23 '22 15:09 elizabetdev

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

kibanamachine avatar Sep 23 '22 15:09 kibanamachine