[EuiHeader] Fix dark theme overrides for EuiSelectableTemplateSitewide (

#7977)
elastic · Aug 23, 2024 · ef52743 · ef52743
1 parent 53ab5aa
commit ef52743
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 5 deletions.
diff --git a/...e/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/...e/chrome_desktop_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
diff --git a/...ce/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png b/...ce/chrome_mobile_Layout_EuiHeader_EuiHeader_Dark_Theme_With_Sitewide_Search.png
diff --git a/packages/eui/changelogs/upcoming/7977.md b/packages/eui/changelogs/upcoming/7977.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSelectableTemplateSitewide` styles when used within a dark-themed `EuiHeader`
diff --git a/packages/eui/src/components/header/header.stories.tsx b/packages/eui/src/components/header/header.stories.tsx
@@ -8,12 +8,14 @@
 
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
 
 import {
   EuiHeaderLogo,
   EuiHeaderSectionItemButton,
   EuiHeaderLinks,
   EuiHeaderLink,
+  EuiSelectableTemplateSitewide,
   EuiIcon,
   EuiAvatar,
   EuiButton,
@@ -84,6 +86,74 @@ export const Sections: Story = {
   },
 };
 
+export const DarkThemeWithSitewideSearch: Story = {
+  parameters: {
+    layout: 'fullscreen',
+    controls: { include: ['theme'] },
+    loki: { chromeSelector: LOKI_SELECTORS.body }, // Required to capture the open popover
+  },
+  args: {
+    theme: 'dark',
+    position: 'fixed',
+    sections: [
+      {
+        items: [
+          <EuiHeaderLogo iconType="logoElastic" href="">
+            Elastic
+          </EuiHeaderLogo>,
+        ],
+      },
+      {
+        items: [
+          <EuiSelectableTemplateSitewide
+            options={[
+              {
+                label: 'Welcome dashboards',
+                icon: {
+                  type: 'clock',
+                  color: 'subdued',
+                },
+                avatar: { name: 'Default Space' },
+                meta: [
+                  {
+                    text: 'Dashboard',
+                    type: 'application',
+                    highlightSearchString: true,
+                  },
+                ],
+              },
+            ]}
+            searchProps={{
+              append: '⌘K',
+              compressed: true,
+            }}
+            popoverButton={
+              <EuiHeaderSectionItemButton aria-label="Sitewide search">
+                <EuiIcon type="search" size="m" />
+              </EuiHeaderSectionItemButton>
+            }
+            popoverButtonBreakpoints={['xs', 's']}
+            popoverProps={{
+              isOpen: true,
+              repositionOnScroll: true, // Necessary when placing search in a fixed component
+            }}
+          />,
+        ],
+      },
+      {
+        items: [
+          <EuiHeaderSectionItemButton
+            notification={true}
+            aria-label="Notifications: Updates available"
+          >
+            <EuiIcon type="cheer" size="m" />
+          </EuiHeaderSectionItemButton>,
+        ],
+      },
+    ],
+  },
+};
+
 const MultipleFixedHeadersExample = () => {
   const [fixedHeadersCount, setFixedHeadersCount] = useState(3); // eslint-disable-line react-hooks/rules-of-hooks
   const [isFlyoutOpen, setIsFlyoutOpen] = useState(false); // eslint-disable-line react-hooks/rules-of-hooks

diff --git a/packages/eui/src/components/header/header.styles.ts b/packages/eui/src/components/header/header.styles.ts
@@ -128,10 +128,8 @@ const euiHeaderDarkStyles = (
     .euiSelectableTemplateSitewide .euiFormControlLayout {
       background-color: transparent;
 
-      &--group,
-      input {
-        box-shadow: inset 0 0 0 ${euiTheme.border.width.thin}
-          ${transparentize(euiTheme.colors.ghost, 0.3)};
+      &--group {
+        border-color: ${transparentize(euiTheme.colors.ghost, 0.3)};
       }
 
       &:not(:focus-within) {
@@ -152,8 +150,12 @@ const euiHeaderDarkStyles = (
           background-color: transparent;
         }
 
-        .euiFormControlLayout__append {
+        .euiFormControlLayout__append,
+        .euiFormControlLayout__prepend {
           background-color: transparent;
+        }
+
+        .euiFormLabel {
           color: inherit;
         }
       }