fix!: make CBG group-field part a flex container (#6171) (#6177)

* fix: make CBG group-field part a flex container Change `[part=group-field]` of `<vaadin-checkbox-group>` to be a flex container instead of the default block container to avoid white-space in the markup to be rendered. Part of #5738 * test: update visual tests * fix: change group-field to wrap the children elements * test: update material visual tests * test: update visual tests for field-highlighter Co-authored-by: Diego Cardoso <[email protected]>
vaadin · Jul 17, 2023 · f0e4057 · f0e4057
1 parent 98bd79b
commit f0e4057
Show file tree

Hide file tree

Showing 34 changed files with 5 additions and 2 deletions.
diff --git a/packages/checkbox-group/src/vaadin-checkbox-group.js b/packages/checkbox-group/src/vaadin-checkbox-group.js
@@ -90,6 +90,11 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(ElementMixin(The
           width: 100%;
         }
 
+        [part='group-field'] {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
         :host(:not([has-label])) [part='label'] {
           display: none;
         }

diff --git a/...s/checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/basic.png b/...s/checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/basic.png
diff --git a/...heckbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/disabled.png b/...heckbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/disabled.png
diff --git a/...ox-group/test/visual/lumo/screenshots/checkbox-group/baseline/error-message.png b/...ox-group/test/visual/lumo/screenshots/checkbox-group/baseline/error-message.png
diff --git a/...ckbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/full-width.png b/...ckbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/full-width.png
diff --git a/...oup/test/visual/lumo/screenshots/checkbox-group/baseline/helper-above-field.png b/...oup/test/visual/lumo/screenshots/checkbox-group/baseline/helper-above-field.png
diff --git a/...kbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/helper-text.png b/...kbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/helper-text.png
diff --git a/...ox-group/test/visual/lumo/screenshots/checkbox-group/baseline/label-focused.png b/...ox-group/test/visual/lumo/screenshots/checkbox-group/baseline/label-focused.png
diff --git a/...s/checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/label.png b/...s/checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/label.png
diff --git a/...heckbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/required.png b/...heckbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/required.png
diff --git a/...eckbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/rtl-basic.png b/...eckbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/rtl-basic.png
diff --git a/...roup/test/visual/lumo/screenshots/checkbox-group/baseline/rtl-error-message.png b/...roup/test/visual/lumo/screenshots/checkbox-group/baseline/rtl-error-message.png
diff --git a/...kbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/rtl-wrapped.png b/...kbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/rtl-wrapped.png
diff --git a/...s/checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/value.png b/...s/checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/value.png
diff --git a/...checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/wrapped.png b/...checkbox-group/test/visual/lumo/screenshots/checkbox-group/baseline/wrapped.png
diff --git a/...eckbox-group/test/visual/material/screenshots/checkbox-group/baseline/basic.png b/...eckbox-group/test/visual/material/screenshots/checkbox-group/baseline/basic.png
diff --git a/...box-group/test/visual/material/screenshots/checkbox-group/baseline/disabled.png b/...box-group/test/visual/material/screenshots/checkbox-group/baseline/disabled.png
diff --git a/...roup/test/visual/material/screenshots/checkbox-group/baseline/error-message.png b/...roup/test/visual/material/screenshots/checkbox-group/baseline/error-message.png
diff --git a/...x-group/test/visual/material/screenshots/checkbox-group/baseline/full-width.png b/...x-group/test/visual/material/screenshots/checkbox-group/baseline/full-width.png
diff --git a/...-group/test/visual/material/screenshots/checkbox-group/baseline/helper-text.png b/...-group/test/visual/material/screenshots/checkbox-group/baseline/helper-text.png
diff --git a/...roup/test/visual/material/screenshots/checkbox-group/baseline/label-focused.png b/...roup/test/visual/material/screenshots/checkbox-group/baseline/label-focused.png
diff --git a/...eckbox-group/test/visual/material/screenshots/checkbox-group/baseline/label.png b/...eckbox-group/test/visual/material/screenshots/checkbox-group/baseline/label.png
diff --git a/...box-group/test/visual/material/screenshots/checkbox-group/baseline/required.png b/...box-group/test/visual/material/screenshots/checkbox-group/baseline/required.png
diff --git a/...ox-group/test/visual/material/screenshots/checkbox-group/baseline/rtl-basic.png b/...ox-group/test/visual/material/screenshots/checkbox-group/baseline/rtl-basic.png
diff --git a/.../test/visual/material/screenshots/checkbox-group/baseline/rtl-error-message.png b/.../test/visual/material/screenshots/checkbox-group/baseline/rtl-error-message.png
diff --git a/...-group/test/visual/material/screenshots/checkbox-group/baseline/rtl-wrapped.png b/...-group/test/visual/material/screenshots/checkbox-group/baseline/rtl-wrapped.png
diff --git a/...eckbox-group/test/visual/material/screenshots/checkbox-group/baseline/value.png b/...eckbox-group/test/visual/material/screenshots/checkbox-group/baseline/value.png
diff --git a/...kbox-group/test/visual/material/screenshots/checkbox-group/baseline/wrapped.png b/...kbox-group/test/visual/material/screenshots/checkbox-group/baseline/wrapped.png
diff --git a/packages/checkbox-group/theme/lumo/vaadin-checkbox-group-styles.js b/packages/checkbox-group/theme/lumo/vaadin-checkbox-group-styles.js
@@ -27,7 +27,6 @@ const checkboxGroup = css`
   }
 
   :host([theme~='vertical']) [part='group-field'] {
-    display: flex;
     flex-direction: column;
   }
 

diff --git a/packages/checkbox-group/theme/material/vaadin-checkbox-group-styles.js b/packages/checkbox-group/theme/material/vaadin-checkbox-group-styles.js
@@ -27,7 +27,6 @@ const checkboxGroup = css`
   }
 
   :host([theme~='vertical']) [part='group-field'] {
-    display: flex;
     flex-direction: column;
   }
 

diff --git a/...t/visual/lumo/screenshots/field-highlighter/baseline/checkbox-group-focused.png b/...t/visual/lumo/screenshots/field-highlighter/baseline/checkbox-group-focused.png
diff --git a/...hter/test/visual/lumo/screenshots/field-highlighter/baseline/checkbox-group.png b/...hter/test/visual/lumo/screenshots/field-highlighter/baseline/checkbox-group.png
diff --git a/...sual/material/screenshots/field-highlighter/baseline/checkbox-group-focused.png b/...sual/material/screenshots/field-highlighter/baseline/checkbox-group-focused.png
diff --git a/.../test/visual/material/screenshots/field-highlighter/baseline/checkbox-group.png b/.../test/visual/material/screenshots/field-highlighter/baseline/checkbox-group.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,6 @@ const checkboxGroup = css` @@
       }
       :host([theme~='vertical']) [part='group-field'] {
-        display: flex;
         flex-direction: column;
       }
@@ Expand Down @@