[EuiHeaderLinks] Add default padding to mobile popover (#7961)

elastic · Aug 14, 2024 · e143ed0 · e143ed0
1 parent bf9eb33
commit e143ed0
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 65 deletions.
diff --git a/...ui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png b/...ui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLink_Playground.png
diff --git a/...i/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/...i/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLinks_Playground.png
diff --git a/...eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png b/...eui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLink_Playground.png
diff --git a/...ui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png b/...ui/.loki/reference/chrome_mobile_Layout_EuiHeader_EuiHeaderLinks_Playground.png
diff --git a/packages/eui/changelogs/upcoming/7961.md b/packages/eui/changelogs/upcoming/7961.md
@@ -0,0 +1,3 @@
+- Updated `EuiHeaderLinks`'s mobile menu to set a slight popover padding by default
+  - This can be overridden via `popoverProps.panelPaddingSize` if needed.
+- Updated `EuiHeaderLink` to default to a size of `s` (down from `m`)
diff --git a/packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx b/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,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
   const github = useMemo(() => {
     const label = 'EUI GitHub repo';
     return isMobileSize ? (
-      <EuiButtonEmpty
-        size="s"
-        flush="both"
-        iconType="logoGithub"
-        href={GITHUB_URL}
-      >
+      <EuiHeaderLink color="primary" iconType="logoGithub" href={GITHUB_URL}>
         {label}
-      </EuiButtonEmpty>
+      </EuiHeaderLink>
     ) : (
       <EuiToolTip content="Github">
         <EuiHeaderSectionItemButton aria-label={label} href={GITHUB_URL}>
@@ -90,9 +83,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     const label = 'Codesandbox';
     return isMobileSize ? (
       <CodeSandboxLink type="tsx">
-        <EuiButtonEmpty size="s" flush="both" iconType="logoCodesandbox">
+        <EuiHeaderLink color="primary" iconType="logoCodesandbox">
           {label}
-        </EuiButtonEmpty>
+        </EuiHeaderLink>
       </CodeSandboxLink>
     ) : (
       <EuiToolTip content="Codesandbox" key="codesandbox">
@@ -105,39 +98,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
     ? [

diff --git a/packages/eui/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx b/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 color="primary" iconType={logoFigma} href={href}>
       {label}
-    </EuiButtonEmpty>
+    </EuiHeaderLink>
   ) : (
     <EuiToolTip
       title={label}

diff --git a/packages/eui/src/components/header/header_links/__snapshots__/header_link.test.tsx.snap b/packages/eui/src/components/header/header_links/__snapshots__/header_link.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiHeaderLink can render as specific color 1`] = `
 <button
-  class="euiButtonEmpty euiHeaderLink emotion-euiButtonDisplay-euiButtonEmpty-m-empty-danger"
+  class="euiButtonEmpty euiHeaderLink emotion-euiButtonDisplay-euiButtonEmpty-s-empty-danger"
   type="button"
 >
   <span
@@ -18,7 +18,7 @@ exports[`EuiHeaderLink can render as specific color 1`] = `
 exports[`EuiHeaderLink is rendered 1`] = `
 <button
   aria-label="aria-label"
-  class="euiButtonEmpty euiHeaderLink testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiTestCss"
+  class="euiButtonEmpty euiHeaderLink testClass1 testClass2 emotion-euiButtonDisplay-euiButtonEmpty-s-empty-text-euiTestCss"
   data-test-subj="test subject string"
   type="button"
 >
@@ -34,7 +34,7 @@ exports[`EuiHeaderLink is rendered 1`] = `
 
 exports[`EuiHeaderLink is rendered as active 1`] = `
 <button
-  class="euiButtonEmpty euiHeaderLink euiHeaderLink-isActive emotion-euiButtonDisplay-euiButtonEmpty-m-empty-primary"
+  class="euiButtonEmpty euiHeaderLink euiHeaderLink-isActive emotion-euiButtonDisplay-euiButtonEmpty-s-empty-primary"
   type="button"
 >
   <span

diff --git a/packages/eui/src/components/header/header_links/header_link.stories.tsx b/packages/eui/src/components/header/header_links/header_link.stories.tsx
@@ -20,6 +20,7 @@ const meta: Meta<EuiHeaderLinkProps> = {
   // Component defaults
   args: {
     isActive: false,
+    size: 's',
   },
 };
 moveStorybookControlsToCategory(

diff --git a/packages/eui/src/components/header/header_links/header_link.tsx b/packages/eui/src/components/header/header_links/header_link.tsx
@@ -22,21 +22,21 @@ export type EuiHeaderLinkProps = EuiButtonEmptyProps & {
 export const EuiHeaderLink: FunctionComponent<EuiHeaderLinkProps> = ({
   isActive,
   className,
+  size = 's',
   ...rest
 }) => {
   const classes = classNames(
     'euiHeaderLink',
-    {
-      'euiHeaderLink-isActive': isActive,
-    },
+    { 'euiHeaderLink-isActive': isActive },
     className
   );
 
-  const props = {
-    color: isActive ? 'primary' : 'text',
-    ...rest,
-    className: classes,
-  };
-
-  return <EuiButtonEmpty {...(props as EuiButtonEmptyProps)} />;
+  return (
+    <EuiButtonEmpty
+      className={classes}
+      color={isActive ? 'primary' : 'text'}
+      size={size}
+      {...rest}
+    />
+  );
 };
diff --git a/packages/eui/src/components/header/header_links/header_links.stories.tsx b/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;
@@ -35,7 +40,7 @@ export const Playground: Story = {
           <EuiHeaderLinks {...args}>
             <EuiHeaderLink isActive>Docs</EuiHeaderLink>
             <EuiHeaderLink>Code</EuiHeaderLink>
-            <EuiHeaderLink iconType="help"> Help</EuiHeaderLink>
+            <EuiHeaderLink iconType="help">Help</EuiHeaderLink>
           </EuiHeaderLinks>
         </EuiHeaderSectionItem>
       </EuiHeaderSection>

diff --git a/packages/eui/src/components/header/header_links/header_links.styles.ts b/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. */

diff --git a/packages/eui/src/components/header/header_links/header_links.tsx b/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}
             >