Skip to main content

Tree drag source outline unbroken behind row actions (WEB-1323)

Version: 0.9.1 ยท Type: ๐Ÿ› Bug Fix

WEB-1323

Problemโ€‹

Dragging a Tree row that also renders hover-only actions (e.g. a + add button and a โ‹ฏ more menu) clipped the top / bottom segments of the dragged source row's inset outline โ€” the outline looked cut exactly under the action buttons.

Root causeโ€‹

The dragged source row draws a 1px inset outline via TREE_ITEM_DRAGGING_CLASS (inset-ring), which is a box-shadow on the row element itself. The actions container is absolute inset-y-0 bg-inherit (TREE_ITEM_ACTIONS_CLASS) โ€” it fills the row's right edge at full height with the row background to mask the title gradient. Because a child element with its own background paints above the parent's inset box-shadow, the full-height actions fill covered the ring's top / bottom edges in the button region. Drag typically starts from a hovered row, so actions are visible during drag. The right-(--Spacing_4) gap on the right leaves the rounded right edge visible, which matches the reported symptom.

Changed Filesโ€‹

  • packages/design/src/components/Tree/styles.ts
  • packages/design/src/components/Tree/Tree.tsx
  • packages/design/src/components/Tree/__tests__/Tree.test.tsx
  • packages/design-site/docs/components/tree.mdx

Changesโ€‹

  • styles.ts: add group-data-[dragging]/pd-tree-item:inset-y-px to TREE_ITEM_ACTIONS_CLASS โ€” inset the actions container by 1px top / bottom only while dragging, so the ring's horizontal edges show through. Normal (non-drag) state keeps the full-height mask unchanged.
  • Tree.tsx: emit data-dragging={dragKey === node.key || undefined} on the source row as the group switch for the variant above.
  • Tree.test.tsx: add a unit test asserting the drag source row carries data-dragging and the actions wrapper gets the inset variant.
  • tree.mdx: add a "Drag a row that has actions" case under Drag and Drop (rows with 3+ trailing icon buttons) to reproduce and verify the fix.

Impactโ€‹

  • Only the drag-source visual is affected; the outline now stays complete behind the action buttons.
  • Non-drag state masking and the title gradient are unchanged; the drop = inside state (full-row highlight, no outline) is unaffected.