fix(components): remove extra popover padding for DialogTrigger with menu/listbox#1884
Draft
fix(components): remove extra popover padding for DialogTrigger with menu/listbox#1884
Conversation
…menu/listbox Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Contributor
🤖 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: d00e544 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 |
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
commit: |
Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
When a
MenuorListBoxis rendered inside aDialogTriggerpopover, the popover's 8px padding (--lp-spacing-300) stacks on top of the menu's own 4px container padding (--lp-spacing-200), resulting in 12px of container padding instead of the expected 4px. This creates visually inconsistent menus compared to those rendered viaMenuTrigger(which has no popover padding).This change splits the
DialogTriggerpadding rule into two selectors:&[data-trigger='DialogTrigger']:not(:has([role='menu'], [role='listbox']))— preserves padding for non-menu dialog content&[data-trigger='DialogTrigger']:has(input[type='search'])— re-adds padding when a search input is present (e.g. autocomplete/combobox patterns inside a DialogTrigger)Plain menus/listboxes inside a
DialogTriggerpopover no longer receive the extra popover padding, while search-containing popovers retain it.Human review checklist
DialogTriggerpopovers with mixed content (dialog elements alongside a menu, no search) are negatively impactedMenuTriggerinstead ofDialogTriggerfor pure menu popovers would be the more architecturally correct long-term fixTesting approaches
DialogTriggerpopover containing aMenuand confirm padding matches a standardMenuTriggermenu (4px container padding, no extra outer padding from the popover)DialogTriggerpopover containing a search input + listbox and confirm padding is still present around the search fieldLink to Devin session: https://app.devin.ai/sessions/e83a67884e96414b8f6b288b8c045e6d
Requested by: @cpurps22