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} >
Popover content
@@ -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 `` 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 = { 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( ( { active = false, - spacing = 10, + spacing = spacingToken[100], align = Align.Bottom, justify = Justify.Start, adjustOnMutation = false,