Summary

Continuation of #6878, closes #6417

As always, I recommend following along by commit - this may seem like a lot but it's mostly storybooks 🤞 (it's helpful to follow along with storybook open!) I also tried to make commits as atomic as possible, so it looks like there's a lot, but they mostly go by quick.

Breaking changes/removals:

• Removed border prop from EuiHeaderSectionItem (hasn't been doing anything since the Amsterdam theme, might as well remove it while we're here)
• Removed borders object configuration from EuiHeader.sections (same as above)
• Removed unused .euiHeaderAlert__dismiss CSS (✅ No usages in either EUI or Kibana)
• Removed $euiHeaderLinksGutterSizes Sass variables and modifier classes (✅ No usages in Kibana)
• Removed $euiHeaderBackgroundColor Sass variable; use $euiColorEmptyShade instead (⚠️ 1 usage in Kibana)
• Removed $euiHeaderChildSize Sass variable; use $euiSizeXXL instead (⚠️ 1 usage in Kibana - it's mine lol)

QA

• Compare staging against production and confirm that all demos look the same as before
• gh pr checkout 7005
• yarn storybook
• Go to the EuiHeaderAlert stories
  • Confirm that the single alert item and multiple alert items within flyouts and popovers look good in light & dark mode
• Go to the EuiHeaderLinks story
  • Confirm the gutterSize controls work as expected
  • Change one of the popoverBreakpoints to l/xl (whatever fits your screen) and confirm the links collapse down into a single button with a popover, and links look as expected within the popover
• Go to the EuiHeaderSection story
  • Confirm the side control works as expected
  • Confirm the grow control works as expected (may require inspecting the item in the DOM)
• Go to the EuiHeaderSectionItem story
  • There's nothing really to do here 😅 Confirm it looks as expected
• Go to the EuiHeaderSectionItemButton story
  • (Playground) Toggle between notification true/false
  • (Notification) Toggle between notificationColors and custom notification content
  • (Animation) Click the Play animation button and confirm it works as expected

General checklist

• Checked in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately
  - [ ] Updated the Figma library counterpart - There doesn't seem to be specific components for this in Figma, it just reuses EuiButtonEmpty / EuiBUttonIcon

Emotion checklist

Emotion checklist

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 remaining Enzyme tests to RTL

Sass/Emotion conversion process

• Removed component from src/components/index.scss
• Converted relevant src/amsterdam/overrides/{component}.scss styles to baseline Emotion styles
• Converted all global Sass vars/mixins to JS (e.g. $euiSize to euiTheme.size.base)
• Listed var/mixin removals in changelog
  - [ ] Removed or converted component-specific Sass vars/mixins to exported JS versions - ⚠️ Not yet touching remaining $euiHeaderHeight vars or @mixin euiHeaderAffordForFixed - there's too many usages in Kibana
  - [ ] 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

CSS tech debt

- [ ] Wrapped all animations or transitions in euiCanAnimate - No CSS transitions/animations

• Used gap property to add margin between items if using flex
• 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. (.euiHeaderLinks__list--gutterSize)

Extras/nice-to-have

• Reduced specificity where possible (usually by reducing nesting and class name chaining)
  • Main remaining non-flat styles are .euiHeaderLinks__mobileList which it's likely not worth the effort to do so
    - [ ] 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:

Kibana due diligence

• 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 modifier class usages
• 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 removed usages of selectors within test queries
• Any Sass or CSS that will need to be updated, particularly if a component Sass var was deleted
  • ⚠️ 1 usage of $euiHeaderBackgroundColor
  • ⚠️ 1 usage of $euiHeaderChildSize
• 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)
  • ✅ No usages, thankfully