From 40db6ca5a55c0c2d1c1c05de684bb35ed3e629fc Mon Sep 17 00:00:00 2001 From: Saulius Skliutas <24278440+saskliutas@users.noreply.github.com> Date: Thu, 28 Nov 2024 14:28:25 +0200 Subject: [PATCH] `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 --- .changeset/afraid-ducks-listen.md | 5 +++++ .changeset/seven-turtles-train.md | 5 +++++ .../api/presentation-hierarchies-react.api.md | 3 ++- .../itwinui/TreeNodeRenderer.css | 5 +++++ .../itwinui/TreeNodeRenderer.tsx | 21 ++++++++++++++++--- .../itwinui/TreeRenderer.tsx | 6 ++++-- packages/models-tree/tsconfig.json | 3 +-- 7 files changed, 40 insertions(+), 8 deletions(-) create mode 100644 .changeset/afraid-ducks-listen.md create mode 100644 .changeset/seven-turtles-train.md diff --git a/.changeset/afraid-ducks-listen.md b/.changeset/afraid-ducks-listen.md new file mode 100644 index 000000000..9d6654a8c --- /dev/null +++ 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 new file mode 100644 index 000000000..919723bbe --- /dev/null +++ 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 index b896f9bbf..0002295b9 100644 --- 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 type TreeProps = ComponentPropsWithoutRef>; // @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 index f461cc138..8aa3d60de 100644 --- 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 index a6ba1bc7b..d0244c890 100644 --- 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(null); const ref = useMergedRefs(forwardedRef, nodeRef); if ("type" in node && node.type === "ChildrenPlaceholder") { - return ; + return ; } if (isPresentationHierarchyNode(node)) { @@ -176,14 +179,26 @@ export const TreeNodeRenderer: React.ForwardRefExoticComponent>((props, forwardedRef) => { +const PlaceholderNode = forwardRef< + HTMLDivElement, + Omit & { + size?: "default" | "small"; + } +>(({ size, ...props }, forwardedRef) => { const { localizedStrings } = useLocalizationContext(); return ( } + icon={ + + } 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 index d4797c9a6..019600a9c 100644 --- 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((node) => createRenderedTreeNodeData(node, isNodeSelected ?? noopIsNodeSelected), [isNodeSelected]); return ( - {...treeProps} data={rootNodes} nodeRenderer={nodeRenderer} getNode={getNode} enableVirtualization={true} /> + {...treeProps} size={size} data={rootNodes} nodeRenderer={nodeRenderer} getNode={getNode} enableVirtualization={true} /> ); } diff --git a/packages/models-tree/tsconfig.json b/packages/models-tree/tsconfig.json index 50c932748..473bc2cc0 100644 --- 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"] }