Fix disabled checkbox styles

[stbodurov]

Background color is now only applied on checked and enabled checkboxes.

Fixes #2946

[stbodurov]

Do you have screenshots showing the before/after appearances?

Turns out the addition of CSS layers (54effb8424) has made the styles for regular (i.e. not checked) disabled checkboxes not to be applied either. The reason is that the disabled styles are coming from the CheckboxLabel, which is in a separate layer now, and were being superseded by the styles in the CheckboxIcon layer. So this change now fixes the appearance of not only disabled+checked checkboxes, but regular disabled ones too.

The checkboxes in the Available column below are all disabled.

Before:

After:

You can add a disabled prop to website/demos/CommonFeatures.tsx#L233 if you want to test locally. If you have a method of writing visual tests, please let me know.

[nstepien]

Looks like all we need is to instead list the layers in src/style/core.ts in a correct order:

diff --git a/src/style/core.ts b/src/style/core.ts
index 49289fb7..737f7d0b 100644
--- a/src/style/core.ts
+++ b/src/style/core.ts
@@ -37,6 +37,9 @@ const root = css`
   @layer rdg {
     @layer Defaults,
       FocusSink,
+      CheckboxInput,
+      CheckboxIcon,
+      CheckboxLabel,
       Cell,
       HeaderCell,
       SummaryCell,

[stbodurov]

Looks like all we need is to instead list the layers in src/style/core.ts in a correct order:

diff --git a/src/style/core.ts b/src/style/core.ts
index 49289fb7..737f7d0b 100644
--- a/src/style/core.ts
+++ b/src/style/core.ts
@@ -37,6 +37,9 @@ const root = css`
   @layer rdg {
     @layer Defaults,
       FocusSink,
+      CheckboxInput,
+      CheckboxIcon,
+      CheckboxLabel,
       Cell,
       HeaderCell,
       SummaryCell,

Updated to the simpler solution, @nstepien. Thanks!

[codecov[bot]]

Codecov Report

Merging #2979 (588e88c) into main (903230c) will not change coverage. The diff coverage is n/a.

:exclamation: Current head 588e88c differs from pull request most recent head 7729492. Consider uploading reports for the commit 7729492 to get more accurate results

@@           Coverage Diff           @@
##             main    #2979   +/-   ##
=======================================
  Coverage   92.96%   92.96%           
=======================================
  Files          39       39           
  Lines        1251     1251           
  Branches      405      405           
=======================================
  Hits         1163     1163           
  Misses         88       88           

Impacted Files	Coverage Δ
src/formatters/checkboxFormatter.tsx	100.00% <ø> (ø)
src/SummaryRow.tsx	100.00% <0.00%> (ø)