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

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.
 

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

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