-
Notifications
You must be signed in to change notification settings - Fork 841
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.
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
[Emotion] Convert EuiHealth #5832
Conversation
Preview documentation changes for this PR: https://eui.elastic.co/pr_5832/ |
1 similar comment
Preview documentation changes for this PR: https://eui.elastic.co/pr_5832/ |
@breehall Do you mind taking a look and reviewing this PR? Thanks a million! 🙏 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great! One thing I noticed was when comparing the PR Preview of the EUI docs to the current version of EUI, the line height seems to be a tad bit smaller.
It looks like the line-height
in this PR is 1.4286rem, and in the current version of EUI it's 1.71429rem. This isn't a huge change, but I just wanted to bring it up just in case the change wasn't intended.
Ahh, thanks for catching this! I missed that the new @cchaos, do you mind chiming in here? Is setting line-height alongside font-size the correct approach, or should I opt to use |
I'm just going to go ahead and change |
4ac060c
to
7c68b07
Compare
Preview documentation changes for this PR: https://eui.elastic.co/pr_5832/ |
0f03e0f
to
882da2a
Compare
I totally misinterpreted what prod was doing with line-height. It looks like we should be keeping that in and using the new line height base determined by |
Preview documentation changes for this PR: https://eui.elastic.co/pr_5832/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me! ✨
Summary
Converts EuiHealth to CSS-in-JS and also removes the extra CSS text size modifier classes - I grepped through Kibana and confirmed that no tests are using said classes as hooks; only storybook snapshots will need to be updated.
Things to look out for when moving styles
- [ ] Anything in the backlog that could be a quick fix for that component?- [ ] Convert global Sass vars to JS version like sizing- [ ] Convert side specific padding, margin, and position to-inline
and-block
(Logical properties)- [ ] Reduce specificity where possible (usually by reducing class name chaining)- [ ] Usegap
property to add margin between items if using flex- [ ] Can any still existing.js
files be converted to TS?QA