Core container/sheet components

[HadrienGardeur]

Most of our affordances will use a shared container component with:

• a sticky header containing:
  • a title
  • actions as defined in Support for actions #11, including actions that could open a menu component
  • with the close action showing up as one of them
• and a scrollable body

In this Epic, we'll implement this component in all of its variants which include:

• Support for a popover sheet #41
• Support for a full screen sheet #47
• Support for a docked sheet #42
• Support for a draggable bottom sheet
• Improvements to the menu component

To decide which variant gets used, we'll rely on windows size classes, as defined in #28.

We'll use our current user settings to illustrate all of this behavior:

• with "Display settings" as a title
• and the following actions:
  • overflow menu (hidden for the compact size class):
    • docked left
    • docked right
    • modal
  • close

For this affordance:

• we'll default to a draggable bottom sheet for the compact size class, that can be dragged up to turn into a full screen sheet
• while the medium and expanded size classes will default to the modal sheet

For the purpose of illustrating all of our components, we'll temporarily allow this affordance to be docked as well.