hierarchies-react: adjust tree node loading indicator in small tree (…

…#795) * Adjust tree node loading indicator to match other icons size * change * extract-api * change
iTwin · Nov 28, 2024 · 40db6ca · 40db6ca
1 parent 1b69393
commit 40db6ca
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 8 deletions.
diff --git a/.changeset/afraid-ducks-listen.md b/.changeset/afraid-ducks-listen.md
@@ -0,0 +1,5 @@
+---
+"@itwin/presentation-hierarchies-react": patch
+---
+
+Fix tree node loading indicator to match other icons size.
diff --git a/.changeset/seven-turtles-train.md b/.changeset/seven-turtles-train.md
@@ -0,0 +1,5 @@
+---
+"@itwin/presentation-hierarchies-react": minor
+---
+
+Added `size` property to `TreeNodeRenderer` to improve styling of `small` tree.
diff --git a/packages/hierarchies-react/api/presentation-hierarchies-react.api.md b/packages/hierarchies-react/api/presentation-hierarchies-react.api.md
@@ -179,6 +179,7 @@ interface TreeNodeRendererOwnProps {
         parentNodeId: string | undefined;
         state: "reset";
     }) => void;
+    size?: "default" | "small";
 }
 
 // @public (undocumented)
@@ -191,7 +192,7 @@ type TreeNodeRendererProps_2 = ComponentPropsWithoutRef<typeof TreeNodeRenderer>
 type TreeProps = ComponentPropsWithoutRef<typeof Tree<RenderedTreeNode>>;
 
 // @public
-export function TreeRenderer({ rootNodes, expandNode, selectNodes, isNodeSelected, onFilterClick, getIcon, getLabel, getSublabel, getHierarchyLevelDetails, reloadTree, selectionMode, localizedStrings, ...treeProps }: TreeRendererProps): JSX_3.Element;
+export function TreeRenderer({ rootNodes, expandNode, selectNodes, isNodeSelected, onFilterClick, getIcon, getLabel, getSublabel, getHierarchyLevelDetails, reloadTree, selectionMode, localizedStrings, size, ...treeProps }: TreeRendererProps): JSX_3.Element;
 
 // @public (undocumented)
 interface TreeRendererOwnProps {

diff --git a/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.css b/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.css
@@ -16,3 +16,8 @@
 .stateless-tree-node:focus-within .action-buttons {
   visibility: visible;
 }
+
+.stateless-tree-node-small-spinner {
+  height: var(--iui-size-s);
+  width: var(--iui-size-s);
+}
diff --git a/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.tsx b/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeNodeRenderer.tsx
@@ -37,6 +37,8 @@ interface TreeNodeRendererOwnProps {
   reloadTree?: (options: { parentNodeId: string | undefined; state: "reset" }) => void;
   /** CSS class name for the action buttons. */
   actionButtonsClassName?: string;
+  /** Tree node size. Should match the size passed to `TreeRenderer` component. */
+  size?: "default" | "small";
 }
 
 /** @public */
@@ -68,6 +70,7 @@ export const TreeNodeRenderer: React.ForwardRefExoticComponent<TreeNodeRendererP
       actionButtonsClassName,
       getHierarchyLevelDetails,
       reloadTree,
+      size,
       ...treeNodeProps
     },
     forwardedRef,
@@ -77,7 +80,7 @@ export const TreeNodeRenderer: React.ForwardRefExoticComponent<TreeNodeRendererP
     const nodeRef = useRef<HTMLDivElement>(null);
     const ref = useMergedRefs(forwardedRef, nodeRef);
     if ("type" in node && node.type === "ChildrenPlaceholder") {
-      return <PlaceholderNode {...treeNodeProps} ref={ref} />;
+      return <PlaceholderNode {...treeNodeProps} ref={ref} size={size} />;
     }
 
     if (isPresentationHierarchyNode(node)) {
@@ -176,14 +179,26 @@ export const TreeNodeRenderer: React.ForwardRefExoticComponent<TreeNodeRendererP
 );
 TreeNodeRenderer.displayName = "TreeNodeRenderer";
 
-const PlaceholderNode = forwardRef<HTMLDivElement, Omit<TreeNodeProps, "onExpanded" | "label">>((props, forwardedRef) => {
+const PlaceholderNode = forwardRef<
+  HTMLDivElement,
+  Omit<TreeNodeProps, "onExpanded" | "label"> & {
+    size?: "default" | "small";
+  }
+>(({ size, ...props }, forwardedRef) => {
   const { localizedStrings } = useLocalizationContext();
   return (
     <TreeNode
       {...props}
       ref={forwardedRef}
       label={localizedStrings.loading}
-      icon={<ProgressRadial size="x-small" indeterminate title={localizedStrings.loading} />}
+      icon={
+        <ProgressRadial
+          size="x-small"
+          indeterminate
+          title={localizedStrings.loading}
+          className={cx(props.className, { "stateless-tree-node-small-spinner": size === "small" })}
+        />
+      }
       onExpanded={/* c8 ignore next */ () => {}}
     />
   );

diff --git a/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeRenderer.tsx b/packages/hierarchies-react/src/presentation-hierarchies-react/itwinui/TreeRenderer.tsx
@@ -53,6 +53,7 @@ export function TreeRenderer({
   reloadTree,
   selectionMode,
   localizedStrings,
+  size,
   ...treeProps
 }: TreeRendererProps) {
   const { onNodeClick, onNodeKeyDown } = useSelectionHandler({
@@ -74,17 +75,18 @@ export function TreeRenderer({
           getLabel={getLabel}
           getSublabel={getSublabel}
           reloadTree={reloadTree}
+          size={size}
         />
       );
     },
-    [expandNode, getHierarchyLevelDetails, onFilterClick, onNodeClick, onNodeKeyDown, getIcon, getLabel, getSublabel, reloadTree],
+    [expandNode, getHierarchyLevelDetails, onFilterClick, onNodeClick, onNodeKeyDown, getIcon, getLabel, getSublabel, reloadTree, size],
   );
 
   const getNode = useCallback<TreeProps["getNode"]>((node) => createRenderedTreeNodeData(node, isNodeSelected ?? noopIsNodeSelected), [isNodeSelected]);
 
   return (
     <LocalizationContextProvider localizedStrings={localizedStrings}>
-      <Tree<RenderedTreeNode> {...treeProps} data={rootNodes} nodeRenderer={nodeRenderer} getNode={getNode} enableVirtualization={true} />
+      <Tree<RenderedTreeNode> {...treeProps} size={size} data={rootNodes} nodeRenderer={nodeRenderer} getNode={getNode} enableVirtualization={true} />
     </LocalizationContextProvider>
   );
 }

diff --git a/packages/models-tree/tsconfig.json b/packages/models-tree/tsconfig.json
@@ -7,8 +7,7 @@
     "declaration": true,
     "declarationMap": true,
     "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true,
-    "lib": ["ES2022"]
+    "resolveJsonModule": true
   },
   "include": ["src"]
 }