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
mongodb · Sep 16, 2024 · 58db7ae · 58db7ae
1 parent 3ae5559
commit 58db7ae
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/.changeset/two-pants-poke.md 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
@@ -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
@@ -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
@@ -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
@@ -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,