Skip to content

[Emotion] Fix multiple css props not being properly cascaded/merged to child props#6239

Merged
chandlerprall merged 9 commits intoelastic:mainfrom
cee-chen:child-props-css
Sep 15, 2022
Merged

[Emotion] Fix multiple css props not being properly cascaded/merged to child props#6239
chandlerprall merged 9 commits intoelastic:mainfrom
cee-chen:child-props-css

Conversation

@cee-chen
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen commented Sep 15, 2022

Summary

See elastic/kibana#140706 (comment)

This PR fixes the css prop being passed to various child componentProps not correctly merging css. Apparently Emotion generally requires our css={} definition to come before the {...props} spread for it to be combined correctly.

Or in the case of EuiPageSection, it requires the concatenation to occur in our Emotion styles array declaration (I think because contentProps has no classNames on it).

NOTE:

  • ⚠️ This PR does not include components that were converted to Emotion after 64.x ⚠️
    • because this PR needs to be backported to the latest Kibana upgrade, I kept it limited to components converted in 64.0.0 and below
  • ⚠️ This PR does not include components that have not yet been converted to Emotion ⚠️
    • I plan on opening up a follow-up PR to add regression Jest tests for those components
  • ⚠️ This PR does not include EuiPopover's panelProps ⚠️
    • Because panelProps specifically excludes passing style. Still trying to figure out/think on how to ignore that, and it's getting late + I'm about to go on PTO so I figured I'd get this in sooner rather than later.

Checklist

@cee-chen cee-chen marked this pull request as ready for review September 15, 2022 06:21
@cee-chen
Copy link
Copy Markdown
Contributor Author

I'll be OOO until afternoon Pacific Time tomorrow. If this looks sane to folks feel free to merge/backport release this into 64.04 for elastic/kibana#140323. Otherwise I can do it when I get back

@kibanamachine
Copy link
Copy Markdown

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

Copy link
Copy Markdown
Contributor

@1Copenut 1Copenut left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your PR description is one I'm going to refer back to often. It defined the problem space perfectly, outlining that Emotion CSS must be defined before {...props} or the CSS won't merge correctly.

Commit 5f4af08 really helped me understand the intent.

The PR looks good to me. I'll wait to hear from one more reviewer before merging.

@1Copenut 1Copenut mentioned this pull request Sep 15, 2022
5 tasks
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM, pulled and verified the child prop assertion addition to shouldRenderCustomStyles

@chandlerprall chandlerprall merged commit 7f89bfe into elastic:main Sep 15, 2022
@cee-chen cee-chen deleted the child-props-css branch September 15, 2022 21:03
@kibanamachine
Copy link
Copy Markdown

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants