Trees: Add an option for "expanded" layout to make components touch friendly

[JoanaSmit]

The tree node height is too small for mobile devices.
Make node height customizable so we could increase touch area.

[grigasp]

@DanAbney, what would be the recommendation here? Should we make this customizable, or would it be better to increase the default height so the tree nodes are more touch friendly on all devices?

[DanAbney]

@grigasp, Without getting into the fact that not much (if any) of the rest of the UI supports touch (well) from what I know, making anything touch friendly on ALL devices is a tall order. To do this well, that should have been a requirement from the jump.

Starring from now though, here are some things you can consider...

Regardless of supporting touch, you may want to consider making the widget responsive; that is, when the size of the widget (in this case the width) is reduced, the content and controls should adjust (at breakpoints) to keep the features as accessible as possible.

Typically that means compact the spacing, hide less needed controls, truncate content (if possible) or redisplay it using different components / interactions. Very often, some aspects of the feature need to be sacrificed (more clicks to accomplish things for example).

For touch support, you will need to increase the line spacing and padding (usually this increases the icon sizes). because of this, the horizontal spacing of this widget will be further effected. Because this widget features a tree control, you may want to consider using a sliding tree pattern (I forget the common name for this). You can see this in action if you have Google Drive on your phone (although they animate the "slide" upwards, instead from the right, for some reason).

Here are a few quick concepts that may help you...

Note: These are concepts ONLY and in no way should be considered complete / all requirements considered.

[vincasrazmabentley]

@DanAbney note that we are not looking at a full redesign right now, just enough to get this feature usable on touch. The usual touch target size is 42-44dp. Further improvements could follow later as well

[grigasp]

@DanAbney note that we are not looking at a full redesign right now, just enough to get this feature usable on touch. The usual touch target size is 42-44dp. Further improvements could follow later as well

Totally agree, we're not ready for this kind of redesign at the moment.

However, I'm worried that increasing the height is just not enough - we need to scale everything that's in the node too: icons, expander, action buttons, possibly more. With that in mind, I don't think adding ability to specify width/height to every building block is the best approach here.

Maybe components should have something like Table component in @itwin/itwinui-react - condensed style?

[vincasrazmabentley]

Regarding scaling icons - technically it's not necessary as long as the touch target (invisible area under the icon) is at least 42x42

[grigasp]

Regarding scaling icons - technically it's not necessary as long as the touch target (invisible area under the icon) is at least 42x42

Yeah, I guess that's what I meant. I changed the height of the node component to 42px, here are some examples of what doesn't meet the 42x42px touch area criteria:

• Expander:
  
  Here, just the touch area needs to be scaled.

• Action button:
  
  Here, I think the whole button needs to be scaled.

[JoanaSmit]

The visibility toggle button doesn't meet touch area criteria either:

[grigasp]

Thanks. I renamed the issue to cover the whole widget along with all the tree components in it.

[saskliutas]

New density property is available on tree components in @itwin/tree-widget-react@1.1.0.