Skip to content

Fluent: Input Group - discrepancies between Figma design and implementation #393

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

Assignees
Labels
🐛 bug Something isn't working fluent-theme

Comments

@yradoeva
Copy link

yradoeva commented Mar 4, 2025

There are some visual differences between the Figma design and the implementation (both Angular and WebC) for the Input group controls - Input, Combo, Select, Text area, Date picker, Time picker, Search in the Fluent theme.

❗ Currently I am double-checking and updating in a branch the Figma design kit - as soon as ready I'll put a link here.

Some of the discrepancies are:
Light mode:

  1. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - idle, filled - border color should be grays.700 (not grays.500)
  2. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - hover, filled & hover- border color should be grays.900 (not grays.700)
  3. Combo - disabled - toggle button color should be light grays.500 (not .400)
  4. Input, Search, Date picker - focused; Combo, Select - focused, dropdown closed
    The label should be grays.900 (not .800)
  5. Search: - Idle, idle & hover, filled, filled&hover - prefix and suffix icons are color primary.500 and have transparent background of the slot

Dark Mode
6. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - idle, filled - border color should be grays.400 (not grays.500)
7. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - hover, filled & hover - hover border color should be grays.800 (not grays.700)
8. Input Group (Input, Text area, Combo, Select, Date Picker, Time Picker) - label color should be grays.800 (not .900) in all states, except disabled
9. Input Group (Input, Text area, Combo, Select, Date Picker, Time Picker) - placeholder and hover placeholder color should be grays.400 (not .700)
10. Input Group (Input, Text area, Combo, Select, Date Picker, Time Picker) - disabled state: - label, hint, prefix icon, suffix icon, toggle icon, clear icon, placeholder, input text color should be grays.300 (not .500)
11. Input Group (Input, Search, Text area, Combo, Select, Date Picker, Time Picker) - focused - border color should be primary.500 (not grays.500)
12. Input Group (Input, Text area, Combo, Select, Date Picker, Time Picker) - prefix, suffix and toggle button - all states except disabled: - background-color: dark grays.50; - color: dark grays.400
13. Search: - Idle, idle & hover, filled, filled&hover - prefix and suffix icons are color primary.500 and have transparent background of the slot

@yradoeva yradoeva added 🐛 bug Something isn't working fluent-theme labels Mar 4, 2025
@yradoeva
Copy link
Author

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