Drawer

[marcosmoura]

Preparation

• Open UI Research
  • Drawer component - Research #26479
• Issues related to component:
  • RFC: Component CSS Transitions/Animations on mount/unmount #27328 (needed to add transition support for the Drawer)
• Component Spec authored and reviewed
  • docs(react-drawer): Component Spec #27433

Implementation

• Component implementation
  • feat(react-drawer): use dialog component and implement size prop #27431
  • feat: generate new component structure for react-drawer #26554
  • feat(react-drawer): create DrawerBody component #27581
  • feat(react-drawer): create DrawerHeader component #27582
  • feat(react-drawer): create DrawerFooter component #27583
  • feat(react-drawer): split Drawer into subcomponents for better composition #27830
• Initial conformance and unit tests (validate basic functionality)
• Initial documentation
  • Storybook stories
  • README.md covering basic usage
  • MIGRATION.md guide (include v8 and v0)
• Component released as unstable from @fluentui/react-components/unstable

Validation

• Add tests
  • Unit and conformance tests
  • E2E tests
    • test(react-drawer): add e2e for base drawer components #29029
  • VR tests
  • Bundle size fixtures
  • Performance test scenario
  • Accessibility behavior tests
  • Run manual accessibility tests
• Validate with partners
• Run a bug bash with other FUI crews
  • Drawer should use makeResetStyles for base styles #29205
  • Drawer with modalType="alert" should be dismissible with Escape #29207
  • Drawer has no visible border in windows high contrast mode #29206
  • Bug: "open right" slides the entire page over #29241
  • Bug: Nothing happens in "Separator" story in iOS Safari #29245
  • Bug: close button not visible in iOS Safari "With Title" story #29243
  • Bug: "scroll" story overflows and is clipped in iOS Safari #29244
  • Inline drawer animation causes content to jump #29208
  • Doc: typos and re-wording suggestions #29238
  • Drawer has no visible border in windows high contrast mode #29206
• Finalize documentation
  • Review and add any missing storybook stories
  • Finalize migration guide
• Component released as stable from @fluentui/react-components
  • Ensure exports are removed from from @fluentui/react-components/unstable
  • In package.json: Remove the alpha/beta tag from the version number in package.json
  • In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"

[ahmed-adly-khalil]

@marcosmoura we are desperate for a drawer, any luck that it's available in alpha / beta branch that we can use? 🙏

[marcosmoura]

@ahmed-adly-khalil
The drawer will be soon as unstable. The next version of Fluent V9 will include all preview components for Drawer. Let me know if you have any questions about it.

[liuyulvv]

@marcosmoura How to add opening and closing animation for Drawer?

[briandrouin]

test

[gouttierre]

Shipped to Stable