fix: restore 100% width on group field container (#2887)

vaadin · Oct 18, 2021 · 99b87df · 99b87df
1 parent 48fbfd6
commit 99b87df
Show file tree

Hide file tree

Showing 10 changed files with 50 additions and 0 deletions.
diff --git a/packages/checkbox-group/src/vaadin-checkbox-group.js b/packages/checkbox-group/src/vaadin-checkbox-group.js
@@ -84,6 +84,7 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(DirMixin(Themabl
         .vaadin-group-field-container {
           display: flex;
           flex-direction: column;
+          width: 100%;
         }
 
         :host(:not([has-label])) [part='label'] {

diff --git a/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js b/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js
@@ -87,6 +87,18 @@ describe('checkbox-group', () => {
       element.style.width = '150px';
       await visualDiff(div, 'wrapped');
     });
+
+    it('full width', async () => {
+      div.style.width = '300px';
+      div.style.padding = '0';
+      element.style.width = '100%';
+      element.querySelectorAll('vaadin-checkbox').forEach((checkbox) => {
+        checkbox.style.width = '33%';
+        // compensate inline-block whitespace
+        checkbox.style.marginRight = '-3px';
+      });
+      await visualDiff(div, 'full-width');
+    });
   });
 
   describe('RTL', () => {

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/packages/checkbox-group/test/visual/material/checkbox-group.test.js b/packages/checkbox-group/test/visual/material/checkbox-group.test.js
@@ -77,6 +77,18 @@ describe('checkbox-group', () => {
       element.style.width = '150px';
       await visualDiff(div, 'wrapped');
     });
+
+    it('full width', async () => {
+      div.style.width = '300px';
+      div.style.padding = '0';
+      element.style.width = '100%';
+      element.querySelectorAll('vaadin-checkbox').forEach((checkbox) => {
+        checkbox.style.width = '33%';
+        // compensate inline-block whitespace
+        checkbox.style.marginRight = '-3px';
+      });
+      await visualDiff(div, 'full-width');
+    });
   });
 
   describe('RTL', () => {

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/packages/radio-group/src/vaadin-radio-group.js b/packages/radio-group/src/vaadin-radio-group.js
@@ -88,6 +88,7 @@ class RadioGroup extends FieldMixin(FocusMixin(DisabledMixin(KeyboardMixin(DirMi
         .vaadin-group-field-container {
           display: flex;
           flex-direction: column;
+          width: 100%;
         }
 
         :host(:not([has-label])) [part='label'] {

diff --git a/packages/radio-group/test/visual/lumo/radio-group.test.js b/packages/radio-group/test/visual/lumo/radio-group.test.js
@@ -87,6 +87,18 @@ describe('radio-group', () => {
       element.style.width = '150px';
       await visualDiff(div, 'wrapped');
     });
+
+    it('full width', async () => {
+      div.style.width = '300px';
+      div.style.padding = '0';
+      element.style.width = '100%';
+      element.querySelectorAll('vaadin-radio-button').forEach((radio) => {
+        radio.style.width = '33%';
+        // compensate inline-block whitespace
+        radio.style.marginRight = '-3px';
+      });
+      await visualDiff(div, 'full-width');
+    });
   });
 
   describe('RTL', () => {

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/packages/radio-group/test/visual/material/radio-group.test.js b/packages/radio-group/test/visual/material/radio-group.test.js
@@ -77,6 +77,18 @@ describe('radio-group', () => {
       element.style.width = '150px';
       await visualDiff(div, 'wrapped');
     });
+
+    it('full width', async () => {
+      div.style.width = '300px';
+      div.style.padding = '0';
+      element.style.width = '100%';
+      element.querySelectorAll('vaadin-radio-button').forEach((radio) => {
+        radio.style.width = '33%';
+        // compensate inline-block whitespace
+        radio.style.marginRight = '-3px';
+      });
+      await visualDiff(div, 'full-width');
+    });
   });
 
   describe('RTL', () => {

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