-
Notifications
You must be signed in to change notification settings - Fork 9
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.
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
base: main
Are you sure you want to change the base?
Conversation
- 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]>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
🦋 Changeset detectedLatest commit: 6b2a1b2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
commit: |
Size Change: +9 B (0%) Total Size: 530 kB
ℹ️ View Unchanged
|
- 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]>
There was a problem hiding this 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); |
There was a problem hiding this comment.
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
padding: var(--lp-spacing-400) var(--lp-spacing-500); | |
padding: var(--lp-size-12) var(--lp-size-16); |
.changeset/update-popover-padding.md
Outdated
- Vertical padding: 8px → 12px (var(--lp-spacing-400)) | ||
- Horizontal padding: 8px → 16px (var(--lp-spacing-500)) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- 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]>
Summary
Updates the default padding for DialogTrigger popovers from uniform 8px padding to differentiated vertical/horizontal padding:
var(--lp-spacing-300)
→var(--lp-spacing-400)
)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:
Testing approaches
Human Review Checklist
padding: var(--lp-spacing-400) var(--lp-spacing-600)
correctly maps to 12px vertical, 20px horizontalLink to Devin run: https://app.devin.ai/sessions/368850b37e0e415da75e94ccc77d75ba
Requested by: @cpurps22