fix: fix label color in disabled state (#6838) (#6848)

Co-authored-by: Sergey Vinogradov <[email protected]>
vaadin · Nov 24, 2023 · ef26e31 · ef26e31
1 parent d69a98a
commit ef26e31
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 0 deletions.
diff --git a/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js b/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js
@@ -49,6 +49,12 @@ describe('checkbox-group', () => {
       await visualDiff(div, 'label-focused');
     });
 
+    it('label disabled', async () => {
+      element.label = 'Label';
+      element.disabled = true;
+      await visualDiff(div, 'label-disabled');
+    });
+
     it('value', async () => {
       element.value = ['a', 'c'];
       await visualDiff(div, 'value');

diff --git a/...x-group/test/visual/lumo/screenshots/checkbox-group/baseline/label-disabled.png b/...x-group/test/visual/lumo/screenshots/checkbox-group/baseline/label-disabled.png
diff --git a/packages/checkbox-group/test/visual/material/checkbox-group.test.js b/packages/checkbox-group/test/visual/material/checkbox-group.test.js
@@ -49,6 +49,12 @@ describe('checkbox-group', () => {
       await visualDiff(div, 'label-focused');
     });
 
+    it('label disabled', async () => {
+      element.label = 'Label';
+      element.disabled = true;
+      await visualDiff(div, 'label-disabled');
+    });
+
     it('value', async () => {
       element.value = ['a', 'c'];
       await visualDiff(div, 'value');

diff --git a/...oup/test/visual/material/screenshots/checkbox-group/baseline/label-disabled.png b/...oup/test/visual/material/screenshots/checkbox-group/baseline/label-disabled.png
diff --git a/packages/radio-group/test/visual/lumo/radio-group.test.js b/packages/radio-group/test/visual/lumo/radio-group.test.js
@@ -49,6 +49,12 @@ describe('radio-group', () => {
       await visualDiff(div, 'label-focused');
     });
 
+    it('label disabled', async () => {
+      element.label = 'Label';
+      element.disabled = true;
+      await visualDiff(div, 'label-disabled');
+    });
+
     it('value', async () => {
       element.value = 'a';
       await visualDiff(div, 'value');

diff --git a/...adio-group/test/visual/lumo/screenshots/radio-group/baseline/label-disabled.png b/...adio-group/test/visual/lumo/screenshots/radio-group/baseline/label-disabled.png
diff --git a/packages/radio-group/test/visual/material/radio-group.test.js b/packages/radio-group/test/visual/material/radio-group.test.js
@@ -49,6 +49,12 @@ describe('radio-group', () => {
       await visualDiff(div, 'label-focused');
     });
 
+    it('label disabled', async () => {
+      element.label = 'Label';
+      element.disabled = true;
+      await visualDiff(div, 'label-disabled');
+    });
+
     it('value', async () => {
       element.value = 'a';
       await visualDiff(div, 'value');

diff --git a/...-group/test/visual/material/screenshots/radio-group/baseline/label-disabled.png b/...-group/test/visual/material/screenshots/radio-group/baseline/label-disabled.png
diff --git a/packages/radio-group/theme/lumo/vaadin-radio-group-styles.js b/packages/radio-group/theme/lumo/vaadin-radio-group-styles.js
@@ -31,6 +31,11 @@ const radioGroup = css`
     flex-direction: column;
   }
 
+  :host([disabled]) [part='label'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
   :host([focused]:not([readonly])) [part='label'] {
     color: var(--lumo-primary-text-color);
   }