Dialog

[varholak-peter]

Preparation:

• Started prep
• Open UI Research complete
  • Dialog OpenUI
• Comparison on v8 and v0 complete
• Gather open GitHub issues related to component
  v8:
  TalkBack focus moves out of the dialog box while the dialog remains expanded. #21859
  Narrator does not announce last button in Dialog #20988
  Dialog UX is cropped after zooming at 400%. #20285
  Fluent Dialog not behaving correctly for RTL direction #19766
  Graduate enableAriaHiddenSiblings flag for modalization #19610
  Screen reader is not announcing body content of dialog in windows 11 #19593
  Dialog looses state on resize #19143
  React DND Drag and Drop Touch Events not working inside Dialog and Modal components #12081
  v7:
  Screen reader on Dialog reads out twice for most things #19860
• react-* package scaffolded
  • react-dialog
• Component Spec authored and reviewed
  • react-dialog: spec #21992
• Deliverable: Reviewed component spec

Implementation

[link to react-* package folder]

• Started impl feat(react-dialog): Dialog initial implementation #23933
• Implement component feat(react-dialog): Dialog initial implementation #23933
• Add storybook stories
• Using hooks feat(react-dialog): Dialog initial implementation #23933
• Using makeStyles feat(react-dialog): Dialog initial implementation #23933
• Respects Figma tokens (and using provider)
• Respects API principles, shorthands and slots handling feat(react-dialog): Dialog initial implementation #23933
• No dependency on v0/v7
• Add tests - Conformance, Unit, and VR
  • Bundle size fixtures
  • Conformance tests (TODO: Conformance tests for triggers #21670)
  • Unit tests
  • VR tests chore(react-dialog): adds VR tests for Dialog components #24978
  • Accessibility behavior tests
• Write README.md covering basic usage
• Write initial MIGRATION.md guide (include v8 and v0)
• Set component ownership in CODEOWNERS
• Deliverable: Experimental component ready for partner use, component re-exported in react-components

Validation

• Started validating
• Add and validate in UI Builder
• Add and validate in docs site
• Validate with token pipeline
• Validate in product
• Finalize migration guide
  • Author codemods
• Deliverable: Preview component ready for broader/3rd party use

[layershifter]

@bsunderhus is there an issue to implement scroll lock in Dialog? (something like https://github.com/theKashey/react-remove-scroll)

[bsunderhus]

@bsunderhus is there an issue to implement scroll lock in Dialog? (something like https://github.com/theKashey/react-remove-scroll)

There isn't at the moment, we could track this possibility! @jurokapsiar

[layershifter]

@bsunderhus is there an issue to implement scroll lock in Dialog? (something like https://github.com/theKashey/react-remove-scroll)

There isn't at the moment, we could track this possibility! @jurokapsiar

FYI: We have it in v0 (https://fluentsite.z22.web.core.windows.net/0.63.0/components/dialog/definition) so it's about feature parity.

[bsunderhus]

FYI: We have it in v0 (https://fluentsite.z22.web.core.windows.net/0.63.0/components/dialog/definition) so it's about feature parity.

#24355