Radio / Checkbox: Add support for themeable tile input background color #4178
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:With this change, one could override the background to improve the legibility. In this example with
'white'
: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:
npm test
and make sure the tests for the files you have changed have passed.