eui
eui copied to clipboard
[EuiCard & friends] Convert to Emotion
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.
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
anddisplay
for some generated styles - Explicitely sets default padding to
m
and keepsm
whenbetaBadge
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 likecss
- 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
Preview documentation changes for this PR: https://eui.elastic.co/pr_6110/
Preview documentation changes for this PR: https://eui.elastic.co/pr_6110/
Preview documentation changes for this PR: https://eui.elastic.co/pr_6110/
Forgot to mark this as ready for review 😄
❌ 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/