From 88a6e501a31e27c24bb45c4f0dfd52bc6c68e064 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Jakes=CC=8C?= <jan@jakes.pro>
Date: Mon, 1 Jun 2020 16:10:00 +0200
Subject: [PATCH] Keep modal heading margin only when close button is shown

[MAILPOET-2777]
---
 assets/css/src/components/_modal.scss  | 2 +-
 assets/js/src/common/modal/modal.tsx   | 1 +
 assets/js/src/common/modal/overlay.tsx | 3 +++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/css/src/components/_modal.scss b/assets/css/src/components/_modal.scss
index 3b6143837d..17f65d8e63 100644
--- a/assets/css/src/components/_modal.scss
+++ b/assets/css/src/components/_modal.scss
@@ -59,7 +59,7 @@
   top: 0;
   z-index: $modal-header-z-index;
 
-  h3 {
+  .mailpoet-modal-is-dismissible & h3 {
     margin-right: $modal-close-button-size + $grid-gap;
   }
 }
diff --git a/assets/js/src/common/modal/modal.tsx b/assets/js/src/common/modal/modal.tsx
index d3014aff8e..9bbf026e39 100644
--- a/assets/js/src/common/modal/modal.tsx
+++ b/assets/js/src/common/modal/modal.tsx
@@ -31,6 +31,7 @@ function Modal({
 }: Props) {
   return createPortal(
     <ModalOverlay
+      isDismissible={isDismissible}
       onRequestClose={onRequestClose}
       shouldCloseOnEsc={shouldCloseOnEsc}
       shouldCloseOnClickOutside={shouldCloseOnClickOutside}
diff --git a/assets/js/src/common/modal/overlay.tsx b/assets/js/src/common/modal/overlay.tsx
index 1ed38d6db4..3a9374ee27 100644
--- a/assets/js/src/common/modal/overlay.tsx
+++ b/assets/js/src/common/modal/overlay.tsx
@@ -4,6 +4,7 @@ import classnames from 'classnames';
 const ESCAPE = 27;
 
 type Props = {
+  isDismissible?: boolean,
   shouldCloseOnEsc?: boolean,
   shouldCloseOnClickOutside?: boolean,
   onRequestClose?: (event: React.SyntheticEvent) => void,
@@ -12,6 +13,7 @@ type Props = {
 };
 
 function ModalOverlay({
+  isDismissible = true,
   shouldCloseOnEsc = true,
   shouldCloseOnClickOutside = true,
   onRequestClose = () => {},
@@ -56,6 +58,7 @@ function ModalOverlay({
       ref={overlayRef}
       className={classnames(
         'mailpoet-modal-screen-overlay',
+        isDismissible ? 'mailpoet-modal-is-dismissible' : null,
         className
       )}
       onKeyDown={handleKeyDown}