[DRAFT] Prototype: Tree & Accordion with Collapse motion

[robertpenner]

Preview Storybook

• Tree
• Accordion

Transition states and height

• The most complex part of the implementation is transitioning the height (max-height) between states.
  • Sometimes it needs to be zero
  • Sometimes blank
  • Sometimes a value calculated from the height of the content at the time
• React Transition Group provides much of the state management, but there's also a need to schedule a height change one frame after starting the exit transition.
• This diagram explains the flow of states and associated effects on the height.

Source for this statechart

Previous Behavior

• The Tree and Accordion components expand and collapse instantly without a smooth transition.
• There is no reusable "collapse transition" that can quickly add motion to a component.

New Behavior

• A reusable <Collapse> component (a "motion molecule") provides an expand/collapse transition.
• Adding the motion to Tree and Accordion with <Collapse> is simple and concise (essentially one line).
• The transition takes place over 200ms.
• The chevron rotates smoothly 90 degrees.
• Content is revealed by height expanding and opacity fading in.
• Content is hidden by height contracting and opacity fading out.

Future Work

• [x] Find a home for Collapse source instead of putting it inside the Tree folder.
• [x] Storybook for Collapse with more content examples.
• Expose the duration for the chevron rotation; it's currently hard-coded to 200ms.
• [x] Define a rendering performance test to verify this approach is fast enough.

Possible Future Work

• [x] Eliminate the wrapper <div> and apply the transition styles directly when children is a single child node.
  • Q. Does the wrapper affect accessibility? Tabbing and open/close with keyboard seems to be the same.
• ~Use Griffel instead of inline styles.~
• Try CSS keyframes (see if it makes the height management easier or harder).
• [x] Implement with useMotion to compare.
• [x] Implement with our atomic motion preview that uses the Web Animations API.
• Automated tests.

Related Issue(s)

• Fixes #(TBD)

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d8e2ea15841da506e06d1a6d8f5d95257b7bba68:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration