fix(tree): rename Trigger to Toggle (#9317)

Author: tinayuangao

src/cdk/tree/public-api.ts

@@ -17,4 +17,4 @@ export * from './outlet';
 export * from './tree';
 export * from './tree-errors';
 export * from './tree-module';
-export * from './trigger';
+export * from './toggle';

src/cdk/tree/trigger.ts renamed to src/cdk/tree/toggle.ts

@@ -15,25 +15,25 @@ import {CdkTree} from './tree';
 import {CdkTreeNode} from './node';
 
 /**
- * Node trigger to expand/collapse the node.
+ * Node toggle to expand/collapse the node.
  */
 @Directive({
-  selector: '[cdkTreeNodeTrigger]',
+  selector: '[cdkTreeNodeToggle]',
   host: {
-    '(click)': '_trigger($event)',
+    '(click)': '_toggle($event)',
   }
 })
-export class CdkTreeNodeTrigger<T> {
+export class CdkTreeNodeToggle<T> {
   /** Whether expand/collapse the node recursively. */
-  @Input('cdkTreeNodeTriggerRecursive')
+  @Input('cdkTreeNodeToggleRecursive')
   get recursive(): boolean { return this._recursive; }
   set recursive(value: boolean) { this._recursive = coerceBooleanProperty(value); }
   protected _recursive = true;
 
   constructor(protected _tree: CdkTree<T>,
               protected _treeNode: CdkTreeNode<T>) {}
 
-  _trigger(event: Event): void {
+  _toggle(event: Event): void {
     this.recursive
       ? this._tree.treeControl.toggleDescendants(this._treeNode.data)
       : this._tree.treeControl.toggle(this._treeNode.data);

src/cdk/tree/tree-module.ts

@@ -11,7 +11,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {CdkTreeNodeOutlet} from './outlet';
 import {CdkTreeNodePadding} from './padding';
-import {CdkTreeNodeTrigger} from './trigger';
+import {CdkTreeNodeToggle} from './toggle';
 import {CdkTree} from './tree';
 import {CdkTreeNodeDef, CdkTreeNode} from './node';
 import {CdkNestedTreeNode} from './nested-node';
@@ -20,7 +20,7 @@ const EXPORTED_DECLARATIONS = [
   CdkNestedTreeNode,
   CdkTreeNodeDef,
   CdkTreeNodePadding,
-  CdkTreeNodeTrigger,
+  CdkTreeNodeToggle,
   CdkTree,
   CdkTreeNode,
   CdkTreeNodeOutlet,

src/cdk/tree/tree.spec.ts

@@ -94,13 +94,13 @@ describe('CdkTree', () => {
       });
     });
 
-    describe('with trigger', () => {
-      let fixture: ComponentFixture<CdkTreeAppWithTrigger>;
-      let component: CdkTreeAppWithTrigger;
+    describe('with toggle', () => {
+      let fixture: ComponentFixture<CdkTreeAppWithToggle>;
+      let component: CdkTreeAppWithToggle;
 
       beforeEach(() => {
-        configureCdkTreeTestingModule([CdkTreeAppWithTrigger]);
-        fixture = TestBed.createComponent(CdkTreeAppWithTrigger);
+        configureCdkTreeTestingModule([CdkTreeAppWithToggle]);
+        fixture = TestBed.createComponent(CdkTreeAppWithToggle);
 
         component = fixture.componentInstance;
         dataSource = component.dataSource as FakeDataSource;
@@ -116,7 +116,7 @@ describe('CdkTree', () => {
         expect(component.treeControl.expansionModel.selected.length)
           .toBe(0, `Expect no expanded node`);
 
-        component.triggerRecursively = false;
+        component.toggleRecursively = false;
         let data = dataSource.data;
         dataSource.addChild(data[2]);
         fixture.detectChanges();
@@ -348,13 +348,13 @@ describe('CdkTree', () => {
       });
     });
 
-    describe('with trigger', () => {
-      let fixture: ComponentFixture<NestedCdkTreeAppWithTrigger>;
-      let component: NestedCdkTreeAppWithTrigger;
+    describe('with toggle', () => {
+      let fixture: ComponentFixture<NestedCdkTreeAppWithToggle>;
+      let component: NestedCdkTreeAppWithToggle;
 
       beforeEach(() => {
-        configureCdkTreeTestingModule([NestedCdkTreeAppWithTrigger]);
-        fixture = TestBed.createComponent(NestedCdkTreeAppWithTrigger);
+        configureCdkTreeTestingModule([NestedCdkTreeAppWithToggle]);
+        fixture = TestBed.createComponent(NestedCdkTreeAppWithToggle);
 
         component = fixture.componentInstance;
         dataSource = component.dataSource as FakeDataSource;
@@ -365,7 +365,7 @@ describe('CdkTree', () => {
       });
 
       it('should expand/collapse the node', () => {
-        component.triggerRecursively = false;
+        component.toggleRecursively = false;
         let data = dataSource.data;
         const child = dataSource.addChild(data[1], false);
         dataSource.addChild(child, false);
@@ -600,7 +600,7 @@ function expectNestedTreeToMatch(treeElement: Element, ...expectedTree: any[]) {
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                      cdkTreeNodePadding [cdkTreeNodePaddingIndent]="28"
-                     cdkTreeNodeTrigger>
+                     cdkTreeNodeToggle>
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
       </cdk-tree-node>
     </cdk-tree>
@@ -670,14 +670,14 @@ class WhenNodeNestedCdkTreeApp {
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                      cdkTreeNodePadding
-                     cdkTreeNodeTrigger [cdkTreeNodeTriggerRecursive]="triggerRecursively">
+                     cdkTreeNodeToggle [cdkTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
       </cdk-tree-node>
     </cdk-tree>
   `
 })
-class CdkTreeAppWithTrigger {
-  triggerRecursively: boolean = true;
+class CdkTreeAppWithToggle {
+  toggleRecursively: boolean = true;
 
   getLevel = (node: TestData) => node.level;
   isExpandable = (node: TestData) => node.children.length > 0;
@@ -692,7 +692,7 @@ class CdkTreeAppWithTrigger {
   template: `
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <cdk-nested-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
-                            cdkTreeNodeTrigger [cdkTreeNodeTriggerRecursive]="triggerRecursively">
+                            cdkTreeNodeToggle [cdkTreeNodeToggleRecursive]="toggleRecursively">
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
         <div *ngIf="treeControl.isExpanded(node)">
           <ng-template cdkTreeNodeOutlet></ng-template>
@@ -701,8 +701,8 @@ class CdkTreeAppWithTrigger {
     </cdk-tree>
   `
 })
-class NestedCdkTreeAppWithTrigger {
-  triggerRecursively: boolean = true;
+class NestedCdkTreeAppWithToggle {
+  toggleRecursively: boolean = true;
 
   getChildren = (node: TestData) => node.observableChildren;
 
@@ -717,12 +717,12 @@ class NestedCdkTreeAppWithTrigger {
     <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <cdk-tree-node *cdkTreeNodeDef="let node" class="customNodeClass"
                      cdkTreeNodePadding [cdkTreeNodePaddingIndent]="28"
-                     cdkTreeNodeTrigger>
+                     cdkTreeNodeToggle>
                      {{node.pizzaTopping}} - {{node.pizzaCheese}} + {{node.pizzaBase}}
       </cdk-tree-node>
        <cdk-tree-node *cdkTreeNodeDef="let node; when: isOddNode" class="customNodeClass"
                      cdkTreeNodePadding [cdkTreeNodePaddingIndent]="28"
-                     cdkTreeNodeTrigger>
+                     cdkTreeNodeToggle>
                      [{{node.pizzaTopping}}] - [{{node.pizzaCheese}}] + [{{node.pizzaBase}}]
       </cdk-tree-node>
     </cdk-tree>

src/demo-app/tree/tree-demo.html

@@ -3,12 +3,12 @@
     <mat-card-header>Flattened tree</mat-card-header>
 
     <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeTrigger matTreeNodePadding>
+      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
           {{node.key}} : {{node.value}}
       </mat-tree-node>
 
       <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
-          <button mat-icon-button matTreeNodeTrigger
+          <button mat-icon-button matTreeNodeToggle
                   [attr.aria-label]="'toggle ' + node.key">
             <mat-icon>
               {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
@@ -26,7 +26,7 @@
     <mat-card-header>Nested tree</mat-card-header>
 
     <mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl">
-      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeTrigger>
+      <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
         <li>
           <div>{{node.key}}:  {{node.value}}</div>
         </li>
@@ -35,7 +35,7 @@
       <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
         <li>
           <div class="mat-tree-node">
-            <button mat-icon-button matTreeNodeTrigger
+            <button mat-icon-button matTreeNodeToggle
                     [attr.aria-label]="'toggle ' + node.key">
               <mat-icon>
                 {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}

src/lib/tree/public-api.ts

@@ -11,4 +11,4 @@ export * from './node';
 export * from './padding';
 export * from './tree';
 export * from './tree-module';
-export * from './trigger';
+export * from './toggle';

src/lib/tree/toggle.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive, Input} from '@angular/core';
+import {CdkTreeNodeToggle} from '@angular/cdk/tree';
+
+/**
+ * Wrapper for the CdkTree's toggle with Material design styles.
+ */
+@Directive({
+  selector: '[matTreeNodeToggle]',
+  host: {
+    '(click)': '_toggle($event)',
+  },
+  providers: [{provide: CdkTreeNodeToggle, useExisting: MatTreeNodeToggle}]
+})
+export class MatTreeNodeToggle<T> extends CdkTreeNodeToggle<T> {
+  @Input('matTreeNodeToggleRecursive') recursive: boolean = true;
+}

src/lib/tree/tree-module.ts

@@ -13,15 +13,15 @@ import {CommonModule} from '@angular/common';
 import {MatCommonModule} from '@angular/material/core';
 import {MatNestedTreeNode, MatTreeNodeDef, MatTreeNode} from './node';
 import {MatTree} from './tree';
-import {MatTreeNodeTrigger} from './trigger';
+import {MatTreeNodeToggle} from './toggle';
 import {MatTreeNodeOutlet} from './outlet';
 import {MatTreeNodePadding} from './padding';
 
 const MAT_TREE_DIRECTIVES = [
   MatNestedTreeNode,
   MatTreeNodeDef,
   MatTreeNodePadding,
-  MatTreeNodeTrigger,
+  MatTreeNodeToggle,
   MatTree,
   MatTreeNode,
   MatTreeNodeOutlet,

src/lib/tree/tree.md

@@ -52,7 +52,7 @@ represented in ways that would be difficult to accomplish with flat nodes.
 
 The `<mat-tree>` itself only deals with the rendering of a tree structure.
 Additional features can be built on top of the tree by adding behavior inside node templates
-(e.g., padding and trigger). Interactions that affect the
+(e.g., padding and toggle). Interactions that affect the
 rendered data (such as expand/collapse) should be propagated through the table's data source.
 
 ### TreeControl
@@ -62,13 +62,13 @@ node recursively through tree control. For nested tree node, `getChildren` funct
 the `NestedTreeControl` to make it work recursively. For flattened tree node, `getLevel` and
 `isExpandable` functions need to pass to the `FlatTreeControl` to make it work recursively.
 
-### Trigger
+### Toggle
 
-A `matTreeNodeTrigger` can be added in the tree node template to expand/collapse the tree node. The
-trigger triggers the expand/collapse functions in `TreeControl` and is able to expand/collapse a
-tree node recursively by setting `[matTreeNodeTriggerRecursive]` to `true`.
+A `matTreeNodeToggle` can be added in the tree node template to expand/collapse the tree node. The
+toggle toggles the expand/collapse functions in `TreeControl` and is able to expand/collapse a
+tree node recursively by setting `[matTreeNodeToggleRecursive]` to `true`.
 
-The trigger can be placed anywhere in the tree node, and is only triggered by `click` action.
+The toggle can be placed anywhere in the tree node, and is only toggled by `click` action.
 
 
 ### Padding (Flat tree only)