fix: prevent nested portal conflicts between ConfirmationButton and ConfirmationModal

[rubinaga]

Done

• ConfirmationButton now passes its Portal to ConfirmationModal via portalRenderer instead of wrapping it directly.
• ConfirmationModal now prioritizes portalRenderer, then renderInPortal, then inline render.
• Added regression tests for confirm click flow, ignored portal overrides, and portal precedence behavior.

QA

Pinging @canonical/react-library-maintainers for a review.

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Open a ConfirmationButton example and click the trigger button.
• Verify the modal opens and stays open (does not immediately close).
• Click the modal confirm button and verify the confirm callback fires exactly once.
• Verify Esc/outside-click close behavior still works in ConfirmationButton flow.
• Render ConfirmationModal standalone with default props and verify it renders inline (not in portal).
• Render standalone ConfirmationModal with renderInPortal={true} and verify it renders in a portal.
• Render ConfirmationModal with both renderInPortal={true} and a custom portalRenderer and verify the custom renderer is used.

[webteam-app]

Demo

Jenkins

demos.haus

[edlerd]

LGTM.

[github-actions]

🎉 This PR is included in version 3.11.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀