[core] feat(Tree): compact variant, caret hover style

packages/core/src/components/tree/_tree.scss

@@ -44,6 +44,10 @@ Styleguide tree
 
 $tree-row-height: $pt-grid-size * 3 !default;
 $tree-icon-spacing: ($tree-row-height - $pt-icon-size-standard) * 0.5 !default;
+
+$tree-row-height-compact: 24px !default;
+$tree-icon-spacing-compact: ($tree-row-height-compact - $pt-icon-size-standard) * 0.5 !default;
+
 $tree-intent-icon-colors: (
   "primary": $blue5,
   "success": $green5,
@@ -112,6 +116,10 @@ $tree-intent-icon-colors: (
   transform: rotate(0deg);
   transition: transform ($pt-transition-duration * 2) $pt-transition-ease;
 
+  &:hover {
+    color: $pt-text-color;
+  }
+
   &.#{$ns}-tree-node-caret-open {
     transform: rotate(90deg);
   }
@@ -183,6 +191,20 @@ $tree-intent-icon-colors: (
   }
 }
 
+// Variant: compact
+.#{$ns}-tree.#{$ns}-compact {
+  .#{$ns}-tree-node-content {
+    height: $tree-row-height-compact;
+  }
+
+  .#{$ns}-tree-node-caret {
+    margin-right: 3px;
+    min-width: $tree-row-height-compact;
+    padding: $tree-icon-spacing-compact;
+  }
+}
+
+// Variant: dark theme
 .#{$ns}-dark {
   .#{$ns}-tree-node-content {
     &:hover {
@@ -202,11 +224,19 @@ $tree-intent-icon-colors: (
     }
   }
 
-  .#{$ns}-tree-node.#{$ns}-tree-node-selected > .#{$ns}-tree-node-content {
-    background-color: $pt-intent-primary;
+  .#{$ns}-tree-node {
+    &:not(.#{$ns}-disabled) {
+      .#{$ns}-tree-node-caret:hover {
+        color: $pt-dark-text-color;
+      }
+    }
 
-    #{$icon-classes} {
-      color: $white;
+    &.#{$ns}-tree-node-selected > .#{$ns}-tree-node-content {
+      background-color: $pt-intent-primary;
+
+      #{$icon-classes} {
+        color: $white;
+      }
     }
   }
 }

packages/core/src/components/tree/tree.tsx

@@ -24,6 +24,11 @@ import type { TreeEventHandler, TreeNodeInfo } from "./treeTypes";
 
 // eslint-disable-next-line @typescript-eslint/ban-types
 export interface TreeProps<T = {}> extends Props {
+    /**
+     * Whether to use a compact appearance which reduces the visual padding around node content.
+     */
+    compact?: boolean;
+
     /**
      * The data specifying the contents and appearance of the tree.
      */
@@ -95,7 +100,11 @@ export class Tree<T = {}> extends React.Component<TreeProps<T>> {
 
     public render() {
         return (
-            <div className={classNames(Classes.TREE, this.props.className)}>
+            <div
+                className={classNames(Classes.TREE, this.props.className, {
+                    [Classes.COMPACT]: this.props.compact,
+                })}
+            >
                 {this.renderNodes(this.props.contents, [], Classes.TREE_ROOT)}
             </div>
         );

packages/docs-app/src/examples/core-examples/treeExample.tsx

@@ -17,8 +17,8 @@
 import cloneDeep from "lodash/cloneDeep";
 import * as React from "react";
 
-import { Classes, ContextMenu, Icon, Intent, Tooltip, Tree, type TreeNodeInfo } from "@blueprintjs/core";
-import { Example, type ExampleProps } from "@blueprintjs/docs-theme";
+import { Classes, ContextMenu, H5, Icon, Intent, Switch, Tooltip, Tree, type TreeNodeInfo } from "@blueprintjs/core";
+import { Example, type ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 
 type NodePath = number[];
 
@@ -62,6 +62,7 @@ function treeExampleReducer(state: TreeNodeInfo[], action: TreeAction) {
 }
 
 export const TreeExample: React.FC<ExampleProps> = props => {
+    const [compact, setCompact] = React.useState(false);
     const [nodes, dispatch] = React.useReducer(treeExampleReducer, INITIAL_STATE);
 
     const handleNodeClick = React.useCallback(
@@ -92,9 +93,17 @@ export const TreeExample: React.FC<ExampleProps> = props => {
         });
     }, []);
 
+    const options = (
+        <>
+            <H5>Props</H5>
+            <Switch label="Compact" checked={compact} onChange={handleBooleanChange(setCompact)} />
+        </>
+    );
+
     return (
-        <Example options={false} {...props}>
+        <Example options={options} {...props}>
             <Tree
+                compact={compact}
                 contents={nodes}
                 onNodeClick={handleNodeClick}
                 onNodeCollapse={handleNodeCollapse}