Tree View Component #1

[orion-cengage]

Figma: https://www.figma.com/file/z2H2qv9iYQX942LqToCuQE/Components---Data-Display?node-id=503%3A15601&t=BdQKFJAZMqZ5ovGK-1

Inspiration:

Material UI (MUI): https://material-ui.com/components/tree-view/
Base Web: https://baseweb.design/components/tree-view/
Carbon: https://carbondesignsystem.com/components/tree-view/usage/
Telerik: https://www.telerik.com/kendo-angular-ui/components/treeview/checkboxes/#toc-lazily-loaded-nodes

Requirements

• Component can support unlimited number of nodes (branch and leaf nodes)
  -- This will probably cause performance issues if there are too many. Not sure how much is too much. Is there someway to protect the UI from this?
• Each node must have a text label
  -- Text label can wrap if there isn't enough room
• Each node can display an optional icon to the left of the label
  -- Icons must be on or off for ALL nodes.
• Nodes change background color when you hover over them – neutral900, opacity 5%

• Branch nodes can be expanded and collapsed
  -- You can expand or collapse the node by clicking/tapping on the arrow button
  -- There should be an option to have any branch node expanded by default
  -- The width of each node extends to the edges of the container the Tree View is inside, so each node will get the appropriate amount of padding on the left to ensure each level is properly aligned
  --- Branch node - 1st level has 8px of left padding. Each level after that adds 24px of left padding.
  ---- 8, 32, 56, 80, 104, etc.
  --- Leaf node - 1st level has 40px of left padding. Each level after that adds 24px of left padding.
  ---- 40, 64, 88, 112, 136, etc.

• By default, the ability to select an item is off
• There will be an option to select one item at a time.
  -- The style of the select item changes
  --- Background = neutral900, opacity 8%
  --- Left border, 4px, primary500

• There will be an option to select multiple at one time
  -- This adds a checkbox to each node
  -- Branch node checkboxes will select/deselect all children and can exist in an indeterminate state if some children are not selected.
  -- Clicking/tapping on the checkbox and everything to the right of it selects the item.

Dark Mode / Inverse

• The component has inverse styles like other components
  -- Checkboxes use the inverse checkbox styles (white)
  -- Other icons and text label also change to white
  -- Hover = background changes to neutral900, 17% opacity
  -- Selected = background changes to neutral900, 30% opacity
  -- 4px left border changes to tertiary500

Accessibility
There are accessibility standards already defined by the W3C we need to follow: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

Keyboard controls

• Tab key moves to the tree and then out of the tree

Single-select and Multi-select are essentially the same for their keyboard controls

• Up/down arrows travel to previous/next nodes
• Space/Enter selects node (checks box on multi)
• Left/right arrows close/open parent nodes

We only need to show focus on the entire item, not any individual pieces like checkboxes or arrows.

[silvalaura]

Accessibility reference: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/

Laura's notes:

[silvalaura]

More Laura notes:

• hasIcons: boolean. will have default icons (noted above) for branches and leaves, but can be customized. this should prevent some branches having icons and leaves not having them
• isSelectable: single, multi (checkboxes), off (default)
• On isSelectable single, will need an event so adopters can hook into it
• Make an example for a zebra view with items on the right, and examples of how it could be restyled
• Examples to build: filters/batch edit (selectable) and document selector
• Make sure all the examples are complex (more than one level)
• Make an example thrown inside a Container (we won't hardcode a background)
• Consider building something like this https://www.oracle.com/webfolder/technetwork/jet-830/jetCookbook.html?component=treeView&demo=performance to test the different depths

[silvalaura]

Full requirements list: https://laura-silva.notion.site/TreeView-1fa9fc9d40654f7dba969a7fbaa492c6

[orion-cengage]

Bugs:

• Inverse, hover state is too light and barely visible. The background color needs to be (0, 0, 0, .20) instead of ".05)
• Inverse, focus state, the outline needs to be our inverse focus color like on other inputs
• Based on feedback from Perkins on other components, we need to hide the actual svgs for icons from screen readers using aria-hidden=true. See Dropdown - Hide SVGs from screen readers #1250 for example.
• When selection is turned off, we still need a hover state on nodes.

[silvalaura]

QA notes from Orion: https://www.notion.so/Treeview-QA-bf1bd682085942acb29712cd30bb3277

[orion-cengage]

QA complete. I reviewed:

• Styles
• basic aria attributes
• keyboard controls
• focus
• Dev docs

[chris-cedrone-cengage]

Within tree-view.mdx, I'd change <TreeItem label={<>Art History in the 21st Century</>}itemId="I-intro"> to <TreeItem label={<>Art History in the 21st Century</>}itemId="I-art"> so that the tab navigation doesn't go into the tree.