pkp/pkp-lib#10444 Improve dialog component design (#415)

* pkp/pkp-lib#10444 Change Dialog component styling

* pkp/pkp-lib#10444 Rename prop type with modalStyle

* pkp/pkp-lib#10444 Update default Dialog modal styling

* pkp/pkp-lib#10444 Add modalStyle param to existing openDialog calls

* pkp/pkp-lib#10444 Add isDismissible prop to the Dialog component, and add the X button when there are no actions in the props

* pkp/pkp-lib#10444 Add modalStyle to components that use the openDialog api

* pkp/pkp-lib#10444 Update Dialog component to add basic modalStyle and add documentation how the styles are used

* pkp/pkp-lib#10444 Remove computed defination of default modalStyle in Dialog component

* pkp/pkp-lib#10444 Add modalStyle to new dialogs related to user invitations

* pkp/pkp-lib#10444 Remove unused classes for dialog component

* pkp/pkp-lib#10444 Remove css style for modal--popup class

* pkp/pkp-lib#10444 Update param name for onClose function in Dialog component

Author: blesildaramirez

src/components/ActionPanel/ActionPanel.stories.js

@@ -35,6 +35,7 @@ export const Default = {
 							callback: (close) => close(),
 						},
 					],
+					modalStyle: 'negative',
 				});
 			}
 			return {

src/components/Composer/Composer.vue

@@ -906,6 +906,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 

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',
 			});
 		},
 

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,
 					});
 				});

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',
 			});
 		},
 

src/components/Container/WorkflowPage.vue

@@ -341,7 +341,7 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isWarnable: true,
+						isPrimary: true,
 						callback: (close) => {
 							close();
 							this.createVersion();
@@ -352,6 +352,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 
@@ -447,7 +448,7 @@ export default {
 							this.workingPublication.status === pkp.const.STATUS_SCHEDULED
 								? this.unscheduleLabel
 								: this.unpublishLabel,
-						isPrimary: true,
+						isWarnable: true,
 						callback: (close) => {
 							this.unpublish(this.workingPublication);
 							close();
@@ -458,6 +459,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 

src/components/Form/context/NotifyUsersForm.vue

@@ -53,6 +53,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 	},

src/components/Form/fields/FieldOrcid.vue

@@ -190,6 +190,7 @@ export default {
 						},
 					},
 				],
+				modalStyle: 'primary',
 				close: () => {},
 			});
 		},
@@ -227,20 +228,20 @@ export default {
 				actions: [
 					{
 						label: this.t('common.yes'),
-						isPrimary: true,
+						isWarnable: true,
 						callback: async (close) => {
 							await this.deleteOrcid();
 							close();
 						},
 					},
 					{
 						label: this.t('common.no'),
-						isWarnable: true,
 						callback: (close) => {
 							close();
 						},
 					},
 				],
+				modalStyle: 'negative',
 				close: () => {},
 			});
 		},

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',

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',
 			});
 		},
 

src/components/ListPanel/contributors/ContributorsListPanel.vue

@@ -363,6 +363,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 

src/components/ListPanel/doi/DoiListItem.vue

@@ -513,12 +513,12 @@ export default {
 				actions: [
 					{
 						label: this.t('common.ok'),
-						isPrimary: true,
 						callback: (close) => {
 							close();
 						},
 					},
 				],
+				modalStyle: 'negative',
 			});
 		},
 		openVersionModal() {
@@ -814,6 +814,7 @@ export default {
 						},
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 		triggerDeposit() {

src/components/ListPanel/doi/DoiListPanel.vue

@@ -375,13 +375,13 @@ export default {
 					actions: [
 						{
 							label: this.t('common.ok'),
-							isPrimary: true,
 							callback: (close) => {
 								this.failedDoiActions = [];
 								close();
 							},
 						},
 					],
+					modalStyle: 'negative',
 					bodyComponent: DoiFailedActionDialogBody,
 					bodyProps: {
 						failedDoiActions: this.failedDoiActions,
@@ -789,6 +789,7 @@ export default {
 						callback: (close) => close(),
 					},
 				],
+				modalStyle: 'primary',
 			});
 		},
 		/**

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',
 			});
 		},
 

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',
 			});
 		},
 

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',
 			});
 		},
 

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',
 			});
 		},
 

src/components/Modal/Dialog.mdx

@@ -19,6 +19,15 @@ 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 `modalStyle`. It accepts the following values:
+
+- **`primary`**: A modal style that uses the primary color scheme. Use this for informational dialogs or confirmation modals that don't involve negative actions. This is the default style used when the modal is invoked via the composable API for the Dialog component.
+- **`negative`**: Indicates a negative state, typically for error messages or alerts. It should also be used for confirming negative actions like deleting or removing items that may be irreversible.
+- **`success`**: Represents a positive state, often used for success notifications.
+- **` basic`**: The standard modal style, which has no special border styling. This style is applied by default in the legacy PHP implementation of the Dialog component, if no value is specified.
+
 ## Accessibility
 
 To correctly handle accessibility (title, description) and focus management - [headless-ui](https://headlessui.com) library is used.