Provide a way to set styles for Header/Footer Cells and Rows in a Grid (#8499)

Fixes #8422

3 files changed, 55 insertions, 72 deletions

diff --git a/uitest/src/main/java/com/vaadin/tests/components/grid/GridEditorUI.java b/uitest/src/main/java/com/vaadin/tests/components/grid/GridEditorUI.java
index d2d865498e..9efa5c1e11 100644
--- a/uitest/src/main/java/com/vaadin/tests/components/grid/GridEditorUI.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/grid/GridEditorUI.java
@@ -66,20 +66,23 @@ public class GridEditorUI extends AbstractTestUI {
     protected Grid<Person> createGrid() {
         Grid<Person> grid = new Grid<>();
 
-        grid.addColumn(Person::getEmail).setCaption("Email");
+        grid.addColumn(Person::getEmail).setCaption("Email").setId("email");
         Column<Person, String> fistNameColumn = grid
-                .addColumn(Person::getFirstName).setCaption("First Name");
+                .addColumn(Person::getFirstName).setCaption("First Name")
+                .setId("firstName");
         Column<Person, String> lastNameColumn = grid
-                .addColumn(Person::getLastName).setCaption("Last Name");
+                .addColumn(Person::getLastName).setCaption("Last Name")
+                .setId("lastName");
 
         Column<Person, String> phoneColumn = grid
-                .addColumn(Person::getPhoneNumber).setCaption("Phone Number");
+                .addColumn(Person::getPhoneNumber).setCaption("Phone Number")
+                .setId("phone");
         grid.addColumn(person -> person.getAddress().getStreetAddress())
-                .setCaption("Street Address");
+                .setCaption("Street Address").setId("street");
         grid.addColumn(person -> person.getAddress().getPostalCode(),
-                new NumberRenderer()).setCaption("Postal Code");
+                new NumberRenderer()).setCaption("Postal Code").setId("zip");
         grid.addColumn(person -> person.getAddress().getCity())
-                .setCaption("City");
+                .setCaption("City").setId("city");
 
         grid.getEditor().setEnabled(true);
 
diff --git a/uitest/src/main/java/com/vaadin/v7/tests/components/grid/GridHeaderStyleNames.java b/uitest/src/main/java/com/vaadin/tests/components/grid/GridHeaderStyleNames.java
index 9604f9f218..0295a37175 100644
--- a/uitest/src/main/java/com/vaadin/v7/tests/components/grid/GridHeaderStyleNames.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/grid/GridHeaderStyleNames.java
@@ -13,80 +13,76 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
-package com.vaadin.v7.tests.components.grid;
+package com.vaadin.tests.components.grid;
 
 import com.vaadin.server.VaadinRequest;
-import com.vaadin.tests.components.AbstractTestUIWithLog;
-import com.vaadin.tests.components.beanitemcontainer.BeanItemContainerGenerator;
+import com.vaadin.tests.util.Person;
 import com.vaadin.ui.Button;
-import com.vaadin.ui.Button.ClickEvent;
-import com.vaadin.ui.Button.ClickListener;
-import com.vaadin.v7.ui.Grid;
-import com.vaadin.v7.ui.Grid.FooterCell;
-import com.vaadin.v7.ui.Grid.FooterRow;
-import com.vaadin.v7.ui.Grid.HeaderCell;
-import com.vaadin.v7.ui.Grid.HeaderRow;
-import com.vaadin.v7.ui.Grid.SelectionMode;
+import com.vaadin.ui.Grid;
+import com.vaadin.ui.Grid.SelectionMode;
+import com.vaadin.ui.components.grid.FooterCell;
+import com.vaadin.ui.components.grid.FooterRow;
+import com.vaadin.ui.components.grid.HeaderCell;
+import com.vaadin.ui.components.grid.HeaderRow;
 
-public class GridHeaderStyleNames extends AbstractTestUIWithLog {
+public class GridHeaderStyleNames extends GridEditorUI {
 
-    private HeaderCell ageHeaderCell;
+    private HeaderCell nameHeaderCell;
     private HeaderCell mergedCityCountryCell;
-    private FooterCell ageFooterCell;
+    private FooterCell nameFooterCell;
     private HeaderRow headerRow;
     private FooterRow footerRow;
 
+    private boolean stylesOn = true;
+
     @Override
     protected void setup(VaadinRequest request) {
-        Grid grid = new Grid();
+        Grid<Person> grid = createGrid();
+        grid.setItems(createTestData());
         grid.setSelectionMode(SelectionMode.MULTI);
-        grid.setContainerDataSource(
-                BeanItemContainerGenerator.createContainer(100));
 
-        ageHeaderCell = grid.getDefaultHeaderRow().getCell("age");
+        nameHeaderCell = grid.getDefaultHeaderRow().getCell("firstName");
         grid.getDefaultHeaderRow().setStyleName("foo");
         headerRow = grid.prependHeaderRow();
-        mergedCityCountryCell = headerRow.join("city", "country");
+        mergedCityCountryCell = headerRow.join("city", "street");
         mergedCityCountryCell.setText("Merged cell");
+
+        grid.setColumns("email", "firstName", "city", "street", "lastName",
+                "zip");
         addComponent(grid);
 
         footerRow = grid.appendFooterRow();
-        ageFooterCell = footerRow.getCell("age");
+        nameFooterCell = footerRow.getCell("firstName");
 
         getPage().getStyles().add(
-                ".age {background-image: linear-gradient(to bottom,green 2%, #efefef 98%) !important;}");
+                ".name {background-image: linear-gradient(to bottom,green 2%, #efefef 98%) !important;}");
         getPage().getStyles().add(
                 ".valo .v-grid-header .v-grid-cell.city-country {background-image: linear-gradient(to bottom,yellow 2%, #efefef 98%) !important;}");
         getPage().getStyles().add(
-                ".valo .v-grid-footer .v-grid-cell.age-footer {background-image: linear-gradient(to bottom,blue 2%, #efefef 98%) !important;}");
+                ".valo .v-grid-footer .v-grid-cell.name-footer {background-image: linear-gradient(to bottom,blue 2%, #efefef 98%) !important;}");
         getPage().getStyles().add(
                 ".valo .v-grid .v-grid-row.custom-row > * {background-image: linear-gradient(to bottom,purple 2%, #efefef 98%);}");
 
         setCellStyles(true);
         setRowStyles(true);
 
-        Button b = new Button("Toggle styles");
-        b.addClickListener(new ClickListener() {
-            private boolean stylesOn = true;
-
-            @Override
-            public void buttonClick(ClickEvent event) {
-                setCellStyles(!stylesOn);
-                setRowStyles(!stylesOn);
-                stylesOn = !stylesOn;
-            }
+        Button button = new Button("Toggle styles");
+        button.addClickListener(event -> {
+            setCellStyles(!stylesOn);
+            setRowStyles(!stylesOn);
+            stylesOn = !stylesOn;
         });
-        addComponent(b);
+        addComponent(button);
     }
 
     protected void setCellStyles(boolean set) {
         if (set) {
-            ageHeaderCell.setStyleName("age");
-            ageFooterCell.setStyleName("age-footer");
+            nameHeaderCell.setStyleName("name");
+            nameFooterCell.setStyleName("name-footer");
             mergedCityCountryCell.setStyleName("city-country");
         } else {
-            ageHeaderCell.setStyleName(null);
-            ageFooterCell.setStyleName(null);
+            nameHeaderCell.setStyleName(null);
+            nameFooterCell.setStyleName(null);
             mergedCityCountryCell.setStyleName(null);
         }
 
diff --git a/uitest/src/test/java/com/vaadin/v7/tests/components/grid/GridHeaderStyleNamesTest.java b/uitest/src/test/java/com/vaadin/tests/components/grid/GridHeaderStyleNamesTest.java
index 07bf047546..0297b30876 100644
--- a/uitest/src/test/java/com/vaadin/v7/tests/components/grid/GridHeaderStyleNamesTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/grid/GridHeaderStyleNamesTest.java
@@ -13,16 +13,15 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
-package com.vaadin.v7.tests.components.grid;
+package com.vaadin.tests.components.grid;
 
 import org.junit.Assert;
 import org.junit.Before;
 import org.junit.Test;
-import org.openqa.selenium.By;
 import org.openqa.selenium.WebElement;
 
-import com.vaadin.testbench.elements.GridElement;
 import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.GridElement;
 import com.vaadin.testbench.elements.GridElement.GridCellElement;
 import com.vaadin.testbench.parallel.TestCategory;
 import com.vaadin.tests.tb3.SingleBrowserTest;
@@ -42,20 +41,10 @@ public class GridHeaderStyleNamesTest extends SingleBrowserTest {
         return grid.getHeaderCell(0, 3);
     }
 
-    private WebElement getMergedHeaderCellContent() {
-        return getMergedHeaderCell().findElement(
-                By.cssSelector("div.v-grid-column-header-content"));
-    }
-
-    private GridCellElement getAgeFooterCell() {
+    private GridCellElement getNameFooterCell() {
         return grid.getFooterCell(0, 2);
     }
 
-    private WebElement getAgeFooterCellContent() {
-        return getAgeFooterCell().findElement(
-                By.cssSelector("div.v-grid-column-footer-content"));
-    }
-
     @Test
     public void cellStyleNamesCanBeAddedAndRemoved() {
         ButtonElement toggleStyles = $(ButtonElement.class)
@@ -84,21 +73,21 @@ public class GridHeaderStyleNamesTest extends SingleBrowserTest {
     private void assertStylesSet(boolean set) {
         if (set) {
             assertHasStyleName(
-                    "Footer cell should have the assigned 'age-footer' class name",
-                    getAgeFooterCell(), "age-footer");
+                    "Footer cell should have the assigned 'name-footer' class name",
+                    getNameFooterCell(), "name-footer");
             assertHasStyleName(
-                    "Header cell should have the assigned 'age' class name",
-                    getAgeHeaderCell(), "age");
+                    "Header cell should have the assigned 'name' class name",
+                    getAgeHeaderCell(), "name");
             assertHasStyleName(
                     "The merged header cell should have the assigned 'city-country' class name",
                     getMergedHeaderCell(), "city-country");
         } else {
             assertHasNotStyleName(
-                    "Footer cell should not have the removed 'age-footer' class name",
-                    getAgeFooterCell(), "age-footer");
+                    "Footer cell should not have the removed 'name-footer' class name",
+                    getNameFooterCell(), "name-footer");
             assertHasNotStyleName(
-                    "Header cell should not have the removed 'age' class name",
-                    getAgeHeaderCell(), "age");
+                    "Header cell should not have the removed 'name' class name",
+                    getAgeHeaderCell(), "name");
             assertHasNotStyleName(
                     "Ther merged header cell should not have the removed 'city-country' class name",
                     getMergedHeaderCell(), "city-country");
@@ -108,7 +97,7 @@ public class GridHeaderStyleNamesTest extends SingleBrowserTest {
                 getAgeHeaderCell(), "v-grid-cell");
         assertHasStyleName(
                 "The default v-grid-cell style name should not be removed from the footer cell",
-                getAgeFooterCell(), "v-grid-cell");
+                getNameFooterCell(), "v-grid-cell");
         assertHasStyleName(
                 "The default v-grid-cell style name should not be removed from the merged header cell",
                 getMergedHeaderCell(), "v-grid-cell");
@@ -144,11 +133,6 @@ public class GridHeaderStyleNamesTest extends SingleBrowserTest {
         return grid.getHeaderCell(1, 2);
     }
 
-    private WebElement getAgeHeaderCellContent() {
-        return getAgeHeaderCell().findElement(
-                By.cssSelector("div.v-grid-column-header-content"));
-    }
-
     private WebElement getFooterRow() {
         return grid.getFooterRow(0);
     }