Skip to content

feat(components): update DialogTrigger popover padding #1760

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat(components): update DialogTrigger popover padding #1760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6bd6996
feat(components): update DialogTrigger popover padding
devin-ai-integration[bot] Aug 28, 2025
08ef974
fix(components): correct horizontal padding to var(--lp-spacing-500)
devin-ai-integration[bot] Aug 28, 2025
e8c1918
chore: add changeset for DialogTrigger padding update
devin-ai-integration[bot] Aug 28, 2025
6b2a1b2
refactor(components): use explicit size tokens instead of spacing tokens
devin-ai-integration[bot] Sep 9, 2025
851baf6
Merge branch 'main' into devin/1756415469-update-popover-padding
mattdaviscodes Nov 20, 2025
1ff346a
fix(popover): keep existing padding on popovers with search inputs
mattdaviscodes Nov 20, 2025
af93f92
Revert "fix(popover): keep existing padding on popovers with search i…
mattdaviscodes Nov 20, 2025
2ab0d0a
fix(autocomplete): update autocomplete stories
mattdaviscodes Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .changeset/update-popover-padding.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"@launchpad-ui/components": patch
---

feat(components): update DialogTrigger popover padding

Updates DialogTrigger popover padding from uniform 8px to differentiated vertical/horizontal padding:
- Vertical padding: 8px → 12px (var(--lp-size-12))
- Horizontal padding: 8px → 16px (var(--lp-size-16))
2 changes: 1 addition & 1 deletion packages/components/src/styles/Popover.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
&[data-trigger='ComboBoxDialog'],
&[data-trigger='DatePicker'],
&[data-trigger='DateRangePicker'] {
padding: var(--lp-spacing-300);
padding: var(--lp-size-12) var(--lp-size-16);
}

&:has(input[type='search']):is(
Expand Down
12 changes: 6 additions & 6 deletions packages/components/stories/Autocomplete.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@ import { expect, userEvent, within } from 'storybook/test';

import { Autocomplete } from '../src/Autocomplete';
import { Button } from '../src/Button';
import { Dialog, DialogTrigger } from '../src/Dialog';
import { Dialog } from '../src/Dialog';
import { Group } from '../src/Group';
import { IconButton } from '../src/IconButton';
import { Input } from '../src/Input';
import { ListBox, ListBoxItem } from '../src/ListBox';
import { Menu, MenuItem } from '../src/Menu';
import { Menu, MenuItem, MenuTrigger } from '../src/Menu';
import { Popover } from '../src/Popover';
import { SearchField } from '../src/SearchField';

Expand Down Expand Up @@ -45,7 +45,7 @@ export const Example: Story = {
];

return (
<DialogTrigger>
<MenuTrigger>
<Button>Trigger</Button>
<Popover placement="bottom start">
<Dialog aria-label="dialog with autocomplete">
Expand Down Expand Up @@ -73,7 +73,7 @@ export const Example: Story = {
</Autocomplete>
</Dialog>
</Popover>
</DialogTrigger>
</MenuTrigger>
);
},
...open,
Expand All @@ -89,7 +89,7 @@ export const ListBoxExample: Story = {
];

return (
<DialogTrigger>
<MenuTrigger>
<Button>Trigger</Button>
<Popover placement="bottom start">
<Dialog aria-label="dialog with autocomplete">
Expand Down Expand Up @@ -118,7 +118,7 @@ export const ListBoxExample: Story = {
</Autocomplete>
</Dialog>
</Popover>
</DialogTrigger>
</MenuTrigger>
);
},
...open,
Expand Down
Loading