patternfly / patternfly/patternfly-react

Modal,Backdrop - Add animation support

Abierto
#12,551 3 comentarios 1 reacción 1 asignado Ver en GitHub

@thatblindgeye ya está trabajando en esto.

Desde el 2/9/2026.

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

Descripción

Is this a new component or an extension?

Enhancement to a current feature

Existing Component

Modal, Backdrop

Describe the feature

Modal & Backdrop animation support

PatternFly Modals (and Backdrop that it uses) currently lack a smooth animation from closed->open->closed states.
This works well for smaller modals showing simple information or requiring a simple action from the user; But for larger modals it is really jarring.

A proposed new component <Tearsheet> that leverages the <Modal> makes this missing animation a larger friction point with a near-full-screen modal size.

Modal and Backdrop could function like the other PF components that already opt-in to animations via <AnimationsProvider>. opt-in is important to not break or regress the performance of pages depending on the as-is of Modals/Backdrops.

User Story

As a user, when I use a Modal with rich information or a form, it is jarring to see it flash on screen with no visual easing from the open-to-closed state.

Visuals & Mockups

https://github.com/user-attachments/assets/644f9584-d227-41ef-b0b4-7c6b7fd2eb09

Interaction States & Variations
  • On opening: modal fades in + shifts down a few pixels slightly and falls full into view

  • On closing: modal fades out + shifts up a few pixels slightly and is removed from view

Accessibility (A11y)

No response

Product & Target Release

No response

Contribution
  • I am interested in contributing this feature.

  • I have searched for similar existing requests.


Jira Issue: PF-4419

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.

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.