From 6de4908a1243b11939ef32d26a740dddcdd0389c Mon Sep 17 00:00:00 2001
From: web-padawan <serguey.kulikov@gmail.com>
Date: Thu, 23 May 2019 13:28:12 +0300
Subject: [PATCH] fix: add missing focused label styles and visual test

---
 test/visual/default.html                        |  13 ++++++++++++-
 .../focus-tests-lumo/focus/chrome.png           | Bin 0 -> 2400 bytes
 .../focus-tests-lumo/focus/firefox.png          | Bin 0 -> 2080 bytes
 .../focus-tests-material/focus/chrome.png       | Bin 0 -> 2076 bytes
 .../focus-tests-material/focus/firefox.png      | Bin 0 -> 2126 bytes
 test/visual/test.js                             |   7 +++++++
 theme/lumo/vaadin-checkbox-group-styles.html    |  16 ++++++++++++++++
 .../material/vaadin-checkbox-group-styles.html  |   5 +++++
 8 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png
 create mode 100644 test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/firefox.png
 create mode 100644 test/visual/screens/vaadin-checkbox/focus-tests-material/focus/chrome.png
 create mode 100644 test/visual/screens/vaadin-checkbox/focus-tests-material/focus/firefox.png

diff --git a/test/visual/default.html b/test/visual/default.html
index 204e151..3d6e0cc 100644
--- a/test/visual/default.html
+++ b/test/visual/default.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
 
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../iron-test-helpers/mock-interactions.js"></script>
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-checkbox.html">`);
@@ -46,7 +47,7 @@
       <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>
@@ -54,10 +55,20 @@
     </vaadin-checkbox-group>
   </div>
 
+  <div id="focus-tests">
+    <vaadin-checkbox-group label="Focused">
+      <vaadin-checkbox id="focus-checkbox" value="1">1</vaadin-checkbox>
+      <vaadin-checkbox value="2">2</vaadin-checkbox>
+    </vaadin-checkbox-group>
+  </div>
+
   <script>
     window.addEventListener('WebComponentsReady', () => {
       const checkboxGroup = document.getElementById('validation-checkbox-group');
       checkboxGroup.validate();
+
+      MockInteractions.keyDownOn(document.body, 9);
+      document.getElementById('focus-checkbox').dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
     });
   </script>
 
diff --git a/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png b/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e88ee0fcb19e0af269c49c61e265334c9c65db8
GIT binary patch
literal 2400
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

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/firefox.png b/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5344b50aed7792423af272fea2a019fcc075469
GIT binary patch
literal 2080
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

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/chrome.png b/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/chrome.png
new file mode 100644
index 0000000000000000000000000000000000000000..a4720a080f9d0de53c83fedad56d63ca36cd1e66
GIT binary patch
literal 2076
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
ULs{8|0t5)=<e3w7KVG@>U#M*A6aWAK

literal 0
HcmV?d00001

diff --git a/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/firefox.png b/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/firefox.png
new file mode 100644
index 0000000000000000000000000000000000000000..446f56c1e1a1655cf819ab747f6d56666cbd412c
GIT binary patch
literal 2126
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
L$l;np=l=OW!+Ru4

literal 0
HcmV?d00001

diff --git a/test/visual/test.js b/test/visual/test.js
index 87d7502..c33e67e 100644
--- a/test/visual/test.js
+++ b/test/visual/test.js
@@ -52,6 +52,13 @@ gemini.suite('vaadin-checkbox', function(rootSuite) {
         .setCaptureElements('#validation-tests')
         .capture('error');
     });
+
+    gemini.suite(`focus-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default.html?theme=${theme}`)
+        .setCaptureElements('#focus-tests')
+        .capture('focus');
+    });
   });
 
 });
diff --git a/theme/lumo/vaadin-checkbox-group-styles.html b/theme/lumo/vaadin-checkbox-group-styles.html
index dada37b..4acd50e 100644
--- a/theme/lumo/vaadin-checkbox-group-styles.html
+++ b/theme/lumo/vaadin-checkbox-group-styles.html
@@ -1,3 +1,4 @@
+<link rel="import" href="../../../vaadin-lumo-styles/color.html">
 <link rel="import" href="../../../vaadin-lumo-styles/mixins/required-field.html">
 
 <dom-module id="lumo-checkbox-group" theme-for="vaadin-checkbox-group">
@@ -33,6 +34,21 @@
         color: var(--lumo-disabled-text-color);
         -webkit-text-fill-color: var(--lumo-disabled-text-color);
       }
+
+      :host([focused]:not([disabled])) [part="label"] {
+        color: var(--lumo-primary-text-color);
+      }
+
+      :host(:hover:not([disabled]):not([focused])) [part="label"] {
+        color: var(--lumo-body-text-color);
+      }
+
+      /* Touch device adjustment */
+      @media (pointer: coarse) {
+        :host(:hover:not([disabled]):not([focused])) [part="label"] {
+          color: var(--lumo-secondary-text-color);
+        }
+      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/material/vaadin-checkbox-group-styles.html b/theme/material/vaadin-checkbox-group-styles.html
index 3d7f9d9..890a274 100644
--- a/theme/material/vaadin-checkbox-group-styles.html
+++ b/theme/material/vaadin-checkbox-group-styles.html
@@ -1,3 +1,4 @@
+<link rel="import" href="../../../vaadin-material-styles/color.html">
 <link rel="import" href="../../../vaadin-material-styles/mixins/required-field.html">
 
 <dom-module id="material-checkbox-group" theme-for="vaadin-checkbox-group">
@@ -43,6 +44,10 @@
         color: var(--material-disabled-text-color);
         -webkit-text-fill-color: var(--material-disabled-text-color);
       }
+
+      :host([focused]:not([invalid])) [part="label"] {
+        color: var(--material-primary-text-color);
+      }
     </style>
   </template>
 </dom-module>