From 58db7ae3be1fef2d22c06bb1295667f8b54a2c83 Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Mon, 16 Sep 2024 15:28:15 -0700
Subject: [PATCH] Update default value of Popover spacing prop from 10px to 4px
 (#2479)

* Update Popover default spacing from 10 to 4

* Changeset

* Update README and stories
---
 .changeset/two-pants-poke.md             | 5 +++++
 packages/popover/README.md               | 4 ++--
 packages/popover/src/Popover.stories.tsx | 2 +-
 packages/popover/src/Popover.types.ts    | 2 +-
 packages/popover/src/Popover/Popover.tsx | 3 ++-
 5 files changed, 11 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/two-pants-poke.md

diff --git a/.changeset/two-pants-poke.md b/.changeset/two-pants-poke.md
new file mode 100644
index 0000000000..0bebf79179
--- /dev/null
+++ b/.changeset/two-pants-poke.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/popover': minor
+---
+
+Update default value of `spacing` prop from 10px to 4px
diff --git a/packages/popover/README.md b/packages/popover/README.md
index 41377efb3f..ac624c7d19 100644
--- a/packages/popover/README.md
+++ b/packages/popover/README.md
@@ -33,7 +33,7 @@ import Popover from '@leafygreen-ui/popover';
     justify="start"
     active={this.state.active}
     usePortal={true}
-    spacing={10}
+    spacing={4}
   >
     <div className={popoverStyle}>Popover content</div>
   </Popover>
@@ -65,7 +65,7 @@ The popover component will be automatically positioned relative to its nearest p
 | `align`            | `'top'` \| `'bottom'` \| `'left'` \| `'right'` \| `'center-horizontal'` \| `'center-vertical'` | A string that determines the alignment of the popover relative to the `refEl`.                                                                                                                                                                   | `'bottom'` |
 | `justify`          | `'start'` \| `'middle'` \| `'end'` \| `'fit'`                                                  | A string that determines the justification of the popover relative to the `refEl`. Justification will be defined relative to the `align` prop                                                                                                    | `'start'`  |
 | `children`         | `node`                                                                                         | Content that will appear inside of the `<Popover />` component                                                                                                                                                                                   |            |
-| `spacing`          | `number`                                                                                       | Specifies the amount of spacing (in pixels) between the trigger element and the content element.                                                                                                                                                 | `10`       |
+| `spacing`          | `number`                                                                                       | Specifies the amount of spacing (in pixels) between the trigger element and the content element.                                                                                                                                                 | `4`        |
 | `className`        | `string`                                                                                       | Classname to apply to popover-content container                                                                                                                                                                                                  |            |
 | `adjustOnMutation` | `boolean`                                                                                      | Should the Popover auto adjust its content when the DOM changes (using MutationObserver).                                                                                                                                                        | `false`    |
 | `onClick`          | `function`                                                                                     | Function that will be called when popover content is clicked.                                                                                                                                                                                    |            |
diff --git a/packages/popover/src/Popover.stories.tsx b/packages/popover/src/Popover.stories.tsx
index b7cb58871c..d8e5e03c99 100644
--- a/packages/popover/src/Popover.stories.tsx
+++ b/packages/popover/src/Popover.stories.tsx
@@ -138,7 +138,7 @@ const meta: StoryMetaType<typeof Popover> = {
   args: {
     align: Align.Top,
     justify: Justify.Start,
-    spacing: 10,
+    spacing: 4,
     adjustOnMutation: false,
     buttonText: 'Button Text',
   },
diff --git a/packages/popover/src/Popover.types.ts b/packages/popover/src/Popover.types.ts
index 0c77d9c240..44a53a27e7 100644
--- a/packages/popover/src/Popover.types.ts
+++ b/packages/popover/src/Popover.types.ts
@@ -178,7 +178,7 @@ export type PopoverProps = {
   /**
    * Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.
    *
-   * default: `10`
+   * default: `4`
    */
   spacing?: number;
 
diff --git a/packages/popover/src/Popover/Popover.tsx b/packages/popover/src/Popover/Popover.tsx
index 2ef6647f68..8f04658cc3 100644
--- a/packages/popover/src/Popover/Popover.tsx
+++ b/packages/popover/src/Popover/Popover.tsx
@@ -7,6 +7,7 @@ import { useMergeRefs } from '@leafygreen-ui/hooks';
 import { usePopoverContext } from '@leafygreen-ui/leafygreen-provider';
 import { consoleOnce } from '@leafygreen-ui/lib';
 import Portal from '@leafygreen-ui/portal';
+import { spacing as spacingToken } from '@leafygreen-ui/tokens';
 
 import { useContentNode, useReferenceElement } from '../Popover.hooks';
 import {
@@ -56,7 +57,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverComponentProps>(
   (
     {
       active = false,
-      spacing = 10,
+      spacing = spacingToken[100],
       align = Align.Bottom,
       justify = Justify.Start,
       adjustOnMutation = false,