fix: use correct required indicator color when disabled (#7357)

vaadin · Apr 23, 2024 · e6281fa · e6281fa
1 parent 27d27e9
commit e6281fa
Show file tree

Hide file tree

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

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

diff --git a/...eckbox/test/visual/material/screenshots/checkbox/baseline/disabled-required.png b/...eckbox/test/visual/material/screenshots/checkbox/baseline/disabled-required.png
diff --git a/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js b/packages/checkbox/theme/lumo/vaadin-checkbox-styles.js
@@ -140,7 +140,6 @@ registerStyles(
     /* Disabled */
     :host([disabled]) {
       pointer-events: none;
-      color: var(--lumo-disabled-text-color);
       --vaadin-input-field-border-color: var(--lumo-contrast-20pct);
     }
 
@@ -156,6 +155,12 @@ registerStyles(
       color: var(--lumo-contrast-30pct);
     }
 
+    :host([disabled]) [part='label'],
+    :host([disabled]) [part='helper-text'] {
+      color: var(--lumo-disabled-text-color);
+      -webkit-text-fill-color: var(--lumo-disabled-text-color);
+    }
+
     :host([indeterminate][disabled]) [part='checkbox']::after {
       background-color: var(--lumo-contrast-30pct);
     }
@@ -296,11 +301,6 @@ registerStyles(
     :host(:hover:not([readonly])) [part='helper-text'] {
       color: var(--lumo-body-text-color);
     }
-
-    :host([disabled]) [part='helper-text'] {
-      color: var(--lumo-disabled-text-color);
-      -webkit-text-fill-color: var(--lumo-disabled-text-color);
-    }
   `,
   { moduleId: 'lumo-checkbox' },
 );
diff --git a/packages/checkbox/theme/material/vaadin-checkbox-styles.js b/packages/checkbox/theme/material/vaadin-checkbox-styles.js
@@ -147,9 +147,12 @@ registerStyles(
       left: 2px;
     }
 
+    :host([required]:not([disabled])) [part='required-indicator'] {
+      color: var(--material-secondary-text-color);
+    }
+
     :host([required]) [part='required-indicator']::after {
       content: '*';
-      color: var(--material-secondary-text-color);
     }
 
     :host([invalid]) [part='required-indicator']::after {