fix(tree): correct node toggle icon color in disabled states (#DS-390) (#1669)

Co-authored-by: lskramarov <9027254+lskramarov@users.noreply.github.com>

Author: lskramarov

packages/components-dev/tree/styles.scss

@@ -2,11 +2,3 @@ kbq-tree-selection {
     overflow-y: scroll;
     height: 328px;
 }
-
-.dev-highlight-content {
-    display: inline-block;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}

packages/components-dev/tree/template.html

@@ -93,7 +93,6 @@
             <i kbq-icon="kbq-circle-info_16"></i>
             <span
                 #kbqTitleText
-                class="dev-highlight-content"
                 [innerHTML]="treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value"
             ></span>
         </kbq-tree-option>
@@ -107,10 +106,7 @@
 
             <kbq-tree-node-toggle [node]="node" />
 
-            <span
-                class="dev-highlight-content"
-                [innerHTML]="treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value"
-            ></span>
+            <span [innerHTML]="treeControl.getViewValue(node) | mcHighlight: treeControl.filterValue.value"></span>
 
             <kbq-option-action
                 [kbqDropdownTriggerFor]="dropdown"

packages/components/tree/__screenshots__/01-dark.png

@@ -11,11 +11,6 @@
         color: var(--kbq-tree-#{$state-name}-text-color);
     }
 
-    .kbq-tree-node-toggle .kbq-icon.kbq-empty,
-    .kbq-icon.kbq-empty.kbq-tree-node-toggle {
-        color: var(--kbq-tree-#{$state-name}-tree-toggle-color);
-    }
-
     .kbq-option-action .kbq-icon.kbq-empty {
         color: var(--kbq-tree-#{$state-name}-action-button-color);
     }
@@ -69,7 +64,7 @@
         &.kbq-disabled {
             @include kbq-tree-option(states-disabled);
 
-            & .kbq-icon.kbq-empty {
+            & .kbq-icon.kbq-empty:not(.kbq-tree-node-toggle .kbq-icon) {
                 color: var(--kbq-states-icon-disabled);
             }
         }

packages/components/tree/__screenshots__/01-light.png

@@ -36,6 +36,12 @@ const DATA_OBJECT = {
         Focused: '',
         Disabled: ''
     },
+    DisabledParent: {
+        child: ''
+    },
+    DisabledToggle: {
+        child: ''
+    },
     Documents: {
         angular: {
             src: {
@@ -98,8 +104,14 @@ function buildFileTree(value: any, level: number): FileNode[] {
                 <span [innerHTML]="treeControl.getViewValue(node)"></span>
             </kbq-tree-option>
 
-            <kbq-tree-option *kbqTreeNodeDef="let node; when: hasChild" kbqTreeNodePadding [checkboxThirdState]="true">
-                <kbq-tree-node-toggle [node]="node" />
+            <kbq-tree-option
+                *kbqTreeNodeDef="let node; when: hasChild"
+                kbqTreeNodePadding
+                [checkboxThirdState]="true"
+                [disabled]="node.name === 'DisabledParent'"
+            >
+                <i kbq-icon="kbq-circle-info_16"></i>
+                <kbq-tree-node-toggle [node]="node" [disabled]="node.name === 'DisabledToggle'" />
                 <span [innerHTML]="treeControl.getViewValue(node)"></span>
             </kbq-tree-option>
         </kbq-tree-selection>
@@ -125,8 +137,14 @@ function buildFileTree(value: any, level: number): FileNode[] {
                 <kbq-option-action [kbqTooltip]="'Tooltip text'" />
             </kbq-tree-option>
 
-            <kbq-tree-option *kbqTreeNodeDef="let node; when: hasChild" kbqTreeNodePadding [checkboxThirdState]="true">
-                <kbq-tree-node-toggle [node]="node" />
+            <kbq-tree-option
+                *kbqTreeNodeDef="let node; when: hasChild"
+                kbqTreeNodePadding
+                [checkboxThirdState]="true"
+                [disabled]="node.name === 'DisabledParent'"
+            >
+                <i kbq-icon="kbq-circle-info_16"></i>
+                <kbq-tree-node-toggle [node]="node" [disabled]="node.name === 'DisabledToggle'" />
                 <span [innerHTML]="treeControl.getViewValue(node)"></span>
             </kbq-tree-option>
         </kbq-tree-selection>

packages/components/tree/_tree-theme.scss

@@ -28,6 +28,10 @@
 
     &[disabled] {
         cursor: default;
+
+        & .kbq-icon {
+            color: var(--kbq-tree-states-disabled-tree-toggle-color);
+        }
     }
 }
 

packages/components/tree/e2e.ts

@@ -57,9 +57,7 @@ export class KbqTreeNodeToggleBaseDirective<T> {
     }
 
     toggle(event: Event): void {
-        if (this.disabled) {
-            return;
-        }
+        if (this.disabled) return;
 
         if (this.recursive) {
             this.tree.treeControl.toggleDescendants(this.treeNode.data);
@@ -73,12 +71,10 @@ export class KbqTreeNodeToggleBaseDirective<T> {
 
 @Component({
     selector: 'kbq-tree-node-toggle',
-    imports: [
-        KbqIcon
-    ],
+    imports: [KbqIcon],
     template: `
         <ng-content>
-            <i kbq-icon="kbq-chevron-down-s_16"></i>
+            <i kbq-icon="kbq-chevron-down-s_16" [color]="'contrast-fade'"></i>
         </ng-content>
     `,
     styleUrls: ['./toggle.scss', './tree-tokens.scss'],

packages/components/tree/toggle.scss

@@ -70,10 +70,6 @@
         outline: none;
     }
 
-    &.kbq-disabled .kbq-icon {
-        cursor: default;
-    }
-
     &:not(.kbq-disabled) {
         cursor: pointer;