feat(react-headless-components-preview): add drawer components by dmytrokirpa · Pull Request #36043 · microsoft/fluentui

dmytrokirpa · 2026-04-25T07:57:21Z

This PR adds new Drawer components to the @fluentui/react-headless-components-preview package, providing a headless implementation for drawers including overlay and inline variants. It introduces the main Drawer component along with supporting subcomponents, updates the package's API and dependencies, and adds comprehensive tests and Cypress integration tests to ensure correct behavior and accessibility.

Preview:

https://fluentuipr.z22.web.core.windows.net/pull/36043/public-docsite-v9-headless/storybook/index.html?path=/docs/headless-components-drawer--docs

Demo:

Screen.Recording.2026-04-29.at.22.11.52.mov

github-actions · 2026-04-25T08:04:04Z

Pull request demo site: URL

github-actions · 2026-04-28T13:10:35Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-headless-components-preview` react-headless-components-preview: entire library	`85.341 kB` `25.007 kB`	`90.526 kB` `26.248 kB`	`5.185 kB` `1.241 kB`

_{🤖 This report was generated against f4ba0c3cbba6b1b985f3824e839d3bf93027987a}

Co-authored-by: Copilot <copilot@github.com>

Copilot

Pull request overview

This PR adds a new headless Drawer API surface to @fluentui/react-headless-components-preview, including overlay (native <dialog>-based) and inline variants, along with Storybook docs and test coverage.

Changes:

Added Drawer, OverlayDrawer, InlineDrawer and related subcomponents (Header/Body/Footer/Title/Navigation) with a new drawer export entrypoint.
Introduced Storybook stories + docs markdown for the new Drawer components.
Added unit tests and Cypress coverage for behavior and accessibility-related semantics.

Reviewed changes

Copilot reviewed 51 out of 51 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
packages/react-components/react-headless-components-preview/stories/src/Drawer/index.stories.tsx	Registers Drawer stories + docs description for Storybook.
packages/react-components/react-headless-components-preview/stories/src/Drawer/InlineDrawer.stories.tsx	Adds an inline drawer example story.
packages/react-components/react-headless-components-preview/stories/src/Drawer/DrawerDescription.md	Adds docs blurb for Drawer.
packages/react-components/react-headless-components-preview/stories/src/Drawer/DefaultDrawer.stories.tsx	Adds an overlay drawer example story.
packages/react-components/react-headless-components-preview/library/src/drawer.ts	Adds public exports for the new `drawer` entrypoint.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/useDrawer.ts	Implements `Drawer` wrapper that selects inline vs overlay variant.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/renderDrawer.tsx	Renders the selected Drawer variant.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/index.ts	Barrel exports for Drawer + subcomponents.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/OverlayDrawer/useOverlayDrawer.ts	Creates state for native-dialog-based overlay drawer.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/OverlayDrawer/renderOverlayDrawer.tsx	Reuses `@fluentui/react-drawer` overlay render helper.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/OverlayDrawer/index.ts	Barrel exports for `OverlayDrawer`.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/OverlayDrawer/OverlayDrawer.types.ts	Defines headless overlay drawer types (Dialog-composed).
packages/react-components/react-headless-components-preview/library/src/components/Drawer/OverlayDrawer/OverlayDrawer.tsx	OverlayDrawer component wiring hook + render.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/InlineDrawer/useInlineDrawer.ts	Creates state for inline drawer (currently based on react-drawer base hook).
packages/react-components/react-headless-components-preview/library/src/components/Drawer/InlineDrawer/renderInlineDrawer.tsx	Reuses `@fluentui/react-drawer` inline render helper.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/InlineDrawer/index.ts	Barrel exports for `InlineDrawer`.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/InlineDrawer/InlineDrawer.types.ts	Defines headless inline drawer types + added data attrs.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/InlineDrawer/InlineDrawer.tsx	InlineDrawer component wiring hook + render.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderTitle/useDrawerHeaderTitle.ts	Adapts DrawerHeaderTitle heading id to headless Dialog context.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderTitle/renderDrawerHeaderTitle.ts	Reuses `@fluentui/react-drawer` title render helper.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderTitle/index.ts	Barrel exports for `DrawerHeaderTitle`.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderTitle/DrawerHeaderTitle.types.ts	Type re-exports for DrawerHeaderTitle.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderTitle/DrawerHeaderTitle.tsx	DrawerHeaderTitle component wiring hook + render.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderNavigation/useDrawerHeaderNavigation.ts	Reuses `@fluentui/react-drawer` navigation hook.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderNavigation/renderDrawerHeaderNavigation.ts	Reuses `@fluentui/react-drawer` navigation render helper.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderNavigation/index.ts	Barrel exports for `DrawerHeaderNavigation`.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderNavigation/DrawerHeaderNavigation.types.ts	Type re-exports for DrawerHeaderNavigation.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeaderNavigation/DrawerHeaderNavigation.tsx	DrawerHeaderNavigation component wiring hook + render.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeader/useDrawerHeader.ts	Reuses `@fluentui/react-drawer` header hook + adds data attr.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeader/renderDrawerHeader.ts	Reuses `@fluentui/react-drawer` header render helper.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeader/index.ts	Barrel exports for `DrawerHeader`.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeader/DrawerHeader.types.ts	Type re-exports for DrawerHeader + added data attr.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerHeader/DrawerHeader.tsx	DrawerHeader component wiring hook + render.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerFooter/useDrawerFooter.ts	Reuses `@fluentui/react-drawer` footer hook + adds data attr.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerFooter/renderDrawerFooter.ts	Reuses `@fluentui/react-drawer` footer render helper.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerFooter/index.ts	Barrel exports for `DrawerFooter`.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerFooter/DrawerFooter.types.ts	Type re-exports for DrawerFooter + added data attr.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerFooter/DrawerFooter.tsx	DrawerFooter component wiring hook + render.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerBody/useDrawerBody.ts	Reuses `@fluentui/react-drawer` body hook.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerBody/renderDrawerBody.ts	Reuses `@fluentui/react-drawer` body render helper.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerBody/index.ts	Barrel exports for `DrawerBody`.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerBody/DrawerBody.types.ts	Type re-exports for DrawerBody.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/DrawerBody/DrawerBody.tsx	DrawerBody component wiring hook + render.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/Drawer.types.ts	Defines public `DrawerProps` / `DrawerState`.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/Drawer.tsx	Implements `Drawer` component wrapper.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/Drawer.test.tsx	Adds unit tests for Drawer variants and Dialog naming.
packages/react-components/react-headless-components-preview/library/src/components/Drawer/Drawer.cy.tsx	Adds Cypress coverage for core scenarios + a11y semantics.
packages/react-components/react-headless-components-preview/library/package.json	Adds dependency + export map for `./drawer`.
packages/react-components/react-headless-components-preview/library/etc/drawer.api.md	Adds API extractor report for new entrypoint.
packages/react-components/react-headless-components-preview/library/bundle-size/AllComponents.fixture.js	Includes `drawer` entrypoint (and `card`) in bundle-size fixture.
change/@fluentui-react-headless-components-preview-338990b0-7296-45e7-9d92-2664aa67375c.json	Beachball change file for the new feature.

dmytrokirpa · 2026-04-30T09:35:55Z

@copilot apply changes based on the comments in this thread

…er components - Update @fluentui/react-drawer dep version to ^9.12.0 - Fix className strings with extra single quotes in stories - Change unmountOnClose default to true in useOverlayDrawer - Fix InlineDrawer renderInlineDrawer to handle unmountOnClose properly - Add guard for empty dialogTitleId in useDrawerHeaderTitle - Change DrawerProps to proper discriminated union - Exclude type prop from spread in useDrawer" Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/823f5537-f61d-425d-b274-f2dff491d2ca Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>

Copilot · 2026-04-30T09:50:17Z

@copilot apply changes based on the comments in this thread

Applied all changes from the review thread in commit e83ef2f:

package.json: Updated @fluentui/react-drawer to ^9.12.0
DefaultDrawer.stories.tsx / InlineDrawer.stories.tsx: Fixed className strings — removed wrapping single quotes inside template literals so Tailwind classes resolve correctly
useOverlayDrawer.ts: Changed unmountOnClose default to true (aligns with @fluentui/react-drawer defaults and tests)
renderInlineDrawer.tsx: Replaced the cast of renderInlineDrawer_unstable with a custom render that returns null when unmountOnClose=true and open=false, properly handling the unmount behavior
useDrawerHeaderTitle.ts: Added a guard to only set id on the heading when dialogTitleId is non-empty — prevents id="" on headings in inline drawer contexts
Drawer.types.ts: Changed DrawerProps to a proper discriminated union keyed by type, preventing overlay-only props from being passed with type="inline" and vice versa
useDrawer.ts: Destructures type before spreading props to prevent forwarding it as an unknown prop to the underlying InlineDrawer/OverlayDrawer components

Copilot · 2026-04-30T15:10:21Z

@dmytrokirpa I've opened a new pull request, #36083, to work on those changes. Once the pull request is ready, I'll request review from you.

…fixture, add DrawerHeaderTitle test - Remove Card import from AllComponents.fixture.js (belongs in separate PR) - Add unit test to verify DrawerHeaderTitle heading does not get id="" when outside Dialog context Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>

…nent type re-exports Use direct re-exports instead of import-alias-then-re-export pattern in: - DrawerBody.types.ts - DrawerHeaderNavigation.types.ts - DrawerHeaderTitle.types.ts - DrawerFooter.types.ts (Slots/Props direct, State keeps extension) - DrawerHeader.types.ts (Slots/Props direct, State keeps extension) - InlineDrawer.types.ts (Slots/Props direct, State keeps extension) Agent-Logs-Url: https://github.com/microsoft/fluentui/sessions/ffc48e67-9724-4369-9889-3fd8627c2426 Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>

dmytrokirpa requested a review from a team as a code owner April 25, 2026 07:57

dmytrokirpa marked this pull request as draft April 25, 2026 07:58

microsoft-github-policy-service Bot added the PR: API Modified label Apr 25, 2026

dmytrokirpa self-assigned this Apr 27, 2026

dmytrokirpa changed the base branch from drawer-base-hooks to master April 28, 2026 13:04

dmytrokirpa force-pushed the headless-drawer-components branch from f67aaa8 to feab03f Compare April 28, 2026 13:06

github-actions Bot reviewed Apr 28, 2026

View reviewed changes

Comment thread change/@fluentui-react-drawer-2c8d4430-a744-43ff-8fd5-3e4b4f6c3a7a.json

dmytrokirpa force-pushed the headless-drawer-components branch from feab03f to a7821bb Compare April 29, 2026 17:35

feat(react-headless-components-preview): add drawer components

03aedb1

dmytrokirpa force-pushed the headless-drawer-components branch from a7821bb to 03aedb1 Compare April 29, 2026 19:50

dmytrokirpa added Component: Drawer The Fluent v9 Drawer component Headless labels Apr 29, 2026

dmytrokirpa added 3 commits April 29, 2026 22:09

update examples

bdcc04b

update api snapshot

8bbcf88

add Card and Drawer imports to bundle size fixture

9aec711

dmytrokirpa marked this pull request as ready for review April 29, 2026 20:20

dmytrokirpa and others added 2 commits April 30, 2026 00:13

fix lint and type-check issues

3074d83

fix e2e

e11fd0e

Co-authored-by: Copilot <copilot@github.com>

dmytrokirpa requested review from Copilot and mainframev April 30, 2026 08:37

Copilot started reviewing on behalf of dmytrokirpa April 30, 2026 08:38 View session

Copilot AI reviewed Apr 30, 2026

View reviewed changes

Copilot started work on behalf of dmytrokirpa April 30, 2026 09:36 View session

Copilot finished work on behalf of dmytrokirpa April 30, 2026 09:51

fixup

4b76a45

Merge branch 'master' into headless-drawer-components

8a61a7b

dmytrokirpa requested a review from Hotell April 30, 2026 12:59

Hotell approved these changes Apr 30, 2026

View reviewed changes

Copilot AI mentioned this pull request Apr 30, 2026

fix(react-headless-components-preview): add Card to bundle-size fixture #36083

Merged

Copilot started work on behalf of dmytrokirpa April 30, 2026 15:10 View session

Copilot finished work on behalf of dmytrokirpa April 30, 2026 15:17

Copilot started work on behalf of dmytrokirpa April 30, 2026 15:48 View session

Copilot finished work on behalf of dmytrokirpa April 30, 2026 15:58

update api

309b6ac

dmytrokirpa enabled auto-merge (squash) April 30, 2026 16:19

dmytrokirpa merged commit c7766b6 into master Apr 30, 2026
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(react-headless-components-preview): add drawer components#36043

feat(react-headless-components-preview): add drawer components#36043
dmytrokirpa merged 12 commits intomasterfrom
headless-drawer-components

dmytrokirpa commented Apr 25, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 25, 2026

Uh oh!

github-actions Bot commented Apr 28, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dmytrokirpa commented Apr 30, 2026

Uh oh!

Copilot AI commented Apr 30, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Apr 30, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

dmytrokirpa commented Apr 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 25, 2026

Uh oh!

github-actions Bot commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dmytrokirpa commented Apr 30, 2026

Uh oh!

Copilot AI commented Apr 30, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI commented Apr 30, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dmytrokirpa commented Apr 25, 2026 •

edited

Loading

github-actions Bot commented Apr 28, 2026 •

edited

Loading