[EuiHeaderLinks] Add default padding to mobile popover

packages/eui/changelogs/upcoming/7961.md

@@ -0,0 +1,2 @@
+- Updated `EuiHeaderLinks`'s mobile menu to set a slight popover padding by default
+  - This can be overridden via `popoverProps.panelPaddingSize` if needed.

packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx

@@ -1,15 +1,13 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import {
   EuiBadge,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiHeader,
+  EuiHeaderLink,
+  EuiHeaderLinks,
   EuiHeaderLogo,
   EuiHeaderSectionItemButton,
   EuiIcon,
-  EuiPopover,
   EuiToolTip,
 } from '../../../../src/components';
 import { useIsWithinBreakpoints } from '../../../../src/services';
@@ -69,14 +67,14 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
   const github = useMemo(() => {
     const label = 'EUI GitHub repo';
     return isMobileSize ? (
-      <EuiButtonEmpty
+      <EuiHeaderLink
         size="s"
-        flush="both"
+        color="primary"
         iconType="logoGithub"
         href={GITHUB_URL}
       >
         {label}
-      </EuiButtonEmpty>
+      </EuiHeaderLink>
     ) : (
       <EuiToolTip content="Github">
         <EuiHeaderSectionItemButton aria-label={label} href={GITHUB_URL}>
@@ -90,9 +88,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     const label = 'Codesandbox';
     return isMobileSize ? (
       <CodeSandboxLink type="tsx">
-        <EuiButtonEmpty size="s" flush="both" iconType="logoCodesandbox">
+        <EuiHeaderLink size="s" color="primary" iconType="logoCodesandbox">
           {label}
-        </EuiButtonEmpty>
+        </EuiHeaderLink>
       </CodeSandboxLink>
     ) : (
       <EuiToolTip content="Codesandbox" key="codesandbox">
@@ -105,39 +103,18 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     );
   }, [isMobileSize]);
 
-  const [mobilePopoverIsOpen, setMobilePopoverIsOpen] = useState(false);
-
   const mobileMenu = useMemo(() => {
-    const button = (
-      <EuiHeaderSectionItemButton
-        aria-label="Open EUI options menu"
-        onClick={() => setMobilePopoverIsOpen((isOpen) => !isOpen)}
-      >
-        <EuiIcon type="apps" aria-hidden="true" />
-      </EuiHeaderSectionItemButton>
-    );
-
     return (
-      <EuiPopover
-        button={button}
-        isOpen={mobilePopoverIsOpen}
-        closePopover={() => setMobilePopoverIsOpen(false)}
+      <EuiHeaderLinks
+        popoverButtonProps={{ 'aria-label': 'Open EUI options menu' }}
+        popoverBreakpoints="all"
       >
-        <EuiFlexGroup
-          direction="column"
-          alignItems="flexStart"
-          gutterSize="none"
-          responsive={false}
-        >
-          <EuiFlexItem>{github}</EuiFlexItem>
-          <EuiFlexItem>
-            <GuideFigmaLink />
-          </EuiFlexItem>
-          <EuiFlexItem>{codesandbox}</EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPopover>
+        {github}
+        <GuideFigmaLink />
+        {codesandbox}
+      </EuiHeaderLinks>
     );
-  }, [mobilePopoverIsOpen, codesandbox, github]);
+  }, [codesandbox, github]);
 
   const rightSideItems = isMobileSize
     ? [

packages/eui/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx

@@ -1,15 +1,17 @@
 /* eslint-disable no-restricted-globals */
 import React from 'react';
 
-import { EuiButtonEmpty } from '../../../../src/components/button';
 import { useIsWithinBreakpoints } from '../../../../src/services';
-
-import { ThemeContext } from '../with_theme';
-import { EuiHeaderSectionItemButton } from '../../../../src/components/header';
+import {
+  EuiHeaderLink,
+  EuiHeaderSectionItemButton,
+} from '../../../../src/components/header';
 import { EuiToolTip } from '../../../../src/components/tool_tip';
 import { EuiIcon } from '../../../../src/components/icon';
 import logoFigma from '../../images/logo-figma.svg';
 
+import { ThemeContext } from '../with_theme';
+
 type GuideFigmaLinkProps = {
   context?: any;
 };
@@ -34,9 +36,9 @@ const GuideFigmaLinkComponent: React.FunctionComponent<
   const label = 'EUI Figma Design Library';
 
   return isMobileSize ? (
-    <EuiButtonEmpty size="s" flush="both" iconType={logoFigma} href={href}>
+    <EuiHeaderLink size="s" color="primary" iconType={logoFigma} href={href}>
       {label}
-    </EuiButtonEmpty>
+    </EuiHeaderLink>
   ) : (
     <EuiToolTip
       title={label}

packages/eui/src/components/header/header_links/header_links.stories.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { LOKI_SELECTORS } from '../../../../.storybook/loki';
 
 import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../';
 
@@ -21,7 +22,11 @@ const meta: Meta<EuiHeaderLinksProps> = {
     // Component defaults
     gutterSize: 's',
     popoverBreakpoints: ['xs', 's'],
+    // VRT
+    popoverProps: { isOpen: true },
   },
+  // Required to capture mobile popover
+  parameters: { loki: { chromeSelector: LOKI_SELECTORS.body } },
 };
 
 export default meta;
@@ -33,9 +38,13 @@ export const Playground: Story = {
       <EuiHeaderSection>
         <EuiHeaderSectionItem>
           <EuiHeaderLinks {...args}>
-            <EuiHeaderLink isActive>Docs</EuiHeaderLink>
-            <EuiHeaderLink>Code</EuiHeaderLink>
-            <EuiHeaderLink iconType="help"> Help</EuiHeaderLink>
+            <EuiHeaderLink size="s" isActive>
+              Docs
+            </EuiHeaderLink>
+            <EuiHeaderLink size="s">Code</EuiHeaderLink>
+            <EuiHeaderLink size="s" iconType="help">
+              Help
+            </EuiHeaderLink>
           </EuiHeaderLinks>
         </EuiHeaderSectionItem>
       </EuiHeaderSection>

packages/eui/src/components/header/header_links/header_links.styles.ts

@@ -39,7 +39,6 @@ export const euiHeaderLinksStyles = ({ euiTheme }: UseEuiTheme) => {
       .euiHeaderLink {
         display: block;
         ${logicalCSS('width', '100%')}
-        padding: ${euiTheme.size.s};
 
         /* EuiButtons normally center, which makes sense. In mobile though we want
          * them to align left. This is a safe hack given the specificity. */

packages/eui/src/components/header/header_links/header_links.tsx

@@ -154,7 +154,7 @@ export const EuiHeaderLinks: FunctionComponent<EuiHeaderLinksProps> = ({
               isOpen={mobileMenuIsOpen}
               anchorPosition="downRight"
               closePopover={closeMenu}
-              panelPaddingSize="none"
+              panelPaddingSize="s"
               repositionOnScroll
               {...popoverProps}
             >