From 9f088c822562ff67315b9db6d24eaec4e5585bb4 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Thu, 26 Sep 2024 02:11:01 +0800
Subject: [PATCH 1/5] pkp/pkp-lib#10444 Change Dialog component styling

---
 src/components/Modal/Dialog.mdx        |  8 +++
 src/components/Modal/Dialog.stories.js | 81 ++++++++++++++++++++++++++
 src/components/Modal/Dialog.vue        | 70 ++++++++++++++--------
 3 files changed, 136 insertions(+), 23 deletions(-)

diff --git a/src/components/Modal/Dialog.mdx b/src/components/Modal/Dialog.mdx
index 3e298eae3..4f7db6f8a 100644
--- a/src/components/Modal/Dialog.mdx
+++ b/src/components/Modal/Dialog.mdx
@@ -19,6 +19,14 @@ Dialog purpose is to display simple feedback like success and error messages. Or
 
 Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable. Check out the props description for details.
 
+## Styling
+
+The style of the modal can be changed by passing the prop `type`. It accepts the following values:
+
+- **`default`**: The standard modal style that uses primary color styling. This serves as the default value for the modal type.
+- **`negative`**: Indicates a negative state, typically for error messages or alerts.
+- **`success`**: Represents a positive state, often used for success notifications.
+
 ## Accessibility
 
 To correctly handle accessibility (title, description) and focus management - [headless-ui](https://headlessui.com) library is used.
diff --git a/src/components/Modal/Dialog.stories.js b/src/components/Modal/Dialog.stories.js
index 25b577c15..437d10138 100644
--- a/src/components/Modal/Dialog.stories.js
+++ b/src/components/Modal/Dialog.stories.js
@@ -138,3 +138,84 @@ export const DialogComplex = {
 		await user.click(canvas.getByText('Full Example'));
 	},
 };
+
+const ErrorBodyComponent = {
+	template: `
+    	<span>Cancelling the invitation sent to Emma Stone will deactivate the acceptance link sent to her via email. Here are the invitation details:</span>
+        <ul class="list-disc ms-7">
+            <li>
+                <strong>Email Address:</strong> {email address}
+            </li>
+            <li>
+                <strong>Role:</strong> Reviewer
+            </li>
+            <li>
+                <strong>Status</strong> Invited on 17.05.2023
+            </li>
+            <li>
+                <strong>Affiliate:</strong> Stanford University
+            </li>
+        </ul>
+    `,
+	props: {
+		failedDoiActions: {type: Array, required: true},
+	},
+};
+
+export const NegativeState = {
+	args: {
+		buttonName: 'Show modal',
+		name: 'error',
+		title: 'Cancel Invitation',
+		bodyComponent: ErrorBodyComponent,
+		actions: [
+			{
+				label: 'Cancel Invitation',
+				isPrimary: true,
+				callback: (close) => {
+					// Simulate a server request
+					setTimeout(() => close(), 2000);
+				},
+			},
+			{
+				label: 'Cancel',
+				isWarnable: true,
+				callback: (close) => close(),
+			},
+		],
+		close: () => console.log('closed full example dialog'), // eslint-disable-line,
+		type: 'negative',
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Show modal'));
+	},
+};
+
+export const SuccessState = {
+	args: {
+		buttonName: 'Show modal',
+		name: 'error',
+		title: "You've been added as a section editor in OJS",
+		message:
+			'Congratulations! As a section editor you might get access to more options in OJS. If you need any assistance in understanding the system, please click on "Help" buttons throughout the system to guide you through the interface.',
+		actions: [
+			{
+				label: 'View All Submissions',
+				callback: (close) => close(),
+			},
+		],
+		close: () => console.log('closed full example dialog'), // eslint-disable-line,
+		type: 'success',
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Show modal'));
+	},
+};
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index face7c085..41db087a1 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -27,32 +27,24 @@
 						leave-from="opacity-100 translate-y-0 sm:scale-100"
 						leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 					>
-						<DialogPanel
-							data-cy="dialog"
-							class="modal__panel modal__panel--dialog relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8"
-						>
+						<DialogPanel data-cy="dialog" :class="styles">
 							<div class="flex min-h-12 items-center">
 								<DialogTitle
 									v-if="title"
-									class="m-0 min-w-[1px] overflow-x-hidden overflow-ellipsis whitespace-nowrap px-4 py-2 text-xl-bold"
+									class="m-0 inline-flex min-w-[1px] items-center overflow-x-hidden overflow-ellipsis whitespace-nowrap px-8 pt-12 text-4xl-bold"
+									:class="icon ? 'pb-5' : 'pb-8'"
 								>
-									{{ title }}
+									<div v-if="icon" :class="iconStyles">
+										<Icon
+											:icon="icon"
+											:inline="true"
+											class="h-11 w-11 text-on-dark"
+										></Icon>
+									</div>
+									<span class="px-4">{{ title }}</span>
 								</DialogTitle>
-								<button
-									class="me-2 ms-auto cursor-pointer border-0 bg-transparent text-center"
-									@click="onClose"
-								>
-									<Icon
-										class="h-6 w-6 text-negative"
-										icon="Cancel"
-										:aria-hidden="true"
-									/>
-									<span class="-screenReader">
-										{{ t('common.close') }}
-									</span>
-								</button>
 							</div>
-							<div class="modal-content p-4">
+							<div class="modal-content" :class="icon ? 'px-24' : 'pt- px-12'">
 								<div v-html="message" />
 								<component
 									:is="bodyComponent"
@@ -60,12 +52,14 @@
 									v-bind="bodyProps"
 								/>
 							</div>
-							<div class="flex items-center justify-end p-4">
+							<div
+								class="flex items-center gap-x-4"
+								:class="icon ? 'p-10 ps-24' : 'p-12'"
+							>
 								<Spinner v-if="isLoading" />
 								<PkpButton
 									v-for="action in actions"
 									:key="action.label"
-									class="ms-2"
 									:element="action.element || 'button'"
 									:href="action.href || null"
 									:is-primary="action.isPrimary || null"
@@ -87,7 +81,7 @@
 </template>
 
 <script setup>
-import {ref} from 'vue';
+import {ref, computed} from 'vue';
 import PkpButton from '@/components/Button/Button.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
 
@@ -116,8 +110,38 @@ const props = defineProps({
 	actions: {type: Array, default: () => []},
 	/** Callback when dialog is being closed by close button or clicking outside of the modal */
 	close: {type: Function, default: null},
+	/** Defines the visual style of the modal: 'default' (primary color), 'negative', or 'success'. */
+	type: {
+		type: String,
+		default: () => 'default',
+		validator: (value) => ['default', 'negative', 'success'].includes(value),
+	},
+});
+
+const styles = computed(() => ({
+	'modal__panel modal__panel--dialog relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8': true,
+	'border-s-[14px] border-primary': props.type === 'default',
+	'border-s-[14px] border-success': props.type === 'success',
+	'border-s-[14px] border-negative': props.type === 'negative',
+}));
+
+const icon = computed(() => {
+	switch (props.type) {
+		case 'negative':
+			return 'Cancel';
+		case 'success':
+			return 'Complete';
+		default:
+			return null;
+	}
 });
 
+const iconStyles = computed(() => ({
+	'flex h-12 w-12 items-center justify-center rounded-full': true,
+	'bg-success': props.type === 'success',
+	'bg-negative': props.type === 'negative',
+}));
+
 const emit = defineEmits(['close']);
 
 const isLoading = ref(false);

From 136b3e3707d608341ae080bb6f92e5d5650953cb Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Thu, 26 Sep 2024 02:22:21 +0800
Subject: [PATCH 2/5] pkp/pkp-lib#10444 Rename prop type with modalStyle

---
 src/components/Modal/Dialog.mdx        |  4 ++--
 src/components/Modal/Dialog.stories.js |  4 ++--
 src/components/Modal/Dialog.vue        | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/Modal/Dialog.mdx b/src/components/Modal/Dialog.mdx
index 4f7db6f8a..7ab371cd1 100644
--- a/src/components/Modal/Dialog.mdx
+++ b/src/components/Modal/Dialog.mdx
@@ -21,9 +21,9 @@ Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composa
 
 ## Styling
 
-The style of the modal can be changed by passing the prop `type`. It accepts the following values:
+The style of the modal can be changed by passing the prop `modalStyle`. It accepts the following values:
 
-- **`default`**: The standard modal style that uses primary color styling. This serves as the default value for the modal type.
+- **`default`**: The standard modal style that uses primary color styling. This serves as the default value for the modal style.
 - **`negative`**: Indicates a negative state, typically for error messages or alerts.
 - **`success`**: Represents a positive state, often used for success notifications.
 
diff --git a/src/components/Modal/Dialog.stories.js b/src/components/Modal/Dialog.stories.js
index 437d10138..114c3d854 100644
--- a/src/components/Modal/Dialog.stories.js
+++ b/src/components/Modal/Dialog.stories.js
@@ -184,7 +184,7 @@ export const NegativeState = {
 			},
 		],
 		close: () => console.log('closed full example dialog'), // eslint-disable-line,
-		type: 'negative',
+		modalStyle: 'negative',
 	},
 	play: async ({canvasElement}) => {
 		// Assigns canvas to the component root element
@@ -209,7 +209,7 @@ export const SuccessState = {
 			},
 		],
 		close: () => console.log('closed full example dialog'), // eslint-disable-line,
-		type: 'success',
+		modalStyle: 'success',
 	},
 	play: async ({canvasElement}) => {
 		// Assigns canvas to the component root element
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index 41db087a1..731a804f7 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -111,7 +111,7 @@ const props = defineProps({
 	/** Callback when dialog is being closed by close button or clicking outside of the modal */
 	close: {type: Function, default: null},
 	/** Defines the visual style of the modal: 'default' (primary color), 'negative', or 'success'. */
-	type: {
+	modalStyle: {
 		type: String,
 		default: () => 'default',
 		validator: (value) => ['default', 'negative', 'success'].includes(value),
@@ -120,13 +120,13 @@ const props = defineProps({
 
 const styles = computed(() => ({
 	'modal__panel modal__panel--dialog relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8': true,
-	'border-s-[14px] border-primary': props.type === 'default',
-	'border-s-[14px] border-success': props.type === 'success',
-	'border-s-[14px] border-negative': props.type === 'negative',
+	'border-s-[14px] border-primary': props.modalStyle === 'default',
+	'border-s-[14px] border-success': props.modalStyle === 'success',
+	'border-s-[14px] border-negative': props.modalStyle === 'negative',
 }));
 
 const icon = computed(() => {
-	switch (props.type) {
+	switch (props.modalStyle) {
 		case 'negative':
 			return 'Cancel';
 		case 'success':
@@ -138,8 +138,8 @@ const icon = computed(() => {
 
 const iconStyles = computed(() => ({
 	'flex h-12 w-12 items-center justify-center rounded-full': true,
-	'bg-success': props.type === 'success',
-	'bg-negative': props.type === 'negative',
+	'bg-success': props.modalStyle === 'success',
+	'bg-negative': props.modalStyle === 'negative',
 }));
 
 const emit = defineEmits(['close']);

From 51dda575a3f43be32b8e2b675ee966f16242de0a Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Tue, 1 Oct 2024 01:43:24 +0800
Subject: [PATCH 3/5] pkp/pkp-lib#10444 Update default Dialog modal styling

---
 src/components/Modal/Dialog.mdx        |  3 ++-
 src/components/Modal/Dialog.stories.js | 28 ++++++++++++++++++++++++--
 src/components/Modal/Dialog.vue        |  8 +++++---
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal/Dialog.mdx b/src/components/Modal/Dialog.mdx
index 7ab371cd1..e3fb1f1f5 100644
--- a/src/components/Modal/Dialog.mdx
+++ b/src/components/Modal/Dialog.mdx
@@ -23,7 +23,8 @@ Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composa
 
 The style of the modal can be changed by passing the prop `modalStyle`. It accepts the following values:
 
-- **`default`**: The standard modal style that uses primary color styling. This serves as the default value for the modal style.
+- **`default`**: The standard modal style, which has no special border styling. This serves as the default value for the modal style.
+- **`primary`**: A modal style that uses the primary color scheme.
 - **`negative`**: Indicates a negative state, typically for error messages or alerts.
 - **`success`**: Represents a positive state, often used for success notifications.
 
diff --git a/src/components/Modal/Dialog.stories.js b/src/components/Modal/Dialog.stories.js
index 114c3d854..a848f95f2 100644
--- a/src/components/Modal/Dialog.stories.js
+++ b/src/components/Modal/Dialog.stories.js
@@ -183,7 +183,7 @@ export const NegativeState = {
 				callback: (close) => close(),
 			},
 		],
-		close: () => console.log('closed full example dialog'), // eslint-disable-line,
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
 		modalStyle: 'negative',
 	},
 	play: async ({canvasElement}) => {
@@ -208,7 +208,7 @@ export const SuccessState = {
 				callback: (close) => close(),
 			},
 		],
-		close: () => console.log('closed full example dialog'), // eslint-disable-line,
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
 		modalStyle: 'success',
 	},
 	play: async ({canvasElement}) => {
@@ -219,3 +219,27 @@ export const SuccessState = {
 		await user.click(canvas.getByText('Show modal'));
 	},
 };
+
+export const PrimaryStyle = {
+	args: {
+		buttonName: 'Show modal',
+		name: 'primary',
+		title: 'Primary Color',
+		message: "This dialog uses the application's primary color.",
+		actions: [
+			{
+				label: 'Ok',
+				callback: (close) => close(),
+			},
+		],
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
+		modalStyle: 'primary',
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Show modal'));
+	},
+};
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index 731a804f7..d5b2921c2 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -110,17 +110,19 @@ const props = defineProps({
 	actions: {type: Array, default: () => []},
 	/** Callback when dialog is being closed by close button or clicking outside of the modal */
 	close: {type: Function, default: null},
-	/** Defines the visual style of the modal: 'default' (primary color), 'negative', or 'success'. */
+	/** Defines the visual style of the modal: 'default' (primary color), 'primary', 'negative', or 'success'. */
 	modalStyle: {
 		type: String,
 		default: () => 'default',
-		validator: (value) => ['default', 'negative', 'success'].includes(value),
+		validator: (value) =>
+			['default', 'primary', 'negative', 'success'].includes(value),
 	},
 });
 
 const styles = computed(() => ({
 	'modal__panel modal__panel--dialog relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8': true,
-	'border-s-[14px] border-primary': props.modalStyle === 'default',
+	'border-none': props.modalStyle === 'default',
+	'border-s-[14px] border-primary': props.modalStyle === 'primary',
 	'border-s-[14px] border-success': props.modalStyle === 'success',
 	'border-s-[14px] border-negative': props.modalStyle === 'negative',
 }));

From 82c1c1e961dd74e31b4470a5af9fd5e07b8370ec Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Tue, 1 Oct 2024 17:42:44 +0800
Subject: [PATCH 4/5] pkp/pkp-lib#10444 Add modalStyle param to existing
 openDialog calls

---
 src/components/ActionPanel/ActionPanel.stories.js            | 1 +
 src/components/Composer/Composer.vue                         | 1 +
 src/components/Container/DecisionPage.vue                    | 2 ++
 src/components/Container/ManageEmailsPage.vue                | 5 ++++-
 src/components/Container/SubmissionWizardPage.vue            | 2 ++
 src/components/Container/WorkflowPage.vue                    | 1 +
 src/components/Form/context/NotifyUsersForm.vue              | 1 +
 src/components/Form/fields/FieldShowEnsuringLink.vue         | 3 ++-
 .../ListPanel/announcements/AnnouncementsListPanel.vue       | 4 ++--
 .../ListPanel/contributors/ContributorsListPanel.vue         | 1 +
 src/components/ListPanel/doi/DoiListPanel.vue                | 1 +
 src/components/ListPanel/highlights/HighlightsListPanel.vue  | 4 ++--
 .../ListPanel/institutions/InstitutionsListPanel.vue         | 4 ++--
 .../ListPanel/submissionFiles/SubmissionFilesListPanel.vue   | 4 ++--
 src/components/ListPanel/submissions/SubmissionsListItem.vue | 4 ++--
 src/mixins/ajaxError.js                                      | 1 +
 src/mixins/autosave.js                                       | 1 +
 .../SubmissionSummaryModal/primaryItems/PublicationJats.vue  | 1 +
 src/pages/workflow/PublicationSectionJats.vue                | 1 +
 src/stores/modalStore.js                                     | 1 +
 20 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/src/components/ActionPanel/ActionPanel.stories.js b/src/components/ActionPanel/ActionPanel.stories.js
index 887cc67ca..ec02c6f6b 100644
--- a/src/components/ActionPanel/ActionPanel.stories.js
+++ b/src/components/ActionPanel/ActionPanel.stories.js
@@ -35,6 +35,7 @@ export const Default = {
 							callback: (close) => close(),
 						},
 					],
+					modalStyle: 'negative',
 				});
 			}
 			return {
diff --git a/src/components/Composer/Composer.vue b/src/components/Composer/Composer.vue
index 0c740dbae..87abe7085 100644
--- a/src/components/Composer/Composer.vue
+++ b/src/components/Composer/Composer.vue
@@ -906,6 +906,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 
diff --git a/src/components/Container/DecisionPage.vue b/src/components/Container/DecisionPage.vue
index be9b2c579..2a3f9ee7e 100644
--- a/src/components/Container/DecisionPage.vue
+++ b/src/components/Container/DecisionPage.vue
@@ -182,6 +182,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -266,6 +267,7 @@ export default {
 				message: this.decisionCompleteDescription,
 				actions,
 				close,
+				modalStyle: 'success',
 			});
 		},
 
diff --git a/src/components/Container/ManageEmailsPage.vue b/src/components/Container/ManageEmailsPage.vue
index d685a9b1b..86cdfb11e 100644
--- a/src/components/Container/ManageEmailsPage.vue
+++ b/src/components/Container/ManageEmailsPage.vue
@@ -151,6 +151,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -187,6 +188,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -224,6 +226,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -325,7 +328,7 @@ export default {
 						title: mailable ? mailable.name : '',
 						mailable: this.currentMailable,
 						onOpenTemplate: this.openTemplate,
-						onConfirmResetTemplate: this.confirmRemoveTemplate,
+						onConfirmResetTemplate: this.confirmResetTemplate,
 						onConfirmRemoveTemplate: this.confirmRemoveTemplate,
 					});
 				});
diff --git a/src/components/Container/SubmissionWizardPage.vue b/src/components/Container/SubmissionWizardPage.vue
index cc49e8a61..d9fbc8bc3 100644
--- a/src/components/Container/SubmissionWizardPage.vue
+++ b/src/components/Container/SubmissionWizardPage.vue
@@ -432,6 +432,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
@@ -661,6 +662,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 
diff --git a/src/components/Container/WorkflowPage.vue b/src/components/Container/WorkflowPage.vue
index 965a02a7a..89053b37b 100644
--- a/src/components/Container/WorkflowPage.vue
+++ b/src/components/Container/WorkflowPage.vue
@@ -352,6 +352,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 
diff --git a/src/components/Form/context/NotifyUsersForm.vue b/src/components/Form/context/NotifyUsersForm.vue
index c7b6d7adb..5cf6a10a8 100644
--- a/src/components/Form/context/NotifyUsersForm.vue
+++ b/src/components/Form/context/NotifyUsersForm.vue
@@ -53,6 +53,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 	},
diff --git a/src/components/Form/fields/FieldShowEnsuringLink.vue b/src/components/Form/fields/FieldShowEnsuringLink.vue
index 078da1856..92f7acd4e 100644
--- a/src/components/Form/fields/FieldShowEnsuringLink.vue
+++ b/src/components/Form/fields/FieldShowEnsuringLink.vue
@@ -23,7 +23,7 @@ export default {
 	},
 	mounted() {
 		/**
-		 * Show the requested message in a modal when the link in the messgae is
+		 * Show the requested message in a modal when the link in the message is
 		 * clicked.
 		 */
 		$('.pkpFormField--options__option button', this.$el).click(() => {
@@ -36,6 +36,7 @@ export default {
 					callback: (close) => {
 						close();
 					},
+					modalStyle: 'primary',
 				},
 				{
 					height: 'auto',
diff --git a/src/components/ListPanel/announcements/AnnouncementsListPanel.vue b/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
index 916245723..e4f9ef03c 100644
--- a/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
+++ b/src/components/ListPanel/announcements/AnnouncementsListPanel.vue
@@ -209,7 +209,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							var self = this;
 							$.ajax({
@@ -233,10 +233,10 @@ export default {
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue
index 6ac8992b1..c665bdaa6 100644
--- a/src/components/ListPanel/contributors/ContributorsListPanel.vue
+++ b/src/components/ListPanel/contributors/ContributorsListPanel.vue
@@ -359,6 +359,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
diff --git a/src/components/ListPanel/doi/DoiListPanel.vue b/src/components/ListPanel/doi/DoiListPanel.vue
index cdc06db7a..65609012d 100644
--- a/src/components/ListPanel/doi/DoiListPanel.vue
+++ b/src/components/ListPanel/doi/DoiListPanel.vue
@@ -789,6 +789,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 		/**
diff --git a/src/components/ListPanel/highlights/HighlightsListPanel.vue b/src/components/ListPanel/highlights/HighlightsListPanel.vue
index f245415c1..a8257c884 100644
--- a/src/components/ListPanel/highlights/HighlightsListPanel.vue
+++ b/src/components/ListPanel/highlights/HighlightsListPanel.vue
@@ -228,7 +228,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							$.ajax({
 								url: this.apiUrl + '/' + id,
@@ -251,10 +251,10 @@ export default {
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
diff --git a/src/components/ListPanel/institutions/InstitutionsListPanel.vue b/src/components/ListPanel/institutions/InstitutionsListPanel.vue
index 59240f1ca..33e19e4fc 100644
--- a/src/components/ListPanel/institutions/InstitutionsListPanel.vue
+++ b/src/components/ListPanel/institutions/InstitutionsListPanel.vue
@@ -211,7 +211,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							var self = this;
 							$.ajax({
@@ -235,10 +235,10 @@ export default {
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
diff --git a/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue b/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
index 229f16639..897c46d49 100644
--- a/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
+++ b/src/components/ListPanel/submissionFiles/SubmissionFilesListPanel.vue
@@ -259,7 +259,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							$.ajax({
 								url: this.apiUrl + '/' + item.id + '?stageId=' + this.stageId,
@@ -281,10 +281,10 @@ export default {
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
diff --git a/src/components/ListPanel/submissions/SubmissionsListItem.vue b/src/components/ListPanel/submissions/SubmissionsListItem.vue
index 84fb6e968..e66332bf6 100644
--- a/src/components/ListPanel/submissions/SubmissionsListItem.vue
+++ b/src/components/ListPanel/submissions/SubmissionsListItem.vue
@@ -813,15 +813,15 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: this.deleteSubmission,
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
diff --git a/src/mixins/ajaxError.js b/src/mixins/ajaxError.js
index dc8d35f1c..20ad96216 100644
--- a/src/mixins/ajaxError.js
+++ b/src/mixins/ajaxError.js
@@ -52,6 +52,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 	},
diff --git a/src/mixins/autosave.js b/src/mixins/autosave.js
index f66f9d1f4..1103d1f4a 100644
--- a/src/mixins/autosave.js
+++ b/src/mixins/autosave.js
@@ -169,6 +169,7 @@ export default {
 							},
 						},
 					],
+					modalStyle: 'primary',
 				});
 			});
 		},
diff --git a/src/pages/dashboard/SubmissionSummaryModal/primaryItems/PublicationJats.vue b/src/pages/dashboard/SubmissionSummaryModal/primaryItems/PublicationJats.vue
index f7c5bab8c..58a01f1ce 100644
--- a/src/pages/dashboard/SubmissionSummaryModal/primaryItems/PublicationJats.vue
+++ b/src/pages/dashboard/SubmissionSummaryModal/primaryItems/PublicationJats.vue
@@ -267,6 +267,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
diff --git a/src/pages/workflow/PublicationSectionJats.vue b/src/pages/workflow/PublicationSectionJats.vue
index 5d481a141..72ca29f6a 100644
--- a/src/pages/workflow/PublicationSectionJats.vue
+++ b/src/pages/workflow/PublicationSectionJats.vue
@@ -275,6 +275,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 
diff --git a/src/stores/modalStore.js b/src/stores/modalStore.js
index beac13296..cee6ccf9f 100644
--- a/src/stores/modalStore.js
+++ b/src/stores/modalStore.js
@@ -51,6 +51,7 @@ export const useModalStore = defineStore('modal', () => {
 					callback: (close) => close(),
 				},
 			],
+			modalStyle: 'negative',
 		});
 	}
 

From 500adf1077c2359bbbea95b620c8cf6b3dcf5330 Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Mon, 7 Oct 2024 20:00:42 +0800
Subject: [PATCH 5/5] pkp/pkp-lib#10444 Add isDismissible prop to the Dialog
 component, and add the X button when there are no actions in the props

---
 src/components/Modal/Dialog.stories.js | 44 ++++++++++++++++++++++++++
 src/components/Modal/Dialog.vue        | 31 ++++++++++++++++--
 2 files changed, 73 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal/Dialog.stories.js b/src/components/Modal/Dialog.stories.js
index a848f95f2..f594966c1 100644
--- a/src/components/Modal/Dialog.stories.js
+++ b/src/components/Modal/Dialog.stories.js
@@ -100,6 +100,50 @@ export const WithBodyComponent = {
 	},
 };
 
+export const NonDismissible = {
+	args: {
+		buttonName: 'Show non-dismissible modal',
+		name: 'non-dismissible-modal',
+		title: 'Non-Dismissible Modal',
+		message:
+			'Clicking outside will not close this modal. Use the "Cancel" button to close it.',
+		actions: [
+			{
+				label: 'Cancel',
+				callback: (close) => close(),
+			},
+		],
+		isDismissible: false,
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Show non-dismissible modal'));
+	},
+};
+
+export const NoActionButtons = {
+	args: {
+		buttonName: 'Show modal',
+		name: 'no-actions-modal',
+		title: 'Non Action Buttons Modal',
+		message:
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+		actions: [],
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Show modal'));
+	},
+};
+
 export const DialogComplex = {
 	args: {
 		buttonName: 'Full Example',
diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue
index d5b2921c2..010871027 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -1,6 +1,6 @@
 <template>
 	<TransitionRoot as="template" :show="opened">
-		<HLDialog class="modal" @close="onClose">
+		<HLDialog class="modal" @close="onClose('default')">
 			<TransitionChild
 				as="template"
 				enter="ease-out duration-300"
@@ -28,6 +28,20 @@
 						leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 					>
 						<DialogPanel data-cy="dialog" :class="styles">
+							<button
+								v-if="noActions"
+								class="absolute right-3 top-3 cursor-pointer bg-transparent"
+								@click="onClose"
+							>
+								<Icon
+									class="h-6 w-6 text-negative"
+									icon="Cancel"
+									:aria-hidden="true"
+								/>
+								<span class="-screenReader">
+									{{ t('common.close') }}
+								</span>
+							</button>
 							<div class="flex min-h-12 items-center">
 								<DialogTitle
 									v-if="title"
@@ -117,6 +131,11 @@ const props = defineProps({
 		validator: (value) =>
 			['default', 'primary', 'negative', 'success'].includes(value),
 	},
+	/** Defines if clicking outside the modal should close it */
+	isDismissible: {
+		type: Boolean,
+		default: () => true,
+	},
 });
 
 const styles = computed(() => ({
@@ -144,14 +163,22 @@ const iconStyles = computed(() => ({
 	'bg-negative': props.modalStyle === 'negative',
 }));
 
+const noActions = computed(() => !props.actions?.length);
+
 const emit = defineEmits(['close']);
 
 const isLoading = ref(false);
 
-function onClose() {
+function onClose(evtType) {
+	// Prevent closing the modal on outside click or "Esc" key if isDismissible is false
+	if (!props.isDismissible && evtType === 'default') {
+		return;
+	}
+
 	if (props.close) {
 		props.close();
 	}
+
 	emit('close');
 }