refactor(treeview): fixes for sizes, height, and indicator alignment (#2218)

* fix(treeview): square item indicator chevron

Make sure the rotating item indicator (chevron icon) is square,
instead of for example, 30x32 at medium.

Also makes use of token for this, including sizing for t-shirt sizes.
Previously for example, the small size had an item indicator that
was larger than the treeview item.

* refactor(treeview): fix heights and sizing of treeview items

Treeview items and the item link were previously not displaying at the
correct component-height values, especially at different t-shirt sizes.
Size was also not being passed down fully in Storybook, which was
masking the entire issue. The chevron indicator when properly sized was
not aligned properly on the left side of the item.

This fix should ensure the proper height for both elements at s, m, l,
and xl, and the aligned square chevron indicator. It also simplifies
and clarifies some of the negative margins and offsets that were being
used to push over the chevron.

* docs(treeview): add a label with long text to storybook

Modified an item in a story and set a max-width, so long text that turns
to ellipsis is represented and captured in VRTs.

* docs(treeview): mods file update

* docs(treeview): add flat example to storybook

Add 'Flat' markup example from docs to Storybook, which uses numbered
classes for the indentation level.

* refactor(treeview): use display instead of visibility

Addresses #2201

* refactor(treeview): remove negative block padding and fixes

Simplify block spacing to remove negative margin and negative offset.
Previously the indicator was displayed within the line-height, and had
negative spacings applied to re-align it and prevent it from making the
link taller, which was a bit overcomplicated and brittle.

Thumbnail:
Makes some adjustments to align this with the design. Changes the
thumbnail example to layer variant with is-selected to match with the
design file. This previously was showing the focused state for selected,
which has different visuals.

Standalone/Detached:
Standalone corner radius styles were not being applied and are now
fixed. Standalone was renamed to "detached" per the beta guidelines for
Thumbnail, so thatclass has been renamed and noted in the migration
guide.

Also simplifies styles for both the thumbnail and detached variants, to
just be changes in custom property values.

* fix(treeview): refactor sections to ensure valid markup

Previously the section headings were a div as a child of a ul, which is
not valid markup. This changes the markup used for the sections so that
the headings are now a child of an li that have a new
spectrum-TreeView-section class.

* fix(treeview): thumbnail sizing

Correct height of tree view items at various t-shirt sizes by a few
pixels, for the thumbnail variant, to match design file. Also adjusts
storybook so that the numbered thumbnail sizes are passed through based
on the t-shirt size.

* fix(treeview): thumbnail block size adjustments for scale

The changes in block size when using a thumbnail were slightly different
depending on scale medium or large, and the thumbnail sizes used on the
design file were different (e.g. 200 size for medium).

- Size small treeview items are taller when they have a thumbnail.
- Size medium + large scale (mobile) are 2px taller when they have
  a thumbnail.
- Size large and extra large treeview items measure the same height with
  or without a thumbnail.

* fix(treeview): use larger line-height for item label

Helps to avoid issue with ascenders and descenders cutting off due to
overflow:hidden which is needed for text-overflow:ellipsis to function.
Gives the text a little more breathing room. Exact line-height is no
longer necessary for layout since top and bottom padding were removed in
the refactor.

---------

Co-authored-by: Melissa Thompson <[email protected]>

Author: jawinn