fix(lumo): disabled checkbox group label style (#144)

* Fix checkbox group label greying out with lumo theme * Add visual tests for disabled checkbox group
vaadin · Feb 15, 2019 · b791d26 · b791d26
1 parent d263a0b
commit b791d26
Show file tree

Hide file tree

Showing 10 changed files with 20 additions and 2 deletions.
diff --git a/demo/checkbox-group-demos.html b/demo/checkbox-group-demos.html
@@ -31,7 +31,7 @@ <h3>Checkbox Group</h3>
     <h3>Checkbox Group Disabled</h3>
     <vaadin-demo-snippet id="checkbox-group-demos-checkbox-group-disabled">
       <template preserve-content>
-        <vaadin-checkbox-group disabled>
+        <vaadin-checkbox-group label="Disabled" disabled>
           <vaadin-checkbox value="1">1</vaadin-checkbox>
           <vaadin-checkbox value="2">2</vaadin-checkbox>
           <vaadin-checkbox value="3">3</vaadin-checkbox>

diff --git a/test/visual/default.html b/test/visual/default.html
@@ -40,6 +40,13 @@
     </vaadin-checkbox-group>
   </div>
 
+  <div id="disabled-group-tests">
+    <vaadin-checkbox-group label="Choose a number" disabled>
+      <vaadin-checkbox value="1">1</vaadin-checkbox>
+      <vaadin-checkbox value="2">2</vaadin-checkbox>
+    </vaadin-checkbox-group>
+  </div>
+
   <div id="validation-tests">
     <vaadin-checkbox-group required error-message="Please choose a number" label="Choose a number" id="validation-checkbox-group">
       <vaadin-checkbox value="1">1</vaadin-checkbox>

diff --git a/test/visual/screens/vaadin-checkbox/disabled-group-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-checkbox/disabled-group-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/disabled-group-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-checkbox/disabled-group-tests-lumo/default/firefox.png
diff --git a/...visual/screens/vaadin-checkbox/disabled-group-tests-material/default/chrome.png b/...visual/screens/vaadin-checkbox/disabled-group-tests-material/default/chrome.png
diff --git a/...isual/screens/vaadin-checkbox/disabled-group-tests-material/default/firefox.png b/...isual/screens/vaadin-checkbox/disabled-group-tests-material/default/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/chrome.png b/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/firefox.png b/test/visual/screens/vaadin-checkbox/validation-tests-lumo/error/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -39,13 +39,19 @@ gemini.suite('vaadin-checkbox', function(rootSuite) {
         .capture('default');
     });
 
+    gemini.suite(`disabled-group-tests-${theme}`, (suite) => {
+      suite
+        .setUrl(`default.html?theme=${theme}`)
+        .setCaptureElements('#disabled-group-tests')
+        .capture('default');
+    });
+
     gemini.suite(`validation-tests-${theme}`, function(suite) {
       suite
         .setUrl(`default.html?theme=${theme}`)
         .setCaptureElements('#validation-tests')
         .capture('error');
     });
-
   });
 
 });
diff --git a/theme/lumo/vaadin-checkbox-group-styles.html b/theme/lumo/vaadin-checkbox-group-styles.html
@@ -28,6 +28,11 @@
       [part="label"] {
         padding-bottom: 0.7em;
       }
+
+      :host([disabled]) [part="label"] {
+        color: var(--lumo-disabled-text-color);
+        -webkit-text-fill-color: var(--lumo-disabled-text-color);
+      }
     </style>
   </template>
 </dom-module>