[PR #7739] [MERGED] feat: implement modal #8078

New issue

Closed

opened 2026-03-23 23:22:30 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:22:30 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/7739
Author: @richardshiue
Created: 4/14/2025
Status: ✅ Merged
Merged: 4/14/2025
Merged by: @richardshiue

Base: feat/custom-prompt ← Head: feat/modal

📝 Commits (1)

2948ed7 feat: implement modal

📊 Changes

7 files changed (+404 additions, -6 deletions)

View changed files

➕ frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialog_v2.dart (+109 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart (+6 -2)
➕ frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/modal/modal_page.dart (+153 -0)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/base_button/base_button.dart (+1 -4)
📝 frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/component.dart (+1 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/modal/dimension.dart (+9 -0)
➕ frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/modal/modal.dart (+125 -0)

📄 Description

The main AFModal component defines the surface color, background and overlay. Developers should compose the content themselves in the child parameter by using AFModalHeader, AFModalBody and AFModalFooter widgets, or defining your own layout and adding custom widgets.

Feature Preview

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

Summary by Sourcery

Implement a new modal component for the AppFlowy UI package with flexible sizing and customizable header, body, and footer

New Features:

Add a new AFModal widget with configurable dimensions (S, M, L)
Create modal components including AFModalHeader, AFModalBody, and AFModalFooter
Implement a reusable dialog system with customizable actions and styling

Enhancements:

Introduce modal dimension constants for consistent sizing
Add theming support for modal components using AppFlowyTheme

Documentation:

Update example app to demonstrate modal usage with interactive size selection

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/7739 **Author:** [@richardshiue](https://github.com/richardshiue) **Created:** 4/14/2025 **Status:** ✅ Merged **Merged:** 4/14/2025 **Merged by:** [@richardshiue](https://github.com/richardshiue) **Base:** `feat/custom-prompt` ← **Head:** `feat/modal` --- ### 📝 Commits (1) - [`2948ed7`](https://github.com/AppFlowy-IO/AppFlowy/commit/2948ed7f1c0488d78ca070ed6ad269ed1a650136) feat: implement modal ### 📊 Changes **7 files changed** (+404 additions, -6 deletions) <details> <summary>View changed files</summary> ➕ `frontend/appflowy_flutter/lib/workspace/presentation/widgets/dialog_v2.dart` (+109 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/main.dart` (+6 -2) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/example/lib/src/modal/modal_page.dart` (+153 -0) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/button/base_button/base_button.dart` (+1 -4) 📝 `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/component.dart` (+1 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/modal/dimension.dart` (+9 -0) ➕ `frontend/appflowy_flutter/packages/appflowy_ui/lib/src/component/modal/modal.dart` (+125 -0) </details> ### 📄 Description The main `AFModal` component defines the surface color, background and overlay. Developers should compose the content themselves in the `child` parameter by using `AFModalHeader`, `AFModalBody` and `AFModalFooter` widgets, or defining your own layout and adding custom widgets. ![Screenshot 2025-04-14 at 1 09 47 PM](https://github.com/user-attachments/assets/c889ae2e-4fe6-460c-8233-a913b20a049c) ### Feature Preview  ---  #### PR Checklist - [ ] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [ ] I've listed at least one issue that this PR fixes in the description above. - [ ] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. ## Summary by Sourcery Implement a new modal component for the AppFlowy UI package with flexible sizing and customizable header, body, and footer New Features: - Add a new AFModal widget with configurable dimensions (S, M, L) - Create modal components including AFModalHeader, AFModalBody, and AFModalFooter - Implement a reusable dialog system with customizable actions and styling Enhancements: - Introduce modal dimension constants for consistent sizing - Add theming support for modal components using AppFlowyTheme Documentation: - Update example app to demonstrate modal usage with interactive size selection --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>