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

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.
 

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

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']);