patternfly / patternfly/patternfly-react
Modal,Backdrop - Add animation support
@thatblindgeye đang làm issue này rồi.
Từ ngày 2/9/2026.
- Ngôn ngữ chính
- TypeScript
- Star
- 862
- Fork
- 392
- Merge trung bình
- 4 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 9
Mô tả
Is this a new component or an extension?
Enhancement to a current feature
Existing Component
Modal, Backdrop
Describe the feature
Modal & Backdrop animation support
- See related issue: https://github.com/patternfly/patternfly-react/issues/12519
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
Hướng dẫn đóng góp
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Đánh giá
Issue này chưa được đánh giá.