feat(Drawer): Add full-size drawer

[rebeccaalpert]

Use isViewport and place drawer below Page to achieve a full-height drawer that allows Page content to scroll behind it.

Fixes #12635

Summary by CodeRabbit

• New Features

  • Added beta support for viewport-level drawers that fill the browser viewport and overlay page content.
  • Added an interactive example demonstrating expandable, resizable viewport drawers with close and resize interactions.

• Bug Fixes

  • Improved drawer resizing behavior across viewport and standard drawer layouts.
  • Prevented errors when resizing drawer content without a provided content container.

• Documentation

  • Clarified that drawer content may be omitted when an empty content container is desired.
  • Added documentation for viewport drawer usage.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 26c2de35-6be2-48ed-a2fa-4f4cc2da073b

📥 Commits

Reviewing files that changed from the base of the PR and between 605a877 and 0cbcbce.

📒 Files selected for processing (8)

• packages/react-core/package.json
• packages/react-core/src/components/Drawer/examples/Drawer.md
• packages/react-core/src/demos/Drawer/Drawer.md
• packages/react-core/src/demos/Drawer/examples/DrawerViewport.tsx
• packages/react-docs/package.json
• packages/react-icons/package.json
• packages/react-styles/package.json
• packages/react-tokens/package.json

🚧 Files skipped from review as they are similar to previous changes (4)

• packages/react-tokens/package.json
• packages/react-docs/package.json
• packages/react-core/src/components/Drawer/examples/Drawer.md
• packages/react-core/package.json

Included review availability: Your plan provides up to 4 included reviews per hour; 2 remain after this review.

---

Walkthrough

The Drawer component adds the beta isViewport prop, supports resizing without drawer content, adds regression tests, provides a viewport demo, updates Drawer documentation, and aligns package prerelease versions.

Changes

Drawer viewport support

Layer / File(s)	Summary
Viewport prop and context wiring packages/react-core/src/components/Drawer/Drawer.tsx, packages/react-core/src/components/Drawer/DrawerContent.tsx	The Drawer API and context now carry isViewport. The Drawer applies the viewport modifier. Drawer content documentation states that children are optional.
Viewport sizing and regression coverage packages/react-core/src/components/Drawer/DrawerPanelContent.tsx, packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx	Resize calculations select drawerRef for viewport drawers and drawerContentRef otherwise. Missing references return a safe size. Tests cover the modifier and resizing without drawer content.
Viewport example and package alignment packages/react-core/src/demos/Drawer/Drawer.md, packages/react-core/src/demos/Drawer/examples/DrawerViewport.tsx, packages/react-core/src/components/Drawer/examples/Drawer.md, packages/*/package.json	The demo shows a resizable viewport Drawer after Page. Drawer documentation is updated, and prerelease package references are advanced.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Page
  participant Drawer
  participant DrawerPanelContent
  participant User
  Page->>Drawer: renders viewport Drawer
  Drawer->>DrawerPanelContent: provides isViewport and refs
  User->>DrawerPanelContent: resizes panel
  DrawerPanelContent->>Drawer: measures viewport drawer reference
  User->>Drawer: closes drawer

Loading

Merge Risk: ⚪ Minimal · up to 0cbcb

The Drawer viewport support, optional content handling, resizing safeguards, tests, and example are aligned with the stated feature behavior. No actionable merge risk remains.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The functional changes are in scope. However, the trailing-comma-only edit in Drawer.md and several package version bumps are not required by the linked issue based on the provided context.	Remove the unrelated formatting change and package version bumps, or document why each change is required for the viewport Drawer feature.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: adding full-size Drawer support.
Linked Issues check	✅ Passed	The changes implement the viewport Drawer prop, support optional Drawer content during resizing, add the required Page placement example, and add tests for issue #12635.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 6…

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}