Make TreeGrid follow framework style conventions

12 files changed, 85 insertions, 46 deletions

diff --git a/client/src/main/java/com/vaadin/client/connectors/grid/GridConnector.java b/client/src/main/java/com/vaadin/client/connectors/grid/GridConnector.java
index 5ede13ca68..9d5187a227 100644
--- a/client/src/main/java/com/vaadin/client/connectors/grid/GridConnector.java
+++ b/client/src/main/java/com/vaadin/client/connectors/grid/GridConnector.java
@@ -202,6 +202,8 @@ public class GridConnector extends AbstractListingConnector
     protected void init() {
         super.init();
 
+        updateWidgetStyleNames();
+
         // Remove default headers when initializing Grid widget
         while (getWidget().getHeaderRowCount() > 0) {
             getWidget().removeHeaderRow(0);
diff --git a/client/src/main/java/com/vaadin/client/connectors/treegrid/TreeGridConnector.java b/client/src/main/java/com/vaadin/client/connectors/treegrid/TreeGridConnector.java
index ab6ac77f0c..2075b6cff1 100644
--- a/client/src/main/java/com/vaadin/client/connectors/treegrid/TreeGridConnector.java
+++ b/client/src/main/java/com/vaadin/client/connectors/treegrid/TreeGridConnector.java
@@ -138,7 +138,8 @@ public class TreeGridConnector extends GridConnector {
 
     private HierarchyRenderer getHierarchyRenderer() {
         if (hierarchyRenderer == null) {
-            hierarchyRenderer = new HierarchyRenderer(this::setCollapsed);
+            hierarchyRenderer = new HierarchyRenderer(this::setCollapsed,
+                    getState().primaryStyleName);
         }
         return hierarchyRenderer;
     }
@@ -208,6 +209,11 @@ public class TreeGridConnector extends GridConnector {
         });
     }
 
+    @OnStateChange("primaryStyleName")
+    private void updateHierarchyRendererStyleName() {
+        getHierarchyRenderer().setStyleNames(getState().primaryStyleName);
+    }
+
     private native void replaceCellFocusEventHandler(Grid<?> grid,
             GridEventHandler<?> eventHandler)
     /*-{
diff --git a/client/src/main/java/com/vaadin/client/renderers/HierarchyRenderer.java b/client/src/main/java/com/vaadin/client/renderers/HierarchyRenderer.java
index c03c5c1b01..823961d316 100644
--- a/client/src/main/java/com/vaadin/client/renderers/HierarchyRenderer.java
+++ b/client/src/main/java/com/vaadin/client/renderers/HierarchyRenderer.java
@@ -44,9 +44,10 @@ import elemental.json.JsonObject;
  */
 public class HierarchyRenderer extends ClickableRenderer<Object, Widget> {
 
-    private static final String CLASS_TREE_GRID_NODE = "v-tree-grid-node";
-    private static final String CLASS_TREE_GRID_EXPANDER = "v-tree-grid-expander";
-    private static final String CLASS_TREE_GRID_CELL_CONTENT = "v-tree-grid-cell-content";
+    private String nodeStyleName;
+    private String expanderStyleName;
+    private String cellContentStyleName;
+
     private static final String CLASS_COLLAPSED = "collapsed";
     private static final String CLASS_COLLAPSE_DISABLED = "collapse-disabled";
     private static final String CLASS_EXPANDED = "expanded";
@@ -61,8 +62,11 @@ public class HierarchyRenderer extends ClickableRenderer<Object, Widget> {
      *
      * @param collapseCallback
      *            the callback for collapsing nodes with row index
+     * @param styleName
+     *            the style name of the widget this renderer is used in
      */
-    public HierarchyRenderer(BiConsumer<Integer, Boolean> collapseCallback) {
+    public HierarchyRenderer(BiConsumer<Integer, Boolean> collapseCallback,
+            String styleName) {
         addClickHandler(event -> {
             try {
                 JsonObject row = (JsonObject) event.getRow();
@@ -85,11 +89,18 @@ public class HierarchyRenderer extends ClickableRenderer<Object, Widget> {
                 event.preventDefault();
             }
         });
+        setStyleNames(styleName);
+    }
+
+    public void setStyleNames(String primaryStyleName) {
+        nodeStyleName = primaryStyleName + "-node";
+        expanderStyleName = primaryStyleName + "-expander";
+        cellContentStyleName = primaryStyleName + "-cell-content";
     }
 
     @Override
     public Widget createWidget() {
-        return new HierarchyItem(CLASS_TREE_GRID_NODE);
+        return new HierarchyItem(nodeStyleName);
     }
 
     @Override
@@ -217,7 +228,7 @@ public class HierarchyRenderer extends ClickableRenderer<Object, Widget> {
             panel.getElement().addClassName(className);
 
             expander = new Expander();
-            expander.getElement().addClassName(CLASS_TREE_GRID_EXPANDER);
+            expander.getElement().addClassName(expanderStyleName);
 
             if (innerRenderer instanceof WidgetRenderer) {
                 content = ((WidgetRenderer) innerRenderer).createWidget();
@@ -226,7 +237,7 @@ public class HierarchyRenderer extends ClickableRenderer<Object, Widget> {
                 content = GWT.create(HTML.class);
             }
 
-            content.getElement().addClassName(CLASS_TREE_GRID_CELL_CONTENT);
+            content.getElement().addClassName(cellContentStyleName);
 
             panel.add(expander);
             panel.add(content);
diff --git a/client/src/main/java/com/vaadin/client/widget/treegrid/TreeGrid.java b/client/src/main/java/com/vaadin/client/widget/treegrid/TreeGrid.java
index 31430e36e4..e2bf37ff36 100644
--- a/client/src/main/java/com/vaadin/client/widget/treegrid/TreeGrid.java
+++ b/client/src/main/java/com/vaadin/client/widget/treegrid/TreeGrid.java
@@ -53,6 +53,6 @@ public class TreeGrid extends Grid<JsonObject> {
 
     @Override
     protected String getFocusPrimaryStyleName() {
-        return super.getStylePrimaryName() + "-rowmode";
+        return getStylePrimaryName() + "-rowmode";
     }
 }
diff --git a/shared/src/main/java/com/vaadin/shared/ui/treegrid/TreeGridState.java b/shared/src/main/java/com/vaadin/shared/ui/treegrid/TreeGridState.java
index a1008405fc..18c4747289 100644
--- a/shared/src/main/java/com/vaadin/shared/ui/treegrid/TreeGridState.java
+++ b/shared/src/main/java/com/vaadin/shared/ui/treegrid/TreeGridState.java
@@ -19,12 +19,16 @@ import com.vaadin.shared.ui.grid.GridState;
 
 /**
  * The shared state for the {@link com.vaadin.ui.TreeGrid} component.
- * 
+ *
  * @since 8.1
  * @author Vaadin Ltd
  */
 public class TreeGridState extends GridState {
 
+    {
+        primaryStyleName = "v-treegrid";
+    }
+
     /**
      * Contains ID of the hierarchy column set by the developer.
      */
diff --git a/testbench-api/src/main/java/com/vaadin/testbench/elements/TreeGridElement.java b/testbench-api/src/main/java/com/vaadin/testbench/elements/TreeGridElement.java
index ed02041e06..13dfbbf565 100644
--- a/testbench-api/src/main/java/com/vaadin/testbench/elements/TreeGridElement.java
+++ b/testbench-api/src/main/java/com/vaadin/testbench/elements/TreeGridElement.java
@@ -132,7 +132,7 @@ public class TreeGridElement extends GridElement {
      */
     public WebElement getExpandElement(int rowIndex, int hierarchyColumnIndex) {
         return getCell(rowIndex, hierarchyColumnIndex)
-                .findElement(By.className("v-tree-grid-expander"));
+                .findElement(By.className("v-treegrid-expander"));
 
     }
 }
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_all.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_all.scss
index 6211d39a92..552d0f035d 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_all.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_all.scss
@@ -145,8 +145,10 @@
   @if v-is-included(tree) {
     @include valo-tree;
   }
-  
-  @include treegrid;
+
+  @if v-is-included(treegrid) {
+    @include valo-treegrid;
+  }
 
   @if v-is-included(table) or v-is-included(treetable) {
     @include valo-table;
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_treegrid.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_treegrid.scss
index 07c8f71d0d..9d06e4a3ef 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_treegrid.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_treegrid.scss
@@ -1,3 +1,5 @@
+@import "grid";
+
 /** Expander button visual - expanded */
 $tg-expander-char-expanded: '\f0d7' !default;
 
@@ -10,10 +12,9 @@ $tg-expander-width: 10px !default;
 /** Expander button right side padding */
 $tg-expander-padding: 10px !default;
 
-$v-tree-grid-row-focused-border: $v-grid-cell-focused-border !default;
-
+@mixin valo-treegrid ($primary-stylename: v-treegrid) {
 
-@mixin treegrid {
+  @include valo-grid($primary-stylename);
 
   // Expander with and item indentation constants
   $indent: $tg-expander-width + $tg-expander-padding;
@@ -21,7 +22,7 @@ $v-tree-grid-row-focused-border: $v-grid-cell-focused-border !default;
   // Classname for depth styling
   $class-depth: depth !default;
 
-  .v-tree-grid-expander {
+  .#{$primary-stylename}-expander {
     display: inline-block;
     width: $tg-expander-width;
     padding-right: $tg-expander-padding;
@@ -53,7 +54,7 @@ $v-tree-grid-row-focused-border: $v-grid-cell-focused-border !default;
   }
 
   // Hierarchy depth styling
-  .v-tree-grid-node {
+  .#{$primary-stylename}-node {
     @for $i from 0 through 15 {
       &.#{$class-depth}-#{$i} {
         padding-left: $indent * $i;
@@ -62,11 +63,11 @@ $v-tree-grid-row-focused-border: $v-grid-cell-focused-border !default;
   }
 
   // Expander and cell content in same line
-  .v-tree-grid-cell-content {
+  .#{$primary-stylename}-cell-content {
     display: inline-block;
   }
 
-  .v-grid-rowmode-row-focused {
+  .#{$primary-stylename}-rowmode-row-focused {
 
     &:before {
       content: "";
@@ -80,11 +81,12 @@ $v-tree-grid-row-focused-border: $v-grid-cell-focused-border !default;
       pointer-events: none;
     }
   }
-  .v-grid:focus .v-grid-rowmode-row-focused:before {
+
+  .#{$primary-stylename}:focus .#{$primary-stylename}-rowmode-row-focused:before {
     display: block;
   }
 
-  .v-grid.v-disabled:focus .v-grid-rowmode-row-focused:before {
+  .#{$primary-stylename}.v-disabled:focus .#{$primary-stylename}-rowmode-row-focused:before {
     // Disabled Grid should not show cell focus outline
     display: none;
   }
diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss
index 4634a71fea..cdeca2dd4b 100644
--- a/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss
@@ -490,6 +490,7 @@ $v-included-components:
     textarea,
     richtextarea,
     tree,
+    treegrid,
     treetable,
     twincolselect,
     upload,
diff --git a/uitest/src/test/java/com/vaadin/tests/components/treegrid/TreeGridBasicFeaturesTest.java b/uitest/src/test/java/com/vaadin/tests/components/treegrid/TreeGridBasicFeaturesTest.java
index dd4546c6c0..a8328bd007 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/treegrid/TreeGridBasicFeaturesTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/treegrid/TreeGridBasicFeaturesTest.java
@@ -123,13 +123,13 @@ public class TreeGridBasicFeaturesTest extends MultiBrowserTest {
 
         // Should expand "0 | 0"
         grid.getRow(0).getCell(0)
-                .findElement(By.className("v-tree-grid-expander")).click();
+                .findElement(By.className("v-treegrid-expander")).click();
         assertEquals(6, grid.getRowCount());
         assertCellTexts(1, 0, new String[] { "1 | 0", "1 | 1", "1 | 2" });
 
         // Should collapse "0 | 0"
         grid.getRow(0).getCell(0)
-                .findElement(By.className("v-tree-grid-expander")).click();
+                .findElement(By.className("v-treegrid-expander")).click();
         assertEquals(3, grid.getRowCount());
         assertCellTexts(0, 0, new String[] { "0 | 0", "0 | 1", "0 | 2" });
     }
@@ -142,48 +142,58 @@ public class TreeGridBasicFeaturesTest extends MultiBrowserTest {
         new Actions(getDriver()).sendKeys(Keys.RIGHT).perform();
         assertEquals(6, grid.getRowCount());
         assertCellTexts(1, 0, new String[] { "1 | 0", "1 | 1", "1 | 2" });
-        assertTrue(grid.getRow(0).hasClassName("v-grid-rowmode-row-focused"));
-        assertFalse(grid.getRow(1).hasClassName("v-grid-rowmode-row-focused"));
+        assertTrue(
+                grid.getRow(0).hasClassName("v-treegrid-rowmode-row-focused"));
+        assertFalse(
+                grid.getRow(1).hasClassName("v-treegrid-rowmode-row-focused"));
 
         // Should navigate 2 times down to "1 | 1"
         new Actions(getDriver()).sendKeys(Keys.DOWN, Keys.DOWN).perform();
         assertEquals(6, grid.getRowCount());
         assertCellTexts(1, 0, new String[] { "1 | 0", "1 | 1", "1 | 2" });
-        assertFalse(grid.getRow(0).hasClassName("v-grid-rowmode-row-focused"));
-        assertFalse(grid.getRow(1).hasClassName("v-grid-rowmode-row-focused"));
-        assertTrue(grid.getRow(2).hasClassName("v-grid-rowmode-row-focused"));
+        assertFalse(
+                grid.getRow(0).hasClassName("v-treegrid-rowmode-row-focused"));
+        assertFalse(
+                grid.getRow(1).hasClassName("v-treegrid-rowmode-row-focused"));
+        assertTrue(
+                grid.getRow(2).hasClassName("v-treegrid-rowmode-row-focused"));
 
         // Should expand "1 | 1" without moving focus
         new Actions(getDriver()).sendKeys(Keys.RIGHT).perform();
         assertEquals(9, grid.getRowCount());
         assertCellTexts(2, 0,
                 new String[] { "1 | 1", "2 | 0", "2 | 1", "2 | 2", "1 | 2" });
-        assertTrue(grid.getRow(2).hasClassName("v-grid-rowmode-row-focused"));
+        assertTrue(
+                grid.getRow(2).hasClassName("v-treegrid-rowmode-row-focused"));
 
         // Should collapse "1 | 1"
         new Actions(getDriver()).sendKeys(Keys.LEFT).perform();
         assertEquals(6, grid.getRowCount());
         assertCellTexts(2, 0, new String[] { "1 | 1", "1 | 2", "0 | 1" });
-        assertTrue(grid.getRow(2).hasClassName("v-grid-rowmode-row-focused"));
+        assertTrue(
+                grid.getRow(2).hasClassName("v-treegrid-rowmode-row-focused"));
 
         // Should navigate to "0 | 0"
         new Actions(getDriver()).sendKeys(Keys.LEFT).perform();
         assertEquals(6, grid.getRowCount());
         assertCellTexts(0, 0,
                 new String[] { "0 | 0", "1 | 0", "1 | 1", "1 | 2", "0 | 1" });
-        assertTrue(grid.getRow(0).hasClassName("v-grid-rowmode-row-focused"));
+        assertTrue(
+                grid.getRow(0).hasClassName("v-treegrid-rowmode-row-focused"));
 
         // Should collapse "0 | 0"
         new Actions(getDriver()).sendKeys(Keys.LEFT).perform();
         assertEquals(3, grid.getRowCount());
         assertCellTexts(0, 0, new String[] { "0 | 0", "0 | 1", "0 | 2" });
-        assertTrue(grid.getRow(0).hasClassName("v-grid-rowmode-row-focused"));
+        assertTrue(
+                grid.getRow(0).hasClassName("v-treegrid-rowmode-row-focused"));
 
         // Nothing should happen
         new Actions(getDriver()).sendKeys(Keys.LEFT).perform();
         assertEquals(3, grid.getRowCount());
         assertCellTexts(0, 0, new String[] { "0 | 0", "0 | 1", "0 | 2" });
-        assertTrue(grid.getRow(0).hasClassName("v-grid-rowmode-row-focused"));
+        assertTrue(
+                grid.getRow(0).hasClassName("v-treegrid-rowmode-row-focused"));
 
         assertNoErrorNotifications();
     }
@@ -191,25 +201,25 @@ public class TreeGridBasicFeaturesTest extends MultiBrowserTest {
     @Test
     public void changing_hierarchy_column() {
         assertTrue(grid.getRow(0).getCell(0)
-                .isElementPresent(By.className("v-tree-grid-expander")));
+                .isElementPresent(By.className("v-treegrid-expander")));
         assertFalse(grid.getRow(0).getCell(1)
-                .isElementPresent(By.className("v-tree-grid-expander")));
+                .isElementPresent(By.className("v-treegrid-expander")));
 
         selectMenuPath("Component", "Features", "Set hierarchy column",
                 "depth");
 
         assertFalse(grid.getRow(0).getCell(0)
-                .isElementPresent(By.className("v-tree-grid-expander")));
+                .isElementPresent(By.className("v-treegrid-expander")));
         assertTrue(grid.getRow(0).getCell(1)
-                .isElementPresent(By.className("v-tree-grid-expander")));
+                .isElementPresent(By.className("v-treegrid-expander")));
 
         selectMenuPath("Component", "Features", "Set hierarchy column",
                 "string");
 
         assertTrue(grid.getRow(0).getCell(0)
-                .isElementPresent(By.className("v-tree-grid-expander")));
+                .isElementPresent(By.className("v-treegrid-expander")));
         assertFalse(grid.getRow(0).getCell(1)
-                .isElementPresent(By.className("v-tree-grid-expander")));
+                .isElementPresent(By.className("v-treegrid-expander")));
     }
 
     @Override
diff --git a/uitest/src/test/java/com/vaadin/tests/components/treegrid/TreeGridHugeTreeNavigationTest.java b/uitest/src/test/java/com/vaadin/tests/components/treegrid/TreeGridHugeTreeNavigationTest.java
index f37118a24b..f64591df53 100644
--- a/uitest/src/test/java/com/vaadin/tests/components/treegrid/TreeGridHugeTreeNavigationTest.java
+++ b/uitest/src/test/java/com/vaadin/tests/components/treegrid/TreeGridHugeTreeNavigationTest.java
@@ -143,18 +143,18 @@ public class TreeGridHugeTreeNavigationTest extends MultiBrowserTest {
     }
 
     private WebElement findFocusedRow() {
-        return grid.findElement(By.className("v-grid-rowmode-row-focused"));
+        return grid.findElement(By.className("v-treegrid-rowmode-row-focused"));
     }
 
     private void checkRowFocused(int index) {
         if (index > 0) {
             assertFalse(grid.getRow(index - 1)
-                    .hasClassName("v-grid-rowmode-row-focused"));
-        }
-        assertTrue(
-                grid.getRow(index).hasClassName("v-grid-rowmode-row-focused"));
+                .hasClassName("v-treegrid-rowmode-row-focused"));
+    }
+        assertTrue(grid.getRow(index)
+                .hasClassName("v-treegrid-rowmode-row-focused"));
         assertFalse(grid.getRow(index + 1)
-                .hasClassName("v-grid-rowmode-row-focused"));
+                .hasClassName("v-treegrid-rowmode-row-focused"));
     }
 
     private void assertCellTexts(int startRowIndex, int cellIndex,
diff --git a/uitest/src/test/java/com/vaadin/tests/performance/MemoryIT.java b/uitest/src/test/java/com/vaadin/tests/performance/MemoryIT.java
index 0f4249b6ea..b30dcdae4f 100644
--- a/uitest/src/test/java/com/vaadin/tests/performance/MemoryIT.java
+++ b/uitest/src/test/java/com/vaadin/tests/performance/MemoryIT.java
@@ -108,6 +108,7 @@ public class MemoryIT extends SingleBrowserTest {
         getDriver().get(StringUtils.strip(getBaseURL(), "/") + path + "?items="
                 + itemsNumber);
         Assert.assertTrue(isElementPresent(By.className("v-grid"))
+                || isElementPresent(By.className("v-treegrid"))
                 || isElementPresent(By.className("v-table")));
     }