[EuiHeader] Fix dark theme overrides for EuiSelectableTemplateSitewide

packages/eui/changelogs/upcoming/7977.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSelectableTemplateSitewide` styles when used within a dark-themed `EuiHeader`

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

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;
  }
  }