From e75e5138a12d58c370af1808a448f28be296b486 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Tue, 7 Jun 2022 16:26:16 +0200
Subject: [PATCH 1/3] Support close button within modal boundaries

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/Modal/Modal.vue | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index 53c480e69c..ce08deb973 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -166,7 +166,7 @@
 						</Actions>
 
 						<!-- Close modal -->
-						<Actions v-if="canClose" class="header-close">
+						<Actions v-if="canClose && !closeButtonContained" class="header-close">
 							<ActionButton @click="close">
 								<template #icon>
 									<Close :size="iconSize" title="" decorative />
@@ -207,6 +207,16 @@
 
 					<!-- Content -->
 					<div class="modal-container">
+						<!-- Close modal -->
+						<ButtonVue v-if="canClose && closeButtonContained"
+							type="tertiary"
+							class="modal-container__close"
+							:aria-label="closeButtonAriaLabel"
+							@click="close">
+							<template #icon>
+								<Close :size="20" title="" decorative />
+							</template>
+						</ButtonVue>
 						<!-- @slot Modal content to render -->
 						<slot />
 					</div>
@@ -241,6 +251,7 @@ import Tooltip from '../../directives/Tooltip/index.js'
 import l10n from '../../mixins/l10n.js'
 import Timer from '../../utils/Timer.js'
 import { t } from '../../l10n.js'
+import ButtonVue from '../../components/Button/index.js'
 
 import ChevronLeft from 'vue-material-design-icons/ChevronLeft'
 import ChevronRight from 'vue-material-design-icons/ChevronRight'
@@ -261,6 +272,7 @@ export default {
 		Close,
 		Pause,
 		Play,
+		ButtonVue,
 	},
 
 	directives: {
@@ -367,6 +379,15 @@ export default {
 			type: String,
 			default: 'body',
 		},
+
+		/**
+		 * Pass in true if you want the modal 'close' button to be displayed
+		 * within the modal boundaries.
+		 */
+		closeButtonContained: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {
@@ -395,6 +416,10 @@ export default {
 				'--icon-size': this.iconSize + 'px',
 			}
 		},
+
+		closeButtonAriaLabel() {
+			return t('Close modal')
+		},
 	},
 
 	watch: {
@@ -776,6 +801,7 @@ export default {
 
 	/* Content */
 	.modal-container {
+		position: relative;
 		display: block;
 		overflow: auto; // avoids unecessary hacks if the content should be bigger than the modal
 		padding: 0;
@@ -783,6 +809,11 @@ export default {
 		border-radius: var(--border-radius-large);
 		background-color: var(--color-main-background);
 		box-shadow: 0 0 40px rgba(0, 0, 0, .2);
+		&__close {
+			position: absolute;
+			top: 4px;
+			right: 4px;
+		}
 	}
 
 	// Sizing

From 6069a1b30ea54061108a2936a93c2ebce49b0f5a Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 8 Jun 2022 08:34:23 +0200
Subject: [PATCH 2/3] Default with the close button within the modal boundaries

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 src/components/Modal/Modal.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/Modal.vue b/src/components/Modal/Modal.vue
index ce08deb973..b613c05b8f 100644
--- a/src/components/Modal/Modal.vue
+++ b/src/components/Modal/Modal.vue
@@ -381,12 +381,12 @@ export default {
 		},
 
 		/**
-		 * Pass in true if you want the modal 'close' button to be displayed
-		 * within the modal boundaries.
+		 * Pass in false if you want the modal 'close' button to be displayed
+		 * outside the modal boundaries, in the top right corner of the window
 		 */
 		closeButtonContained: {
 			type: Boolean,
-			default: false,
+			default: true,
 		},
 	},
 

From 23d2294e5f4696594ac269547ed7164d58c5a7e2 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@pm.me>
Date: Wed, 8 Jun 2022 13:11:27 +0200
Subject: [PATCH 3/3] l10n extract

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
---
 l10n/messages.pot | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/l10n/messages.pot b/l10n/messages.pot
index ba35d7b1c7..b3e0779f02 100644
--- a/l10n/messages.pot
+++ b/l10n/messages.pot
@@ -32,6 +32,9 @@ msgstr ""
 msgid "Close"
 msgstr ""
 
+msgid "Close modal"
+msgstr ""
+
 msgid "Close navigation"
 msgstr ""