Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: incorrect tokens used across multiple input components #33927

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

mainframev
Copy link
Contributor

@mainframev mainframev commented Feb 28, 2025

Fixing reported issue (#33135), we have visual inconsistencies between Figma designs and our multiple input components. Those components currently do not have shared styles, so it has to be fixed on multiple places. The reported issue mention high-contrast, but it happens in all themes for outline appearance for hover, active and focus styles. Combobox & Dropdown, Textarea, TimePickerCompat (fixed by fixing combobox styles), TagPicker.

Previous Behavior

hover in high contrast:

image

focus in high contrast:
image

figma spec:

  • hover:
    image
  • focus:
    image

New Behavior

Updated to visually match design spec

Related Issue(s)

Copy link

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Combobox (including child components)
105.562 kB
34.52 kB
105.665 kB
34.551 kB
103 B
31 B
react-combobox
Dropdown (including child components)
106.186 kB
34.462 kB
106.289 kB
34.481 kB
103 B
19 B
react-components
react-components: entire library
1.174 MB
293.93 kB
1.174 MB
294.059 kB
318 B
129 B
react-tag-picker
@fluentui/react-tag-picker - package
185.663 kB
55.782 kB
185.766 kB
55.903 kB
103 B
121 B
react-textarea
Textarea
26.598 kB
9.761 kB
26.607 kB
9.762 kB
9 B
1 B
react-timepicker-compat
TimePicker
108.551 kB
36.094 kB
108.654 kB
36.114 kB
103 B
20 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.638 kB
20.24 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
225.271 kB
65.211 kB
react-components
react-components: FluentProvider & webLightTheme
44.473 kB
14.597 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
🤖 This report was generated against 5e9bdc096779a2c614a2b9f829621b48e1c59746

Copy link

Pull request demo site: URL

@@ -0,0 +1,7 @@
{
Copy link
Collaborator

Choose a reason for hiding this comment

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

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Combobox Converged 6 screenshots
Image Name Diff(in Pixels) Image Type
Combobox Converged.Invalid- outline.focused.chromium.png 24 Changed
Combobox Converged.Size- small.focused.chromium.png 22 Changed
Combobox Converged.Appearance- outline (default).focused.chromium.png 24 Changed
Combobox Converged.With value.focused.chromium.png 24 Changed
Combobox Converged.Size- large.focused.chromium.png 26 Changed
Combobox Converged.With placeholder.focused.chromium.png 24 Changed
Dialog 1 screenshots
Image Name Diff(in Pixels) Image Type
Dialog.Integration Combobox Inline.chromium.png 36 Changed
Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.overlay drawer full.chromium.png 3285 Changed
TagPicker 4 screenshots
Image Name Diff(in Pixels) Image Type
TagPicker.expand icon - High Contrast.chromium.png 129 Changed
TagPicker.expand icon - Dark Mode.chromium.png 25 Changed
TagPicker.secondary action - Dark Mode.chromium.png 25 Changed
TagPicker.secondary action - High Contrast.chromium.png 129 Changed

@mainframev mainframev marked this pull request as ready for review February 28, 2025 16:36
@mainframev mainframev requested review from a team as code owners February 28, 2025 16:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: TextArea and others have incorrect focus outline color in high contrast mode
2 participants