Skip to main content

Tree item layout refactor + gradient mask

Pre-release · Type: ✨ Feature

Linear: DES-75 / DES-76 / DES-77 / DES-78

Changed Files​

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

Changes​

1. Item spacing 4px​

TREE_ROOT_CLASS and TREE_CHILDREN_INNER_CLASS each add gap-1 (4px), aligning with the Figma design spec.

2. title / action layout refactor​

Removed the intermediate wrapper layer in TREE_ITEM_CONTENT_CLASS; title and actions become direct children of the treeitem flex row:

treeitem [flex items-center gap-12]
├── left  [shrink-0]
├── title [flex-1 overflow-hidden]   ← fills the remaining space
└── actions [shrink-0 max-w-0→96]   ← expands on hover, squeezing the title

3. title gradient mask​

TREE_ITEM_TITLE_CLASS uses CSS mask-image instead of truncate (ellipsis): a 24px gradient region on the right that fades out when the text is too long to indicate there are remaining characters; for short text the mask applies to the blank area with no visual effect.

4. actions layout strategy​

TREE_ITEM_ACTIONS_CLASS changes from opacity-0 + ml-auto to max-w-0 overflow-hidden + max-w-96:

  • Default: max-w-0 takes no layout space, so the title truly fills the row
  • Hover: max-w-96 (384px) expands to its natural width, and the title shrinks automatically because of flex-1
  • Transitions both max-width and opacity in sync, keeping a 150ms fade animation
  • The visible state also adds overflow-visible to prevent the inner button's box-shadow / focus ring from being clipped by overflow: hidden

5. Long Titles demo (design-site)​

Added a Long Titles section in tree.mdx, showing:

  • The gradient mask effect on multiple very long titles under a 220px container width constraint
  • Actions appearing on hover and squeezing the title width
  • Short titles unaffected by the mask

6. demo action button focus style (design-site)​

All ⋯ buttons in the demos add outline-none focus-visible:ring-1 focus-visible:ring-(--Labels-Primary), replacing the browser default focus ring (so that no bare browser rectangle outline appears when focus returns to the trigger after Radix closes the dropdown).