Skip to content

Adds slot containers and css to handle overflow in dropdown#36210

Open
bearcat-msft wants to merge 2 commits into
microsoft:masterfrom
bearcat-msft:bearcat/dropdown-overflow
Open

Adds slot containers and css to handle overflow in dropdown#36210
bearcat-msft wants to merge 2 commits into
microsoft:masterfrom
bearcat-msft:bearcat/dropdown-overflow

Conversation

@bearcat-msft
Copy link
Copy Markdown
Contributor

Previous Behavior

If client sets whitespace to nowrap, multi select dropdowns will break under overflow conditions.

New Behavior

Dropdown handles non-normal whitespace and content overflow inside of dropbox more gracefully.

Related Issue(s)

  • Fixes #

@github-actions
Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@bearcat-msft bearcat-msft marked this pull request as ready for review May 15, 2026 22:34
@bearcat-msft bearcat-msft requested a review from a team as a code owner May 15, 2026 22:34
@@ -0,0 +1,7 @@
{
Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-web-components/Avatar 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Avatar. - Dark Mode.normal.chromium.png 10380 Changed
vr-tests-web-components/Badge 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/Badge. - Dark Mode.normal.chromium.png 443 Changed
vr-tests-web-components/MenuList 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/MenuList. - RTL.normal.chromium_1.png 39083 Changed
vr-tests-web-components/MenuList. - Dark Mode.normal.chromium.png 498 Changed
vr-tests-web-components/MenuList. - RTL.1st selected.chromium_2.png 39384 Changed
vr-tests-web-components/MenuList. - RTL.2nd selected.chromium_3.png 38816 Changed
vr-tests-web-components/RadioGroup 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/RadioGroup. - Dark Mode.normal.chromium_1.png 89 Changed
vr-tests-web-components/TextInput 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-web-components/TextInput. - Dark Mode.normal.chromium_1.png 288 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

Comment on lines +85 to +90
<div class="control-slot-container">
<slot name="control" ${ref('controlSlot')}></slot>
</div>
<div class="indicator-slot-container">
<slot name="indicator" ${ref('indicatorSlot')}>${staticallyCompose(options.indicator)}</slot>
</div>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I'd like to review this but the repro in stackblitz is not compiling for me - can you check that it's still compiling?

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.

[Bug]: fluent-dropdown text wrapping breaks under white-space: no-wrap.

2 participants