Skip to content

feat(kit): support manual toggle item node in tree #11321

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat(kit): support manual toggle item node in tree #11321

wants to merge 2 commits into from

Conversation

splincode
Copy link
Member

Fixes #11120

image

@Copilot Copilot AI review requested due to automatic review settings July 15, 2025 13:32
@splincode splincode requested a review from a team as a code owner July 15, 2025 13:32
@splincode splincode requested review from MarsiBarsi, waterplea, nsbarsukov, vladimirpotekhin and mdlufy and removed request for a team July 15, 2025 13:32
@lumberjack-bot lumberjack-bot
Copy link

lumberjack-bot bot commented Jul 15, 2025 •
edited
Loading

Failed tests ❌

Before (main) ← Diff → After (local)

nested-root.cy.ts-tui-nested-root__1.diff.png
nested-root.cy.ts-tui-nested-root__3.diff.png
nested-root.cy.ts-tui-nested-root__2.diff.png
nested-root.cy.ts-tui-nested-root__4.diff.png

(updated for commit af70062)

@nx-cloud Nx Cloud
Copy link

nx-cloud bot commented Jul 15, 2025 •
edited
Loading

View your CI Pipeline Execution ↗ for commit af70062

Command Status Duration Result
nx component-test demo-cypress ✅ Succeeded 13m 16s View ↗
nx e2e demo-playwright -- --project=chromium --... ✅ Succeeded 6m 40s View ↗
nx e2e demo-playwright -- --project=chromium --... ✅ Succeeded 5m 4s View ↗
nx e2e demo-playwright -- --update-snapshots --... ✅ Succeeded 8m 25s View ↗
nx e2e demo-playwright -- --project=chromium --... ✅ Succeeded 3m 19s View ↗
nx e2e demo-playwright -- --update-snapshots --... ✅ Succeeded 6m 5s View ↗
nx e2e demo-playwright -- --project=chromium --... ✅ Succeeded 2m 38s View ↗
nx e2e demo-playwright -- --project=chromium --... ✅ Succeeded 2m 21s View ↗
Additional runs (13) ✅ Succeeded ... View ↗

☁️ Nx Cloud last updated this comment at 2025-07-24 08:20:06 UTC

@splincode splincode force-pushed the splincode/feat/issues/11120 branch from 598a5bc to 2fbcffd Compare July 15, 2025 13:33
Copilot
Copilot AI reviewed Jul 15, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds manual control over expanding and collapsing tree items and updates demo examples to showcase the new toggle and dynamic-add functionality.

  • Introduces a toggle(item: TuiTreeItem) method on the tree-item component
  • Moves expand/collapse handling into a host click listener in the content component
  • Updates demo examples 5 and 6 to use the new toggle API and add-item behavior

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
tree-item.component.ts Added public toggle(item: TuiTreeItem) method
tree-item-content.template.html Removed individual (click) on expand button
tree-item-content.component.ts Added host (click) listener and onClick handler (with log)
examples/6/index.ts Updated imports, handler, onChecked, and new add method
examples/6/index.less Styled flat button opacity on hover
examples/6/index.html Switched to let-treeItem, let-treeNode, and added add button
examples/5/index.ts Added TuiButton, new add method, input type for TuiTreeItem
examples/5/index.less Added flat button hover styles
examples/5/index.html Updated template to use let-treeItem, let-treeNode, add button
examples/5/content.ts Removed leftover host click override
Comments suppressed due to low confidence (1)

projects/kit/components/tree/components/tree-item/tree-item.component.ts:98

  • [nitpick] The toggle method requires its own instance as a parameter. Consider converting this to an instance method without parameters (toggle(): void) to simplify the API (this.toggle() toggles itself).
    public toggle(item: TuiTreeItem): void {

@splincode splincode force-pushed the splincode/feat/issues/11120 branch 2 times, most recently from da0bbfa to 22f2c76 Compare July 15, 2025 13:35
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 15, 2025 •
edited
Loading

Visit the preview URL for this PR (updated for commit af70062):

https://taiga-previews-demo--pr11321-splincode-feat-issues-111-m2cacihv.web.app

(expires Fri, 25 Jul 2025 07:52:29 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 73dddc3c665194f3e11f18c16aeb71af4c289c37

@bundlemon BundleMon
Copy link

bundlemon bot commented Jul 15, 2025 •
edited
Loading

BundleMon

Files updated (2)
Status Path Size Limits
✅ demo/browser/runtime.(hash).js
 52.55KB (+25B +0.05%) +10%
✅ demo/browser/main.(hash).js
 347.42KB (+15B 0%) +10%
Unchanged files (3)
Status Path Size Limits
✅ demo/browser/vendor.(hash).js
 260.95KB +10%
✅ demo/browser/styles.(hash).css
 21.38KB +10%
✅ demo/browser/polyfills.(hash).js
 11.16KB +10%

Total files change +40B +0.01%

Groups updated (1)
Status Path Size Limits
✅ demo/browser/*..js
 9.56MB (+3.12KB +0.03%) -

Final result: ✅

View report in BundleMon website ➡️

Current branch size history | Target branch size history

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 15, 2025 •
edited
Loading

Playwright test results

passed  1242 passed
skipped  3 skipped

Details

report  Open report ↗︎
stats  1245 tests across 77 suites
duration  13 minutes, 6 seconds
commit  af70062

Skipped tests

chromium › tests/addon-mobile/mobile-dropdown/mobile-dropdown-with-textfield.pw.spec.ts › DropdownMobile for textfields › with legacy select
chromium › tests/core/dropdown/dropdown.pw.spec.ts › Dropdown › Esc -> Hosted Dropdown
chromium › tests/kit/input-number/input-number.pw.spec.ts › InputNumber › API › [prefix] & [postfix] props › non-erasable minus (as [prefix]) for [max] <= 0 › forbids to enter more minuses

@splincode splincode force-pushed the splincode/feat/issues/11120 branch 2 times, most recently from 782e576 to 5494dde Compare July 21, 2025 07:57
@splincode splincode force-pushed the splincode/feat/issues/11120 branch from 5494dde to af70062 Compare July 24, 2025 07:47
mdlufy
mdlufy reviewed Jul 24, 2025
View reviewed changes
projects/demo/src/modules/components/tree/examples/5/index.less
margin-inline-start: auto;
}

::ng-deep tui-tree-item > *:hover > [appearance='flat'] {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it looks cumbersome, can we simplify it somehow and avoid using ng-deep?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mdlufy mdlufy mdlufy left review comments

Copilot code review Copilot Copilot left review comments

@MarsiBarsi MarsiBarsi Awaiting requested review from MarsiBarsi MarsiBarsi is a code owner automatically assigned from taiga-family/core-team

@waterplea waterplea Awaiting requested review from waterplea waterplea is a code owner automatically assigned from taiga-family/core-team

@nsbarsukov nsbarsukov Awaiting requested review from nsbarsukov nsbarsukov is a code owner automatically assigned from taiga-family/core-team

@vladimirpotekhin vladimirpotekhin Awaiting requested review from vladimirpotekhin vladimirpotekhin is a code owner automatically assigned from taiga-family/core-team

At least 2 approving reviews are required to merge this pull request.

Assignees

@splincode splincode

Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

🐞 - TuiTree - Doesn't show control icon when adding new element
3 participants
@splincode @mdlufy @taiga-family-bot