mi6 / mi6/ic-ui-kit

[ic-tree-view] Add search functionality

Open
#2,242 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## Summary
Search functionality was missed out of the original implementation to ensure we could release a first iteration quicker. However, it's still something important a user might want.

## 💬 Description
Should make use of search bar in/under the tree view heading section with an icon button to toggle a full search bar (like in top nav mobile) - see designs further down.

This might be over complicating it, but it would be good if it only searched what's visible e.g. if parent tree items are all collapsed then it can only search the parent tree items, but if they're expanded then it could search the children too.

When searching the tree view should just adjust according to the search term e.g. tree items that don't match. May need design input for an empty state if all tree items are removed.

## 💰 Use value
Data rich applications will be easier to navigate with a search in tree view.

## ✏ Designs

Screenshot 2024-08-01 at 12 48 20

Contributor guide

Open the contributing guide

Research direction

Start by locating the ic-tree-view component and reviewing the attached search-bar design. Determine how the tree tracks expanded items and how visible items are rendered, then verify that the search toggle filters matching visible tree items and that an all-results-empty state is addressed.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.