Fix treeview glitches (#109)

* Fix first level of tree items not properly tagged as nested

* Fix react tree view first level items not always being flagged as nested

* Fix positioning and spacing for the collapse button in tree items

* Scale margin between collapser and content

* Update ref snapshots

---------

Co-authored-by: Frédéric Collonval <[email protected]>

Author: fcollonval

packages/components/src/tree-item/tree-item.styles.ts

@@ -44,14 +44,25 @@ import {
   heightNumber
 } from '../styles/index.js';
 
+/**
+ * Tree item expand collapse button size CSS Partial
+ * @public
+ */
+export const expandCollapseButtonSize = cssPartial`(((${baseHeightMultiplier} + ${density}) * 0.5 + 2) * ${designUnit})`;
+
 const ltr = css`
   .expand-collapse-glyph {
     transform: rotate(0deg);
   }
   :host(.nested) .expand-collapse-button {
     left: var(
       --expand-collapse-button-nested-width,
-      calc(${heightNumber} * -1px)
+      calc(
+        (
+            ${expandCollapseButtonSize} +
+              ((${baseHeightMultiplier} + ${density}) * 1.25)
+          ) * -1px
+      )
     );
   }
   :host([selected])::after {
@@ -69,7 +80,12 @@ const rtl = css`
   :host(.nested) .expand-collapse-button {
     right: var(
       --expand-collapse-button-nested-width,
-      calc(${heightNumber} * -1px)
+      calc(
+        (
+            ${expandCollapseButtonSize} +
+              ((${baseHeightMultiplier} + ${density}) * 1.25)
+          ) * -1px
+      )
     );
   }
   :host([selected])::after {
@@ -80,12 +96,6 @@ const rtl = css`
   }
 `;
 
-/**
- * Tree item expand collapse button size CSS Partial
- * @public
- */
-export const expandCollapseButtonSize = cssPartial`((${baseHeightMultiplier} / 2) * ${designUnit}) + ((${designUnit} * ${density}) / 2)`;
-
 const expandCollapseHoverBehavior = DesignToken.create<Swatch>(
   'tree-item-expand-collapse-hover'
 ).withDefault((target: HTMLElement) => {
@@ -132,7 +142,6 @@ export const treeItemStyles: FoundationElementTemplate<
       background: ${neutralFillStealthRest};
       cursor: pointer;
       font-family: ${bodyFont};
-      --expand-collapse-button-size: calc(${heightNumber} * 1px);
       --tree-item-nested-width: 0;
     }
 
@@ -199,8 +208,8 @@ export const treeItemStyles: FoundationElementTemplate<
       border: none;
       outline: none;
       /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
-      width: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);
-      height: calc((${expandCollapseButtonSize} + (${designUnit} * 2)) * 1px);
+      width: calc(${expandCollapseButtonSize} * 1px);
+      height: calc(${expandCollapseButtonSize} * 1px);
       padding: 0;
       display: flex;
       justify-content: center;
@@ -261,7 +270,13 @@ export const treeItemStyles: FoundationElementTemplate<
 
     :host(.nested) .content-region {
       position: relative;
-      margin-inline-start: var(--expand-collapse-button-size);
+      /* Add left margin to collapse button size */
+      margin-inline-start: calc(
+        (
+            ${expandCollapseButtonSize} +
+              ((${baseHeightMultiplier} + ${density}) * 1.25)
+          ) * 1px
+      );
     }
 
     :host(.nested) .expand-collapse-button {
@@ -304,7 +319,12 @@ export const treeItemStyles: FoundationElementTemplate<
 
     ::slotted(${context.tagFor(TreeItem)}) {
       --tree-item-nested-width: 1em;
-      --expand-collapse-button-nested-width: calc(${heightNumber} * -1px);
+      --expand-collapse-button-nested-width: calc(
+        (
+            ${expandCollapseButtonSize} +
+              ((${baseHeightMultiplier} + ${density}) * 1.25)
+          ) * -1px
+      );
     }
   `.withBehaviors(
     new DirectionalStyleSheetBehavior(ltr, rtl),

packages/components/src/tree-view/tree-view.test.ts-snapshots/tree-view-default-chromium-linux.png

@@ -2,7 +2,12 @@ import {
   jpTreeView,
   provideJupyterDesignSystem
 } from '@jupyter/web-components';
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import React, {
+  forwardRef,
+  useLayoutEffect,
+  useImperativeHandle,
+  useRef
+} from 'react';
 import { useProperties } from './react-utils.js';
 
 provideJupyterDesignSystem().register(jpTreeView());
@@ -12,6 +17,12 @@ export const TreeView = forwardRef((props, forwardedRef) => {
   const { className, renderCollapsedNodes, currentSelected, ...filteredProps } =
     props;
 
+  useLayoutEffect(() => {
+    // Fix using private API to force refresh of nested flag on
+    // first level of tree items.
+    ref.current?.setItems();
+  }, [ref.current]);
+
   /** Properties - run whenever a property has changed */
   useProperties(ref, 'currentSelected', props.currentSelected);