github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-08-01 03:10:13 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

[PR #2445] [MERGED] refactor: replace Modal with native dialog element #8273

New Issue
Closed
opened 2026-04-20 18:07:34 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-20 18:07:34 -05:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/2445
Author: @tink-bot
Created: 3/23/2026
Status: ✅ Merged
Merged: 4/1/2026
Merged by: @kolaente

Base: main ← Head: feat-dialoge-refactor

📝 Commits (1)

  • 6134905 refactor: replace Modal div-based implementation with native dialog element

📊 Changes

12 files changed (+183 additions, -126 deletions)

View changed files

📝 frontend/src/components/date/DatepickerWithRange.vue (+0 -1)
📝 frontend/src/components/date/DatepickerWithValues.vue (+0 -1)
📝 frontend/src/components/input/filter/FilterAutocomplete.ts (+4 -1)
📝 frontend/src/components/misc/CustomTransition.vue (+1 -10)
📝 frontend/src/components/misc/Modal.vue (+157 -98)
📝 frontend/src/components/project/partials/FilterPopup.vue (+0 -1)
📝 frontend/src/components/quick-actions/QuickAddOverlay.vue (+6 -2)
📝 frontend/src/components/tasks/partials/QuickAddMagic.vue (+0 -1)
📝 frontend/src/views/About.vue (+0 -1)
📝 frontend/tests/e2e/project/project-view-kanban.spec.ts (+4 -4)
📝 frontend/tests/e2e/project/project.spec.ts (+1 -1)
📝 frontend/tests/e2e/task/task.spec.ts (+10 -5)

📄 Description

Replace the custom div/Teleport-based Modal component with a native <dialog> element using showModal()/close(), gaining built-in browser accessibility (background inertness, focus trapping, screen reader support) and top-layer rendering while preserving the existing component API for all ~27 consumers.

Test plan

  • Open various modal types (confirmation, scrolling/task detail, hint-modal, quick actions) and verify open/close behavior
  • Verify Escape closes modals, backdrop click closes modals, and focus returns to trigger element
  • Test nested modals (e.g. task detail → delete confirmation)
  • Check open/close CSS transitions animate smoothly
  • Verify mobile full-screen layout and dark mode close button color

🔄 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/go-vikunja/vikunja/pull/2445 **Author:** [@tink-bot](https://github.com/tink-bot) **Created:** 3/23/2026 **Status:** ✅ Merged **Merged:** 4/1/2026 **Merged by:** [@kolaente](https://github.com/kolaente) **Base:** `main` ← **Head:** `feat-dialoge-refactor` --- ### 📝 Commits (1) - [`6134905`](https://github.com/go-vikunja/vikunja/commit/613490599f3c1c91761ee9dd842cfe1b4e22cc43) refactor: replace Modal div-based implementation with native dialog element ### 📊 Changes **12 files changed** (+183 additions, -126 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/components/date/DatepickerWithRange.vue` (+0 -1) 📝 `frontend/src/components/date/DatepickerWithValues.vue` (+0 -1) 📝 `frontend/src/components/input/filter/FilterAutocomplete.ts` (+4 -1) 📝 `frontend/src/components/misc/CustomTransition.vue` (+1 -10) 📝 `frontend/src/components/misc/Modal.vue` (+157 -98) 📝 `frontend/src/components/project/partials/FilterPopup.vue` (+0 -1) 📝 `frontend/src/components/quick-actions/QuickAddOverlay.vue` (+6 -2) 📝 `frontend/src/components/tasks/partials/QuickAddMagic.vue` (+0 -1) 📝 `frontend/src/views/About.vue` (+0 -1) 📝 `frontend/tests/e2e/project/project-view-kanban.spec.ts` (+4 -4) 📝 `frontend/tests/e2e/project/project.spec.ts` (+1 -1) 📝 `frontend/tests/e2e/task/task.spec.ts` (+10 -5) </details> ### 📄 Description Replace the custom div/Teleport-based Modal component with a native `<dialog>` element using `showModal()`/`close()`, gaining built-in browser accessibility (background inertness, focus trapping, screen reader support) and top-layer rendering while preserving the existing component API for all ~27 consumers. ## Test plan - Open various modal types (confirmation, scrolling/task detail, hint-modal, quick actions) and verify open/close behavior - Verify Escape closes modals, backdrop click closes modals, and focus returns to trigger element - Test nested modals (e.g. task detail → delete confirmation) - Check open/close CSS transitions animate smoothly - Verify mobile full-screen layout and dark mode close button color --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-20 18:07:34 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
area/attachments
area/auth
area/avatars
area/backup-restore
area/caldav
area/calendar-view
area/comments
area/config
area/database
area/desktop
area/docker
area/email
area/favorites
area/filters
area/frontend
area/gantt
area/i18n
area/import-export
area/internal-code
area/kanban
area/labels
area/list-view
area/mobile
area/notifications
area/permissions
area/projects
area/pwa
area/recurring-tasks
area/reminders
area/search
area/shortcuts
area/subtasks
area/sync
area/table-view
area/task-editor
area/task-metadata
area/task-relations
area/teams
area/theming
area/time-tracking
area/typesense
area/views
area/webhooks
bug
changes requested
concern/accessibility
concern/performance
concern/regression
concern/ux
confirmed
db/mysql
dependencies
enhancement
good first issue
help wanted
integration/inbound
integration/outbound
kind/bug
kind/feature
needs reproduction
pull-request
Mirrored from GitHub Pull Request
 question
security
support
upstream issue
waiting for reply
wontfix
No labels pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
GiteaMirror ninjasurge (Kaehlen Rog)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#8273