Skip to content

Fix Dropdown filled boundary in high contrast themes - #36637

Open
Bernardo Sunderhus (bsunderhus) wants to merge 1 commit into
microsoft:masterfrom
bsunderhus:bugfix/dropdown-high-contrast-border
Open

Fix Dropdown filled boundary in high contrast themes#36637
Bernardo Sunderhus (bsunderhus) wants to merge 1 commit into
microsoft:masterfrom
bsunderhus:bugfix/dropdown-high-contrast-border

Conversation

@bsunderhus

Copy link
Copy Markdown
Contributor

Previous Behavior

Dropdown controls using appearance="filled-darker" or appearance="filled-lighter" used a literal transparent border. In Teams high contrast, this made the resting boundary invisible for filled appearances.

New Behavior

Filled Dropdown appearances now use tokens.colorTransparentStroke, matching Combobox, Input, and Textarea, so high contrast themes can render a visible resting boundary.

Related Issue

Fixes #36636

Validation

  • Verified locally in Storybook with components-dropdown--appearance and storybook_fluentui-react-addon_theme:teams-high-contrast; filled-darker now computes to a visible white solid border.
  • Ran yarn nx run react-combobox:test.

@github-actions

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Dropdown (including child components)
139.073 kB
44.814 kB
139.109 kB
44.817 kB
36 B
3 B
react-components
react-components: entire library
1.283 MB
322.105 kB
1.283 MB
322.084 kB
36 B
-21 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-combobox
Combobox (including child components)
139.308 kB
45.062 kB
react-components
react-components: all base hooks
217.385 kB
68.171 kB
react-components
react-components: Button, FluentProvider & webLightTheme
67.461 kB
19.461 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
227.126 kB
68.406 kB
react-components
react-components: FluentProvider & webLightTheme
40.684 kB
13.549 kB
react-headless-components-preview
react-headless-components-preview: entire library
238.112 kB
67.048 kB
react-headless-components-preview
@fluentui/react-headless-components-preview/tag-picker
53.988 kB
17.748 kB
react-headless-components-preview
@fluentui/react-headless-components-preview/teaching-popover
36.048 kB
11.996 kB
react-portal-compat
PortalCompatProvider
5.341 kB
2.146 kB
react-tag-picker
@fluentui/react-tag-picker - package
174.753 kB
54.556 kB
react-timepicker-compat
TimePicker
142.027 kB
46.435 kB
🤖 This report was generated against 25b0646fa18bb93e2d7ed052379b852a1f45d8f4

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -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-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 404 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 413 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 193 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 744 Changed
vr-tests-react-components/ProgressBar converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 33 Changed
vr-tests-react-components/TagPicker 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png 1319 Changed

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

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.

Dropdown filled-darker has no visible resting boundary in Teams High Contrast theme

2 participants