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

[Bug]: Field validationMessage states using palette colors instead of state tokens #33707

Open
2 tasks done
mfishma opened this issue Jan 22, 2025 · 2 comments
Open
2 tasks done

Comments

@mfishma
Copy link

mfishma commented Jan 22, 2025

Component

Field

Package version

9.58.0

React version

17

Environment

n/a

Current Behavior

When using <Field> validationMessage, where validationState is set to warning, error, or success, the colors being set to tokens like colorPaletteDarkOrangeForeground,, colorPaletteRedForeground1, colorPaletteRedBorder2, etc.
Since those tokens don't really change from theme to theme, it might be unexpected that these don't change like the MessageBar colors.

Expected Behavior

it should be using tokens like colorStatusDangerForeground1 or colorStatusSuccessForeground1 to color these statuses, to match the MessageBar color palette.

Reproduction

https://react.fluentui.dev/?path=/docs/components-field--docs#validation-message

Steps to reproduce

Go to https://react.fluentui.dev/?path=/docs/components-field--docs#validation-message - to the Validation Message section of the Field. Inspect the colors used, and see that they're not using status colors for the theme.
Comparing to https://react.fluentui.dev/?path=/docs/components-messagebar--docs#intent which uses the status colors.

Are you reporting an Accessibility issue?

no

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@mainframev
Copy link
Contributor

mainframev commented Jan 24, 2025

@mfishma

The values don't match the Figma specification. For example, for error status there is #BC2F32 color value used, meanwhile colorStatusDangerForeground1 is #B10E1C. From tokens perspective, it makes sense to have it as you wrote, to have status tokens instead of palette ones.

We have similar issue with other components, this should be discussed and solved in one bunch.

@mfishma
Copy link
Author

mfishma commented Jan 24, 2025

I checked, looking at this Figma, and I don't see that, I see the UI kit is using the status-y tokens for Field and Badge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants