Skip to content

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

Draft
dmytrokirpa wants to merge 8 commits intomicrosoft:masterfrom
dmytrokirpa:feat/headless-dialog
Draft

feat(react-headless-components-preview): add Dialog component#35996
dmytrokirpa wants to merge 8 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
64.854 kB
19.302 kB
77.714 kB
23.366 kB
12.86 kB
4.064 kB

🤖 This report was generated against 3d2d9bf0e07e05f2320e5400efe6c01759426534

@github-actions
Copy link
Copy Markdown

Pull request demo site: URL

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.

2 participants