From 42594432fd5b127f030d4217740844f16a56ca15 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Tue, 15 Oct 2024 10:51:43 -0700
Subject: [PATCH] [EuiHeaderLinks] Add `xxs` gutterSize (#8079)

---
 packages/eui/changelogs/upcoming/8079.md              |  1 +
 .../__snapshots__/header_links.test.tsx.snap          | 11 +++++++++++
 .../header/header_links/header_links.styles.ts        |  3 +++
 .../components/header/header_links/header_links.tsx   |  2 +-
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 packages/eui/changelogs/upcoming/8079.md

diff --git a/packages/eui/changelogs/upcoming/8079.md b/packages/eui/changelogs/upcoming/8079.md
new file mode 100644
index 00000000000..e26190fefc8
--- /dev/null
+++ 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
index 54583c09c2c..1a2766f3b3a 100644
--- 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
index 204bb8182a7..bc28fb336c5 100644
--- 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
index fee029a3e7b..50e38323da2 100644
--- 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 =