Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Modal,Backdrop - Add animation support

Aperta
#12,551 3 commenti 1 reazione 1 assegnatario Vedi su GitHub

@thatblindgeye ci sta già lavorando.

Dal 2/9/2026.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

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

Lingua principale
TypeScript
Stelle
862
Fork
392
Merge medio
4g 8h
PR unite (30g)
9

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di patternfly/patternfly-react

Tutte le issue di patternfly/patternfly-react

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.