fix: do not apply checkbox readonly background when disabled (#7733) (#…

…7739)
vaadin · Sep 2, 2024 · ed4c483 · ed4c483
1 parent e187de6
commit ed4c483
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 5 deletions.
diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js
@@ -91,6 +91,18 @@ describe('checkbox', () => {
       element.required = true;
       await visualDiff(div, 'disabled-required');
     });
+
+    it('readonly checked', async () => {
+      element.readonly = true;
+      element.checked = true;
+      await visualDiff(div, 'disabled-readonly-checked');
+    });
+
+    it('readonly indeterminate', async () => {
+      element.readonly = true;
+      element.indeterminate = true;
+      await visualDiff(div, 'disabled-readonly-indeterminate');
+    });
   });
 
   describe('readonly', () => {

diff --git a/...ox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-checked.png b/...ox/test/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-checked.png
diff --git a/...t/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png b/...t/visual/lumo/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png
diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js
@@ -109,6 +109,18 @@ describe('checkbox', () => {
       element.required = true;
       await visualDiff(div, 'disabled-required');
     });
+
+    it('readonly checked', async () => {
+      element.readonly = true;
+      element.checked = true;
+      await visualDiff(div, 'disabled-readonly-checked');
+    });
+
+    it('readonly indeterminate', async () => {
+      element.readonly = true;
+      element.indeterminate = true;
+      await visualDiff(div, 'disabled-readonly-indeterminate');
+    });
   });
 
   describe('RTL', () => {

diff --git a/...est/visual/material/screenshots/checkbox/baseline/disabled-readonly-checked.png b/...est/visual/material/screenshots/checkbox/baseline/disabled-readonly-checked.png
diff --git a/...sual/material/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png b/...sual/material/screenshots/checkbox/baseline/disabled-readonly-indeterminate.png
diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -164,8 +164,8 @@ registerStyles(
       background-color: var(--lumo-contrast-30pct);
     }
 
-    :host([readonly][checked]) [part='checkbox'],
-    :host([readonly][indeterminate]) [part='checkbox'] {
+    :host([readonly][checked]:not([disabled])) [part='checkbox'],
+    :host([readonly][indeterminate]:not([disabled])) [part='checkbox'] {
       background-color: var(--vaadin-checkbox-readonly-checked-background, var(--lumo-contrast-70pct));
     }
 

diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
@@ -124,9 +124,9 @@ registerStyles(
       background-color: var(--material-disabled-color);
     }
 
-    :host([readonly][checked]) [part='checkbox'],
-    :host([readonly][indeterminate]) [part='checkbox'],
-    :host([readonly]) [part='checkbox']::before {
+    :host([readonly][checked]:not([disabled])) [part='checkbox'],
+    :host([readonly][indeterminate]:not([disabled])) [part='checkbox'],
+    :host([readonly]:not([disabled])) [part='checkbox']::before {
       background-color: var(--material-secondary-text-color);
     }