Skip to content
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.

Sign up for GitHub

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

Jump to bottom

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

Merged
merged 5 commits into from
Aug 11, 2022
Merged

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

merged 5 commits into from
Aug 11, 2022

Conversation

thompsongl
Copy link
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

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

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
@@ -58,6 +58,7 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
onClick,
headerZindexLocation = 'above',
maskRef,
css,
Copy link
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
Contributor Author

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
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

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

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

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