Side drawer refresh, some notes

[olaf-k]

• lots of different widgets in the wild
  Bootstrap's offcanvas
  defined as a sidebar that can appear left/right but also top/bottom
  can be modal (w/ or w/out light dismiss) or not, but does not push content
  has role=dialog but does not use a <dialog>.
  Material 3 nav drawer
  has similar features as our SD: can be permanent, switched off, modal or not.
  no web implementation / mobile-focused
  Nothing in Carbon
  Carbon proposes a UI shell concept for devs to embed sub-apps into a single one > split into header/left panel/right panel
  the panels are similar to our Nav component and does not seem to offer show/hide or modal functionality
  Nothing gov.uk
  Many design systems propose a Nav like component but drawers are more rare
• SD as a container for the main content > semantically strange as its name imply it's a temporary sliding component (drawer) located on the side of the screen.
• SD behaviors: push content / hover over content / hover over content as a modal
• in our doc site: used as a simple nav aside that can be hidden (only useful for mobile)

Aside from the behavior details listed above, there are two implementation issues with using the <dialog> component:

• [minor] The default CSS applied to the dialog is made to make it look like... a dialog. Converting it to a side container means resetting margins, paddings, border and height properties. It's not a complex thing to do but is generally a sign that you're trying to swim against the flow.
• [major] The dialog API is fundamentally imperative and relies on the show and showModal methods. Thereis a declarative way to change the state using the open attribute but: a) this is discouraged by MDN and b) there is no modal (or open-modal) attribute.
  

Ultimately, the current dialog API drives its dynamic nature: a component that's hidden by default and displayed punctually based on user interaction. This is a small departure from our side drawer, which has a more permanent nature and can optionally be discarded.

[yinonov]

https://carbondesignsystem.com/components/UI-shell-left-panel/usage/

[olaf-k]

carbondesignsystem.com/components/UI-shell-left-panel/usage

I know I should've put my ongoing notes somewhere more private before they're complete 😁

yes I saw the left-panel and hesitated but it is documented as an optional part of the UI shell, not as an individual component.

[yinonov]

makes sense to document it as such