From 9643e4f125119822c23b0f7fb87b186421c4505f Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Thu, 26 Sep 2024 02:22:21 +0800
Subject: [PATCH] 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']);