[Tree] Content density factor, remove left padding when list is non-nested

[dmartini-zrh]

Description

This ticket concerns 2 enhancement requests to the Tree component.
They both come from specific use cases but might be beneficial for additional ones.

Actual Behavior

1. When using a Tree component in combination with action buttons for each item of the list, the latter can appear very narrowly spaced.
 In particular, this is the case when the scale is set to s

2. If the Tree component displays a non-nested list, the left space – where collapse controls (e.g. chevrons) would appear – is of no use.

Acceptance Criteria

Desired Behavior

1. The Tree component might have a density variable to choose between a default or "compact" and a cozy or "roomy" layout. In particular use cases, increasing visual separation could also be beneficial to accessibility.

2. When the Tree component presents a non-nested list, the left padding might be hidden, resulting in more space-efficient layouts.

Relevant Info

No response

Which Component

Tree

Example Use Case

No response

Esri team

ArcGIS Scene Viewer

[macandcheese]

Agreed, this would be great to look at, I think there's a lot of valid changes suggested here.

Removing the padding when there is no nested content makes a lot of sense to me. I struggle a bit with the "cozy / compact" terminology - to me cozy insinuates a density that is higher than default. If possible, finding a good default for s/m/l without the need for a secondary layout property would be ideal. Another option we could look at is a css variable for spacing, but even that feels like a workaround.

cc @ashetland

[dmartini-zrh]

@macandcheese thanks for your reply.
Exact terminologies and defining whether density and size shall be distinct or a single property are design topics that I wanted to suggest... but go beyond this ticket 😉
My idea of "cozy / compact" refers to other design systems such as SAP's Fiori (which basically recommends "cozy" for touch devices) and Microsoft's (e.g. Outlook's UI density settings)

[macandcheese]

Yep, that context makes sense. Usually that ends up being an app-level or across multiple component type of user selection, so perhaps applicable at some point outside of tree specifically.

Maybe in this case if scale updates aren’t sufficient a line item space css var could work.

[geospatialem]

Related #6632

[ashetland]

Padding for a non-nested list is outlined in issue #7100 as part of epic #6632. Tree Items now support an actions-end slot (issue #3127) which will cause Tree Items to increase in height, adding more visual separation between items than is outlined above. Spacing is being wrapped into token work for now.