pkp/pkp-lib#10444 Update Dialog component to add basic modalStyle and…

… add documentation how the styles are used

src/components/Modal/Dialog.mdx

@@ -23,10 +23,10 @@ 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, 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.
+- **`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
 

src/components/Modal/Dialog.stories.js

@@ -45,6 +45,7 @@ export const DialogBasic = {
 				callback: (close) => close(),
 			},
 		],
+		modalStyle: 'basic',
 	},
 	play: async ({canvasElement}) => {
 		// Assigns canvas to the component root element
@@ -110,6 +111,7 @@ export const NonDismissible = {
 		actions: [
 			{
 				label: 'Cancel',
+				isWarnable: true,
 				callback: (close) => close(),
 			},
 		],
@@ -215,15 +217,14 @@ export const NegativeState = {
 		actions: [
 			{
 				label: 'Cancel Invitation',
-				isPrimary: true,
+				isWarnable: true,
 				callback: (close) => {
 					// Simulate a server request
 					setTimeout(() => close(), 2000);
 				},
 			},
 			{
 				label: 'Cancel',
-				isWarnable: true,
 				callback: (close) => close(),
 			},
 		],

src/components/Modal/Dialog.vue

@@ -124,12 +124,12 @@ 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), 'primary', 'negative', or 'success'. */
+	/** Defines the visual style of the modal: 'basic' (no border style)', 'primary', 'negative', or 'success'. */
 	modalStyle: {
 		type: String,
-		default: () => 'default',
+		default: () => 'primary',
 		validator: (value) =>
-			['default', 'primary', 'negative', 'success'].includes(value),
+			['primary', 'negative', 'success', 'basic'].includes(value),
 	},
 	/** Defines if clicking outside the modal should close it */
 	isDismissible: {
@@ -138,16 +138,22 @@ const props = defineProps({
 	},
 });
 
+const computedStyle = computed(() => {
+	return ['primary', 'negative', 'success', 'basic'].includes(props.modalStyle)
+		? props.modalStyle
+		: 'primary';
+});
+
 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-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',
+	'border-none': computedStyle.value === 'basic',
+	'border-s-[14px] border-primary': computedStyle.value === 'primary',
+	'border-s-[14px] border-success': computedStyle.value === 'success',
+	'border-s-[14px] border-negative': computedStyle.value === 'negative',
 }));
 
 const icon = computed(() => {
-	switch (props.modalStyle) {
+	switch (computedStyle.value) {
 		case 'negative':
 			return 'Cancel';
 		case 'success':
@@ -159,8 +165,8 @@ const icon = computed(() => {
 
 const iconStyles = computed(() => ({
 	'flex h-12 w-12 items-center justify-center rounded-full': true,
-	'bg-success': props.modalStyle === 'success',
-	'bg-negative': props.modalStyle === 'negative',
+	'bg-success': computedStyle.value === 'success',
+	'bg-negative': computedStyle.value === 'negative',
 }));
 
 const noActions = computed(() => !props.actions?.length);