Skip to content

Conversation

cpurps22
Copy link

@cpurps22 cpurps22 commented Aug 28, 2025

Summary

Updates the default padding for DialogTrigger popovers from uniform 8px padding to differentiated vertical/horizontal padding:

  • Vertical padding: 8px → 12px (var(--lp-spacing-300)var(--lp-spacing-400))
  • Horizontal padding: 8px → 20px (var(--lp-spacing-300)var(--lp-spacing-500))

This change aligns DialogTrigger popover padding with other popover implementations found throughout the codebase that use var(--lp-spacing-400) var(--lp-spacing-500) patterns.

Screenshots

Visual change tested in Storybook showing updated popover padding:

Popover with updated padding

Testing approaches

  • Linting: Passed biome checks during commit
  • Visual testing: Verified in Storybook using the Popover Example story
  • Build validation: Components package builds successfully

Human Review Checklist

  • Verify CSS shorthand padding: var(--lp-spacing-400) var(--lp-spacing-600) correctly maps to 12px vertical, 20px horizontal
  • Check visual impact across different DialogTrigger popover content types and sizes
  • Confirm this spacing aligns with broader design system standards
  • Test popover behavior with various trigger scenarios (different placements, with/without arrows)

Link to Devin run: https://app.devin.ai/sessions/368850b37e0e415da75e94ccc77d75ba
Requested by: @cpurps22

- Change from var(--lp-spacing-300) to var(--lp-spacing-400) var(--lp-spacing-600)
- Vertical padding: 8px -> 12px
- Horizontal padding: 8px -> 20px
- Aligns with other popover implementations in the codebase

Co-Authored-By: [email protected] <[email protected]>
@cpurps22 cpurps22 requested a review from a team as a code owner August 28, 2025 21:11
Copy link

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Copy link

changeset-bot bot commented Aug 28, 2025

🦋 Changeset detected

Latest commit: 6b2a1b2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@launchpad-ui/components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

pkg-pr-new bot commented Aug 28, 2025

yarn add https://pkg.pr.new/@launchpad-ui/[email protected]
yarn add https://pkg.pr.new/@launchpad-ui/[email protected]
yarn add https://pkg.pr.new/@launchpad-ui/[email protected]

commit: 6b2a1b2

Copy link
Contributor

github-actions bot commented Aug 28, 2025

Size Change: +9 B (0%)

Total Size: 530 kB

Filename Size Change
packages/components/dist/style.css 8.44 kB +9 B (+0.11%)
ℹ️ View Unchanged
Filename Size
apps/vscode/dist/client.js 111 kB
apps/vscode/dist/server.js 261 kB
packages/box/dist/index.es.js 7.26 kB
packages/box/dist/index.js 7.82 kB
packages/box/dist/style.css 2.67 kB
packages/button/dist/index.es.js 1.89 kB
packages/button/dist/index.js 2.32 kB
packages/button/dist/style.css 3 kB
packages/components/dist/index.es.js 19 kB
packages/components/dist/index.js 19.9 kB
packages/core/dist/index.es.js 512 B
packages/core/dist/index.js 1.27 kB
packages/drawer/dist/index.es.js 1.76 kB
packages/drawer/dist/index.js 2.22 kB
packages/drawer/dist/style.css 497 B
packages/dropdown/dist/index.es.js 1.15 kB
packages/dropdown/dist/index.js 1.59 kB
packages/filter/dist/index.es.js 2.23 kB
packages/filter/dist/index.js 2.68 kB
packages/filter/dist/style.css 881 B
packages/focus-trap/dist/index.es.js 418 B
packages/focus-trap/dist/index.js 852 B
packages/form/dist/index.es.js 4.25 kB
packages/form/dist/index.js 4.73 kB
packages/form/dist/style.css 2.21 kB
packages/icons/dist/index.es.js 1.3 kB
packages/icons/dist/index.js 1.73 kB
packages/icons/dist/style.css 532 B
packages/menu/dist/index.es.js 3.69 kB
packages/menu/dist/index.js 4.16 kB
packages/menu/dist/style.css 872 B
packages/modal/dist/index.es.js 3.08 kB
packages/modal/dist/index.js 3.55 kB
packages/modal/dist/style.css 898 B
packages/navigation/dist/index.es.js 2.75 kB
packages/navigation/dist/index.js 3.21 kB
packages/navigation/dist/style.css 874 B
packages/overlay/dist/index.es.js 1.02 kB
packages/overlay/dist/index.js 1.42 kB
packages/popover/dist/index.es.js 3.01 kB
packages/popover/dist/index.js 3.43 kB
packages/popover/dist/style.css 529 B
packages/portal/dist/index.es.js 420 B
packages/portal/dist/index.js 835 B
packages/table/dist/index.es.js 1.01 kB
packages/table/dist/index.js 1.44 kB
packages/table/dist/style.css 700 B
packages/tokens/dist/fonts.css 183 B
packages/tokens/dist/index.css 1.47 kB
packages/tokens/dist/index.es.js 3.07 kB
packages/tokens/dist/index.js 3.11 kB
packages/tokens/dist/media-queries.css 113 B
packages/tokens/dist/themes.css 2.27 kB
packages/tooltip/dist/index.es.js 598 B
packages/tooltip/dist/index.js 1.02 kB
packages/tooltip/dist/style.css 337 B
packages/vars/dist/index.es.js 2.66 kB
packages/vars/dist/index.js 2.66 kB

compressed-size-action

- Update horizontal padding from var(--lp-spacing-600) to var(--lp-spacing-500)
- Horizontal padding: 20px -> 16px
- Vertical padding remains 12px (var(--lp-spacing-400))

Co-Authored-By: [email protected] <[email protected]>
Copy link
Contributor

@matthewferry matthewferry left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One small nit to use size tokens instead so it's clearer.

@@ -37,7 +37,7 @@
}

&[data-trigger='DialogTrigger'] {
padding: var(--lp-spacing-300);
padding: var(--lp-spacing-400) var(--lp-spacing-500);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: replace spacing tokens with explicit sizes

Suggested change
padding: var(--lp-spacing-400) var(--lp-spacing-500);
padding: var(--lp-size-12) var(--lp-size-16);

Comment on lines 8 to 9
- Vertical padding: 8px → 12px (var(--lp-spacing-400))
- Horizontal padding: 8px → 16px (var(--lp-spacing-500))
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Vertical padding: 8px → 12px (var(--lp-spacing-400))
- Horizontal padding: 8px → 16px (var(--lp-spacing-500))
- Vertical padding: 8px → 12px (var(--lp-size-12))
- Horizontal padding: 8px → 16px (var(--lp-size-16))

- Replace var(--lp-spacing-400) var(--lp-spacing-500) with var(--lp-size-12) var(--lp-size-16)
- Update changeset description to reference size tokens for clarity
- Addresses PR feedback from matthewferry

Co-Authored-By: [email protected] <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants