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"