design an affordance that would reset the zoom level to default

[gissoo]

No description provided.

[gissoo]

@rlskoeser @jhimpele Rebecca and I discussed that on mobile we would have a button to let users reset the zoom level,

how it works: if you're zoomed in on the tree you would press a button to view the entire tree again as it was displayed by default. (the button snaps the tree back to the container). Because of lack of space I'd strongly suggest we don't include text in the button such as "reset".

I'm proposing this icon which will be intuitive in context. @rlskoeser can we add a bit more invisible padding to it so it will be accessible? I think there is a way. It's now 40px, needs 8 more to be accessible. I don't want to make it huge.

Note: the icon is taken from phosphor icons, @rlskoeser

[jhimpele]

@gissoo @rlskoeser that button looks to like it reverses out of a full screen option, which we don't have of course. And to back up a step, what is the zoom in interaction?

[gissoo]

@jhimpele That's what it kind of does since it's snaps the tree back to its default position! It's more similar to zooming out. The zooming in interaction is by using two fingers and moving them away from each other, like below, you could zoom out by doing the opposite.

[jhimpele]

I get it! So it is for mobile. Thanks!

[gissoo]

@jhimpele yes, we are enabling zoom only on mobile since all the leaves are visible on desktop at once.

[rlskoeser]

@gissoo this looks great! I agree that it should be pretty obvious in context, since it will only show up once you are zoomed in.

Just to confirm, is this the "arrows-in" phosphor icon? And what style/weight of Phosphor icon? You didn't specify before I think I just used the regular.

Is 40px not enough for a tap target now, it needs to be 48x48? I should be able to add padding to make that work.

[gissoo]

@rlskoeser I'm sorry! Regular should be fine for the previous icons, this one is "arrows-in-fill".
You can inspect its structure in the container, also – the square it's sitting in is 40x40 and there is a 9px padding on all sides for the icon within the square.

Thank you! Yes, according to my recent findings 40px is not enough.

[gissoo]

I'll go ahead and close this issue.