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 a beta viewport mode for drawers, allowing them to remain fixed and fill the viewport.
  • Added an interactive viewport drawer example with resizing, focus management, and page integration.

• Bug Fixes

  • Improved drawer resizing behavior when content is omitted.

• Documentation

  • Clarified that drawer content is optional.
  • Documented the new viewport drawer option and usage example.

• Tests

  • Added coverage for viewport mode and keyboard interaction without drawer content.

[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: 1328138c-9fed-4272-b156-2646f6d1954d

📥 Commits

Reviewing files that changed from the base of the PR and between 7a5801e and 605a877.

⛔ Files ignored due to path filters (1)

• yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (3)

• packages/react-core/package.json
• packages/react-docs/package.json
• packages/react-icons/package.json

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

• packages/react-core/package.json

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

---

Walkthrough

The Drawer component adds the beta isViewport prop, updates resizing for drawers without content, adds tests, documents viewport mode, and provides a viewport example. Package references are updated.

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	Adds isViewport to the Drawer API and context, applies the viewport modifier, and documents optional drawer content.
Viewport sizing and regression coverage packages/react-core/src/components/Drawer/DrawerPanelContent.tsx, packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx	Selects drawerRef for viewport sizing and retains drawerContentRef for other drawers. Tests cover the modifier and resizing without drawer content.
Viewport example and package alignment packages/react-core/src/components/Drawer/examples/*, packages/*/package.json	Adds the viewport documentation and example. Updates package versions and related icon dependencies.

Priority: ⬇️ Low

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

Merge Risk: ⚪ Minimal · up to 605a8

This adds beta viewport Drawer positioning and supports resizable drawers with optional content. The provided implementation, example, and regression coverage indicate no remaining merge-blocking risk.

Sequence Diagram(s)

sequenceDiagram
  participant Page
  participant Drawer
  participant DrawerContext
  participant DrawerPanelContent
  participant DrawerElement
  Page->>Drawer: renders with isViewport
  Drawer->>DrawerContext: provides viewport state
  Drawer->>DrawerElement: applies viewport modifier
  DrawerPanelContent->>DrawerContext: reads viewport state and refs
  DrawerPanelContent->>DrawerElement: measures selected sizing element

Loading

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The Drawer implementation, documentation, example, and tests are in scope. The package metadata changes, especially the react-icons package and @rhds/icons version updates, are not directly related to…	Remove unrelated package metadata changes, or document why each dependency and package version update is required for the Drawer viewport implementation.

✅ 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 primary change: adding full-size Drawer support.
Linked Issues check	✅ Passed	The changes satisfy issue [#12635]. They add the viewport Drawer prop and modifier, support optional Drawer content during context, ref, and resize handling, add the required Page-level viewport examp…
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 5…

Full details: Out of Scope Changes check

Explanation

The Drawer implementation, documentation, example, and tests are in scope. The package metadata changes, especially the react-icons package and @rhds/icons version updates, are not directly related to the linked Drawer objectives.

• 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.}