chore(tree): invert arrow direction in demo app and examples (#11005)

Inverts the direction of the expand arrows in RTL for the tree examples and in the demo app. Fixes #10993.
angular · Apr 26, 2018 · 9942a3a · 9942a3a
1 parent bbf9434
commit 9942a3a
Show file tree

Hide file tree

Showing 12 changed files with 19 additions and 15 deletions.
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html b/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html
@@ -4,7 +4,7 @@
       <button mat-icon-button matTreeNodeToggle
               [attr.aria-label]="'toggle ' + node.item"
               [disabled]="!node.children.value.length">
-        <mat-icon *ngIf="node.children.value.length">
+        <mat-icon class="mat-icon-rtl-mirror" *ngIf="node.children.value.length">
           {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
       </button>

diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html b/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html
@@ -4,7 +4,7 @@
       <button mat-icon-button matTreeNodeToggle
               [attr.aria-label]="'toggle ' + node.filename"
               [disabled]="!node.children.value.length">
-        <mat-icon *ngIf="node.children.value.length">
+        <mat-icon class="mat-icon-rtl-mirror" *ngIf="node.children.value.length">
           {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
       </button>

diff --git a/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html b/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html
@@ -6,7 +6,7 @@
   <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
     <button mat-icon-button
             [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>

diff --git a/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html b/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html
@@ -11,7 +11,7 @@
             [attr.aria-label]="'toggle ' + node.filename"
             (click)="loadChildren(node)"
             matTreeNodeToggle>
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>

diff --git a/src/demo-app/tree/tree-demo.html b/src/demo-app/tree/tree-demo.html
@@ -10,7 +10,7 @@
       <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
         <button mat-icon-button matTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.filename">
-          <mat-icon>
+          <mat-icon class="mat-icon-rtl-mirror">
             {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>
@@ -33,7 +33,7 @@
           <div class="mat-tree-node">
             <button mat-icon-button matTreeNodeToggle
                     [attr.aria-label]="'toggle ' + node.filename">
-              <mat-icon>
+              <mat-icon class="mat-icon-rtl-mirror">
                 {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
               </mat-icon>
             </button>
@@ -58,7 +58,7 @@
                      class="demo-tree-node">
         <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
                 cdkTreeNodeToggle>
-          <mat-icon>
+          <mat-icon class="mat-icon-rtl-mirror">
             {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>
@@ -77,7 +77,7 @@
       <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="demo-tree-node">
         <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename"
                 cdkTreeNodeToggle>
-          <mat-icon>
+          <mat-icon class="mat-icon-rtl-mirror">
             {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>

diff --git a/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html b/src/material-examples/cdk-tree-flat/cdk-tree-flat-example.html
@@ -5,7 +5,9 @@
   </cdk-tree-node>
   <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChild" cdkTreeNodePadding class="demo-tree-node">
     <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
-      <mat-icon>{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
     </button>
     {{node.filename}}:  {{node.type}}
   </cdk-tree-node>

diff --git a/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.html b/src/material-examples/cdk-tree-nested/cdk-tree-nested-example.html
@@ -5,7 +5,9 @@
   </cdk-nested-tree-node>
   <cdk-nested-tree-node *cdkTreeNodeDef="let node; when: hasNestedChild" class="example-tree-node">
     <button mat-icon-button [attr.aria-label]="'toggle ' + node.filename" cdkTreeNodeToggle>
-      <mat-icon>{{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}</mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
+        {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+      </mat-icon>
     </button>
     {{node.filename}}:  {{node.type}}
     <div [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)">

diff --git a/src/material-examples/tree-checklist/tree-checklist-example.html b/src/material-examples/tree-checklist/tree-checklist-example.html
@@ -17,7 +17,7 @@
   <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
     <button mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'toggle ' + node.filename">
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>

diff --git a/src/material-examples/tree-dynamic/tree-dynamic-example.html b/src/material-examples/tree-dynamic/tree-dynamic-example.html
@@ -6,7 +6,7 @@
   <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
     <button mat-icon-button
             [attr.aria-label]="'toggle ' + node.filename" matTreeNodeToggle>
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>

diff --git a/src/material-examples/tree-flat-overview/tree-flat-overview-example.html b/src/material-examples/tree-flat-overview/tree-flat-overview-example.html
@@ -7,7 +7,7 @@
   <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
     <button mat-icon-button matTreeNodeToggle
             [attr.aria-label]="'toggle ' + node.filename">
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>

diff --git a/src/material-examples/tree-loadmore/tree-loadmore-example.html b/src/material-examples/tree-loadmore/tree-loadmore-example.html
@@ -11,7 +11,7 @@
             [attr.aria-label]="'toggle ' + node.filename"
             (click)="loadChildren(node)"
             matTreeNodeToggle>
-      <mat-icon>
+      <mat-icon class="mat-icon-rtl-mirror">
         {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
       </mat-icon>
     </button>

diff --git a/src/material-examples/tree-nested-overview/tree-nested-overview-example.html b/src/material-examples/tree-nested-overview/tree-nested-overview-example.html
@@ -11,7 +11,7 @@
       <div class="mat-tree-node">
         <button mat-icon-button matTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.filename">
-          <mat-icon>
+          <mat-icon class="mat-icon-rtl-mirror">
             {{nestedTreeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
           </mat-icon>
         </button>