From e53cc730fca02c6eb3145f163d47e7538bd1cb69 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Tue, 14 May 2024 16:33:23 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20disable=20default=20Modal?=
 =?UTF-8?q?=20text=20align=20center?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This default behavior was causing lots of troubles when using modals.
For instance the Select value were centered, it was also the case for
most of consumer's component inside modals, forcing the users to
set text-align:left on their side, resulting in additionnal work.
Now we use another approach by using a specific div for the content
we want centered.
---
 .changeset/tall-wombats-leave.md                             | 5 +++++
 packages/react/src/components/Modal/ConfirmationModal.tsx    | 4 +++-
 .../react/src/components/Modal/DeleteConfirmationModal.tsx   | 5 ++++-
 packages/react/src/components/Modal/MessageModal.tsx         | 4 +++-
 packages/react/src/components/Modal/index.scss               | 5 ++++-
 5 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/tall-wombats-leave.md

diff --git a/.changeset/tall-wombats-leave.md b/.changeset/tall-wombats-leave.md
new file mode 100644
index 0000000..a972b1b
--- /dev/null
+++ b/.changeset/tall-wombats-leave.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+💄(react) disable default Modal text align center
diff --git a/packages/react/src/components/Modal/ConfirmationModal.tsx b/packages/react/src/components/Modal/ConfirmationModal.tsx
index bb8d483..7e5e4f7 100644
--- a/packages/react/src/components/Modal/ConfirmationModal.tsx
+++ b/packages/react/src/components/Modal/ConfirmationModal.tsx
@@ -33,7 +33,9 @@ export const ConfirmationModal = ({
       }
       {...props}
     >
-      {children ?? t("components.modals.helpers.confirmation.children")}
+      <div className="c__modal__content__text">
+        {children ?? t("components.modals.helpers.confirmation.children")}
+      </div>
     </Modal>
   );
 };
diff --git a/packages/react/src/components/Modal/DeleteConfirmationModal.tsx b/packages/react/src/components/Modal/DeleteConfirmationModal.tsx
index 325b8e9..93bb27d 100644
--- a/packages/react/src/components/Modal/DeleteConfirmationModal.tsx
+++ b/packages/react/src/components/Modal/DeleteConfirmationModal.tsx
@@ -38,7 +38,10 @@ export const DeleteConfirmationModal = ({
       }
       {...props}
     >
-      {children ?? t("components.modals.helpers.delete_confirmation.children")}
+      <div className="c__modal__content__text">
+        {children ??
+          t("components.modals.helpers.delete_confirmation.children")}
+      </div>
     </Modal>
   );
 };
diff --git a/packages/react/src/components/Modal/MessageModal.tsx b/packages/react/src/components/Modal/MessageModal.tsx
index f60e074..e5dfa4a 100644
--- a/packages/react/src/components/Modal/MessageModal.tsx
+++ b/packages/react/src/components/Modal/MessageModal.tsx
@@ -41,7 +41,9 @@ export const MessageModal = ({
       }
       {...props}
     >
-      {children ?? t("components.modals.helpers.disclaimer.children")}
+      <div className="c__modal__content__text">
+        {children ?? t("components.modals.helpers.disclaimer.children")}
+      </div>
     </Modal>
   );
 };
diff --git a/packages/react/src/components/Modal/index.scss b/packages/react/src/components/Modal/index.scss
index a638700..4571340 100644
--- a/packages/react/src/components/Modal/index.scss
+++ b/packages/react/src/components/Modal/index.scss
@@ -72,7 +72,6 @@
   }
 
   &__content {
-    text-align: center;
     font-size: var(--c--components--modal--content-font-size);
     font-weight: var(--c--components--modal--content-font-weight);
     color: var(--c--components--modal--content-color);
@@ -80,6 +79,10 @@
     &:focus-visible {
       outline: none;
     }
+
+    &__text {
+      text-align: center;
+    }
   }
 
   &__close {