feat(ui): add border and shadow to floating menu components#1747
Open
MartinS-git wants to merge 14 commits into
Open
feat(ui): add border and shadow to floating menu components#1747MartinS-git wants to merge 14 commits into
MartinS-git wants to merge 14 commits into
Conversation
🦋 Changeset detectedLatest commit: fa6f40f The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
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 |
Contributor
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates several overlay/floating UI components in ui-components to ensure menus/popovers remain visually distinct from similar page backgrounds by adding theme-driven borders and shadows.
Changes:
- Add
jn:border jn:border-theme-defaultandjn:shadow-theme-defaulttoComboBox,PopupMenu,TooltipContent, andToast. - Update
Selectby introducing a styled floating menu container that provides the same border/shadow treatment.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-components/src/components/TooltipContent/TooltipContent.component.tsx | Replace custom drop-shadow with theme border + shadow on tooltip surface. |
| packages/ui-components/src/components/Toast/Toast.component.tsx | Add theme border + shadow to toast container. |
| packages/ui-components/src/components/Select/Select.component.tsx | Add a floating menu container with theme border + shadow for the Select dropdown panel. |
| packages/ui-components/src/components/PopupMenu/PopupMenu.component.tsx | Add theme border + shadow to popup menu panel. |
| packages/ui-components/src/components/ComboBox/ComboBox.component.tsx | Add theme border + shadow to combobox options panel. |
MartinS-git
force-pushed
the
menu-background
branch
from
aee837f to
47002b6
Compare
edda
previously approved these changes
Jun 10, 2026
MartinS-git
force-pushed
the
menu-background
branch
from
6c1cecd to
48e9d96
Compare
MartinS-git
force-pushed
the
menu-background
branch
from
8192e5e to
f4d9040
Compare
Member
I am unsure but i dont see the boarder at dateTimePicker? Or should it be that way |
Add `border-theme-default` and `shadow-theme-default` to Select, ComboBox, PopupMenu, TooltipContent and Toast to ensure menus and overlays are always visually distinct from the page background. Closes #1738 Signed-off-by: MartinS-git <info@eyepic.de>
…ent shadow clipping Signed-off-by: MartinS-git <info@eyepic.de>
jn:rounded and jn:bg-theme-background-lvl-1 are already applied on the outer floating container via menuStylesContainer. Keeping them in menuStyles created two sources of truth for the menu surface styling. Signed-off-by: MartinS-git <info@eyepic.de>
Signed-off-by: MartinS-git <info@eyepic.de>
Signed-off-by: MartinS-git <info@eyepic.de>
Signed-off-by: MartinS-git <info@eyepic.de>
… prevent border misalignment Signed-off-by: MartinS-git <info@eyepic.de>
…ion hover backgrounds at rounded corners Signed-off-by: MartinS-git <info@eyepic.de>
…shadow Signed-off-by: MartinS-git <info@eyepic.de>
…opup renders outside theme wrapper Signed-off-by: MartinS-git <info@eyepic.de>
MartinS-git
force-pushed
the
menu-background
branch
from
b656ecf to
690c7a9
Compare
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: MartinS-git <info@eyepic.de>
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> Signed-off-by: MartinS-git <info@eyepic.de>
MartinS-git
force-pushed
the
menu-background
branch
from
7a90acd to
67c594d
Compare
…gher specificity and correct token Signed-off-by: MartinS-git <info@eyepic.de>
…hen opened Signed-off-by: MartinS-git <info@eyepic.de>
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
Add
border-theme-defaultandshadow-theme-defaultto floating menu and overlay components to ensure they are always visually distinct from the page background.Affected components
jn:rounded,jn:bg-theme-background-lvl-1) removed from inner menu containerdrop-shadow-[0_0_4px_rgba(0,0,0,0.15)]with consistentshadow-theme-default; border addedCloses #1738