New Tree component theme

Fixes #9310

client/src/main/java/com/vaadin/client/connectors/grid/TreeRendererConnector.java

@@ -42,7 +42,9 @@ public class TreeRendererConnector
 
             @Override
             public void render(RendererCellReference cell, String htmlString) {
-                String content = SafeHtmlUtils.htmlEscape(htmlString);
+                String content = "<span class=\"v-captiontext\">" +
+                        SafeHtmlUtils.htmlEscape(htmlString)
+                        + "</span>";
 
                 JsonObject row = getParent().getParent().getDataSource()
                         .getRow(cell.getRowIndex());
@@ -50,7 +52,7 @@ public class TreeRendererConnector
                     String resourceId = row.getString("itemIcon");
                     Element element = getConnection()
                             .getIcon(getResourceUrl(resourceId)).getElement();
-                    content = element.getString() + " " + content;
+                    content = element.getString() + content;
                 }
                 super.render(cell, content);
             }

server/src/main/java/com/vaadin/ui/Tree.java

@@ -233,6 +233,7 @@ public class Tree<T> extends Composite
             treeGrid.removeHeaderRow(0);
         }
         treeGrid.setPrimaryStyleName("v-tree8");
+        treeGrid.setRowHeight(28);
 
         setWidth("100%");
         treeGrid.setHeightUndefined();

themes/src/main/themes/VAADIN/themes/valo/components/_tree8.scss

@@ -1,18 +1,22 @@
 @import "treegrid";
 
-$v-tree8-border-radius: 3px;
-
-@mixin valo-tree8 ($primary-stylename: v-tree8) {
+@mixin valo-tree8($primary-stylename: v-tree8) {
 
   @include valo-treegrid($primary-stylename);
 
+  $tree-sel-bg: $v-grid-row-selected-background-color;
+
   .#{$primary-stylename} {
     background-color: transparent;
   }
 
   .#{$primary-stylename}-row > td {
     background-color: transparent;
-    border: none;
+    border: 0;
+    line-height: 28px;
+    > * {
+      vertical-align: baseline;
+    }
   }
 
   .#{$primary-stylename}-tablewrapper {
@@ -20,43 +24,41 @@ $v-tree8-border-radius: 3px;
     border: none;
   }
 
-  .#{$primary-stylename}-row-selected  > .#{$primary-stylename}-cell {
-    background-color: transparent;
-    background-image: none;
-    color: inherit;
-    text-shadow: none;
-    border: none;
-  }
-
-  .#{$primary-stylename}-cell-content {
-    border: $v-grid-cell-focused-border;
-    border-color: transparent;
-    border-radius: $v-tree8-border-radius;
-    padding: $v-grid-cell-padding;
-  }
-
-  .#{$primary-stylename}:focus .#{$primary-stylename}-row-focused:before {
-    display: none;
+  .#{$primary-stylename}-row {
+    &::before {
+      content: "";
+      display: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      border-radius: $v-border-radius;
+      pointer-events: none;
+      border-width: 1px;
+    }
   }
 
-  .#{$primary-stylename}:focus .#{$primary-stylename}-cell-focused
-    > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content {
-    border: $v-grid-cell-focused-border;
+  .#{$primary-stylename}-cell {
+    position: relative;
   }
 
   // Selected
   .#{$primary-stylename}-row-selected {
-    $grid-sel-bg: $v-grid-row-selected-background-color;
 
-    > .#{$primary-stylename}-cell > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content {
-      @include valo-gradient($grid-sel-bg);
-      color: valo-font-color($grid-sel-bg);
-      text-shadow: valo-text-shadow($font-color: valo-font-color($grid-sel-bg), $background-color: $grid-sel-bg);
-      border-color: adjust-color($grid-sel-bg, $lightness: -8%, $saturation: -8%);
+    > .#{$primary-stylename}-cell {
+      background: transparent;
     }
 
-    > .#{$primary-stylename}-cell-focused > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content {
-      border-color: adjust-color($grid-sel-bg, $lightness: 20%);
+    &::before {
+      display: block;
+      @include valo-gradient($tree-sel-bg);
     }
   }
+
+  .#{$primary-stylename}:focus .#{$primary-stylename}-row-selected.#{$primary-stylename}-row-focused::before {
+    border-color: transparent;
+    box-shadow: inset 0 0 0 1px valo-font-color($tree-sel-bg);
+  }
 }

uitest/src/test/java/com/vaadin/tests/components/tree/TreeBasicFeaturesTest.java

@@ -92,7 +92,7 @@ public class TreeBasicFeaturesTest extends MultiBrowserTest {
 
             for (int j = 0; j < 3; ++j) {
                 item = tree.getItem(n++);
-                Assert.assertEquals((shouldHaveIcon ? " " : "") + "1 | " + j,
+                Assert.assertEquals((shouldHaveIcon ? "\ue92d" : "") + "1 | " + j,
                         item.getText());
 
                 Assert.assertEquals("Unexpected icon state", shouldHaveIcon,