Reflect latest Tree API and styling changes to the documentation

1 files changed, 28 insertions, 41 deletions

diff --git a/documentation/components/components-tree.asciidoc b/documentation/components/components-tree.asciidoc
index f81342c5ba..03ea963170 100644
--- a/documentation/components/components-tree.asciidoc
+++ b/documentation/components/components-tree.asciidoc
@@ -87,25 +87,16 @@ The caption and the icon of tree items is generated by the [classname]#ItemCapti
 object, which supports selection listeners and data binding. For more details, see link:<<dummy/../../../framework/datamodel/datamodel-selection.asciidoc#datamodel.selection,"Selecting Items">>.
 The [classname]#Tree# also supports the shortcut method [methodname]#addSelectionListener()#.
 
-////
-todo not implemented yet.
 [classname]#Tree# also emits [classname]##ItemClickEvent##s when items are clicked.
-This way you can handle item clicks also when selection is not enabled or you want special user interaction specifically on clicks.
-
+This way you can handle item clicks also when you want special user interaction specifically on clicks.
 
 [source, Java]
 ----
-tree.addItemClickListener(
-  new ItemClickEvent.ItemClickListener() {
-    public void itemClick(ItemClickEvent event) {
-        // Pick only left mouse clicks
-        if (event.getButton() == ItemClickEvent.BUTTON_LEFT)
-            Notification.show("Left click",
-                        Notification.Type.HUMANIZED_MESSAGE);
-    }
-  });
+tree.addItemClickListener(event ->
+    Notification.show("Click",
+            Notification.Type.HUMANIZED_MESSAGE)
+);
 ----
-////
 
 [[components.tree.expandcollapse]]
 == Expanding and Collapsing Nodes
@@ -138,13 +129,11 @@ tree.addCollapseListener(event -> log("Item collapsed: " + event.getCollapsedIte
 The return types of the methods `getExpandedItem` and `getCollapsedItem` are the same as the type of the [classname]#Tree# the events originated from.
 Note that collapse listeners will not be triggered for any expanded subtrees of the collapsed item.
 
-////
-todo not implemented yet
 [[components.tree.node.collapsing]]
 == Prevent Node Collapsing
 
 [classname]#Tree# supports setting a callback method that can allow or prevent the user from collapsing an expanded node.
-It can be set with [methodname]#setItemCollapseAllowedProvider# method, that takes a [interfacename]#SerializablePredicate#.
+It can be set with [methodname]#setItemCollapseAllowedProvider# method, that takes a [interfacename]#ItemCollapseAllowedProvider#.
 For nodes that cannot be collapsed, the [literal]#++collapse-disabled++# class name is applied to the expansion element
 
 Avoid doing any heavy operations in the method, since it is called for each item when it is being sent to the client.
@@ -156,7 +145,6 @@ Set<Person> alwaysExpanded;
 personTree.setItemCollapseAllowedProvider(person ->
        !alwaysExpanded.contains(person));
 ----
-////
 
 [[components.treegrid.keyboard]]
 == Keyboard Navigation and Focus Handling in TreeGrid
@@ -164,48 +152,47 @@ personTree.setItemCollapseAllowedProvider(person ->
 The user can navigate through rows with kbd:[Up] and kbd:[Down], collapse rows with kbd:[Left],
 and expand them with kbd:[Right].
 
-////
-todo styling documentation
 [[components.tree.css]]
 == CSS Style Rules
 
 [source, css]
 ----
-.v-tree {}
-  .v-tree-node {}            /* A node (item)           */
-    .v-tree-node-caption {}  /* Caption of the node     */
-    .v-tree-node-children {} /* Contains child nodes    */
-  .v-tree-node-root {}       /* If node is a root node  */
-  .v-tree-node-leaf {}       /* If node has no children */
+.v-tree8 {
+  .v-tree8-scroller, .v-tree8-scroller-horizontal { }
+  .v-tree8-tablewrapper {
+    .v-tree8-body {
+      .v-tree8-row,
+      .v-tree8-stripe,
+      .v-tree8-row-focused,
+      .v-tree8-row-has-data {
+        .v-tree8-expander, expanded {}
+        .v-tree8-cell-content {}
+      }
+    }
+  }
+}
 ----
 
 [[components.tree.css.itemstyles]]
 === Generating Item Styles
 
-You can style each tree item individually by generating a style name for them with a [interfacename]#Tree.ItemStyleGenerator#, which you assign to a tree with [methodname]#setItemStyleGenerator()#.
+You can style each tree item individually by generating a style name for them with a [interfacename]#StyleGenerator#, which you assign to a tree with [methodname]#setStyleGenerator()#.
 The generator should return a style name for each item or `null`.
 
 [source, Java]
 ----
 // Show all leaf nodes as disabled
-tree.setItemStyleGenerator(new Tree.ItemStyleGenerator() {
-    @Override
-    public String getStyle(Tree source, Object itemId) {
-        if (! tree.hasChildren(itemId))
-            return "disabled";
+tree.setStyleGenerator(item -> {
+        if (!tree.getDataProvider().hasChildren(item))
+            return "leaf";
         return null;
     }
-});
+);
 ----
 
-The style names are prefixed with `v-tree-node-caption-`.
-You could thereby define the item styling as follows:
-
-[source, CSS]
+[source, css]
 ----
-.v-tree-node-caption-disabled {
-    color: graytext;
-    font-style: italic;
+.leaf .v-tree8-cell-content {
+    background-color:green
 }
 ----
-////