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

vaadin · Sep 2, 2024 · b00d1b6 · b00d1b6
1 parent 1bc22ec
commit b00d1b6
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
@@ -92,6 +92,18 @@ describe('checkbox', () => {
       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('styled', () => {
       before(() => {
         document.documentElement.style.setProperty('--vaadin-checkbox-disabled-checkmark-color', 'white');

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
@@ -171,8 +171,8 @@ registerStyles(
       background-color: var(--_disabled-checkmark-color);
     }
 
-    :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
@@ -126,9 +126,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);
     }