Skip to content

[Emotion] Remove misc unnecessary args from Emotion style functions#6221

Merged
cee-chen merged 3 commits intoelastic:mainfrom
cee-chen:emotion/remove-dynamic-vars
Sep 9, 2022
Merged

[Emotion] Remove misc unnecessary args from Emotion style functions#6221
cee-chen merged 3 commits intoelastic:mainfrom
cee-chen:emotion/remove-dynamic-vars

Conversation

@cee-chen
Copy link
Copy Markdown
Contributor

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

Summary

See #6213 (comment) for more context

  • EuiButton: custom minWidths should be a style tag and not an Emotion class, for the same reason we inline custom colors on components (we're otherwise generating a potentially infinite number of classes)
  • EuiPopoverTitle: the paddingSize on this can be easily be converted into a static list of keys without sacrificing readability
  • EuiCard: the display arg can be easily removed in favor of an array conditional instead, but the paddingSize cannot (this instance is a good example of when dev readability trumps Emotion performance, especially since paddingSize can only be one of 7 options and is not as wildcard as, e.g. minWidth or color)

Checklist

  • QA EuiButton, EuiPopover, and EuiCard and confirm they work the same as previously
  • Skipping changelog on this one as this is primarily tech debt and no user-facing changes should have occurred

@cee-chen cee-chen added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Sep 7, 2022
@cee-chen cee-chen requested a review from breehall September 7, 2022 22:02
@cee-chen cee-chen changed the title [Emotion] Remove misc [Emotion] Remove misc unnecessary args from Emotion style functions Sep 7, 2022
- can be quickly accomplished via static keys & a util instead, negating the need for dynamic CSS
- logic can be written in array format instead, negating the need for dynamic CSS

- NOTE: I'm leaving `paddingSize` in here as it's used repeatedly in multiple styles, and is an example of how dev readability trumps performance in this instance
- prefer to use CSS for minWidth instead

- now that minWidth is in Emotion, we can also obtain the width by extending our size theme vars instead of using a static arbitrary 112px
@cee-chen cee-chen force-pushed the emotion/remove-dynamic-vars branch from b686358 to 30fc18a Compare September 7, 2022 22:10
@kibanamachine
Copy link
Copy Markdown

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

Copy link
Copy Markdown
Contributor

@breehall breehall left a comment

Choose a reason for hiding this comment

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

This looks good to me. There are no visual differences (as expected) and I understand why we're pulling out each addition parameter from the Emotion styling functions.

@cee-chen
Copy link
Copy Markdown
Contributor Author

cee-chen commented Sep 9, 2022

Thanks Bree!

@cee-chen cee-chen merged commit 81eb0a8 into elastic:main Sep 9, 2022
@cee-chen cee-chen deleted the emotion/remove-dynamic-vars branch September 9, 2022 17:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants