pkp/pkp-lib#10444 Add isDismissible prop to the Dialog component, and…

… add the X button when there are no actions in the props

src/components/Modal/Dialog.stories.js

@@ -100,6 +100,50 @@ export const WithBodyComponent = {
 	},
 };
 
+export const NonDismissible = {
+	args: {
+		buttonName: 'Show non-dismissible modal',
+		name: 'non-dismissible-modal',
+		title: 'Non-Dismissible Modal',
+		message:
+			'Clicking outside will not close this modal. Use the "Cancel" button to close it.',
+		actions: [
+			{
+				label: 'Cancel',
+				callback: (close) => close(),
+			},
+		],
+		isDismissible: false,
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
+	},
+	play: async ({canvasElement}) => {
+		// Assigns canvas to the component root element
+		const canvas = within(canvasElement);
+		const user = userEvent.setup();
+
+		await user.click(canvas.getByText('Show non-dismissible modal'));
+	},
+};
+
+export const NoActionButtons = {
+	args: {
+		buttonName: 'Show modal',
+		name: 'no-actions-modal',
+		title: 'Non Action Buttons Modal',
+		message:
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+		actions: [],
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
+	},
+	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'));
+	},
+};
+
 export const DialogComplex = {
 	args: {
 		buttonName: 'Full Example',

src/components/Modal/Dialog.vue

@@ -1,6 +1,6 @@
 <template>
 	<TransitionRoot as="template" :show="opened">
-		<HLDialog class="modal" @close="onClose">
+		<HLDialog class="modal" @close="onClose('default')">
 			<TransitionChild
 				as="template"
 				enter="ease-out duration-300"
@@ -28,6 +28,20 @@
 						leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
 					>
 						<DialogPanel data-cy="dialog" :class="styles">
+							<button
+								v-if="noActions"
+								class="absolute right-3 top-3 cursor-pointer bg-transparent"
+								@click="onClose"
+							>
+								<Icon
+									class="h-6 w-6 text-negative"
+									icon="Cancel"
+									:aria-hidden="true"
+								/>
+								<span class="-screenReader">
+									{{ t('common.close') }}
+								</span>
+							</button>
 							<div class="flex min-h-12 items-center">
 								<DialogTitle
 									v-if="title"
@@ -117,6 +131,11 @@ const props = defineProps({
 		validator: (value) =>
 			['default', 'primary', 'negative', 'success'].includes(value),
 	},
+	/** Defines if clicking outside the modal should close it */
+	isDismissible: {
+		type: Boolean,
+		default: () => true,
+	},
 });
 
 const styles = computed(() => ({
@@ -144,14 +163,22 @@ const iconStyles = computed(() => ({
 	'bg-negative': props.modalStyle === 'negative',
 }));
 
+const noActions = computed(() => !props.actions?.length);
+
 const emit = defineEmits(['close']);
 
 const isLoading = ref(false);
 
-function onClose() {
+function onClose(evtType) {
+	// Prevent closing the modal on outside click or "Esc" key if isDismissible is false
+	if (!props.isDismissible && evtType === 'default') {
+		return;
+	}
+
 	if (props.close) {
 		props.close();
 	}
+
 	emit('close');
 }