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

Add a traffic light theme for checkbox component #7737

Conversation

MatthewVaadin
Copy link

Description

This adds a new color theme to the checkbox component so that it works like a traffic light - red for unchecked, yellow for indeterminate and green for checked. Disabled and readonly variants are also taken into account.

Normal/light components:
image

Dark theme variants:
image

Fixes #7736

Type of change

  • Bugfix
  • Feature

Checklist

  • I have read the contribution guide: https://vaadin.com/docs/latest/contributing/pr
  • I have added a description following the guideline.
  • The issue is created in the corresponding repository and I have referenced it.
  • I have added tests to ensure my change is effective and works as intended.
  • New and existing tests are passing locally with my change.
  • I have performed self-review and corrected misspellings.
  • I have not completed some of the steps above and my pull request can be closed immediately.

Additional for Feature type of change

  • Enhancement / new feature was discussed in a corresponding GitHub issue and Acceptance Criteria were created.

@MatthewVaadin
Copy link
Author

Visual test images need to be generated.

Illegibility of the symbols when the checkbox is both disabled and readonly is an existing issue and is being addressed in issue
#7733

Copy link

sonarcloud bot commented Sep 1, 2024

@rolfsmeds
Copy link
Contributor

Thanks for the contribution @MatthewVaadin.

While I can see how this could be useful in some cases, I'm not convinced it should be part of the core component for a number of reasons:

  • Very few applications are likely to benefit from it
  • It's a very unusual rendering of checkboxes that few end users would be familiar with
  • Using x on an unchecked checkbox especially seems problematic as it looks like a checked box
  • As checked and unchecked are quite ambiguous without the colors, color blind users would likely have trouble parsing them correctly
  • The contrast of the yellow undetermined box doesn't fulfill WCAG contrast requirements
  • The lack of colors in readonly state makes it very difficult to see what is what

With these in mind, I would propose to publish this as a directory add-on or cookbook example instead. If there is significant demand for this variant we could consider taking it into the core component in a redesigned form.

@web-padawan
Copy link
Member

Closing per above comment. Let's keep the issue open for collecting feedback regarding this feature.

@web-padawan web-padawan closed this Sep 5, 2024
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.

Add a traffic light style theme to the checkbox component
3 participants