Tearsheet component & Modal animation support (RHOAI) #12557

Overview

This epic tracks the work to introduce a new Tearsheet component and add animation support to Modal/Backdrop in PatternFly, driven by requirements from the RHOAI (Red Hat OpenShift AI) product team. These patterns are inspired by IBM's Carbon Design System, which offers similar components (Tearsheet, animated modals) that RHOAI users are accustomed to.

Scope

Tearsheet Component (PF-4330)

A new near-full-screen, modal-based component that enables complex UX flows without navigating away from the current page. Key capabilities include:

• Basic Tearsheet with header, body, and footer sections

• Stacked/nested Tearsheets via TearsheetGroup for multi-level flows

• Leverages existing Modal internals with a full-height layout

Modal & Backdrop Animation Support (PF-4419)

Smooth open/close animations for Modal and Backdrop components, opt-in via AnimationsProvider to avoid regressions. This is a dependency for the Tearsheet component — large modals without animation create a jarring user experience.

Plan

1. Collaborate with contributor (GAUNSD) — Review the existing PoC implementation in the patternfly-react fork and the open PRs (react-component-groups PR fix(Dropdown): Apply pf-m-plain modifier to dropdown toggle element instead of wrapper #954, patternfly-react PR feat(Modal,Backdrop): Add animation support #12552)
2. Design review — Work with PatternFly design to align on interaction patterns, stacking behavior, scrolling, and accessibility requirements, ensuring consistency with Carbon's Tearsheet guidelines while fitting PatternFly conventions
3. Implementation plan — Chart a phased delivery plan covering Modal animation support first (as a prerequisite), followed by the Tearsheet component itself
4. Accessibility — Ensure A11y parity with Modal, including focus management across stacked Tearsheets

Context

• RHOAI product team use cases: AutoRAG, AutoML, and Pipeline Server configuration in OpenShift AI require uninterrupted, full-screen-like flows

• Carbon Design System reference: https://carbondesignsystem.com/community/patterns/create-flows/#wide-tearsheet

• Contributor PoC: https://github.com/GAUNSD/patternfly-react/tree/gmurcia/tearsheet/packages/react-core/src/components/Tearsheet

Jira Issue: PF-4434

Jira Issue: FELT-4254