Skip to content

chore: update modals design system #8310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aaryan610 merged 4 commits into from
Dec 11, 2025
Merged

chore: update modals design system #8310

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f700550
refactor: callout bg
iam-vipin Dec 10, 2025
6bf49a5
refactor: code bg
iam-vipin Dec 11, 2025
75432eb
refactor: modal size and variant
iam-vipin Dec 11, 2025
e19332d
fix: merge conflicts resolved from origin
aaryan610 Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 6 additions & 14 deletions apps/web/core/components/core/description-versions/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,19 @@ import { Copy } from "lucide-react";
// plane imports
import type { EditorRefApi } from "@plane/editor";
import { useTranslation } from "@plane/i18n";
import { Button, getButtonStyling } from "@plane/propel/button";
import { Button } from "@plane/propel/button";
import { ChevronLeftIcon, ChevronRightIcon } from "@plane/propel/icons";
import { setToast, TOAST_TYPE } from "@plane/propel/toast";
import { Tooltip } from "@plane/propel/tooltip";
import type { TDescriptionVersion } from "@plane/types";
import { Avatar, EModalPosition, EModalWidth, Loader, ModalCore } from "@plane/ui";
import { calculateTimeAgo, cn, copyTextToClipboard, getFileURL } from "@plane/utils";
import { calculateTimeAgo, cn, getFileURL } from "@plane/utils";
// components
import { RichTextEditor } from "@/components/editor/rich-text";
// hooks
import { useMember } from "@/hooks/store/use-member";
import { useWorkspace } from "@/hooks/store/use-workspace";
import { IconButton } from "@plane/propel/icon-button";

type Props = {
activeVersionDescription: string | undefined;
Expand Down Expand Up @@ -151,25 +152,16 @@ export const DescriptionVersionsModal = observer(function DescriptionVersionsMod
{/* Footer */}
<div className="flex items-center justify-between gap-2 pt-4 border-t-[0.5px] border-subtle">
<Tooltip tooltipContent={t("common.actions.copy_markdown")}>
<button
type="button"
className={cn(
"flex-shrink-0",
getButtonStyling("secondary", "base"),
"border-none grid place-items-center"
)}
onClick={handleCopyMarkdown}
>
<Copy className="size-4" />
</button>
<IconButton type="button" variant="ghost" size="base" onClick={handleCopyMarkdown} icon={Copy} />
</Tooltip>
<div className="flex items-center gap-2">
<Button variant="secondary" onClick={handleClose} tabIndex={1}>
<Button variant="secondary" size="lg" onClick={handleClose} tabIndex={1}>
{t("common.cancel")}
</Button>
{!isRestoreDisabled && (
<Button
variant="primary"
size="lg"
onClick={() => {
handleRestore(activeVersionDescription ?? "<p></p>");
handleClose();
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/core/filters/date-filter-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,11 +142,12 @@ export function DateFilterModal({ title, handleClose, isOpen, onSelect }: Props)
</h6>
)}
<div className="flex justify-end gap-4">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
<Button
variant="primary"
size="lg"
type="button"
onClick={handleSubmit(handleFormSubmit)}
disabled={isInvalid}
Expand Down
9 changes: 7 additions & 2 deletions apps/web/core/components/core/modals/bulk-delete-issues-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,10 +205,15 @@ export const BulkDeleteIssuesModal = observer(function BulkDeleteIssuesModal(pro

{issues.length > 0 && (
<div className="flex items-center justify-end gap-2 p-3">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
<Button variant="error-fill" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
<Button
variant="error-fill"
size="lg"
onClick={handleSubmit(handleDelete)}
loading={isSubmitting}
>
{isSubmitting ? "Deleting..." : "Delete selected work items"}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/cycles/archived-cycles/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,10 @@ export function ArchiveCycleModal(props: Props) {
Are you sure you want to archive the cycle? All your archives can be restored later.
</p>
<div className="mt-3 flex justify-end gap-2">
<Button variant="secondary" onClick={onClose}>
<Button variant="secondary" size="lg" onClick={onClose}>
Cancel
</Button>
<Button tabIndex={1} onClick={handleArchiveCycle} loading={isArchiving}>
<Button variant="primary" size="lg" tabIndex={1} onClick={handleArchiveCycle} loading={isArchiving}>
{isArchiving ? "Archiving" : "Archive"}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/cycles/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,10 +178,10 @@ export function CycleForm(props: Props) {
</div>
</div>
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
<Button variant="secondary" onClick={handleClose} tabIndex={getIndex("cancel")}>
<Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
{t("common.cancel")}
</Button>
<Button variant="primary" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
{data
? isSubmitting
? t("common.updating")
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/estimates/create/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,11 +195,11 @@ export const CreateEstimateModal = observer(function CreateEstimateModal(props:
</div>

<div className="relative flex justify-end items-center gap-3 px-5 pt-5 border-t border-subtle">
<Button variant="secondary" onClick={handleClose} disabled={buttonLoader}>
<Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
{t("common.cancel")}
</Button>
{estimatePoints && (
<Button variant="primary" onClick={handleCreateEstimate} disabled={buttonLoader}>
<Button variant="primary" size="lg" onClick={handleCreateEstimate} disabled={buttonLoader}>
{buttonLoader ? t("common.creating") : t("project_settings.estimates.create.label")}
</Button>
)}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/estimates/delete/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,10 @@ export const DeleteEstimateModal = observer(function DeleteEstimateModal(props:
</div>

<div className="relative flex justify-end items-center gap-3 px-5 pt-5 border-t border-subtle">
<Button variant="secondary" onClick={handleClose} disabled={buttonLoader}>
<Button variant="secondary" size="lg" onClick={handleClose} disabled={buttonLoader}>
Cancel
</Button>
<Button variant="error-fill" onClick={handleDeleteEstimate} disabled={buttonLoader}>
<Button variant="error-fill" size="lg" onClick={handleDeleteEstimate} disabled={buttonLoader}>
{buttonLoader ? "Deleting" : "Delete Estimate"}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/home/widgets/links/create-update-link-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,10 +121,10 @@ export const LinkCreateUpdateModal = observer(function LinkCreateUpdateModal(pro
</div>
</div>
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
<Button variant="secondary" onClick={onClose}>
<Button variant="secondary" size="lg" onClick={onClose}>
{t("Cancel")}
</Button>
<Button variant="primary" type="submit" loading={isSubmitting}>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
{preloadedData?.id ? (isSubmitting ? t("updating") : t("update")) : isSubmitting ? t("adding") : t("add")}{" "}
{t("home.quick_links.title")}
</Button>
Expand Down
2 changes: 2 additions & 0 deletions apps/web/core/components/inbox/modals/create-modal/create-root.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,7 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
<div className="flex items-center gap-3">
<Button
variant="secondary"
size="lg"
type="button"
onClick={() => {
if (descriptionEditorRef.current?.isEditorReadyToDiscard()) {
Expand All @@ -277,6 +278,7 @@ export const InboxIssueCreateRoot = observer(function InboxIssueCreateRoot(props
loading={formSubmitting}
disabled={isTitleLengthMoreThan255Character}
tabIndex={getIndex("submit_button")}
size="lg"
>
{formSubmitting ? t("creating") : t("create_work_item")}
</Button>
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/integration/delete-import-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,11 +123,12 @@ export function DeleteImportModal({ isOpen, handleClose, data }: Props) {
/>
</div>
<div className="flex justify-end gap-2">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
<Button
variant="error-fill"
size="lg"
tabIndex={1}
onClick={handleDeletion}
disabled={!confirmDeleteImport}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/issues/issue-detail/links/create-update-link-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,10 +127,10 @@ export const IssueLinkCreateUpdateModal = observer(function IssueLinkCreateUpdat
</div>
</div>
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
<Button variant="secondary" onClick={onClose}>
<Button variant="secondary" size="lg" onClick={onClose}>
{t("common.cancel")}
</Button>
<Button variant="primary" type="submit" loading={isSubmitting}>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
{`${
preloadedData?.id
? isSubmitting
Expand Down
3 changes: 3 additions & 0 deletions apps/web/core/components/issues/issue-modal/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -525,6 +525,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
<div tabIndex={getIndex("discard_button")}>
<Button
variant="secondary"
size="lg"
onClick={() => {
if (editorRef.current?.isEditorReadyToDiscard()) {
onClose();
Expand All @@ -543,6 +544,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
<div tabIndex={isDraft ? getIndex("submit_button") : getIndex("draft_button")}>
<Button
variant={moveToIssue ? "secondary" : "primary"}
size="lg"
type="submit"
ref={submitBtnRef}
loading={isSubmitting}
Expand All @@ -559,6 +561,7 @@ export const IssueFormRoot = observer(function IssueFormRoot(props: IssueFormPro
loading={isMoving}
onClick={handleMoveToProjects}
disabled={isMoving}
size="lg"
>
{t("add_to_project")}
</Button>
Expand Down
10 changes: 8 additions & 2 deletions apps/web/core/components/modules/archived-modules/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,16 @@ export function ArchiveModuleModal(props: Props) {
Are you sure you want to archive the module? All your archives can be restored later.
</p>
<div className="mt-3 flex justify-end gap-2">
<Button variant="secondary" onClick={onClose}>
<Button variant="secondary" size="lg" onClick={onClose}>
Cancel
</Button>
<Button tabIndex={1} onClick={handleArchiveModule} loading={isArchiving}>
<Button
variant="primary"
size="lg"
tabIndex={1}
onClick={handleArchiveModule}
loading={isArchiving}
>
{isArchiving ? "Archiving" : "Archive"}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/modules/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,10 +227,10 @@ export function ModuleForm(props: Props) {
</div>
</div>
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
<Button variant="secondary" onClick={handleClose} tabIndex={getIndex("cancel")}>
<Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
{t("cancel")}
</Button>
<Button variant="primary" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
{status
? isSubmitting
? t("updating")
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/modules/links/create-update-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,10 +132,10 @@ export function CreateUpdateModuleLinkModal(props: Props) {
</div>
</div>
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
<Button variant="secondary" onClick={onClose}>
<Button variant="secondary" size="lg" onClick={onClose}>
Cancel
</Button>
<Button variant="primary" type="submit" loading={isSubmitting}>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
{data ? (isSubmitting ? "Updating link" : "Update link") : isSubmitting ? "Adding link" : "Add link"}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/pages/modals/export-page-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,10 +276,10 @@ export function ExportPageModal(props: Props) {
</div>
</div>
<div className="px-5 py-4 flex items-center justify-end gap-2 border-t-[0.5px] border-subtle">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary" loading={isExporting} onClick={handleExport}>
<Button variant="primary" size="lg" loading={isExporting} onClick={handleExport}>
{isExporting ? "Exporting" : "Export"}
</Button>
</div>
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/pages/modals/page-form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,12 @@ export function PageForm(props: Props) {
<h6 className="text-11 font-medium">{t(i18n_access_label || "")}</h6>
</div>
<div className="flex items-center justify-end gap-2">
<Button variant="secondary" onClick={handleModalClose} tabIndex={getIndex("cancel")}>
<Button variant="secondary" size="lg" onClick={handleModalClose} tabIndex={getIndex("cancel")}>
Cancel
</Button>
<Button
variant="primary"
size="lg"
type="submit"
loading={isSubmitting}
disabled={isTitleLengthMoreThan255Character}
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/project/confirm-project-member-remove.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,12 @@ export const ConfirmProjectMemberRemove = observer(function ConfirmProjectMember
</div>
</div>
<div className="flex justify-end gap-2 p-4 sm:px-6">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
<Button
variant="error-fill"
size="lg"
tabIndex={1}
onClick={handleDeletion}
loading={isDeleteLoading}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/project/create/project-create-buttons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ function ProjectCreateButtons(props: Props) {

return (
<div className="flex justify-end gap-2 py-4 border-t border-subtle">
<Button variant="secondary" onClick={handleClose} tabIndex={getIndex("cancel")}>
<Button variant="secondary" size="lg" onClick={handleClose} tabIndex={getIndex("cancel")}>
{t("common.cancel")}
</Button>
<Button variant="primary" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting} tabIndex={getIndex("submit")}>
{isSubmitting ? t("creating") : t("create_project")}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/project/delete-project-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,10 +180,10 @@ export function DeleteProjectModal(props: DeleteProjectModal) {
/>
</div>
<div className="flex justify-end gap-2">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
<Button variant="error-fill" type="submit" disabled={!canDelete} loading={isSubmitting}>
<Button variant="error-fill" size="lg" type="submit" disabled={!canDelete} loading={isSubmitting}>
{isSubmitting ? "Deleting" : "Delete project"}
</Button>
</div>
Expand Down
3 changes: 2 additions & 1 deletion apps/web/core/components/project/join-project-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,12 @@ export function JoinProjectModal(props: TJoinProjectModalProps) {
<div className="space-y-3" />
</div>
<div className="mt-5 flex justify-end gap-2">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
<Button
variant="primary"
size="lg"
tabIndex={1}
type="submit"
onClick={handleJoin}
Expand Down
4 changes: 2 additions & 2 deletions apps/web/core/components/project/leave-project-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,10 +203,10 @@ export const LeaveProjectModal = observer(function LeaveProjectModal(props: ILea
/>
</div>
<div className="flex justify-end gap-2">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
<Button variant="error-fill" type="submit" loading={isSubmitting}>
<Button variant="error-fill" size="lg" type="submit" loading={isSubmitting}>
{isSubmitting ? "Leaving..." : "Leave Project"}
</Button>
</div>
Expand Down
6 changes: 3 additions & 3 deletions apps/web/core/components/project/publish-project/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,17 +311,17 @@ export const PublishProjectModal = observer(function PublishProjectModal(props:
</div>
{!fetchSettingsLoader && (
<div className="relative flex items-center gap-2">
<Button variant="secondary" onClick={handleClose}>
<Button variant="secondary" size="lg" onClick={handleClose}>
Cancel
</Button>
{isProjectPublished ? (
isDirty && (
<Button variant="primary" type="submit" loading={isSubmitting}>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
{isSubmitting ? "Updating" : "Update settings"}
</Button>
)
) : (
<Button variant="primary" type="submit" loading={isSubmitting}>
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
{isSubmitting ? "Publishing" : "Publish"}
</Button>
)}
Expand Down
Loading