Repository navigation
Tearsheet component & Modal animation support (RHOAI) #12557
Description
Activity
🔗 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 plancommand 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!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
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
pf-m-plainmodifier to dropdown toggle element instead of wrapper #954, patternfly-react PR feat(Modal,Backdrop): Add animation support #12552)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