fix!: make RG group-field part a flex container (#6172) (#6178)

* fix: make RG group-field part a flex container Change [part=group-field] of <vaadin-radio-group> to be a flex container instead of the default block container to avoid white space in the markup to be rendered. * test: update visual tests Co-authored-by: Diego Cardoso <[email protected]>
vaadin · Jul 17, 2023 · 98bd79b · 98bd79b
1 parent 8f32c14
commit 98bd79b
Show file tree

Hide file tree

Showing 34 changed files with 5 additions and 2 deletions.
diff --git a/...test/visual/lumo/screenshots/field-highlighter/baseline/radio-group-focused.png b/...test/visual/lumo/screenshots/field-highlighter/baseline/radio-group-focused.png
diff --git a/...lighter/test/visual/lumo/screenshots/field-highlighter/baseline/radio-group.png b/...lighter/test/visual/lumo/screenshots/field-highlighter/baseline/radio-group.png
diff --git a/.../visual/material/screenshots/field-highlighter/baseline/radio-group-focused.png b/.../visual/material/screenshots/field-highlighter/baseline/radio-group-focused.png
diff --git a/...ter/test/visual/material/screenshots/field-highlighter/baseline/radio-group.png b/...ter/test/visual/material/screenshots/field-highlighter/baseline/radio-group.png
diff --git a/packages/radio-group/src/vaadin-radio-group.js b/packages/radio-group/src/vaadin-radio-group.js
@@ -95,6 +95,11 @@ class RadioGroup extends FieldMixin(
           width: 100%;
         }
 
+        [part='group-field'] {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
         :host(:not([has-label])) [part='label'] {
           display: none;
         }

diff --git a/packages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/basic.png b/packages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/basic.png
diff --git a/...ages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/disabled.png b/...ages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/disabled.png
diff --git a/...radio-group/test/visual/lumo/screenshots/radio-group/baseline/error-message.png b/...radio-group/test/visual/lumo/screenshots/radio-group/baseline/error-message.png
diff --git a/...es/radio-group/test/visual/lumo/screenshots/radio-group/baseline/full-width.png b/...es/radio-group/test/visual/lumo/screenshots/radio-group/baseline/full-width.png
diff --git a/...-group/test/visual/lumo/screenshots/radio-group/baseline/helper-above-field.png b/...-group/test/visual/lumo/screenshots/radio-group/baseline/helper-above-field.png
diff --git a/...s/radio-group/test/visual/lumo/screenshots/radio-group/baseline/helper-text.png b/...s/radio-group/test/visual/lumo/screenshots/radio-group/baseline/helper-text.png
diff --git a/...radio-group/test/visual/lumo/screenshots/radio-group/baseline/label-focused.png b/...radio-group/test/visual/lumo/screenshots/radio-group/baseline/label-focused.png
diff --git a/packages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/label.png b/packages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/label.png
diff --git a/...ages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/required.png b/...ages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/required.png
diff --git a/...ges/radio-group/test/visual/lumo/screenshots/radio-group/baseline/rtl-basic.png b/...ges/radio-group/test/visual/lumo/screenshots/radio-group/baseline/rtl-basic.png
diff --git a/...o-group/test/visual/lumo/screenshots/radio-group/baseline/rtl-error-message.png b/...o-group/test/visual/lumo/screenshots/radio-group/baseline/rtl-error-message.png
diff --git a/...s/radio-group/test/visual/lumo/screenshots/radio-group/baseline/rtl-wrapped.png b/...s/radio-group/test/visual/lumo/screenshots/radio-group/baseline/rtl-wrapped.png
diff --git a/packages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/value.png b/packages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/value.png
diff --git a/packages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/wrapped.png b/packages/radio-group/test/visual/lumo/screenshots/radio-group/baseline/wrapped.png
diff --git a/...ges/radio-group/test/visual/material/screenshots/radio-group/baseline/basic.png b/...ges/radio-group/test/visual/material/screenshots/radio-group/baseline/basic.png
diff --git a/.../radio-group/test/visual/material/screenshots/radio-group/baseline/disabled.png b/.../radio-group/test/visual/material/screenshots/radio-group/baseline/disabled.png
diff --git a/...o-group/test/visual/material/screenshots/radio-group/baseline/error-message.png b/...o-group/test/visual/material/screenshots/radio-group/baseline/error-message.png
diff --git a/...adio-group/test/visual/material/screenshots/radio-group/baseline/full-width.png b/...adio-group/test/visual/material/screenshots/radio-group/baseline/full-width.png
diff --git a/...dio-group/test/visual/material/screenshots/radio-group/baseline/helper-text.png b/...dio-group/test/visual/material/screenshots/radio-group/baseline/helper-text.png
diff --git a/...o-group/test/visual/material/screenshots/radio-group/baseline/label-focused.png b/...o-group/test/visual/material/screenshots/radio-group/baseline/label-focused.png
diff --git a/...ges/radio-group/test/visual/material/screenshots/radio-group/baseline/label.png b/...ges/radio-group/test/visual/material/screenshots/radio-group/baseline/label.png
diff --git a/.../radio-group/test/visual/material/screenshots/radio-group/baseline/required.png b/.../radio-group/test/visual/material/screenshots/radio-group/baseline/required.png
diff --git a/...radio-group/test/visual/material/screenshots/radio-group/baseline/rtl-basic.png b/...radio-group/test/visual/material/screenshots/radio-group/baseline/rtl-basic.png
diff --git a/...oup/test/visual/material/screenshots/radio-group/baseline/rtl-error-message.png b/...oup/test/visual/material/screenshots/radio-group/baseline/rtl-error-message.png
diff --git a/...dio-group/test/visual/material/screenshots/radio-group/baseline/rtl-wrapped.png b/...dio-group/test/visual/material/screenshots/radio-group/baseline/rtl-wrapped.png
diff --git a/...ges/radio-group/test/visual/material/screenshots/radio-group/baseline/value.png b/...ges/radio-group/test/visual/material/screenshots/radio-group/baseline/value.png
diff --git a/...s/radio-group/test/visual/material/screenshots/radio-group/baseline/wrapped.png b/...s/radio-group/test/visual/material/screenshots/radio-group/baseline/wrapped.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
@@ -27,7 +27,6 @@ const radioGroup = css`
   }
 
   :host([theme~='vertical']) [part='group-field'] {
-    display: flex;
     flex-direction: column;
   }
 

diff --git a/packages/radio-group/theme/material/vaadin-radio-group-styles.js b/packages/radio-group/theme/material/vaadin-radio-group-styles.js
@@ -27,7 +27,6 @@ const radioGroup = css`
   }
 
   :host([theme~='vertical']) [part='group-field'] {
-    display: flex;
     flex-direction: column;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,6 @@ const radioGroup = css` @@
       }
       :host([theme~='vertical']) [part='group-field'] {
-        display: flex;
         flex-direction: column;
       }
@@ Expand Down @@