Skip to content

fix(Label, Drawer): add ref forwarding - #12688

Closed
tarunvashishth wants to merge 3 commits into
patternfly:mainfrom
tarunvashishth:claude/amazing-goodall-mkz78g
Closed

tarunvashishth wants to merge 3 commits into
patternfly:mainfrom
tarunvashishth:claude/amazing-goodall-mkz78g

Conversation

@tarunvashishth

Copy link
Copy Markdown
Contributor

What: Closes #12651, closes #12650

Adds ref forwarding to Label and to all Drawer components, following the existing forwardRef + innerRef pattern used by components such as Panel and Card.

  • Label: the ref is attached to the root element (<span>, or <button> for the overflow and add variants).
  • Drawer: Drawer, DrawerActions, DrawerCloseButton, DrawerContent, DrawerContentBody, DrawerHead, DrawerMain, DrawerPanelBody, DrawerPanelContent, DrawerPanelDescription and DrawerSection now forward refs to their root <div>.
    • Drawer, DrawerContent and DrawerPanelContent already keep an internal ref to that element (used for resizing). They expose it with useImperativeHandle instead of replacing it, so resizing keeps working. For DrawerContent the ref points at the pf-v6-c-drawer__content div, the element that receives the spread props.
  • Added unit tests asserting each ref resolves to the component's root element. Existing snapshots are unchanged.

Testing

  • jest for Drawer, Label, react-table and react-templates: all passing.
  • Full ESM TypeScript build of all packages passes.
  • Checked in Chromium with a test page: refs resolve for every panel position (start/end/bottom), inline mode, and after collapse/expand; keyboard and mouse resizing still work.

Additional issues: None

Wrap Label in forwardRef so that refs passed to the component are
attached to its root element (span, or button for overflow/add variants).

Closes patternfly#12651
Wrap Drawer, DrawerActions, DrawerCloseButton, DrawerContent,
DrawerContentBody, DrawerHead, DrawerMain, DrawerPanelBody,
DrawerPanelContent, DrawerPanelDescription and DrawerSection in
forwardRef. Components that already hold an internal ref to their root
element (Drawer, DrawerContent, DrawerPanelContent) expose it through
useImperativeHandle so internal behavior such as resizing keeps working.

Closes patternfly#12650
…l-mkz78g

# Conflicts:
#	packages/react-core/src/components/Drawer/Drawer.tsx
#	packages/react-core/src/components/Drawer/DrawerCloseButton.tsx
#	packages/react-core/src/components/Drawer/DrawerSection.tsx
#	packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
@coderabbitai

coderabbitai Bot commented Oct 24, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

Caution

Review failed

The pull request is closed.

Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

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

@tarunvashishth
tarunvashishth deleted the claude/amazing-goodall-mkz78g branch October 24, 2026 08:32
@patternfly-build

patternfly-build commented Oct 24, 2026 •

Copy link
Copy Markdown
Collaborator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Bug - Label - Doesn't allow ref forwarding Bug - Drawer - Components don't allow ref forwarding

2 participants