[REVERT ME] Demo bug

elastic · Nov 3, 2023 · 611d30f · 611d30f
1 parent 3e26532
commit 611d30f
Showing 1 changed file with 57 additions and 43 deletions.
diff --git a/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx b/src-docs/src/views/selectable/selectable_templates/sitewide_search.tsx
@@ -2,6 +2,8 @@ import React, { useState, useEffect } from 'react';
 import { css } from '@emotion/react';
 
 import {
+  EuiHeader,
+  EuiHeaderSectionItem,
   EuiFlexGroup,
   EuiFlexItem,
   EuiText,
@@ -11,6 +13,7 @@ import {
   EuiSelectableTemplateSitewide,
   EuiSelectableTemplateSitewideOption,
   useEuiTheme,
+  EuiThemeProvider,
 } from '../../../../../src';
 
 export default () => {
@@ -90,50 +93,61 @@ export default () => {
   const { euiTheme } = useEuiTheme();
 
   return (
-    <EuiSelectableTemplateSitewide
-      isLoading={isLoading}
-      onChange={onChange}
-      options={searchValueExists ? searchData : recentsWithIcon}
-      searchProps={{
-        append: '⌘K',
-        onKeyUpCapture: onKeyUpCapture,
-        className: 'customSearchClass',
-        inputRef: setSearchRef,
-      }}
-      listProps={{
-        className: 'customListClass',
-        css: css`
-          .euiSelectableTemplateSitewide__optionMeta--PINK {
-            font-weight: ${euiTheme.font.weight.medium};
-            color: ${euiTheme.colors.accentText};
+    <EuiHeader theme="dark">
+      <EuiHeaderSectionItem>
+        <EuiSelectableTemplateSitewide
+          isLoading={isLoading}
+          onChange={onChange}
+          options={searchValueExists ? searchData : recentsWithIcon}
+          searchProps={{
+            append: '⌘K',
+            onKeyUpCapture: onKeyUpCapture,
+            className: 'customSearchClass',
+            inputRef: setSearchRef,
+          }}
+          listProps={{
+            className: 'customListClass',
+            css: css`
+              .euiSelectableTemplateSitewide__optionMeta--PINK {
+                font-weight: ${euiTheme.font.weight.medium};
+                color: ${euiTheme.colors.accentText};
+              }
+            `,
+          }}
+          popoverProps={{
+            className: 'customPopoverClass',
+          }}
+          popoverButton={
+            <EuiThemeProvider
+              colorMode="dark"
+              wrapperProps={{ cloneElement: true }}
+            >
+              <EuiButton color="text">Mobile toggle</EuiButton>
+            </EuiThemeProvider>
           }
-        `,
-      }}
-      popoverProps={{
-        className: 'customPopoverClass',
-      }}
-      popoverButton={<EuiButton>Mobile toggle</EuiButton>}
-      popoverButtonBreakpoints={['xs', 's']}
-      popoverFooter={
-        <EuiText color="subdued" size="xs">
-          <EuiFlexGroup
-            alignItems="center"
-            gutterSize="s"
-            responsive={false}
-            wrap
-          >
-            <EuiFlexItem grow={false}>
-              {searchValueExists && <EuiLink>View more results</EuiLink>}
-            </EuiFlexItem>
-            <EuiFlexItem />
-            <EuiFlexItem grow={false}>Quickly search using</EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiBadge>Command + K</EuiBadge>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiText>
-      }
-    />
+          popoverButtonBreakpoints={['xl']}
+          popoverFooter={
+            <EuiText color="subdued" size="xs">
+              <EuiFlexGroup
+                alignItems="center"
+                gutterSize="s"
+                responsive={false}
+                wrap
+              >
+                <EuiFlexItem grow={false}>
+                  {searchValueExists && <EuiLink>View more results</EuiLink>}
+                </EuiFlexItem>
+                <EuiFlexItem />
+                <EuiFlexItem grow={false}>Quickly search using</EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiBadge>Command + K</EuiBadge>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiText>
+          }
+        />
+      </EuiHeaderSectionItem>
+    </EuiHeader>
   );
 };