[Emotion] Add `@emotion/css` as a dev and peer dependency #6288

cee-chen · 2022-10-04T18:03:55Z

Summary

I recommend following along by commit.

This PR is primarily intended to add @emotion/css for usage within our various vanilla JS/non-React scenarios.

Updates all @emotion dependencies to latest (bc1be72)
Adds @emotion/css as a peer dependency (41e4ac5)
Converts an existing use case to @emotion/css css (3399bdf)
Converts EuiOverlayMask to @emotion/css instead of using global CSS
[OPTIONAL] Removes @emotion/cache from our single src usage and removes @emotion/cache as a required peer dependency (88ac73a, d08a00b)

Checklist

CI passes
General smoke/QA test to ensure everything looks copacetic
Checked for breaking changes and labeled appropriately
A changelog entry exists and is marked appropriately

… and

- instead of using `ClassNames` render prop

- since we're about to start using it in src components

…t cache Emotion provides - which will automatically set compat = true

now that EuiProvider no longer needs it

cee-chen · 2022-10-04T18:05:24Z

package.json

-    "@emotion/cache": "11.x",
    "@emotion/react": "11.x",
+    "@emotion/css": "11.x",


@thompsongl would love your opinion on this (removing @emotion/cache from our required peer dependencies now that we can use @emotion/css instead - see 88ac73a, d08a00b). I don't feel incredibly strongly about it but I do feel it's a nice to have.

Yeah that's probably the right call. We're making a breaking change with adding @emotion/css, so might as well be thorough.

We still use @emotion/cache in a few src locations and need to keep the dependency around

I cannot read file paths. Only one usage remains (cache_provider.tsx) which is only a type but still maintains that dependency.

Are you sure? We had EmotionCache defined as a type before we declared it as a peer dependency:

https://github.com/elastic/eui/pull/6126/files#diff-a1648a5c54676d1ae54abfef57822d0dd31c82d6109e9b3bd789b2626cc06756

If it ends up in eui.d.ts it needs to be a dependency, otherwise the consuming app's typescript will fail to resolve it

from yesterday's build:

declare module '@elastic/eui/src/components/provider/cache/cache_provider' { import { PropsWithChildren } from 'react'; import { EmotionCache } from '@emotion/cache'; export interface EuiCacheProviderProps { cache?: false | EmotionCache; } export const EuiCacheProvider: ({ cache, children, }: PropsWithChildren<EuiCacheProviderProps>) => JSX.Element; }

I can change this to reference the typeof cache from @emotion/css... but @emotion/css's create-instance.d.ts is calling @emotion/cache's EmotionCache type def anyway:

https://github.com/emotion-js/emotion/blob/main/packages/css/types/create-instance.d.ts

so there's probably some underlying sub-dependency magic going on here.

516fe7b

the above commit in meme form:

Thank you for the scooby doo change! I understand it ultimately ends up being the same, it does make the housekeeping a little cleaner.

kibanamachine · 2022-10-04T18:33:11Z

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

- body overflow CSS still needs to be `@emotion/react`, and should be moved into a different file

cee-chen · 2022-10-04T21:20:00Z

src/components/overlay_mask/overlay_mask.tsx

+    overlayMaskNode.className = cx('euiOverlayMask', cssStyles, className);
+  }, [overlayMaskNode, cssStyles, className]);

  return (
    <EuiPortal portalRef={combinedMaskRef}>
      <Global styles={euiOverlayMaskBodyStyles} />
-      <Global styles={cssStyles} />


I noticed this while fixing some EuiOverlayMask issues and pushed up a switch to @emotion/css and away from global styles to this branch for now. If requested, I'd be happy to split it into a separate/follow-up PR after this one gets in.

Before:

After:

Fine with it here!

kibanamachine · 2022-10-04T21:39:05Z

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

kibanamachine · 2022-10-05T00:27:51Z

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

thompsongl

Just some discussion to be had about where @emotion/css styles get inserted

thompsongl · 2022-10-05T14:50:07Z

src-docs/src/services/routing/heading_anchor_links.tsx

+          const headingCss = css`
+            &:hover [data-anchor-link] {
+              opacity: 1;
+            }
+          `;
+          const linkCss = css`
+            opacity: 0;
+            ${logicalCSS('margin-left', euiTheme.size.s)}


Looks like styles from @emotion/css don't get added to the cache location

Not sure how big a deal this is considering the limited cases where it'll be used.

Oh, super interesting. Thanks for catching that!

It looks like we'd need to use a custom createInstance to give it a key (https://emotion.sh/docs/@emotion/css#custom-instances) if we absolutely need to fix their location.

I do agree their uses are generally relatively limited, so it may not have to be something we worry about anytime soon.

thompsongl · 2022-10-05T14:50:57Z

src/components/overlay_mask/overlay_mask.styles.ts

+    position: fixed;
+    ${logicalCSS('top', 0)}


Same cache problem here. Again, not sure this actually problematic.

I'm thinking more about these cache shenanigans now. I'm less enthusiastic about @emotion/css if it's going to end up with messy stuff like this.

@thompsongl @chandlerprall instead of adding @emotion/css, what do you y'all think about adding css and cx from @emotion/react's ClassNames render prop to our EuiTheme context?

So returning an object, of, e.g. { euiTheme, colorMode, modifications, css, cx } where we can simply do const { css } = useEuiTheme() to generate an Emotion className and pass that around as-needed to vanilla JS functions?

Oooh that's an interesting idea!

I'll spike out an alternative PR to compare!

No dice on the spike, unfortunately. I'm getting a bunch of errors around css/cx can only be used during render which I think is related to emotion-js/emotion#1225.

Branch for testing, for those curious: https://github.com/constancecchen/eui/tree/emotion-theme-css

chandlerprall · 2022-10-05T15:16:40Z

I pushed 14fdc19 to de-duplicate some package versions in yarn.lock

kibanamachine · 2022-10-05T16:20:34Z

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

…tion-deps

chandlerprall

Changes LGTM

kibanamachine · 2022-10-05T18:37:48Z

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

## Summary `eui@67.1.8` ⏩ `eui@70.2.2` ⚠️ Note: This upgrade contains breaking changes to `EuiFlexGroup` and `EuiFlexGrid`, primarily around switching margins and negative margins to `gap`. Please do a quick QA pass of your app to scan for any issues. We're happy to help resolve minor fixes, or potentially follow up after PR merges. You can find us over in #eui! ## [`70.2.4`](https://github.com/elastic/eui/tree/v70.2.4) **Bug fixes** - Fixed visual bug in nested `EuiFlexGroup`s, where the parent `EuiFlexGroup` is responsive but a child `EuiFlexGroup` is not ([#6381](elastic/eui#6381)) ## [`70.2.3`](https://github.com/elastic/eui/tree/v70.2.3) **Bug fixes** - Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change ([#6380](elastic/eui#6380)) ## [`70.2.2`](https://github.com/elastic/eui/tree/v70.2.2) - `EuiButton` now accepts `minWidth={false}` ([#6373](elastic/eui#6373)) **Bug fixes** - `EuiButton` no longer outputs unnecessary inline styles for `minWidth={0}` or `minWidth={false}` ([#6373](elastic/eui#6373)) - `EuiFacetButton` no longer reports type issues when passing props accepted by `EuiButton` ([#6373](elastic/eui#6373)) - Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows` ([#6374](elastic/eui#6374)) ## [`70.2.1`](https://github.com/elastic/eui/tree/v70.2.1) **Bug fixes** - Re-fixed `EuiPageSection` not correctly merging `contentProps.css` ([#6365](elastic/eui#6365)) - Fixed `EuiTab` not defaulting to size `m` ([#6366](elastic/eui#6366)) ## [`70.2.0`](https://github.com/elastic/eui/tree/v70.2.0) - Added a keyboard shortcuts popover to `EuiDataGrid`'s toolbar. This can be visually hidden via `toolbarVisibility.showKeyboardShortcuts`, but will always remain accessible to keyboard and screen reader users. ([#6036](elastic/eui#6036)) - `EuiScreenReaderOnly`'s `showOnFocus` prop now also shows on focus within its children ([#6036](elastic/eui#6036)) - Added `onFocus` prop callback to `EuiSuperDatePicker` ([#6320](elastic/eui#6320)) **Bug fixes** - Fixed `EuiSelectable` to ensure the full options list is re-displayed when the search bar is controlled and cleared using `searchProps.value` ([#6317](elastic/eui#6317)) - Fixed incorrect padding on `xl`-sized `EuiTabs` ([#6336](elastic/eui#6336)) - Fixed `EuiCard` not correctly merging `css` on its child `icon`s ([#6341](elastic/eui#6341)) - Fixed `EuiCheckableCard` not setting `css` on the correct DOM node ([#6341](elastic/eui#6341)) - Fixed a webkit rendering issue with `EuiModal`s containing `EuiBasicTable`s tall enough to scroll ([#6343](elastic/eui#6343)) - Fixed bug in `to_initials` that truncates custom initials ([#6346](elastic/eui#6346)) - Fix bug in `EuiCard` where layout breaks when `horizontal` and `selectable` are both passed ([#6348](elastic/eui#6348)) ## [`70.1.0`](https://github.com/elastic/eui/tree/v70.1.0) - Added the `hint` prop to the `<EuiSearchBar />`. This prop lets the consumer render a hint below the search bar that will be displayed on focus. ([#6319](elastic/eui#6319)) - Added the `hasDragDrop` prop to `EuiPopover`. Use this prop if your popover contains `EuiDragDropContext`. ([#6329](elastic/eui#6329)) **Bug fixes** - Fixed `EuiButton`'s cursor style when the button is disabled ([#6323](elastic/eui#6323)) - Fixed `EuiPageTemplate` not recognizing child `EuiPageSidebar`s/`EuiPageTemplate.Sidebar`s with `css` props ([#6324](elastic/eui#6324)) - Fixed `EuiBetaBadge` to always respect its `anchorProps` values, including when there is no tooltip content ([#6326](elastic/eui#6326)) - Temporarily patched `EuiModal` to not cause scroll-jumping issues on modal open ([#6327](elastic/eui#6327)) - Fixed buggy drag & drop behavior within `EuiDataGrid`'s columns & sorting toolbar popovers ([#6329](elastic/eui#6329)) - Fixed `EuiButton` not correctly passing `textProps` for children inside fragments or i18n components ([#6332](elastic/eui#6332)) - Fixed `EuiButton` not correctly respecting `minWidth={0}` ([#6332](elastic/eui#6332)) **CSS-in-JS conversions** - Converted `EuiTabs` to Emotion ([#6311](elastic/eui#6311)) ## [`70.0.0`](https://github.com/elastic/eui/tree/v70.0.0) - Added the `enabled` option to the `<EuiInMemoryTable />` `executeQueryOptions` prop. This option prevents the Query from being executed when controlled by the consumer. ([#6284](elastic/eui#6284)) **Bug fixes** - Fixed `EuiOverlayMask` to set a `[data-relative-to-header=above|below]` attribute to replace the `--aboveHeader` and `--belowHeader` classNames removed in its Emotion conversion ([#6289](elastic/eui#6289)) - Fixed `EuiHeader` CSS using removed `EuiOverlayMask` class modifiers ([#6293](elastic/eui#6293)) - Fixed `EuiToolTip` not respecting reduced motion preferences ([#6295](elastic/eui#6295)) - Fixed a bug with `EuiTour` where passing any `panelProps` would cause the beacon to disappear ([#6298](elastic/eui#6298)) **Breaking changes** - `@emotion/css` is now a required peer dependency, alongside `@emotion/react` ([#6288](elastic/eui#6288)) - `@emotion/cache` is no longer required peer dependency, although your project must still use it if setting custom cache/injection locations ([#6288](elastic/eui#6288)) **CSS-in-JS conversions** - Converted `EuiCode` and `EuiCodeBlock` to Emotion; Removed `euiCodeSyntaxTokens` Sass mixin and `$euiCodeBlockPaddingModifiers`; ([#6263](elastic/eui#6263)) - Converted `EuiResizableContainer` and `EuiResizablePanel` to Emotion ([#6287](elastic/eui#6287)) ## [`69.0.0`](https://github.com/elastic/eui/tree/v69.0.0) - Added support for `fullWidth` prop on EuiForm, which will be the default for all rows/controls within ([#6229](elastic/eui#6229)) - Added support for `onResizeStart` and `onResizeEnd` callbacks to `EuiResizableContainer` ([#6236](elastic/eui#6236)) - Added optional case sensitive option matching to `EuiComboBox` with the `isCaseSensitive` prop ([#6268](elastic/eui#6268)) - `EuiFlexItem` now supports `grow={0}` ([#6270](elastic/eui#6270)) - Added the `alignItems` prop to `EuiFlexGrid` ([#6281](elastic/eui#6281)) - Added `filter`, `filterExclude`, `filterIgnore`, `filterInclude`, `indexTemporary`, `infinity`, `sortAscending`, and `sortDescending` glyphs to `EuiIcon` ([#6282](elastic/eui#6282)) **Bug fixes** - Fixed `EuiTextProps` to show the `color` type option `inherit` as default ([#6267](elastic/eui#6267)) - `EuiFlexGroup` now correctly respects `gutterSize` when responsive ([#6270](elastic/eui#6270)) - Fixed the last breadcrumb in `EuiBreadcrumbs`'s `breadcrumbs` array not respecting `truncate` overrides ([#6280](elastic/eui#6280)) **Breaking changes** - `EuiFlexGrid` no longer supports `columns={0}`. Use `EuiFlexGroup` instead for normal flex display ([#6270](elastic/eui#6270)) - `EuiFlexGrid` now uses modern `display: grid` CSS ([#6270](elastic/eui#6270)) - `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` now use modern `gap` CSS instead of margins and negative margins ([#6270](elastic/eui#6270)) - `EuiFlexGroup` no longer applies responsive styles to `column` or `columnReverse` directions ([#6270](elastic/eui#6270)) **CSS-in-JS conversions** - Converted `EuiFlexGroup`, `EuiFlexGrid`, and `EuiFlexItem` to Emotion ([#6270](elastic/eui#6270)) ## [`68.0.0`](https://github.com/elastic/eui/tree/v68.0.0) - Added `beta` glyph to `EuiIcon` ([#6250](elastic/eui#6250)) - Added `launch` and `spaces` glyphs to `EuiIcon` ([#6260](elastic/eui#6260)) - Added the `fallbackDestination` prop to `EuiSkipLink`, which accepts a string of query selectors to fall back to if the `destinationId` does not have a valid target. Defaults to `main` ([#6261](elastic/eui#6261)) - `EuiSkipLink` is now always an `a` tag to ensure that it is always placed within screen reader link menus. ([#6261](elastic/eui#6261)) **Bug fixes** - Fixed `EuiSuperDatePicker` not correctly merging passed `className`s ([#6253](elastic/eui#6253)) - Fixed `EuiColorStops` not correctly merging in passed `data-test-subj`s, `style`s, or `...rest` ([#6255](elastic/eui#6255)) - Fixed `EuiResizablePanel` incorrectly passing `style` to the wrapper instead of the panel. Use `wrapperProps.style` to pass styles to the wrapper. ([#6255](elastic/eui#6255)) - Fixed custom `onClick`s passed to `EuiSkipLink` overriding `overrideLinkBehavior` ([#6261](elastic/eui#6261)) **Breaking changes** - Removed `inherit` and `ghost` color from `EuiListGroupItem` ([#6207](elastic/eui#6207)) - Changed default color to `text` instead of `inherit` ([#6207](elastic/eui#6207)) **CSS-in-JS conversions** - Converted `EuiListGroup` and `EuiListGroupItem` to Emotion; Removed `$euiListGroupGutterTypes`, `$euiListGroupItemColorTypes` and `$euiListGroupItemSizeTypes`; ([#6207](elastic/eui#6207)) - Converted `EuiBadgeGroup` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiBetaBadge` to Emotion ([#6258](elastic/eui#6258)) - Converted `EuiNotificationBadge` to Emotion ([#6258](elastic/eui#6258)) Co-authored-by: Elizabet Oliveira <elizabet.oliveira@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

cee-chen added 5 commits October 4, 2022 10:41

Install @emotion/css and upgrade all Emotion dependencies to latest…

bc1be72

… and

Convert docs anchor links to @emotion/css

3399bdf

- instead of using `ClassNames` render prop

Add @emotion/css as a peerDependency

41e4ac5

- since we're about to start using it in src components

Remove @emotion/cache usage from EuiProvider in favor of the defaul…

88ac73a

…t cache Emotion provides - which will automatically set compat = true

[OPTIONAL] unrequire @emotion/cache as a peerDependency

d08a00b

now that EuiProvider no longer needs it

cee-chen requested a review from thompsongl October 4, 2022 18:03

cee-chen commented Oct 4, 2022

View reviewed changes

cee-chen marked this pull request as ready for review October 4, 2022 18:05

cee-chen mentioned this pull request Oct 4, 2022

[Emotion] Convert EuiCode and EuiCodeBlock #6263

Merged

37 tasks

cee-chen added 2 commits October 4, 2022 14:09

Convert EuiOverlayMask to @emotion/css

04a81c6

- body overflow CSS still needs to be `@emotion/react`, and should be moved into a different file

Remove incredibly annoying mounted snapshots

ff5aaed

cee-chen commented Oct 4, 2022

View reviewed changes

Merge branch 'main' into emotion-deps

817e387

cee-chen requested a review from chandlerprall October 5, 2022 01:21

thompsongl reviewed Oct 5, 2022

View reviewed changes

consolidated some yarn.lock entries

14fdc19

cee-chen added 2 commits October 5, 2022 11:01

"Fix" type reference to use @emotion/css instead of @emotion/cache

516fe7b

Merge branch 'emotion-deps' of github.com:constancecchen/eui into emo…

9531573

…tion-deps

chandlerprall approved these changes Oct 5, 2022

View reviewed changes

cee-chen enabled auto-merge (squash) October 5, 2022 18:23

cee-chen merged commit f7c05f9 into elastic:main Oct 5, 2022

cee-chen deleted the emotion-deps branch October 5, 2022 18:52

cee-chen mentioned this pull request Nov 8, 2022

Upgrade EUI to v70.2.4 elastic/kibana#144845

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Add `@emotion/css` as a dev and peer dependency #6288

[Emotion] Add `@emotion/css` as a dev and peer dependency #6288

cee-chen commented Oct 4, 2022 •

edited

Loading

cee-chen Oct 4, 2022

thompsongl Oct 5, 2022

chandlerprall Oct 5, 2022

chandlerprall Oct 5, 2022

cee-chen Oct 5, 2022

chandlerprall Oct 5, 2022

cee-chen Oct 5, 2022

cee-chen Oct 5, 2022

chandlerprall Oct 5, 2022

cee-chen Oct 5, 2022

kibanamachine commented Oct 4, 2022

cee-chen Oct 4, 2022

thompsongl Oct 5, 2022

kibanamachine commented Oct 4, 2022

kibanamachine commented Oct 5, 2022

thompsongl left a comment

thompsongl Oct 5, 2022

cee-chen Oct 5, 2022

thompsongl Oct 5, 2022

cee-chen Oct 5, 2022 •

edited

Loading

thompsongl Oct 5, 2022

cee-chen Oct 5, 2022

cee-chen Oct 5, 2022

chandlerprall commented Oct 5, 2022

kibanamachine commented Oct 5, 2022

chandlerprall left a comment

kibanamachine commented Oct 5, 2022

[Emotion] Add @emotion/css as a dev and peer dependency #6288

[Emotion] Add @emotion/css as a dev and peer dependency #6288

Conversation

cee-chen commented Oct 4, 2022 • edited Loading

Summary

Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Oct 4, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Oct 4, 2022

kibanamachine commented Oct 5, 2022

thompsongl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cee-chen Oct 5, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chandlerprall commented Oct 5, 2022

kibanamachine commented Oct 5, 2022

chandlerprall left a comment

Choose a reason for hiding this comment

kibanamachine commented Oct 5, 2022

[Emotion] Add `@emotion/css` as a dev and peer dependency #6288

[Emotion] Add `@emotion/css` as a dev and peer dependency #6288

cee-chen commented Oct 4, 2022 •

edited

Loading

cee-chen Oct 5, 2022 •

edited

Loading