Skip to content

[CSS-in-JS] Add css to common props#6118

Merged
thompsongl merged 5 commits intoelastic:mainfrom
thompsongl:common-ts-css
Aug 11, 2022
Merged

[CSS-in-JS] Add css to common props#6118
thompsongl merged 5 commits intoelastic:mainfrom
thompsongl:common-ts-css

Conversation

@thompsongl
Copy link
Copy Markdown
Contributor

@thompsongl thompsongl commented Aug 9, 2022 •
edited
Loading

Summary

Added css prop to CommonProps interface. All components using the CommonProps interface can be styled with Emotion, but the babel plugin does not sufficiently cover cases like componentProps props that are not created with JSX. Extending CommonProps allows for broader support.

Checklist

  • Checked for breaking changes and labeled appropriately
  • A changelog entry exists and is marked appropriately

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Aug 9, 2022

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

This was referenced Aug 9, 2022
Merged
Merged
@thompsongl thompsongl marked this pull request as ready for review August 11, 2022 14:25
@thompsongl thompsongl requested a review from cee-chen August 11, 2022 14:25
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Aug 11, 2022

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

cee-chen
cee-chen reviewed Aug 11, 2022
View reviewed changes
src/components/overlay_mask/overlay_mask.tsx Outdated
onClick,
headerZindexLocation = 'above',
maskRef,
css,
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen Aug 11, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

I'm a little confused about this change - shouldn't we accept custom css on the overlay mask?

edit: if this change is just to pass type issues and we're planning on addressing this in the EuiOverlayMask Emotion conversion, no worries, but we should definitely add a // TODO: apply custom CSS-in-JS as a className comment of some kind to this line to ensure css doesn't just get stripped

Copy link
Copy Markdown
Contributor Author

@thompsongl thompsongl Aug 11, 2022

Choose a reason for hiding this comment

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

Yeah I'm working on styling ideas in #6090, and any method that would allow for Emotion styling will come from there. I'll add a comment, because the css prop on EuiOverlayMask wouldn't have any effect currently anyway.

@thompsongl thompsongl requested a review from cee-chen August 11, 2022 18:59
cee-chen
cee-chen approved these changes Aug 11, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

🎉

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Aug 11, 2022

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

@thompsongl thompsongl merged commit 4f5e510 into elastic:main Aug 11, 2022
@cee-chen cee-chen mentioned this pull request Sep 6, 2022
Merged
1 task
@1Copenut 1Copenut mentioned this pull request Sep 8, 2022
Merged
@cee-chen cee-chen mentioned this pull request Oct 6, 2022
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@cee-chen cee-chen cee-chen approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@thompsongl @kibanamachine @cee-chen