[EuiHeaderLinks] Add xxs gutterSize (#8079)

elastic · Oct 15, 2024 · 4259443 · 4259443
1 parent caa5db1
commit 4259443
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 1 deletion.
diff --git a/packages/eui/changelogs/upcoming/8079.md b/packages/eui/changelogs/upcoming/8079.md
@@ -0,0 +1 @@
+- Updated `EuiHeaderLinks` with a new `xxs` gutter size
diff --git a/packages/eui/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap b/packages/eui/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap
@@ -44,6 +44,17 @@ exports[`EuiHeaderLinks gutterSize xs is rendered 1`] = `
 </nav>
 `;
 
+exports[`EuiHeaderLinks gutterSize xxs is rendered 1`] = `
+<nav
+  aria-label="App menu"
+  class="euiHeaderLinks emotion-euiHeaderLinks"
+>
+  <div
+    class="euiHeaderLinks__list emotion-euiHeaderLinks__list-xxs-EuiHeaderLinks"
+  />
+</nav>
+`;
+
 exports[`EuiHeaderLinks is rendered 1`] = `
 <nav
   aria-label="aria-label"

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
@@ -22,6 +22,9 @@ export const euiHeaderLinksStyles = ({ euiTheme }: UseEuiTheme) => {
       align-items: center;
     `,
     gutterSizes: {
+      xxs: css`
+        gap: ${euiTheme.size.xs};
+      `,
       xs: css`
         gap: ${euiTheme.size.s};
       `,

diff --git a/packages/eui/src/components/header/header_links/header_links.tsx b/packages/eui/src/components/header/header_links/header_links.tsx
@@ -31,7 +31,7 @@ import { EuiHideFor, EuiShowFor } from '../../responsive';
 
 import { euiHeaderLinksStyles } from './header_links.styles';
 
-export const GUTTER_SIZES = ['xs', 's', 'm', 'l'] as const;
+export const GUTTER_SIZES = ['xxs', 'xs', 's', 'm', 'l'] as const;
 type EuiHeaderLinksGutterSize = (typeof GUTTER_SIZES)[number];
 
 type EuiHeaderLinksPopoverButtonProps =