Skip to content

feat(react-headless-components-preview): add Dialog component#35996

Merged
dmytrokirpa merged 10 commits intomicrosoft:masterfrom
dmytrokirpa:feat/headless-dialog
Apr 23, 2026
Merged

feat(react-headless-components-preview): add Dialog component#35996
dmytrokirpa merged 10 commits intomicrosoft:masterfrom
dmytrokirpa:feat/headless-dialog

Conversation

@dmytrokirpa
Copy link
Copy Markdown
Contributor

@dmytrokirpa dmytrokirpa commented Apr 16, 2026

Previous Behavior

n/a

New Behavior

This PR introduces the initial headless Dialog component API to the Fluent UI React Headless Components Preview package. It adds all core Dialog primitives (such as Dialog, DialogSurface, DialogHeader, DialogBody, DialogActions, DialogTitle, and DialogTrigger), their associated state hooks, context types, and render functions. The update also includes a comprehensive spec document for Dialog, a Cypress configuration, and a Jest test shim for the <dialog> element.

Headless Dialog Component API

  • Added all core Dialog primitives (Dialog, DialogSurface, DialogHeader, DialogBody, DialogActions, DialogTitle, DialogTrigger) with their respective prop types, state types, context types, and slot definitions to the public API (etc/react-headless-components-preview.api.md).
  • Implemented corresponding state hooks (e.g., useDialog_unstable, useDialogSurface_unstable, etc.) and render functions (e.g., renderDialog_unstable, renderDialogSurface_unstable, etc.) for each Dialog primitive.
  • Introduced Dialog-specific event types and handlers, such as DialogOpenChangeData, DialogOpenChangeEventHandler, and modal type definitions.

Documentation

  • Added a detailed Dialog headless specification (docs/dialog-spec.md) describing composition, props, states, events, accessibility, controlled/uncontrolled usage, RTL support, and more.

Testing & Tooling

  • Added a Cypress configuration file to enable E2E testing for the package (cypress.config.ts).
  • Added a Jest test shim for the <dialog> element to support Dialog component tests in JSDOM environments (config/tests.js).

Related Issue(s)

@dmytrokirpa dmytrokirpa self-assigned this Apr 16, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 16, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-headless-components-preview
react-headless-components-preview: entire library
74.462 kB
21.666 kB
84.122 kB
24.635 kB
9.66 kB
2.969 kB

🤖 This report was generated against faf6311ea1b5dd72b70c4acb9356e60c8d83f6ff

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

@dmytrokirpa dmytrokirpa marked this pull request as ready for review April 19, 2026 11:32
@dmytrokirpa dmytrokirpa requested review from a team as code owners April 19, 2026 11:32
@dmytrokirpa dmytrokirpa requested a review from mainframev April 20, 2026 09:44
@dmytrokirpa dmytrokirpa force-pushed the feat/headless-dialog branch from 2ae0c8b to 669737a Compare April 23, 2026 11:21
@dmytrokirpa dmytrokirpa enabled auto-merge (squash) April 23, 2026 11:22
@dmytrokirpa
Copy link
Copy Markdown
Contributor Author

UPD: Removed custom useFocusScope utility for now, as there is a chance we'll be using Tabster's logic for that.

@dmytrokirpa dmytrokirpa merged commit 4756919 into microsoft:master Apr 23, 2026
11 checks passed
robertpenner pushed a commit to robertpenner/fluentui that referenced this pull request Apr 23, 2026
…oft#35996)

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Dmytro Kirpa <dmytrokirpa@users.noreply.github.com>
Co-authored-by: Copilot <copilot@github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants