Tearsheet component & Modal animation support (RHOAI)

[patternfly-jira-sync]

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 opt-in 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

[coderabbitai]

🔗 Related PRs

#12365 - chore(ArrowRightIcon): Update any uses of FA arrow right icon to RH brand arrow right icon [merged]
#12388 - feat(Pagination): added dynamic sticky and plain [merged]
#12412 - feat(Hero): glass styling update [merged]
#12419 - feat(react-charts): add high contrast [merged]
#12466 - fix(BullhornIcon): Replace BullhornIcon with RhUiAttentionBellFillIcon [merged]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!