Content tree - Content tree base component

[prashanthr6383]

📄 Summary of Changes

💭 Type of Change

• Bug fix (fixes an issue)
• New feature (adds functionality)
• Configuration change (modifies scaling or properties of existing infrastructure & services)
• Documentation change
• Other

📋 Test Plan

✅ Self Code Review Checklist

PR authors and reviewers, please verify that all of these items have been completed.

• My code is clean and readable
• I followed standard conventions
• Component code is WCAG 2.2 compliant (if applicable)
• I have made theme files changes (if applicable)
• I have made documentation changes (if applicable)
• I have made Storybook changes including usage documentation (if applicable)
• I have tested the component thoroughly in Storybook including RTL rendering (if applicable)

🔗 Work Item

Issue #662

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://trimble-oss.github.io/modus-wc-2.0/pr-preview/pr-853/
Built to branch gh-pages at 2026-03-20 07:42 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[Copilot]

Pull request overview

This pull request introduces a new Content Tree component to the Modus Web Components library, implementing the base structure for a hierarchical tree view with support for expansion/collapse, selection, search filtering, and contextual actions. The implementation consists of four sub-components: modus-wc-content-tree (main container), modus-wc-tree-view (list wrapper), modus-wc-tree-item (individual nodes), and modus-wc-tree-actions (action buttons).

Changes:

• Adds new content tree component with search and expand/collapse functionality
• Implements tree item component with checkbox support and subtree management
• Creates tree actions component with dropdown menu for contextual actions
• Includes Storybook stories demonstrating single-select, multi-select, and action modes
• Updates auto-generated type definitions and documentation

Reviewed changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
modus-wc-content-tree.tsx	Main tree container with search, filtering, and expand/collapse all functionality
modus-wc-tree-view.tsx	Wrapper component providing semantic ul element structure
modus-wc-tree-item.tsx	Individual tree node with selection, expansion, and action support
modus-wc-tree-actions.tsx	Action menu component with dropdown for multiple actions
*.spec.ts	Test specifications with invalid prop usage and insufficient coverage
*.scss	Styling with CSS syntax error in dark theme selector
*.stories.ts	Storybook documentation showing different usage patterns
Auto-generated files	TypeScript definitions and custom elements metadata

[prashanthr6383]

@prashanthr6383 Here are few obsevations after testing;

• Change the text input size to SM.
• Fix the action bar padding according to the Figma design.
• Adjust the padding between the text input and the toolbar as per Figma.
• Correct the tree item padding.
• Update the chevron icon color.
• Fix the background for all icons.
• Adjust the spacing between the label and icon in the tree item.
• Update the label color in the tree item.
• Increase the line length when expanding an item so that it matches the tree item height.
• Change the color of focused state.
• Ensure the ellipsis menu and visibility icon are also visible in the selected state.

addressed except - Increase the line length when expanding an item so that it matches the tree item height due to default styles from daisy ui

[ElishaSamPeterPrabhu]

Wrong fallback values on spacing/font variables

The SCSS files use fallback values that don't match the actual variable definitions:

Variable	Actual value	Fallback used in SCSS
--modus-wc-spacing-xs	0.25rem (4px)	0.5rem (8px)
--modus-wc-spacing-sm	0.5rem (8px)	0.75rem (12px)
--modus-wc-spacing-md	0.75rem (12px)	1rem (16px)
--modus-wc-font-size-md	0.875rem (14px)	1rem (16px)

[prashanthr6383]

Wrong fallback values on spacing/font variables

The SCSS files use fallback values that don't match the actual variable definitions:

Variable Actual value Fallback used in SCSS
--modus-wc-spacing-xs 0.25rem (4px) 0.5rem (8px)
--modus-wc-spacing-sm 0.5rem (8px) 0.75rem (12px)
--modus-wc-spacing-md 0.75rem (12px) 1rem (16px)
--modus-wc-font-size-md 0.875rem (14px) 1rem (16px)

fallbacks removed

[ElishaSamPeterPrabhu]

Moving to QA @jewel-shajan

[jewel-shajan]

@prashanthr6383 Here are few observations after testing:

• Padding between text input and action bar should be 4 px.
• Size of name input should be sm.
• Label color not correct.
• Background color for hover state not correct.
• Action icon color not correct in hover state.
• While hovering background color for action icon need to be removed.
• In selected state font color not correct.
• In empty content tree collapse icon is not present as per figma.
• Gap need to be fixed in tree item as per figma.

[prashanthr6383]

@prashanthr6383 Here are few observations after testing:

• Padding between text input and action bar should be 4 px.
• Size of name input should be sm.
• Label color not correct.
• Background color for hover state not correct.
• Action icon color not correct in hover state.
• While hovering background color for action icon need to be removed.
• In selected state font color not correct.
• In empty content tree collapse icon is not present as per figma.
• Gap need to be fixed in tree item as per figma.

addressed

[ElishaSamPeterPrabhu]

This PR cannot be reviewed yet, as it does not align with the issue description. Ongoing offline discussions are still in progress, so this has been moved back to In Progress until a final solution is agreed upon.