Add styling for ComponentRenderer wrapper div (#9691)

Fixes #9170

5 files changed, 26 insertions, 1 deletions

diff --git a/client/src/main/java/com/vaadin/client/connectors/grid/ComponentRendererConnector.java b/client/src/main/java/com/vaadin/client/connectors/grid/ComponentRendererConnector.java
index cf6c2db79f..c094437538 100644
--- a/client/src/main/java/com/vaadin/client/connectors/grid/ComponentRendererConnector.java
+++ b/client/src/main/java/com/vaadin/client/connectors/grid/ComponentRendererConnector.java
@@ -43,7 +43,9 @@ public class ComponentRendererConnector
 
             @Override
             public SimplePanel createWidget() {
-                return GWT.create(SimplePanel.class);
+                SimplePanel panel = GWT.create(SimplePanel.class);
+                panel.setStyleName("component-wrap");
+                return panel;
             }
 
             @Override
diff --git a/documentation/components/components-grid.asciidoc b/documentation/components/components-grid.asciidoc
index 1cd231aa82..63f297eddc 100644
--- a/documentation/components/components-grid.asciidoc
+++ b/documentation/components/components-grid.asciidoc
@@ -621,6 +621,7 @@ grid.addColumn(person -> {
       }, new ComponentRenderer());
 ----
 
+[classname]#Components# in [classname]#Grid# [classname]#ComponentRenderer# are wrapped in a [literal]#++div++# with the style name [literal]#++component-wrap++#. This can be used to style the alignment and size of the [classname]#Component#.
 
 [[components.grid.renderer.custom]]
 === Custom Renderers
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
index fdc4eff73f..cfc094cb27 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
@@ -222,6 +222,11 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
         }
       }
     }
+
+    // Style for ComponentRenderer wrap
+    div.component-wrap {
+        width: 100%;
+      }
   }
 
   // Rows
diff --git a/uitest/src/main/java/com/vaadin/tests/components/grid/GridComponents.java b/uitest/src/main/java/com/vaadin/tests/components/grid/GridComponents.java
index a48c8400c1..6398ef1055 100644
--- a/uitest/src/main/java/com/vaadin/tests/components/grid/GridComponents.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/grid/GridComponents.java
@@ -35,6 +35,7 @@ public class GridComponents extends AbstractTestUIWithLog {
 
             TextField textField = new TextField();
             textField.setValue(string);
+            textField.setWidth("100%");
             // Make sure all changes are sent immediately
             textField.setValueChangeMode(ValueChangeMode.EAGER);
             textField.addValueChangeListener(e -> {
diff --git a/uitest/src/test/java/com/vaadin/tests/components/grid/GridComponentsTest.java b/uitest/src/test/java/com/vaadin/tests/components/grid/GridComponentsTest.java
index af985aad9a..295f06e4ce 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/grid/GridComponentsTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/grid/GridComponentsTest.java
@@ -7,6 +7,7 @@ import org.openqa.selenium.WebElement;
 import com.vaadin.testbench.By;
 import com.vaadin.testbench.elements.ButtonElement;
 import com.vaadin.testbench.elements.GridElement;
+import com.vaadin.testbench.elements.GridElement.GridCellElement;
 import com.vaadin.testbench.elements.GridElement.GridRowElement;
 import com.vaadin.testbench.elements.NotificationElement;
 import com.vaadin.tests.tb3.MultiBrowserTest;
@@ -55,6 +56,21 @@ public class GridComponentsTest extends MultiBrowserTest {
         assertRowExists(5, "Row 1005");
     }
 
+    @Test
+    public void testTextFieldSize() {
+        openTestURL();
+        GridCellElement cell = $(GridElement.class).first().getCell(0, 1);
+        int cellWidth = cell.getSize().getWidth();
+        int fieldWidth = cell.findElement(By.tagName("input")).getSize()
+                .getWidth();
+        // padding left and right, +1 to fix sub pixel issues
+        int padding = 18 * 2 + 1;
+
+        int extraSpace = Math.abs(fieldWidth - cellWidth);
+        Assert.assertTrue("Too much unused space in cell. Expected: " + padding
+                + " Actual: " + extraSpace, extraSpace <= padding);
+    }
+
     private void editTextFieldInCell(GridElement grid, int row, int col) {
         WebElement textField = grid.getCell(row, col)
                 .findElement(By.tagName("input"));