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

Radio / Checkbox: Add support for themeable tile input background color #4178

Closed
wants to merge 1 commit into from

Conversation

aduth
Copy link
Contributor

@aduth aduth commented Apr 30, 2021

Description

Allows for a theme to customize the default background color of the tile radio button or checkbox components.

Additional information

As implemented, this is entirely backward compatible and preserves the existing behavior of assigning a transparent background color, while allowing downstream projects to override this to customize the default background color of the tile inputs.

This improves consistency with selected input background color, which is already customizable. It also better supports assignment of background color in cases of e.g. desiring a white tile input background when within a container with a colored background, rather than default transparent.

For example, adding a background color (bg-secondary-lighter in this example) to the component preview reveals that the tile inputs can be hard to distinguish:

image

With this change, one could override the background to improve the legibility. In this example with 'white':

image

An alternative or complementary improvement could be to change the default to always apply a white background color to tile inputs if it's naturally assumed to be shown with a white background (in current examples leveraging the container's lack of background color).


Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.

For consistency with selected input background color, and to allow for assignment of background color in cases of e.g. desiring a white tile input background when within a container with a colored background, rather than default transparent.
@mejiaj
Copy link
Contributor

mejiaj commented May 18, 2021

Thanks for this! Closing it in favor of #4199. Pretty much the same except I'm using set-text-and-bg() to set an accessible color on the background.

@mejiaj mejiaj closed this May 18, 2021
@aduth aduth deleted the aduth-tile-input-background branch May 18, 2021 14:15
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.

None yet

2 participants