[Emotion] Convert EuiHeader and EuiHeaderLogo #6878

cee-chen · 2023-06-23T23:04:46Z

Summary

Converts EuiHeader to Emotion
- Creates a euiHeaderVariables() util (similar to euiFormVariables()) for other Emotion components to grab shared variables in the future (mostly height related)
- Removes all .euiHeader-- modifier classes
- Removes several $euiHeader Sass variables that are not used by either EUI or Kibana
- Removes @euiHeaderDarkTheme Sass mixin and replaces it with an Emotion util (internal only). Also converts EuiSelectableTemplateSitewide CSS that was specific to the header dark theme to be nested within the dark theme
Removes random unused .euiHeaderProfile Sass - appears to only be used in docs and not in actual src code
Converts EuiHeaderLogo to Emotion and moves all related files to a new header/header_logo subdirectory
Does not convert all header-related Sass files ([Emotion] EuiHeader #6417) - I'm breaking the work up into multiple smaller portions for easier review/QA

I strongly recommend following along by commit.

QA

Compare staging to prod and confirm they look the same
gh pr checkout 6878 && yarn storybook
EuiHeader: test that the position and theme props work as expected
EuiHeaderLogo: test that the iconType and iconTitle props work as expected
Go to https://eui.elastic.co/pr_6878/#/layout/flyout and confirm all flyouts do not collide with the header
Go to https://eui.elastic.co/pr_6878/#/layout/header/elastic-pattern and confirm the collapsible nav flyout does not collide with the header

General checklist

Checked in both light and dark modes
Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox
A changelog entry exists and is marked appropriately

Emotion checklist

Kibana usage

Search Kibana's codebase for {euiComponent}- (case sensitive) to check for usage of modifier classes
~~- [ ] If usage exists, consider converting to a data attribute so that consumers still have something to hook into~~ - no usages

General

Output CSS matches the previous CSS (works as expected in all browsers)
Rendered className(s) read as expected in snapshots and browsers
~~- [ ] Checked component playground~~ - No playground
~~ > NOTE: Class components wrapped in withEuiTheme need to pass true as the second argument to its propUtilityForPlayground in src-docs/src/views/{component}/playground.js~

Unit tests

shouldRenderCustomStyles() test was added and passes with parent component and any nested childProps (e.g. tooltipProps)
Converted to RTL
~~- [ ] Removed any mount()ed snapshots in favor of render() or a more specific assertion~~

Sass/Emotion conversion process

Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)
Removed or converted component-specific Sass vars/mixins to exported JS versions
Listed var/mixin removals in changelog
~~- [ ] Ran yarn compile-scss to update var/mixin JSON files~~
~~- [ ] Simplified calc() to mathWithUnits if possible (if mixing different unit types, this may not be possible)~~
~~- [ ] Added an @warn deprecation message within the global_styling/mixins/{component}.scss file~~
~~- [ ] Removed component from src/components/index.scss~~ Not done with full component conversion yet
Converted relevant src/amsterdam/overrides/{component}.scss styles to baseline Emotion styles

CSS tech debt

~~- [ ] Wrapped all animations or transitions in euiCanAnimate~~
~~- [ ] Used gap property to add margin between items if using flex~~ - no margins, although possibly padding might be convertible - will determine in next PR

Converted side specific padding, margin, and position to -inline and -block logical properties (check inline styles as well as CSS)

DOM Cleanup

Did NOT remove any block/element classNames (e.g. euiComponent, euiComponent__child)
SEARCH KIBANA FIRST: Deleted any modifier classNames or maps if not being used in Kibana.

Kibana due diligence

Pre-emptively check how your conversion will impact the next Kibana upgrade. This entails searching/grepping through Kibana (excluding **/target, **/*.snap, **/*.storyshot for less noise) for eui{Component} (case sensitive) to find:
Any test/query selectors that will need to be updated
- ✅ No usages of selectors that aren't the main .euiHeader usage
Any Sass or CSS that will need to be updated, particularly if a component Sass var was deleted
- ⚠️ 1 usage
Any direct className usages that will need to be refactored (e.g. someone calling the euiBadge class on a div instead of simply using the EuiBadge component)
- ⚠️ 1 usage

Extras/nice-to-have

Reduced specificity where possible (usually by reducing nesting and class name chaining)
- all styles are flattened except for the dark theme styles, which I'm I'm preserving mostly as-is for now with the hope that we eventually can just nuke it w/ the nav redesign

~~- [ ] Check for issues in the backlog that could be a quick fix for that component~~
~~- [ ] Optional component/code cleanup: consider splitting up the component into multiple children if it's overly verbose or difficult to reason about~~
~~- [ ] Documentation pass:~~

kibanamachine · 2023-06-23T23:26:25Z

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

- makes it easier to work with and the distinction isn't necessary at this point

- see `src/global_styling/variables/_header.scss` for variable definitions - NOTE: not removing the Sass variables for now as they're used by other Sass files and also by Kibana

cee-chen · 2023-06-27T02:42:52Z

src/components/header/header_logo/header_logo.stories.tsx

+    <EuiHeader>
+      <EuiHeaderLogo {...args} />
+    </EuiHeader>


Quick note - this will look a little odd/non-centered right now in Storybook. This is because the EuiHeaderSectionItem styles are not yet in Emotion / not yet in Storybook.

cee-chen · 2023-06-27T02:45:13Z

src/global_styling/variables/_header.scss

 // Layout vars
 $euiHeaderHeight: $euiSizeXXL + $euiSizeS !default;
-$euiHeaderChildSize: $euiHeaderHeight !default;
+$euiHeaderChildSize: $euiSizeXXL !default;

 // Use the following variable in other components to afford for the fixed header
-$euiHeaderHeightCompensation: $euiHeaderHeight + 1px !default;
+$euiHeaderHeightCompensation: $euiHeaderHeight !default;


We can likely delete the first two variables once all header components are converted to Emotion, but $euiHeaderHeightCompensation is used in multiple places in Kibana and will need to be maintained:

https://github.com/search?q=repo%3Aelastic%2Fkibana%20euiHeaderHeight&type=code

cee-chen · 2023-06-27T02:47:22Z

@breehall no rush on this PR, I definitely want it getting in after this week's release to limit the # of Emotion conversions in this week's Kibana upgrade.

kibanamachine · 2023-06-27T02:50:27Z

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

- remove modifier map + remove `border-top` override - unnecessary since the header already has a `bottom-border`, and unused since I don't see this pattern anywhere in EUI or Kibana + fix incorrect logical mapping - horizontal is `inline` and vertical is `block` 🤦

- Only used in `src-docs/` and can be totally replaced by `panelPaddingSize` 🤷 - not used anywhere in Kibana

- Merge Amsterdam overrides and default CSS - Remove unused `@include euiLink` mixin - it's basically not doing anything whatsoever since the hover/focus states are being unset later - remove unused icon size override - XL icons aren't being used anyway and the modifier map was removed in the Emotion conversion

+ opinionated change - tweak padding-left on logo text to match other padding on `xs` breakpoint + remove unused `vertical-align: middle` CSS - flex handles alignment instead

- convert to RTL from Enyzme + add a test for `euiHeaderLogo__text`

- to match other subcomponents

kibanamachine · 2023-06-27T03:20:27Z

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

breehall

Apologies in my delay on getting this PR reviewed! I went through your checklist of items and each example looks good.

✅ EuiHeader: test that the position and theme props work as expected
✅ EuiHeaderLogo: test that the iconType and iconTitle props work as expected

These look and function as they should. I also ran through controls on keyboard and I didn't notice any issues.

✅ Go to https://eui.elastic.co/pr_6878/#/layout/flyout and confirm all flyouts do not collide with the header

Each flyout looks good in mobile and desktop. Nothing collides or overlaps.

✅ Go to https://eui.elastic.co/pr_6878/#/layout/header/elastic-pattern and confirm the collapsible nav flyout does not collide with the header

breehall · 2023-06-30T19:56:55Z

src/global_styling/functions/logicals.json

+  "horizontal": "inset-inline",
+  "vertical": "inset-block",


Did a quick check and it doesn't look any other styles are currently using ${logicalCSS('horizontal')} or ${logicalCSS('vertical')}. So there shouldn't be any regressions to worry about with this!

breehall · 2023-06-30T20:03:56Z

src-docs/src/views/header/header.tsx

-          className="euiHeaderProfile"
-          responsive={false}
-        >
+      <div style={{ width: 300 }}>


Was the change from width: 320 to width: 300 intentional? I see it in header/header_alert.tsx as well but just wanted to be sure.

Yes, this was intentional and was caused by the removed .euiHeaderProfile className below. That class was setting some padding, but could have been replaced by panelPaddingSize without requiring custom CSS. Doing so means there's extra width now however, so I reduced it slightly to a nice round number.

The width honestly doesn't really matter and is just an implementation detail/example - it also only affects this specific example and not consumer usage.

kibanamachine · 2023-07-03T15:54:14Z

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

`eui@83.0.0` ⏩ `83.1.0` --- ## [`83.1.0`](https://github.com/elastic/eui/tree/v83.1.0) - Added `placeholder` prop to `EuiInlineEdit` ([#6883](elastic/eui#6883)) - Added `sparkles` glyph to `EuiIcon` ([#6898](elastic/eui#6898)) **Bug fixes** - Fixed Safari-only bug for single-line row `EuiDataGrid`s, where cell actions on hover would overlap instead of pushing content to the left ([#6881](elastic/eui#6881)) - Fixed `EuiButton` not correctly merging in passed `className`s with its base `.euiButton` class ([#6887](elastic/eui#6887)) - Fixed `EuiIcon` not correctly passing the `style` prop custom `img` icons ([#6888](elastic/eui#6888)) - Fixed multiple components with child props (e.g. `buttonProps`, `iconProps`, etc.) unsetting EUI's Emotion styling if custom `css` was passed to the child props object ([#6896](elastic/eui#6896)) **CSS-in-JS conversions** - Converted `EuiHeader` and `EuiHeaderLogo` to Emotion ([#6878](elastic/eui#6878)) - Removed Sass variables `$euiHeaderDarkBackgroundColor`, `$euiHeaderBorderColor`, and `$euiHeaderBreadcrumbColor` ([#6878](elastic/eui#6878)) - Removed Sass mixin `@euiHeaderDarkTheme` ([#6878](elastic/eui#6878))

cee-chen added 3 commits June 26, 2023 18:48

Combine global and Amsterdam and Sass vars

2d9b2b4

- makes it easier to work with and the distinction isn't necessary at this point

Set up header.styles.ts

95c89a0

Set up euiHeaderVariables and convert more shared CSS

482b3ae

- see `src/global_styling/variables/_header.scss` for variable definitions - NOTE: not removing the Sass variables for now as they're used by other Sass files and also by Kibana

cee-chen force-pushed the emotion/header branch 4 times, most recently from ba467d0 to 21ad29b Compare June 27, 2023 02:28

cee-chen commented Jun 27, 2023

View reviewed changes

cee-chen requested a review from breehall June 27, 2023 02:46

cee-chen marked this pull request as ready for review June 27, 2023 02:46

cee-chen force-pushed the emotion/header branch from 21ad29b to 3cc8b18 Compare June 27, 2023 02:55

cee-chen added 11 commits June 26, 2023 19:56

Convert default and dark theme styles to Emotion

252a935

[EuiHeader] Convert tests to RTL

8f9c0e8

Remove unused euiHeaderProfile Sass

198fb7a

- Only used in `src-docs/` and can be totally replaced by `panelPaddingSize` 🤷 - not used anywhere in Kibana

[EuiHeaderLogo] Convert to Emotion

f5b0146

+ opinionated change - tweak padding-left on logo text to match other padding on `xs` breakpoint + remove unused `vertical-align: middle` CSS - flex handles alignment instead

[EuiHeaderLogo] Update tests

cdb6c66

- convert to RTL from Enyzme + add a test for `euiHeaderLogo__text`

[EuiHeaderLogo] Reorganize files into its own subdirectory

f1d8bed

- to match other subcomponents

Add storybook stories

5cb9358

Delete Sass files

4e4b7b6

changelog

5c39b09

cee-chen force-pushed the emotion/header branch from 3cc8b18 to 5c39b09 Compare June 27, 2023 02:57

breehall approved these changes Jun 30, 2023

View reviewed changes

Merge branch 'main' into emotion/header

6002fbd

cee-chen enabled auto-merge (squash) July 3, 2023 15:31

cee-chen merged commit 4fade52 into elastic:main Jul 3, 2023

cee-chen deleted the emotion/header branch July 3, 2023 16:13

1Copenut mentioned this pull request Jul 7, 2023

Upgrade EUI to 83.1.0 elastic/kibana#161490

Merged

This was referenced Jul 27, 2023

[Emotion] Convert EuiHeaderAlert, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, and EuiHeaderLinks #7005

Merged

[Emotion] EuiHeader #6417

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Convert EuiHeader and EuiHeaderLogo #6878

[Emotion] Convert EuiHeader and EuiHeaderLogo #6878

cee-chen commented Jun 23, 2023 •

edited

Loading

kibanamachine commented Jun 23, 2023

cee-chen Jun 27, 2023

cee-chen Jun 27, 2023

cee-chen commented Jun 27, 2023

kibanamachine commented Jun 27, 2023

kibanamachine commented Jun 27, 2023

breehall left a comment

breehall Jun 30, 2023

breehall Jun 30, 2023

cee-chen Jul 3, 2023 •

edited

Loading

kibanamachine commented Jul 3, 2023

[Emotion] Convert EuiHeader and EuiHeaderLogo #6878

[Emotion] Convert EuiHeader and EuiHeaderLogo #6878

Conversation

cee-chen commented Jun 23, 2023 • edited Loading

Summary

QA

General checklist

Emotion checklist

kibanamachine commented Jun 23, 2023

cee-chen Jun 27, 2023

Choose a reason for hiding this comment

cee-chen Jun 27, 2023

Choose a reason for hiding this comment

cee-chen commented Jun 27, 2023

kibanamachine commented Jun 27, 2023

kibanamachine commented Jun 27, 2023

breehall left a comment

Choose a reason for hiding this comment

breehall Jun 30, 2023

Choose a reason for hiding this comment

breehall Jun 30, 2023

Choose a reason for hiding this comment

cee-chen Jul 3, 2023 • edited Loading

Choose a reason for hiding this comment

kibanamachine commented Jul 3, 2023

cee-chen commented Jun 23, 2023 •

edited

Loading

cee-chen Jul 3, 2023 •

edited

Loading