fix: make Material checkbox group theme vertical work (#166) (#167)

Co-authored-by: Phan Hong Duc <[email protected]>
vaadin · Mar 25, 2020 · 2cae4df · 2cae4df
1 parent ee07e8c
commit 2cae4df
Show file tree

Hide file tree

Showing 15 changed files with 15 additions and 1 deletion.
diff --git a/test/visual/default.html b/test/visual/default.html
@@ -41,6 +41,13 @@
     </vaadin-checkbox-group>
   </div>
 
+  <div id="theme-vertical-group-tests">
+    <vaadin-checkbox-group label="Choose a number" theme="vertical">
+      <vaadin-checkbox value="1">1</vaadin-checkbox>
+      <vaadin-checkbox value="2">2</vaadin-checkbox>
+    </vaadin-checkbox-group>
+  </div>
+
   <div id="disabled-group-tests">
     <vaadin-checkbox-group label="Choose a number" disabled>
       <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/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png b/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png
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
diff --git a/...sual/screens/vaadin-checkbox/theme-vertical-group-tests-lumo/default/chrome.png b/...sual/screens/vaadin-checkbox/theme-vertical-group-tests-lumo/default/chrome.png
diff --git a/...ual/screens/vaadin-checkbox/theme-vertical-group-tests-lumo/default/firefox.png b/...ual/screens/vaadin-checkbox/theme-vertical-group-tests-lumo/default/firefox.png
diff --git a/.../screens/vaadin-checkbox/theme-vertical-group-tests-material/default/chrome.png b/.../screens/vaadin-checkbox/theme-vertical-group-tests-material/default/chrome.png
diff --git a/...screens/vaadin-checkbox/theme-vertical-group-tests-material/default/firefox.png b/...screens/vaadin-checkbox/theme-vertical-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/screens/vaadin-checkbox/wrapping-group-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-checkbox/wrapping-group-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/wrapping-group-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-checkbox/wrapping-group-tests-lumo/default/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -39,6 +39,13 @@ gemini.suite('vaadin-checkbox', function(rootSuite) {
         .capture('default');
     });
 
+    gemini.suite(`theme-vertical-group-tests-${theme}`, (suite) => {
+      suite
+        .setUrl(`default.html?theme=${theme}`)
+        .setCaptureElements('#theme-vertical-group-tests')
+        .capture('default');
+    });
+
     gemini.suite(`disabled-group-tests-${theme}`, (suite) => {
       suite
         .setUrl(`default.html?theme=${theme}`)

diff --git a/theme/material/vaadin-checkbox-group-styles.html b/theme/material/vaadin-checkbox-group-styles.html
@@ -35,7 +35,7 @@
         position: absolute;
       }
 
-      :host([theme~="vertical"]) {
+      :host([theme~="vertical"]) [part="group-field"] {
         display: flex;
         flex-direction: column;
       }