eui icon indicating copy to clipboard operation
eui copied to clipboard

[EuiCard & friends] Convert to Emotion

Open cchaos opened this issue 1 year ago • 4 comments

Note I didn't actually start anything new this week, I had done this conversion before going on vacation, I just forgot about it and didn't want to waste the effort 😆

Design update

There's been a updated design proposal in the Figma version for a long time (since Amsterdam style updates) that I've now included in this PR. It simplifies a lot of the original selectable card button code.

image

I left the de-selected button as text color instead of primary, but it's debatable and technically still customizable.

Code notes

  • Passes through paddingSize and display for some generated styles
  • Explicitely sets default padding to m and keeps m when betaBadge exists
  • Added progressive enhancement for :has() to propograte the outline to the whole card

Other updates

  • Added anchorProps to EuiToolTip and EuiBetaBadge to allow passing through more options like css
  • Added truncation to EuiBetaBadge and white background for hollow which aligns with basic EuiBadge styles
  • Fixed card top padding for badge which was always hard-coded, now it resizes with paddingSize

Checklist

  • [ ] Checked in both light and dark modes
  • [ ] Checked in mobile
  • [ ] Checked in Chrome, Safari, Edge, and Firefox
  • [ ] Props have proper autodocs and playground toggles
  • [ ] Added documentation
  • [ ] Checked Code Sandbox works for any docs examples
  • [ ] Added or updated jest and cypress tests
  • [ ] Checked for breaking changes and labeled appropriately
  • [ ] Checked for accessibility including keyboard-only and screenreader modes
  • [ ] Updated the Figma library counterpart
  • [ ] A changelog entry exists and is marked appropriately

cchaos avatar Aug 04 '22 19:08 cchaos

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

kibanamachine avatar Aug 04 '22 20:08 kibanamachine

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

kibanamachine avatar Aug 04 '22 21:08 kibanamachine

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

kibanamachine avatar Aug 04 '22 21:08 kibanamachine

Forgot to mark this as ready for review 😄

cchaos avatar Aug 08 '22 14:08 cchaos

❌ Author of the following commits did not sign a Contributor Agreement: b6d64f929b23f38a6d77e4704280b7d61410a933, 10a0fbeaa9be2ca9d5e1329a7b30c3cdd3b4b303, e7f1bf4c53977f65db839f5283c322aae8d8b737, bd0e60e8b81b8a5c16fcc3d6a33146acffa763ab, eaf4632a3ec5fab78720c7a187566cbf3464f651, 122ce69fb978e4948477abc2a93b1fb30ae79376, 0832a746f50e0027431fe005ebf7d6d6bb07141a, f962f5deda3470b60c06f2f6fc087cf94fdf4c52, 72900e74cb132c1627e27dd2f0e6f642cdf7b1ed, ebdb62fcf41b8fda111ec6cc47c138a90ec6ce8a

Please, read and sign the above mentioned agreement if you want to contribute to this project

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

kibanamachine avatar Aug 22 '22 16:08 kibanamachine