Tearsheet component & Modal animation support (RHOAI)

Abierto
#12,557 2 comentarios 1 reacción 1 asignado Ver en GitHub

@thatblindgeye ya está trabajando en esto.

Desde el 14/7/2026.

Evaluación

Este issue todavía no se ha evaluado.

Descripción

Stale

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 #954, patternfly-react PR #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

Jira Issue: PF-4434

Lenguaje dominante
TypeScript
Estrellas
862
Forks
392
Merge medio
4 d 8 h
PR fusionados (30 d)
9

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de patternfly/patternfly-react

Todos los issues de patternfly/patternfly-react

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.