From 2d9b2b4a1e924bd7a91b6d043851c189ad3411f5 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 13:47:07 -0700
Subject: [PATCH 01/14] Combine global and Amsterdam and Sass vars

- makes it easier to work with and the distinction isn't necessary at this point
---
 src/global_styling/variables/_header.scss                 | 8 +++++---
 .../amsterdam/global_styling/variables/_header.scss       | 7 -------
 src/themes/amsterdam/global_styling/variables/_index.scss | 1 -
 3 files changed, 5 insertions(+), 11 deletions(-)
 delete mode 100644 src/themes/amsterdam/global_styling/variables/_header.scss

diff --git a/src/global_styling/variables/_header.scss b/src/global_styling/variables/_header.scss
index ca97ee110ec..24b898826d1 100644
--- a/src/global_styling/variables/_header.scss
+++ b/src/global_styling/variables/_header.scss
@@ -1,12 +1,14 @@
 // Themeable colors
 $euiHeaderBackgroundColor: $euiColorEmptyShade !default;
 $euiHeaderDarkBackgroundColor: lightOrDarkTheme(shade($euiColorDarkestShade, 28%), shade($euiColorLightestShade, 50%)) !default;
-$euiHeaderBorderColor: $euiBorderColor !default;
+// Curated border color to fade into the shadow without looking too much like a border
+// It adds separation between the header and flyout
+$euiHeaderBorderColor: lightOrDarkTheme(shade($euiBorderColor, 3%), shade($euiColorEmptyShade, 35%));
 $euiHeaderBreadcrumbColor: $euiColorDarkestShade !default;
 
 // 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;
diff --git a/src/themes/amsterdam/global_styling/variables/_header.scss b/src/themes/amsterdam/global_styling/variables/_header.scss
deleted file mode 100644
index c823edcea56..00000000000
--- a/src/themes/amsterdam/global_styling/variables/_header.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Curated border color to fade into the shadow without looking too much like a border
-// It adds separation between the header and flyout
-$euiHeaderBorderColor: lightOrDarkTheme(shade($euiBorderColor, 3%), shade($euiColorEmptyShade, 35%));
-
-$euiHeaderHeight: $euiSizeXXL + $euiSizeS;
-$euiHeaderChildSize: $euiSizeXXL;
-$euiHeaderHeightCompensation: $euiHeaderHeight;
diff --git a/src/themes/amsterdam/global_styling/variables/_index.scss b/src/themes/amsterdam/global_styling/variables/_index.scss
index 9cf2c083778..eccda1f6d3b 100644
--- a/src/themes/amsterdam/global_styling/variables/_index.scss
+++ b/src/themes/amsterdam/global_styling/variables/_index.scss
@@ -3,6 +3,5 @@
 @import 'states';
 
 @import 'buttons';
-@import 'header';
 @import 'page';
 @import 'typography';

From 95c89a00a20882a645932bca307613d22bb26607 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 12:37:40 -0700
Subject: [PATCH 02/14] Set up `header.styles.ts`

---
 .../header/__snapshots__/header.test.tsx.snap | 14 ++++++-------
 src/components/header/_header.scss            |  2 --
 src/components/header/header.styles.ts        | 20 +++++++++++++++++++
 src/components/header/header.tsx              | 12 +++++++++--
 4 files changed, 37 insertions(+), 11 deletions(-)
 create mode 100644 src/components/header/header.styles.ts

diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap
index 35c4a3256dd..2a301ae12dc 100644
--- a/src/components/header/__snapshots__/header.test.tsx.snap
+++ b/src/components/header/__snapshots__/header.test.tsx.snap
@@ -3,14 +3,14 @@
 exports[`EuiHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiHeader euiHeader--default euiHeader--static testClass1 testClass2"
+  class="euiHeader euiHeader--default euiHeader--static testClass1 testClass2 emotion-euiHeader"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiHeader renders children 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static"
+  class="euiHeader euiHeader--default euiHeader--static emotion-euiHeader"
 >
   <span>
     Hello!
@@ -20,13 +20,13 @@ exports[`EuiHeader renders children 1`] = `
 
 exports[`EuiHeader renders dark theme 1`] = `
 <div
-  class="euiHeader euiHeader--dark euiHeader--static"
+  class="euiHeader euiHeader--dark euiHeader--static emotion-euiHeader"
 />
 `;
 
 exports[`EuiHeader renders in fixed position 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--fixed"
+  class="euiHeader euiHeader--default euiHeader--fixed emotion-euiHeader"
   data-fixed-header="true"
 >
   <span>
@@ -37,7 +37,7 @@ exports[`EuiHeader renders in fixed position 1`] = `
 
 exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static"
+  class="euiHeader euiHeader--default euiHeader--static emotion-euiHeader"
 >
   <nav
     aria-label="Breadcrumbs"
@@ -64,7 +64,7 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 
 exports[`EuiHeader sections render simple items and borders 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static"
+  class="euiHeader euiHeader--default euiHeader--static emotion-euiHeader"
 >
   <div
     class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
@@ -99,7 +99,7 @@ exports[`EuiHeader sections render simple items and borders 1`] = `
 
 exports[`EuiHeader throws a warning if both children and sections were passed 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static"
+  class="euiHeader euiHeader--default euiHeader--static emotion-euiHeader"
 >
   <div
     class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
index 8c04d7da17a..db82d98402d 100644
--- a/src/components/header/_header.scss
+++ b/src/components/header/_header.scss
@@ -1,8 +1,6 @@
 // Header. Includes breadcrumbs of nav buttons.
 
 .euiHeader {
-  @include euiBottomShadowSmall;
-
   height: $euiHeaderHeight + 1; // Add one for the border
   position: relative;
   z-index: $euiZHeader - 1; // ensure the shadow shows above content
diff --git a/src/components/header/header.styles.ts b/src/components/header/header.styles.ts
new file mode 100644
index 00000000000..9bb9bf7df11
--- /dev/null
+++ b/src/components/header/header.styles.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { euiShadowSmall } from '../../themes/amsterdam/global_styling/mixins';
+import { UseEuiTheme } from '../../services';
+
+export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
+  return {
+    euiHeader: css`
+      ${euiShadowSmall(euiThemeContext)}
+    `,
+  };
+};
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index c5d856ba79e..192e3596640 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -8,15 +8,18 @@
 
 import React, { FunctionComponent, HTMLAttributes, useEffect } from 'react';
 import classNames from 'classnames';
+
+import { useEuiTheme } from '../../services';
 import { CommonProps } from '../common';
+import { EuiBreadcrumb, EuiBreadcrumbsProps } from '../breadcrumbs';
 
+import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
 import {
   EuiHeaderSectionItem,
   EuiHeaderSectionItemProps,
   EuiHeaderSection,
 } from './header_section';
-import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
-import { EuiBreadcrumb, EuiBreadcrumbsProps } from '../breadcrumbs';
+import { euiHeaderStyles } from './header.styles';
 
 type EuiHeaderSectionItemType = EuiHeaderSectionItemProps['children'];
 type EuiHeaderSectionBorderType = EuiHeaderSectionItemProps['border'];
@@ -93,6 +96,10 @@ export const EuiHeader: FunctionComponent<EuiHeaderProps> = ({
     className
   );
 
+  const euiTheme = useEuiTheme();
+  const styles = euiHeaderStyles(euiTheme);
+  const cssStyles = [styles.euiHeader];
+
   useEffect(() => {
     if (position === 'fixed') {
       // Increment fixed header counter for each fixed header
@@ -149,6 +156,7 @@ export const EuiHeader: FunctionComponent<EuiHeaderProps> = ({
 
   return (
     <div
+      css={cssStyles}
       className={classes}
       data-fixed-header={position === 'fixed' || undefined} // Used by EuiFlyouts as a query selector
       {...rest}

From 482b3ae91e22d2c8fce4d7eceba134139d99c7ff Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 13:30:22 -0700
Subject: [PATCH 03/14] Set up `euiHeaderVariables` and convert more shared CSS

- 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
---
 src/components/header/_header.scss          |  3 ---
 src/components/header/header.styles.ts      | 17 +++++++++++++++++
 src/themes/amsterdam/overrides/_header.scss |  6 ------
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
index db82d98402d..0b8275f93ae 100644
--- a/src/components/header/_header.scss
+++ b/src/components/header/_header.scss
@@ -1,11 +1,8 @@
 // Header. Includes breadcrumbs of nav buttons.
 
 .euiHeader {
-  height: $euiHeaderHeight + 1; // Add one for the border
   position: relative;
   z-index: $euiZHeader - 1; // ensure the shadow shows above content
-  display: flex;
-  justify-content: space-between;
   background: $euiHeaderBackgroundColor;
   border-bottom: 1px solid $euiHeaderBorderColor;
 
diff --git a/src/components/header/header.styles.ts b/src/components/header/header.styles.ts
index 9bb9bf7df11..b2760b37b15 100644
--- a/src/components/header/header.styles.ts
+++ b/src/components/header/header.styles.ts
@@ -9,11 +9,28 @@
 import { css } from '@emotion/react';
 
 import { euiShadowSmall } from '../../themes/amsterdam/global_styling/mixins';
+import { logicalCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
+export const euiHeaderVariables = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    height: euiTheme.size.xxxl,
+    childHeight: euiTheme.size.xxl,
+  };
+};
+
 export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { height } = euiHeaderVariables(euiThemeContext);
+
   return {
     euiHeader: css`
+      display: flex;
+      justify-content: space-between;
+      ${logicalCSS('height', height)}
+      ${logicalCSS('padding-horizontal', euiTheme.size.s)}
       ${euiShadowSmall(euiThemeContext)}
     `,
   };
diff --git a/src/themes/amsterdam/overrides/_header.scss b/src/themes/amsterdam/overrides/_header.scss
index b8fbbd470b6..eb895f66414 100644
--- a/src/themes/amsterdam/overrides/_header.scss
+++ b/src/themes/amsterdam/overrides/_header.scss
@@ -1,9 +1,3 @@
-.euiHeader {
-  height: $euiHeaderHeight;
-  padding-left: $euiSizeS;
-  padding-right: $euiSizeS;
-}
-
 // Remove borders without deleting the prop just yet
 .euiHeaderSectionItem::after {
   display: none !important; // stylelint-disable-line declaration-no-important

From 2579e63b52adfb5fdbc60c051e7be9e79d3313fa Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 13:43:09 -0700
Subject: [PATCH 04/14] Convert position styles to Emotion

- 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` :facepalm:
---
 .../src/components/guide_page/_guide_page.scss   |  2 +-
 .../flyout/__snapshots__/flyout.test.tsx.snap    |  2 +-
 .../header/__snapshots__/header.test.tsx.snap    | 14 +++++++-------
 src/components/header/_header.scss               | 14 --------------
 src/components/header/header.styles.ts           | 16 ++++++++++++++++
 src/components/header/header.tsx                 |  9 ++-------
 .../__snapshots__/logicals.test.ts.snap          |  8 ++++----
 src/global_styling/functions/logicals.json       |  4 ++--
 src/themes/amsterdam/overrides/_header.scss      |  4 ----
 9 files changed, 33 insertions(+), 40 deletions(-)

diff --git a/src-docs/src/components/guide_page/_guide_page.scss b/src-docs/src/components/guide_page/_guide_page.scss
index 18fc2ab3d9d..578ef92e5df 100644
--- a/src-docs/src/components/guide_page/_guide_page.scss
+++ b/src-docs/src/components/guide_page/_guide_page.scss
@@ -10,7 +10,7 @@
 .euiBody--headerIsFixed--double {
   @include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);
 
-  .euiHeader:not(.euiHeader--fixed) {
+  .euiHeader:not([data-fixed-header]) {
     // Force headers below the fullscreen.
     // This shouldn't be necessary in consuming applications because headers should always be at the top of the page
     z-index: 0;
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index 4939ac699f0..e3116f416cc 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -1093,7 +1093,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
 >
   <div>
     <div
-      class="euiHeader euiHeader--default euiHeader--fixed"
+      class="euiHeader euiHeader--default emotion-euiHeader-fixed"
       data-fixed-header="true"
     />
     <div>
diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap
index 2a301ae12dc..8b4e7aed2a8 100644
--- a/src/components/header/__snapshots__/header.test.tsx.snap
+++ b/src/components/header/__snapshots__/header.test.tsx.snap
@@ -3,14 +3,14 @@
 exports[`EuiHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiHeader euiHeader--default euiHeader--static testClass1 testClass2 emotion-euiHeader"
+  class="euiHeader euiHeader--default testClass1 testClass2 emotion-euiHeader-static"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiHeader renders children 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static emotion-euiHeader"
+  class="euiHeader euiHeader--default emotion-euiHeader-static"
 >
   <span>
     Hello!
@@ -20,13 +20,13 @@ exports[`EuiHeader renders children 1`] = `
 
 exports[`EuiHeader renders dark theme 1`] = `
 <div
-  class="euiHeader euiHeader--dark euiHeader--static emotion-euiHeader"
+  class="euiHeader euiHeader--dark emotion-euiHeader-static"
 />
 `;
 
 exports[`EuiHeader renders in fixed position 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--fixed emotion-euiHeader"
+  class="euiHeader euiHeader--default emotion-euiHeader-fixed"
   data-fixed-header="true"
 >
   <span>
@@ -37,7 +37,7 @@ exports[`EuiHeader renders in fixed position 1`] = `
 
 exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static emotion-euiHeader"
+  class="euiHeader euiHeader--default emotion-euiHeader-static"
 >
   <nav
     aria-label="Breadcrumbs"
@@ -64,7 +64,7 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 
 exports[`EuiHeader sections render simple items and borders 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static emotion-euiHeader"
+  class="euiHeader euiHeader--default emotion-euiHeader-static"
 >
   <div
     class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
@@ -99,7 +99,7 @@ exports[`EuiHeader sections render simple items and borders 1`] = `
 
 exports[`EuiHeader throws a warning if both children and sections were passed 1`] = `
 <div
-  class="euiHeader euiHeader--default euiHeader--static emotion-euiHeader"
+  class="euiHeader euiHeader--default emotion-euiHeader-static"
 >
   <div
     class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
index 0b8275f93ae..9d1deab403c 100644
--- a/src/components/header/_header.scss
+++ b/src/components/header/_header.scss
@@ -1,22 +1,8 @@
 // Header. Includes breadcrumbs of nav buttons.
 
 .euiHeader {
-  position: relative;
-  z-index: $euiZHeader - 1; // ensure the shadow shows above content
   background: $euiHeaderBackgroundColor;
   border-bottom: 1px solid $euiHeaderBorderColor;
-
-  &--fixed {
-    z-index: $euiZHeader;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
-}
-
-.euiHeader--fixed + .euiHeader--fixed {
-  top: $euiHeaderHeightCompensation;
 }
 
 .euiHeader--dark {
diff --git a/src/components/header/header.styles.ts b/src/components/header/header.styles.ts
index b2760b37b15..ae375569fcb 100644
--- a/src/components/header/header.styles.ts
+++ b/src/components/header/header.styles.ts
@@ -33,5 +33,21 @@ export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('padding-horizontal', euiTheme.size.s)}
       ${euiShadowSmall(euiThemeContext)}
     `,
+    // Position
+    static: css`
+      /* Ensure the shadow shows above content */
+      z-index: ${Number(euiTheme.levels.header!) - 1};
+      position: relative;
+    `,
+    fixed: css`
+      z-index: ${euiTheme.levels.header};
+      position: fixed;
+      ${logicalCSS('top', 0)}
+      ${logicalCSS('horizontal', 0)}
+
+      & + [data-fixed-header] {
+        ${logicalCSS('top', height)}
+      }
+    `,
   };
 };
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 192e3596640..d3a72cc932c 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -89,16 +89,11 @@ export const EuiHeader: FunctionComponent<EuiHeaderProps> = ({
   theme = 'default',
   ...rest
 }) => {
-  const classes = classNames(
-    'euiHeader',
-    `euiHeader--${theme}`,
-    `euiHeader--${position}`,
-    className
-  );
+  const classes = classNames('euiHeader', `euiHeader--${theme}`, className);
 
   const euiTheme = useEuiTheme();
   const styles = euiHeaderStyles(euiTheme);
-  const cssStyles = [styles.euiHeader];
+  const cssStyles = [styles.euiHeader, styles[position]];
 
   useEffect(() => {
     if (position === 'fixed') {
diff --git a/src/global_styling/functions/__snapshots__/logicals.test.ts.snap b/src/global_styling/functions/__snapshots__/logicals.test.ts.snap
index 1bb5c72def9..a49a6981f25 100644
--- a/src/global_styling/functions/__snapshots__/logicals.test.ts.snap
+++ b/src/global_styling/functions/__snapshots__/logicals.test.ts.snap
@@ -60,7 +60,7 @@ exports[`logicalCSS mixin returns a string property for each directional propert
 
 exports[`logicalCSS mixin returns a string property for each directional property: height 1`] = `"block-size: 8px;"`;
 
-exports[`logicalCSS mixin returns a string property for each directional property: horizontal 1`] = `"inset-block: 8px;"`;
+exports[`logicalCSS mixin returns a string property for each directional property: horizontal 1`] = `"inset-inline: 8px;"`;
 
 exports[`logicalCSS mixin returns a string property for each directional property: left 1`] = `"inset-inline-start: 8px;"`;
 
@@ -104,7 +104,7 @@ exports[`logicalCSS mixin returns a string property for each directional propert
 
 exports[`logicalCSS mixin returns a string property for each directional property: top 1`] = `"inset-block-start: 8px;"`;
 
-exports[`logicalCSS mixin returns a string property for each directional property: vertical 1`] = `"inset-inline: 8px;"`;
+exports[`logicalCSS mixin returns a string property for each directional property: vertical 1`] = `"inset-block: 8px;"`;
 
 exports[`logicalCSS mixin returns a string property for each directional property: width 1`] = `"inline-size: 8px;"`;
 
@@ -297,7 +297,7 @@ Object {
 
 exports[`logicalStyle mixin returns an object property for each directional property: horizontal 1`] = `
 Object {
-  "insetBlock": "8px",
+  "insetInline": "8px",
 }
 `;
 
@@ -429,7 +429,7 @@ Object {
 
 exports[`logicalStyle mixin returns an object property for each directional property: vertical 1`] = `
 Object {
-  "insetInline": "8px",
+  "insetBlock": "8px",
 }
 `;
 
diff --git a/src/global_styling/functions/logicals.json b/src/global_styling/functions/logicals.json
index d686f20aba7..cb4994ee7ad 100644
--- a/src/global_styling/functions/logicals.json
+++ b/src/global_styling/functions/logicals.json
@@ -9,8 +9,8 @@
   "right": "inset-inline-end",
   "bottom": "inset-block-end",
   "left": "inset-inline-start",
-  "horizontal": "inset-block",
-  "vertical": "inset-inline",
+  "horizontal": "inset-inline",
+  "vertical": "inset-block",
   "margin-left": "margin-inline-start",
   "margin-right": "margin-inline-end",
   "margin-top": "margin-block-start",
diff --git a/src/themes/amsterdam/overrides/_header.scss b/src/themes/amsterdam/overrides/_header.scss
index eb895f66414..39ae3802c46 100644
--- a/src/themes/amsterdam/overrides/_header.scss
+++ b/src/themes/amsterdam/overrides/_header.scss
@@ -16,7 +16,3 @@
 .euiHeaderLogo__text {
   @include euiTitle('xxs');
 }
-
-.euiHeader--default + .euiHeader--default {
-  border-top: $euiBorderThin;
-}

From 252a935c79db2e3cc0fcd31e1b2c6f531b192842 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 14:59:07 -0700
Subject: [PATCH 05/14] Convert default and dark theme styles to Emotion

---
 .../flyout/__snapshots__/flyout.test.tsx.snap |   2 +-
 .../header/__snapshots__/header.test.tsx.snap |  14 +-
 src/components/header/_header.scss            |  10 --
 src/components/header/_mixins.scss            |  36 -----
 src/components/header/header.styles.ts        | 126 +++++++++++++++++-
 src/components/header/header.tsx              |   4 +-
 .../_selectable_template_sitewide.scss        |  31 -----
 7 files changed, 134 insertions(+), 89 deletions(-)

diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index e3116f416cc..1a4b6046ddb 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -1093,7 +1093,7 @@ exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeader
 >
   <div>
     <div
-      class="euiHeader euiHeader--default emotion-euiHeader-fixed"
+      class="euiHeader emotion-euiHeader-fixed-default"
       data-fixed-header="true"
     />
     <div>
diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap
index 8b4e7aed2a8..a5fb430b6a3 100644
--- a/src/components/header/__snapshots__/header.test.tsx.snap
+++ b/src/components/header/__snapshots__/header.test.tsx.snap
@@ -3,14 +3,14 @@
 exports[`EuiHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiHeader euiHeader--default testClass1 testClass2 emotion-euiHeader-static"
+  class="euiHeader testClass1 testClass2 emotion-euiHeader-static-default"
   data-test-subj="test subject string"
 />
 `;
 
 exports[`EuiHeader renders children 1`] = `
 <div
-  class="euiHeader euiHeader--default emotion-euiHeader-static"
+  class="euiHeader emotion-euiHeader-static-default"
 >
   <span>
     Hello!
@@ -20,13 +20,13 @@ exports[`EuiHeader renders children 1`] = `
 
 exports[`EuiHeader renders dark theme 1`] = `
 <div
-  class="euiHeader euiHeader--dark emotion-euiHeader-static"
+  class="euiHeader emotion-euiHeader-static-dark"
 />
 `;
 
 exports[`EuiHeader renders in fixed position 1`] = `
 <div
-  class="euiHeader euiHeader--default emotion-euiHeader-fixed"
+  class="euiHeader emotion-euiHeader-fixed-default"
   data-fixed-header="true"
 >
   <span>
@@ -37,7 +37,7 @@ exports[`EuiHeader renders in fixed position 1`] = `
 
 exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 <div
-  class="euiHeader euiHeader--default emotion-euiHeader-static"
+  class="euiHeader emotion-euiHeader-static-default"
 >
   <nav
     aria-label="Breadcrumbs"
@@ -64,7 +64,7 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = `
 
 exports[`EuiHeader sections render simple items and borders 1`] = `
 <div
-  class="euiHeader euiHeader--default emotion-euiHeader-static"
+  class="euiHeader emotion-euiHeader-static-default"
 >
   <div
     class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
@@ -99,7 +99,7 @@ exports[`EuiHeader sections render simple items and borders 1`] = `
 
 exports[`EuiHeader throws a warning if both children and sections were passed 1`] = `
 <div
-  class="euiHeader euiHeader--default emotion-euiHeader-static"
+  class="euiHeader emotion-euiHeader-static-default"
 >
   <div
     class="euiHeaderSection euiHeaderSection--dontGrow euiHeaderSection--left"
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
index 9d1deab403c..e69de29bb2d 100644
--- a/src/components/header/_header.scss
+++ b/src/components/header/_header.scss
@@ -1,10 +0,0 @@
-// Header. Includes breadcrumbs of nav buttons.
-
-.euiHeader {
-  background: $euiHeaderBackgroundColor;
-  border-bottom: 1px solid $euiHeaderBorderColor;
-}
-
-.euiHeader--dark {
-  @include euiHeaderDarkTheme($euiHeaderDarkBackgroundColor);
-}
diff --git a/src/components/header/_mixins.scss b/src/components/header/_mixins.scss
index a5faf93947b..e69de29bb2d 100644
--- a/src/components/header/_mixins.scss
+++ b/src/components/header/_mixins.scss
@@ -1,36 +0,0 @@
-@mixin euiHeaderDarkTheme($backgroundColor) {
-  background-color: $backgroundColor;
-  border-bottom-color: lightOrDarkTheme($backgroundColor, $euiHeaderBorderColor);
-
-  .euiHeaderLogo__text,
-  .euiHeaderLink,
-  .euiHeaderSectionItemButton {
-    color: $euiColorGhost;
-  }
-
-  .euiHeaderLink-isActive {
-    color: makeHighContrastColor($euiColorPrimary, $backgroundColor);
-  }
-
-  .euiHeaderSectionItem {
-    &::after {
-      background: lightOrDarkTheme($euiColorDarkShade, $euiColorLightestShade);
-    }
-  }
-
-  .euiHeaderLogo,
-  .euiHeaderLink,
-  .euiHeaderSectionItemButton {
-    &:focus {
-      background: shade($euiColorPrimary, 50%);
-    }
-  }
-
-  .euiHeaderSectionItemButton__notification--badge {
-    box-shadow: 0 0 0 1px $backgroundColor;
-  }
-
-  .euiHeaderSectionItemButton__notification--dot {
-    stroke: $backgroundColor;
-  }
-}
diff --git a/src/components/header/header.styles.ts b/src/components/header/header.styles.ts
index ae375569fcb..d4f0c193bb0 100644
--- a/src/components/header/header.styles.ts
+++ b/src/components/header/header.styles.ts
@@ -10,7 +10,12 @@ import { css } from '@emotion/react';
 
 import { euiShadowSmall } from '../../themes/amsterdam/global_styling/mixins';
 import { logicalCSS } from '../../global_styling';
-import { UseEuiTheme } from '../../services';
+import {
+  UseEuiTheme,
+  shade,
+  transparentize,
+  makeHighContrastColor,
+} from '../../services';
 
 export const euiHeaderVariables = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -22,9 +27,16 @@ export const euiHeaderVariables = (euiThemeContext: UseEuiTheme) => {
 };
 
 export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, colorMode } = euiThemeContext;
   const { height } = euiHeaderVariables(euiThemeContext);
 
+  // Curated border color to fade into the shadow without looking too much like a border
+  // It adds separation between the header and flyout
+  const borderColor =
+    colorMode === 'DARK'
+      ? shade(euiTheme.colors.emptyShade, 0.35)
+      : shade(euiTheme.border.color, 0.03);
+
   return {
     euiHeader: css`
       display: flex;
@@ -49,5 +61,115 @@ export const euiHeaderStyles = (euiThemeContext: UseEuiTheme) => {
         ${logicalCSS('top', height)}
       }
     `,
+    // Theme
+    default: css`
+      background-color: ${euiTheme.colors.emptyShade};
+      ${logicalCSS(
+        'border-bottom',
+        `${euiTheme.border.width.thin} solid ${borderColor}`
+      )}
+    `,
+    dark: css(euiHeaderDarkStyles(euiThemeContext, borderColor)),
   };
 };
+
+/**
+ * The `dark` header is (currently) a bit of a special case. We don't
+ * actually want to use <EuiThemeProvider colorMode="dark"> inside it
+ * because that will affect popovers and `SelectableSitewideTemplate`
+ * as well, which we do not necessarily want to do (?)
+ *
+ * It's also possible that the dark header will go away or become unused
+ * by Kibana in the near future, at which point we can remove this
+ */
+import { euiFormVariables } from '../form/form.styles';
+
+const euiHeaderDarkStyles = (
+  euiThemeContext: UseEuiTheme,
+  defaultBorderColor: string
+) => {
+  const { euiTheme, colorMode } = euiThemeContext;
+  const { controlPlaceholderText } = euiFormVariables(euiThemeContext);
+
+  const backgroundColor =
+    colorMode === 'DARK'
+      ? shade(euiTheme.colors.lightestShade, 0.5)
+      : shade(euiTheme.colors.darkestShade, 0.28);
+  const borderColor =
+    colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
+
+  return `
+    background-color: ${backgroundColor};
+    ${logicalCSS('border-bottom-color', borderColor)}
+
+    .euiHeaderLogo__text,
+    .euiHeaderLink,
+    .euiHeaderSectionItemButton {
+      color: ${euiTheme.colors.ghost};
+    }
+
+    .euiHeaderLink-isActive {
+      color: ${makeHighContrastColor(euiTheme.colors.primary)(backgroundColor)};
+    }
+
+    .euiHeaderSectionItem {
+      &::after {
+        background-color: ${
+          colorMode === 'DARK'
+            ? euiTheme.colors.lightestShade
+            : euiTheme.colors.darkShade
+        };
+      }
+    }
+
+    .euiHeaderLogo,
+    .euiHeaderLink,
+    .euiHeaderSectionItemButton {
+      &:focus {
+        background-color: ${shade(euiTheme.colors.primary, 0.5)};
+      }
+    }
+
+    .euiHeaderSectionItemButton__notification--badge {
+      box-shadow: 0 0 0 ${euiTheme.border.width.thin} ${backgroundColor};
+    }
+
+    .euiHeaderSectionItemButton__notification--dot {
+      stroke: ${backgroundColor};
+    }
+
+    .euiSelectableTemplateSitewide .euiFormControlLayout {
+      background-color: transparent;
+
+      &--group,
+      input {
+        box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
+          ${transparentize(euiTheme.colors.ghost, 0.3)};
+      }
+
+      &:not(:focus-within) {
+        /* Increase contrast of filled text to be more than placeholder text */
+        color: ${euiTheme.colors.ghost};
+
+        input {
+          /* Increase contrast of placeholder text */
+          &::placeholder {
+            color: ${makeHighContrastColor(
+              controlPlaceholderText,
+              8
+            )(backgroundColor)};
+          }
+
+          /* Inherit color from form control layout */
+          color: inherit;
+          background-color: transparent;
+        }
+
+        .euiFormControlLayout__append {
+          background-color: transparent;
+          color: inherit;
+        }
+      }
+    }
+  `;
+};
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index d3a72cc932c..056995cd49b 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -89,11 +89,11 @@ export const EuiHeader: FunctionComponent<EuiHeaderProps> = ({
   theme = 'default',
   ...rest
 }) => {
-  const classes = classNames('euiHeader', `euiHeader--${theme}`, className);
+  const classes = classNames('euiHeader', className);
 
   const euiTheme = useEuiTheme();
   const styles = euiHeaderStyles(euiTheme);
-  const cssStyles = [styles.euiHeader, styles[position]];
+  const cssStyles = [styles.euiHeader, styles[position], styles[theme]];
 
   useEffect(() => {
     if (position === 'fixed') {
diff --git a/src/components/selectable/selectable_templates/_selectable_template_sitewide.scss b/src/components/selectable/selectable_templates/_selectable_template_sitewide.scss
index c8c7a0a94f3..e69de29bb2d 100644
--- a/src/components/selectable/selectable_templates/_selectable_template_sitewide.scss
+++ b/src/components/selectable/selectable_templates/_selectable_template_sitewide.scss
@@ -1,31 +0,0 @@
-// Temporary style override for inserting search template into dark header
-// These selectors aren't targetable via EuiFieldSearch
-.euiHeader--dark .euiSelectableTemplateSitewide .euiFormControlLayout {
-  background-color: transparent;
-
-  &--group,
-  input {
-    box-shadow: inset 0 0 0 1px transparentize($euiColorGhost, .7);
-  }
-
-  &:not(:focus-within) {
-    // Increase contrast of filled text to be more than placeholder text
-    color: $euiColorGhost;
-
-    input {
-      // Increase contrast of placeholder text
-      @include euiPlaceholderPerBrowser {
-        color: makeHighContrastColor($euiFormControlPlaceholderText, $euiHeaderDarkBackgroundColor, 8);
-      }
-
-      // Inherit color from form control layout
-      color: inherit;
-      background-color: transparent;
-    }
-
-    .euiFormControlLayout__append {
-      background-color: transparent;
-      color: inherit;
-    }
-  }
-}

From 8f9c0e8e9a1e4c91d8e46c8acaec658e5e84d000 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 26 Jun 2023 18:54:00 -0700
Subject: [PATCH 06/14] [EuiHeader] Convert tests to RTL

---
 .../header/__snapshots__/header.test.tsx.snap |  3 +-
 src/components/header/header.test.tsx         | 42 +++++++++----------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/header/__snapshots__/header.test.tsx.snap b/src/components/header/__snapshots__/header.test.tsx.snap
index a5fb430b6a3..85447947d44 100644
--- a/src/components/header/__snapshots__/header.test.tsx.snap
+++ b/src/components/header/__snapshots__/header.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiHeader is rendered 1`] = `
+exports[`EuiHeader renders 1`] = `
 <div
   aria-label="aria-label"
   class="euiHeader testClass1 testClass2 emotion-euiHeader-static-default"
@@ -53,6 +53,7 @@ exports[`EuiHeader sections render breadcrumbs and props 1`] = `
         <span
           aria-current="page"
           class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
+          title="Breadcrumb"
         >
           Breadcrumb
         </span>
diff --git a/src/components/header/header.test.tsx b/src/components/header/header.test.tsx
index 24a9a60387f..6f2330f116e 100644
--- a/src/components/header/header.test.tsx
+++ b/src/components/header/header.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render } from '../../test/rtl';
 import { requiredProps } from '../../test/required_props';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
@@ -23,41 +23,41 @@ describe('EuiHeader', () => {
     }
   );
 
-  test('is rendered', () => {
-    const component = render(<EuiHeader {...requiredProps} />);
+  it('renders', () => {
+    const { container } = render(<EuiHeader {...requiredProps} />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('renders children', () => {
-    const component = render(
+  it('renders children', () => {
+    const { container } = render(
       <EuiHeader>
         <span>Hello!</span>
       </EuiHeader>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('renders in fixed position', () => {
-    const component = render(
+  it('renders in fixed position', () => {
+    const { container } = render(
       <EuiHeader position="fixed">
         <span>Hello!</span>
       </EuiHeader>
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('renders dark theme', () => {
-    const component = render(<EuiHeader theme="dark" />);
+  it('renders dark theme', () => {
+    const { container } = render(<EuiHeader theme="dark" />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('sections', () => {
-    test('render simple items and borders', () => {
-      const component = render(
+    it('render simple items and borders', () => {
+      const { container } = render(
         <EuiHeader
           sections={[
             {
@@ -71,11 +71,11 @@ describe('EuiHeader', () => {
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('render breadcrumbs and props', () => {
-      const component = render(
+    it('render breadcrumbs and props', () => {
+      const { container } = render(
         <EuiHeader
           sections={[
             {
@@ -86,7 +86,7 @@ describe('EuiHeader', () => {
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 
@@ -106,7 +106,7 @@ describe('EuiHeader', () => {
     });
 
     test('if both children and sections were passed', () => {
-      const component = render(
+      const { container } = render(
         <EuiHeader
           sections={[
             {
@@ -122,7 +122,7 @@ describe('EuiHeader', () => {
       expect(consoleStub.mock.calls[0][0]).toMatch(
         'cannot accept both `children` and `sections`'
       );
-      expect(component).toMatchSnapshot();
+      expect(container.firstChild).toMatchSnapshot();
     });
   });
 });

From 198fb7a27263b10867b26c20bdd313dabf18b108 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 15:05:40 -0700
Subject: [PATCH 07/14] Remove unused `euiHeaderProfile` Sass

- Only used in `src-docs/` and can be totally replaced by `panelPaddingSize` :shrug:

- not used anywhere in Kibana
---
 src-docs/src/views/header/header.tsx       | 10 +++-------
 src-docs/src/views/header/header_alert.tsx | 10 +++-------
 src/components/header/_header_profile.scss |  3 ---
 src/components/header/_index.scss          |  1 -
 4 files changed, 6 insertions(+), 18 deletions(-)
 delete mode 100644 src/components/header/_header_profile.scss

diff --git a/src-docs/src/views/header/header.tsx b/src-docs/src/views/header/header.tsx
index c091d5e6e59..93048100dd7 100644
--- a/src-docs/src/views/header/header.tsx
+++ b/src-docs/src/views/header/header.tsx
@@ -171,14 +171,10 @@ const HeaderUserMenu = () => {
       isOpen={isOpen}
       anchorPosition="downRight"
       closePopover={closeMenu}
-      panelPaddingSize="none"
+      panelPaddingSize="m"
     >
-      <div style={{ width: 320 }}>
-        <EuiFlexGroup
-          gutterSize="m"
-          className="euiHeaderProfile"
-          responsive={false}
-        >
+      <div style={{ width: 300 }}>
+        <EuiFlexGroup gutterSize="m" responsive={false}>
           <EuiFlexItem grow={false}>
             <EuiAvatar name="John Username" size="xl" />
           </EuiFlexItem>
diff --git a/src-docs/src/views/header/header_alert.tsx b/src-docs/src/views/header/header_alert.tsx
index f96b78d54ec..5a48d783dc6 100644
--- a/src-docs/src/views/header/header_alert.tsx
+++ b/src-docs/src/views/header/header_alert.tsx
@@ -278,14 +278,10 @@ const HeaderUserMenu = () => {
       isOpen={isOpen}
       anchorPosition="downRight"
       closePopover={closeMenu}
-      panelPaddingSize="none"
+      panelPaddingSize="m"
     >
-      <div style={{ width: 320 }}>
-        <EuiFlexGroup
-          gutterSize="m"
-          className="euiHeaderProfile"
-          responsive={false}
-        >
+      <div style={{ width: 300 }}>
+        <EuiFlexGroup gutterSize="m" responsive={false}>
           <EuiFlexItem grow={false}>
             <EuiAvatar name="John Username" size="xl" />
           </EuiFlexItem>
diff --git a/src/components/header/_header_profile.scss b/src/components/header/_header_profile.scss
deleted file mode 100644
index ee039141f02..00000000000
--- a/src/components/header/_header_profile.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.euiHeaderProfile {
-  padding: $euiSize;
-}
diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss
index a6b42ef1a87..24cc5918bf3 100644
--- a/src/components/header/_index.scss
+++ b/src/components/header/_index.scss
@@ -2,7 +2,6 @@
 @import 'mixins';
 
 @import 'header';
-@import 'header_profile';
 @import 'header_links/index';
 @import 'header_logo';
 @import 'header_alert/index';

From 5836c4dcef4491a013de890ae4d4160c9f9cf4f9 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 15:34:03 -0700
Subject: [PATCH 08/14] [EuiHeaderLogo] Clean up CSS

- 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
---
 src/components/header/_header_logo.scss     | 26 ++++-----------------
 src/global_styling/variables/_header.scss   |  5 ----
 src/themes/amsterdam/overrides/_header.scss | 14 -----------
 3 files changed, 4 insertions(+), 41 deletions(-)

diff --git a/src/components/header/_header_logo.scss b/src/components/header/_header_logo.scss
index 662c6d24736..4b4ae34ad84 100644
--- a/src/components/header/_header_logo.scss
+++ b/src/components/header/_header_logo.scss
@@ -1,40 +1,22 @@
 .euiHeaderLogo {
-  @include euiLink;
-
   position: relative;
   height: $euiHeaderChildSize;
   line-height: $euiHeaderChildSize;
-  min-width: $euiHeaderChildSize + 1px;
-  padding: 0 ($euiSizeM + 1px) 0 $euiSizeM;
+  min-width: $euiHeaderChildSize;
+  padding: 0 $euiSizeS;
   display: inline-flex;
   align-items: center;
   vertical-align: middle;
   white-space: nowrap;
-
-  &:focus,
-  &:hover {
-    text-decoration: none;
-  }
 }
 
 .euiHeaderLogo__text {
-  @include euiTitle('s');
+  @include euiTitle('xxs');
   padding-left: $euiSize;
-  font-weight: $euiFontWeightLight;
 }
 
 @include euiBreakpoint('xs') {
   .euiHeaderLogo {
-    padding: 0 $euiSizeM;
-  }
-
-  .euiHeaderLogo__icon.euiIcon--xLarge {
-    width: $euiSizeL;
-    height: $euiSizeL;
-  }
-
-  .euiHeaderLogo__text {
-    @include euiTitle('xs');
-    font-weight: $euiFontWeightRegular;
+    padding-left: $euiSizeXS;
   }
 }
diff --git a/src/global_styling/variables/_header.scss b/src/global_styling/variables/_header.scss
index 24b898826d1..d3fa43e9ee7 100644
--- a/src/global_styling/variables/_header.scss
+++ b/src/global_styling/variables/_header.scss
@@ -1,10 +1,5 @@
 // Themeable colors
 $euiHeaderBackgroundColor: $euiColorEmptyShade !default;
-$euiHeaderDarkBackgroundColor: lightOrDarkTheme(shade($euiColorDarkestShade, 28%), shade($euiColorLightestShade, 50%)) !default;
-// Curated border color to fade into the shadow without looking too much like a border
-// It adds separation between the header and flyout
-$euiHeaderBorderColor: lightOrDarkTheme(shade($euiBorderColor, 3%), shade($euiColorEmptyShade, 35%));
-$euiHeaderBreadcrumbColor: $euiColorDarkestShade !default;
 
 // Layout vars
 $euiHeaderHeight: $euiSizeXXL + $euiSizeS !default;
diff --git a/src/themes/amsterdam/overrides/_header.scss b/src/themes/amsterdam/overrides/_header.scss
index 39ae3802c46..0f1aabddb14 100644
--- a/src/themes/amsterdam/overrides/_header.scss
+++ b/src/themes/amsterdam/overrides/_header.scss
@@ -2,17 +2,3 @@
 .euiHeaderSectionItem::after {
   display: none !important; // stylelint-disable-line declaration-no-important
 }
-
-.euiHeaderLogo {
-  @include euiBreakpoint('xs') {
-    padding-left: $euiSizeXS;
-  }
-
-  padding-left: $euiSizeS;
-  padding-right: $euiSizeS;
-  min-width: $euiHeaderChildSize;
-}
-
-.euiHeaderLogo__text {
-  @include euiTitle('xxs');
-}

From f5b014612f366306e9c4fdfa5c83f90775c2ebbe Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 15:48:47 -0700
Subject: [PATCH 09/14] [EuiHeaderLogo] Convert to Emotion

+ 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
---
 src/components/header/_header_logo.scss     | 22 ----------
 src/components/header/header_logo.styles.ts | 45 +++++++++++++++++++++
 src/components/header/header_logo.tsx       | 17 ++++++--
 3 files changed, 59 insertions(+), 25 deletions(-)
 create mode 100644 src/components/header/header_logo.styles.ts

diff --git a/src/components/header/_header_logo.scss b/src/components/header/_header_logo.scss
index 4b4ae34ad84..e69de29bb2d 100644
--- a/src/components/header/_header_logo.scss
+++ b/src/components/header/_header_logo.scss
@@ -1,22 +0,0 @@
-.euiHeaderLogo {
-  position: relative;
-  height: $euiHeaderChildSize;
-  line-height: $euiHeaderChildSize;
-  min-width: $euiHeaderChildSize;
-  padding: 0 $euiSizeS;
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  white-space: nowrap;
-}
-
-.euiHeaderLogo__text {
-  @include euiTitle('xxs');
-  padding-left: $euiSize;
-}
-
-@include euiBreakpoint('xs') {
-  .euiHeaderLogo {
-    padding-left: $euiSizeXS;
-  }
-}
diff --git a/src/components/header/header_logo.styles.ts b/src/components/header/header_logo.styles.ts
new file mode 100644
index 00000000000..3b7ac306c20
--- /dev/null
+++ b/src/components/header/header_logo.styles.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { logicalCSS, euiBreakpoint } from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+
+import { euiTitle } from '../title/title.styles';
+import { euiHeaderVariables } from './header.styles';
+
+export const euiHeaderLogoStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { childHeight } = euiHeaderVariables(euiThemeContext);
+
+  return {
+    euiHeaderLogo: css`
+      position: relative;
+      ${logicalCSS('height', childHeight)}
+      line-height: ${childHeight};
+      ${logicalCSS('min-width', childHeight)}
+      padding-inline: ${euiTheme.size.s};
+      display: inline-flex;
+      align-items: center;
+      white-space: nowrap;
+
+      ${euiBreakpoint(euiThemeContext, ['xs'])} {
+        ${logicalCSS('padding-left', euiTheme.size.xs)}
+      }
+    `,
+    euiHeaderLogo__text: css`
+      ${euiTitle(euiThemeContext, 'xxs')}
+      ${logicalCSS('padding-left', euiTheme.size.base)}
+
+      ${euiBreakpoint(euiThemeContext, ['xs'])} {
+        ${logicalCSS('padding-left', euiTheme.size.s)}
+      }
+    `,
+  };
+};
diff --git a/src/components/header/header_logo.tsx b/src/components/header/header_logo.tsx
index bd651f61555..c66f40f8dd4 100644
--- a/src/components/header/header_logo.tsx
+++ b/src/components/header/header_logo.tsx
@@ -13,10 +13,12 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
+import { useEuiTheme, getSecureRelForTarget } from '../../services';
+import { validateHref } from '../../services/security/href_validator';
 import { EuiIcon, IconType } from '../icon';
 import { CommonProps } from '../common';
-import { getSecureRelForTarget } from '../../services';
-import { validateHref } from '../../services/security/href_validator';
+
+import { euiHeaderLogoStyles } from './header_logo.styles';
 
 export type EuiHeaderLogoProps = CommonProps &
   AnchorHTMLAttributes<HTMLAnchorElement> & {
@@ -42,13 +44,18 @@ export const EuiHeaderLogo: FunctionComponent<EuiHeaderLogoProps> = ({
   ...rest
 }) => {
   const classes = classNames('euiHeaderLogo', className);
+  const euiTheme = useEuiTheme();
+  const styles = euiHeaderLogoStyles(euiTheme);
+
   const secureRel = getSecureRelForTarget({ href, rel, target });
   const isHrefValid = !href || validateHref(href);
+
   return (
     <a
       href={isHrefValid ? href : ''}
       rel={secureRel}
       target={target}
+      css={styles.euiHeaderLogo}
       className={classes}
       {...rest}
     >
@@ -59,7 +66,11 @@ export const EuiHeaderLogo: FunctionComponent<EuiHeaderLogoProps> = ({
         type={iconType}
       />
 
-      {children && <span className="euiHeaderLogo__text">{children}</span>}
+      {children && (
+        <span css={styles.euiHeaderLogo__text} className="euiHeaderLogo__text">
+          {children}
+        </span>
+      )}
     </a>
   );
 };

From cdb6c66004be453093dca00d279fb3ba95cd82b1 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 15:52:47 -0700
Subject: [PATCH 10/14] [EuiHeaderLogo] Update tests

- convert to RTL from Enyzme + add a test for `euiHeaderLogo__text`
---
 .../__snapshots__/header_logo.test.tsx.snap   | 31 ++++++++++++----
 src/components/header/header_logo.test.tsx    | 35 ++++++++++++-------
 2 files changed, 47 insertions(+), 19 deletions(-)

diff --git a/src/components/header/__snapshots__/header_logo.test.tsx.snap b/src/components/header/__snapshots__/header_logo.test.tsx.snap
index 74e03effa1e..6377df28601 100644
--- a/src/components/header/__snapshots__/header_logo.test.tsx.snap
+++ b/src/components/header/__snapshots__/header_logo.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiHeaderLogo is rendered 1`] = `
+exports[`EuiHeaderLogo renders 1`] = `
 <a
   aria-label="aria-label"
-  class="euiHeaderLogo testClass1 testClass2"
+  class="euiHeaderLogo testClass1 testClass2 emotion-euiHeaderLogo"
   data-test-subj="test subject string"
   rel="noreferrer"
 >
@@ -18,7 +18,7 @@ exports[`EuiHeaderLogo is rendered 1`] = `
 
 exports[`EuiHeaderLogo renders href 1`] = `
 <a
-  class="euiHeaderLogo"
+  class="euiHeaderLogo emotion-euiHeaderLogo"
   href="#"
   rel="noreferrer"
 >
@@ -33,7 +33,7 @@ exports[`EuiHeaderLogo renders href 1`] = `
 
 exports[`EuiHeaderLogo renders href with rel 1`] = `
 <a
-  class="euiHeaderLogo"
+  class="euiHeaderLogo emotion-euiHeaderLogo"
   href="#"
   rel="noreferrer"
 >
@@ -48,9 +48,9 @@ exports[`EuiHeaderLogo renders href with rel 1`] = `
 
 exports[`EuiHeaderLogo renders optional props 1`] = `
 <a
-  class="euiHeaderLogo"
+  class="euiHeaderLogo emotion-euiHeaderLogo"
   rel="noreferrer"
-  style="color:red"
+  style="color: red;"
 >
   <span
     class="euiHeaderLogo__icon"
@@ -60,3 +60,22 @@ exports[`EuiHeaderLogo renders optional props 1`] = `
   </span>
 </a>
 `;
+
+exports[`EuiHeaderLogo renders text 1`] = `
+<a
+  class="euiHeaderLogo emotion-euiHeaderLogo"
+  rel="noreferrer"
+>
+  <span
+    class="euiHeaderLogo__icon"
+    data-euiicon-type="logoElastic"
+  >
+    Elastic
+  </span>
+  <span
+    class="euiHeaderLogo__text emotion-euiHeaderLogo__text"
+  >
+    Elastic
+  </span>
+</a>
+`;
diff --git a/src/components/header/header_logo.test.tsx b/src/components/header/header_logo.test.tsx
index 8ab446237c4..303d3aeb631 100644
--- a/src/components/header/header_logo.test.tsx
+++ b/src/components/header/header_logo.test.tsx
@@ -7,32 +7,41 @@
  */
 
 import React from 'react';
-import { render } from 'enzyme';
+import { render } from '../../test/rtl';
 import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiHeaderLogo } from './header_logo';
 
 describe('EuiHeaderLogo', () => {
-  test('is rendered', () => {
-    const component = render(<EuiHeaderLogo {...requiredProps} />);
+  shouldRenderCustomStyles(<EuiHeaderLogo />);
 
-    expect(component).toMatchSnapshot();
+  it('renders', () => {
+    const { container } = render(<EuiHeaderLogo {...requiredProps} />);
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it('renders href', () => {
+    const { container } = render(<EuiHeaderLogo href="#" />);
+
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('renders href', () => {
-    const component = render(<EuiHeaderLogo href="#" />);
+  it('renders href with rel', () => {
+    const { container } = render(<EuiHeaderLogo href="#" rel="noreferrer" />);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('renders href with rel', () => {
-    const component = render(<EuiHeaderLogo href="#" rel="noreferrer" />);
+  it('renders text', () => {
+    const { container } = render(<EuiHeaderLogo>Elastic</EuiHeaderLogo>);
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('renders optional props', () => {
-    const component = render(
+  it('renders optional props', () => {
+    const { container } = render(
       <EuiHeaderLogo
         iconType="error"
         iconTitle="Moby Dick"
@@ -40,6 +49,6 @@ describe('EuiHeaderLogo', () => {
       />
     );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

From f1d8bed6b11f7de89492cf3c5860c95a9d6a0123 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 23 Jun 2023 16:03:13 -0700
Subject: [PATCH 11/14] [EuiHeaderLogo] Reorganize files into its own
 subdirectory

- to match other subcomponents
---
 .../__snapshots__/header_logo.test.tsx.snap            |  0
 .../header/{ => header_logo}/header_logo.styles.ts     |  8 ++++----
 .../header/{ => header_logo}/header_logo.test.tsx      |  6 +++---
 .../header/{ => header_logo}/header_logo.tsx           |  8 ++++----
 src/components/header/header_logo/index.ts             | 10 ++++++++++
 5 files changed, 21 insertions(+), 11 deletions(-)
 rename src/components/header/{ => header_logo}/__snapshots__/header_logo.test.tsx.snap (100%)
 rename src/components/header/{ => header_logo}/header_logo.styles.ts (84%)
 rename src/components/header/{ => header_logo}/header_logo.test.tsx (89%)
 rename src/components/header/{ => header_logo}/header_logo.tsx (88%)
 create mode 100644 src/components/header/header_logo/index.ts

diff --git a/src/components/header/__snapshots__/header_logo.test.tsx.snap b/src/components/header/header_logo/__snapshots__/header_logo.test.tsx.snap
similarity index 100%
rename from src/components/header/__snapshots__/header_logo.test.tsx.snap
rename to src/components/header/header_logo/__snapshots__/header_logo.test.tsx.snap
diff --git a/src/components/header/header_logo.styles.ts b/src/components/header/header_logo/header_logo.styles.ts
similarity index 84%
rename from src/components/header/header_logo.styles.ts
rename to src/components/header/header_logo/header_logo.styles.ts
index 3b7ac306c20..c093182fa4b 100644
--- a/src/components/header/header_logo.styles.ts
+++ b/src/components/header/header_logo/header_logo.styles.ts
@@ -8,11 +8,11 @@
 
 import { css } from '@emotion/react';
 
-import { logicalCSS, euiBreakpoint } from '../../global_styling';
-import { UseEuiTheme } from '../../services';
+import { logicalCSS, euiBreakpoint } from '../../../global_styling';
+import { UseEuiTheme } from '../../../services';
 
-import { euiTitle } from '../title/title.styles';
-import { euiHeaderVariables } from './header.styles';
+import { euiTitle } from '../../title/title.styles';
+import { euiHeaderVariables } from '../header.styles';
 
 export const euiHeaderLogoStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
diff --git a/src/components/header/header_logo.test.tsx b/src/components/header/header_logo/header_logo.test.tsx
similarity index 89%
rename from src/components/header/header_logo.test.tsx
rename to src/components/header/header_logo/header_logo.test.tsx
index 303d3aeb631..cb9b2b8e178 100644
--- a/src/components/header/header_logo.test.tsx
+++ b/src/components/header/header_logo/header_logo.test.tsx
@@ -7,9 +7,9 @@
  */
 
 import React from 'react';
-import { render } from '../../test/rtl';
-import { requiredProps } from '../../test';
-import { shouldRenderCustomStyles } from '../../test/internal';
+import { render } from '../../../test/rtl';
+import { requiredProps } from '../../../test';
+import { shouldRenderCustomStyles } from '../../../test/internal';
 
 import { EuiHeaderLogo } from './header_logo';
 
diff --git a/src/components/header/header_logo.tsx b/src/components/header/header_logo/header_logo.tsx
similarity index 88%
rename from src/components/header/header_logo.tsx
rename to src/components/header/header_logo/header_logo.tsx
index c66f40f8dd4..5ae0ee81af9 100644
--- a/src/components/header/header_logo.tsx
+++ b/src/components/header/header_logo/header_logo.tsx
@@ -13,10 +13,10 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme, getSecureRelForTarget } from '../../services';
-import { validateHref } from '../../services/security/href_validator';
-import { EuiIcon, IconType } from '../icon';
-import { CommonProps } from '../common';
+import { useEuiTheme, getSecureRelForTarget } from '../../../services';
+import { validateHref } from '../../../services/security/href_validator';
+import { EuiIcon, IconType } from '../../icon';
+import { CommonProps } from '../../common';
 
 import { euiHeaderLogoStyles } from './header_logo.styles';
 
diff --git a/src/components/header/header_logo/index.ts b/src/components/header/header_logo/index.ts
new file mode 100644
index 00000000000..78c337a4a72
--- /dev/null
+++ b/src/components/header/header_logo/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type { EuiHeaderLogoProps } from './header_logo';
+export { EuiHeaderLogo } from './header_logo';

From 5cb93587ad137d0ec5ff77937f06828789641cc6 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 26 Jun 2023 19:06:17 -0700
Subject: [PATCH 12/14] Add storybook stories

---
 src/components/header/header.stories.tsx      | 26 +++++++++++++++
 .../header_logo/header_logo.stories.tsx       | 33 +++++++++++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/components/header/header.stories.tsx
 create mode 100644 src/components/header/header_logo/header_logo.stories.tsx

diff --git a/src/components/header/header.stories.tsx b/src/components/header/header.stories.tsx
new file mode 100644
index 00000000000..27db20bb59d
--- /dev/null
+++ b/src/components/header/header.stories.tsx
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiHeader, EuiHeaderProps } from './header';
+
+const meta: Meta<EuiHeaderProps> = {
+  title: 'EuiHeader',
+  component: EuiHeader,
+};
+
+export default meta;
+type Story = StoryObj<EuiHeaderProps>;
+
+export const Playground: Story = {
+  args: {
+    position: 'static',
+    theme: 'default',
+  },
+};
diff --git a/src/components/header/header_logo/header_logo.stories.tsx b/src/components/header/header_logo/header_logo.stories.tsx
new file mode 100644
index 00000000000..2a28a0d391b
--- /dev/null
+++ b/src/components/header/header_logo/header_logo.stories.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiHeader } from '../header';
+import { EuiHeaderLogo, EuiHeaderLogoProps } from './header_logo';
+
+const meta: Meta<EuiHeaderLogoProps> = {
+  title: 'EuiHeaderLogo',
+  component: EuiHeaderLogo,
+};
+
+export default meta;
+type Story = StoryObj<EuiHeaderLogoProps>;
+
+export const Playground: Story = {
+  render: ({ ...args }) => (
+    <EuiHeader>
+      <EuiHeaderLogo {...args} />
+    </EuiHeader>
+  ),
+  args: {
+    iconType: 'logoElastic',
+    iconTitle: 'Elastic',
+  },
+};

From 4e4b7b6795cfd791fc87b79ec72d4a17432191a7 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 26 Jun 2023 19:06:29 -0700
Subject: [PATCH 13/14] Delete Sass files

---
 src/components/header/_header.scss                           | 0
 src/components/header/_header_logo.scss                      | 0
 src/components/header/_index.scss                            | 5 -----
 src/components/header/_mixins.scss                           | 0
 src/components/selectable/selectable_templates/_index.scss   | 1 -
 .../selectable_templates/_selectable_template_sitewide.scss  | 0
 6 files changed, 6 deletions(-)
 delete mode 100644 src/components/header/_header.scss
 delete mode 100644 src/components/header/_header_logo.scss
 delete mode 100644 src/components/header/_mixins.scss
 delete mode 100644 src/components/selectable/selectable_templates/_selectable_template_sitewide.scss

diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/components/header/_header_logo.scss b/src/components/header/_header_logo.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss
index 24cc5918bf3..0aeb496e6c2 100644
--- a/src/components/header/_index.scss
+++ b/src/components/header/_index.scss
@@ -1,8 +1,3 @@
-// Components
-@import 'mixins';
-
-@import 'header';
 @import 'header_links/index';
-@import 'header_logo';
 @import 'header_alert/index';
 @import 'header_section/index';
diff --git a/src/components/header/_mixins.scss b/src/components/header/_mixins.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/components/selectable/selectable_templates/_index.scss b/src/components/selectable/selectable_templates/_index.scss
index 43ebefc08d9..20415f8105d 100644
--- a/src/components/selectable/selectable_templates/_index.scss
+++ b/src/components/selectable/selectable_templates/_index.scss
@@ -1,3 +1,2 @@
 @import 'variables';
-@import 'selectable_template_sitewide';
 @import 'selectable_template_sitewide_option';
diff --git a/src/components/selectable/selectable_templates/_selectable_template_sitewide.scss b/src/components/selectable/selectable_templates/_selectable_template_sitewide.scss
deleted file mode 100644
index e69de29bb2d..00000000000

From 5c39b099b9e76996bbcf20c16c8a8ce6b91149af Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 26 Jun 2023 19:12:43 -0700
Subject: [PATCH 14/14] changelog

---
 upcoming_changelogs/6878.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 upcoming_changelogs/6878.md

diff --git a/upcoming_changelogs/6878.md b/upcoming_changelogs/6878.md
new file mode 100644
index 00000000000..5d4db7cfe61
--- /dev/null
+++ b/upcoming_changelogs/6878.md
@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiHeader` and `EuiHeaderLogo` to Emotion
+- Removed Sass variables `$euiHeaderDarkBackgroundColor`, `$euiHeaderBorderColor`, and `$euiHeaderBreadcrumbColor`
+- Removed Sass mixin `@euiHeaderDarkTheme`