fix: ensure dropdown width respects trigger size and truncates long option labels#6890
Open
michaelmkraus wants to merge 7 commits into
Open
fix: ensure dropdown width respects trigger size and truncates long option labels#6890michaelmkraus wants to merge 7 commits into
michaelmkraus wants to merge 7 commits into
Conversation
🦋 Changeset detectedLatest commit: 7575d77 The changes in this PR will be included in the next version bump. This PR includes changesets to release 13 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 |
…runcates long option labels
…ing' into fix-custom-select-dropdown-wrapping
Co-authored-by: github-actions[bot] <41898282+github-actions[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.
Proposed changes
Fixes the
dropdownWidth="auto"behavior inDBCustomSelectwhere the dropdown menu collapsed to its minimum width instead of sizing to content, and long option labels wrapped uncontrollably instead of being truncated.Root cause (3 gaps identified):
&[data-width="auto"]selector existed incustom-select-dropdown.scss, so the dropdown had no definedinline-sizeand collapsed tomin-inline-size.handleFixedDropdownonly synced width forfullmode. When switching toposition: fixed, the auto dropdown lost all reference to its trigger's width.white-space: nowrap/text-overflow: ellipsis, causing multi-line wrapping in narrow dropdowns.Changes:
custom-select-dropdown.scss— Added&[data-width="auto"] { inline-size: max-content; }. The existingmax-inline-sizeviewport guard prevents overflow.floating-components.ts— Setelement.style.minInlineSize = ${width}pxforautomode so the dropdown is never narrower than its trigger.custom-select-list-item.scss— Addedwhite-space: nowrap; overflow: hidden; text-overflow: ellipsis;on> labelfor single-line truncation.dropdown-width-auto.example.lite.tsxwith 4 edge-case scenarios (long text, wide trigger/short options, narrow trigger/long options, mixed lengths) to visually reproduce and regression-test the bug.resolves #6250
Checklist
Code Quality
Validation
General
feat:,fix:,chore:), as in Git Commit Conventionspackages/*folder, the correspondingAGENTS.mdhas been updated🔭🐙🐈 Test this branch here: https://design-system.deutschebahn.com/core-web/review/fix-custom-select-dropdown-wrapping