Request for new tree component

[MarinaCastejonHPE]

What does this request relate to?

Tree component

Describe the feature you'd like to request.

The reason I propose the addition of a tree component to our design system is that tree components are a great solution to represent hierarchical data structures where users need to select one or multiple elements of the data set. Additionally, in cases were the data set is large and depending on the use case, the parent elements could be collapsed by default, hiding the children elements, therefore allowing users to read through the first level (parent) elements in a fast way, and subsequently expanding and collapsing as needed.

The tree provides users with visual cues on the hierarchy (ie. indentation of children) making it easier to scan through a long list, compared to a flattened structure (example) where readability is compromised, especially when nesting more than 2 levels and/or the items in the list are long. This, combined with our existing Search functionality in our Select components would be a better solution. This is especially true in the cases where users are browsing and do not know what exact item/s they are looking for.

Introducing a tree component into the Design System would not only streamline the development process, but also ensure a cohesive and intuitive user experience in GLCP.

Some examples (included in the benchmark in the Figma file linked below):

Note: it seems feasible to make this component accessible with ARIA. See Tree view pattern in ARIA documentation in W3C and Tree role ARIA documentation by Mozilla.

Links to Figma files with use cases or ideations from you.

Figma file with use cases from GLCP, benchmark and ideation.

How urgent is this request?

Very urgent

Is there anything else you would like to mention?

Context on the urgency: the notifications stream in GLCP has delivered some work in Istanbul and will deliver some work for Jhansi that would benefit from the existence of this component in the design system.

The topic has already been presented during a design critique with design system designers present and in a dedicated meeting with the Design System team. The general agreement by designers is that for the use cases presented (notifications work, described in the Figma file) is this would be the best option.

[MarinaCastejonHPE]

@halocline do you know roughly when will this request be triaged? We would like to know because there are some designers working on notification features that will be developed in Jhansi. Thanks

[halocline]

@MarinaCastejonHPE - I do not yet. We have only started getting limited visibility into the asks in Jhansi - at first glance I am seeing a lot asks which will be competing for time (dashboard cards, table work / table implementations, maps, page transitions, data loading experiences, making it easier for teams to consume core design tokens, rescue Project E----, creating prototypes for testing, tree views, onboarding tutorial, etc.)

I think we need to 1) create a venue to clarify the asks so that designers and design managers have visibility into the breadth of the asks, 2) go through a prioritization exercise of those asks where design teams are involved in / driving the prioritization, 3) assess prioritization against capacity.

[taysea]

@harshakramesh tagging you here for notifications.