From 52cad9c0b5f3244b2dacd46cad6b390a586c5b1e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 14 Oct 2024 17:57:19 +0200
Subject: [PATCH] docs(cdk/tree): fix several live example issues (#29875)

Fixes the following issues with the tree live examples:
* Both the tree node and the toggle were marked as toggles which meant that clicking anywhere would close the tree.
* The toggles weren't centered relative to the text.
* A couple of examples had the same name and one had weird punctuation.

Fixes #29830.
---
 ...k-tree-nested-children-accessor-example.css |  4 ++++
 ...-tree-nested-children-accessor-example.html | 15 +++++++++------
 ...dk-tree-nested-children-accessor-example.ts |  2 +-
 .../cdk-tree-nested-level-accessor-example.css |  4 ++++
 ...cdk-tree-nested-level-accessor-example.html | 18 +++++++++++-------
 .../cdk-tree-nested-level-accessor-example.ts  |  2 +-
 .../cdk-tree-nested-example.css                |  4 ++++
 .../cdk-tree-nested-example.html               | 15 +++++++++------
 8 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.css b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.css
index 988fa23745aa..b50b05f13a8e 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.css
+++ b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.css
@@ -16,3 +16,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html
index 2cb894916598..fd595e21d27a 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html
+++ b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.html
@@ -8,12 +8,15 @@
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      *cdkTreeNodeDef="let node; when: hasChild"
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+    *cdkTreeNodeDef="let node; when: hasChild"
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts
index e6d2044fec00..00a7a972d1c3 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts
+++ b/src/components-examples/cdk/tree/cdk-tree-nested-children-accessor/cdk-tree-nested-children-accessor-example.ts
@@ -17,7 +17,7 @@ function flattenNodes(nodes: NestedFoodNode[]): NestedFoodNode[] {
 }
 
 /**
- * @title Tree with nested nodes, using childAccessor
+ * @title Tree with nested nodes using childAccessor
  */
 @Component({
   selector: 'cdk-tree-nested-children-accessor-example',
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.css b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.css
index 988fa23745aa..b50b05f13a8e 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.css
+++ b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.css
@@ -16,3 +16,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html
index 140aea3be748..cf983179c536 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html
+++ b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.html
@@ -7,13 +7,17 @@
     {{node.name}}
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
-  <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      *cdkTreeNodeDef="let node; when: hasChild"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+  <cdk-nested-tree-node
+    #treeNode="cdkNestedTreeNode"
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    *cdkTreeNodeDef="let node; when: hasChild"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{tree.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts
index 923ce3d2a4a4..62f4c8853a2e 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts
+++ b/src/components-examples/cdk/tree/cdk-tree-nested-level-accessor/cdk-tree-nested-level-accessor-example.ts
@@ -6,7 +6,7 @@ import {MatIconModule} from '@angular/material/icon';
 import {FLAT_DATA, FlatFoodNode} from '../tree-data';
 
 /**
- * @title Tree with nested nodes
+ * @title Tree with nested nodes and level accessor
  */
 @Component({
   selector: 'cdk-tree-nested-level-accessor-example',
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.css b/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.css
index b879f06d7554..6f6433a0608a 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.css
+++ b/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.css
@@ -15,3 +15,7 @@
 .example-tree-node .example-tree-node {
   padding-left: 40px;
 }
+
+.example-toggle {
+  vertical-align: middle;
+}
diff --git a/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html b/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html
index 16676c5bf83a..a2de5a1372bf 100644
--- a/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html
+++ b/src/components-examples/cdk/tree/cdk-tree-nested/cdk-tree-nested-example.html
@@ -8,12 +8,15 @@
   </cdk-nested-tree-node>
   <!-- This is the tree node template for expandable nodes -->
   <cdk-nested-tree-node #treeNode="cdkNestedTreeNode"
-      cdkTreeNodeToggle
-      [cdkTreeNodeTypeaheadLabel]="node.name"
-      *cdkTreeNodeDef="let node; when: hasChild"
-      isExpandable
-      class="example-tree-node">
-    <button mat-icon-button [attr.aria-label]="'Toggle ' + node.name" cdkTreeNodeToggle>
+    [cdkTreeNodeTypeaheadLabel]="node.name"
+    *cdkTreeNodeDef="let node; when: hasChild"
+    isExpandable
+    class="example-tree-node">
+    <button
+      mat-icon-button
+      class="example-toggle"
+      [attr.aria-label]="'Toggle ' + node.name"
+      cdkTreeNodeToggle>
       <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>