From 501ba1a0319eec052e67414756b932417706e53d Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 19 Jun 2023 16:00:45 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20fix=20DatePicker=20alignm?=
 =?UTF-8?q?ents?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Due to the previous changes of LabelledBox that allows it to fit dynamic
height containers, we forgot to update the DatePicker resulting in a broken
CSS alignment.
---
 .changeset/seven-icons-peel.md                |  5 +++
 .../components/Forms/DatePicker/index.scss    |  7 +++-
 .../src/components/Forms/DatePicker/index.tsx | 34 ++++++++++---------
 3 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/seven-icons-peel.md

diff --git a/.changeset/seven-icons-peel.md b/.changeset/seven-icons-peel.md
new file mode 100644
index 0000000..0df5298
--- /dev/null
+++ b/.changeset/seven-icons-peel.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix DatePicker alignments
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index 4408cdd..31c35b8 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -11,7 +11,7 @@
     border-color: var(--c--components--forms-datepicker--border-color);
     border-style: var(--c--components--forms-datepicker--border-style);
     display: flex;
-    align-items: center;
+
     transition: border var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
     padding: 0 0.75rem;
     gap: 1rem;
@@ -25,6 +25,11 @@
     &--clickable {
       cursor: pointer;
     }
+
+    &__icon {
+      display: flex;
+      align-items: center;
+    }
   }
 
   &__inner {
diff --git a/packages/react/src/components/Forms/DatePicker/index.tsx b/packages/react/src/components/Forms/DatePicker/index.tsx
index acab122..f46cd96 100644
--- a/packages/react/src/components/Forms/DatePicker/index.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.tsx
@@ -130,22 +130,24 @@ export const DatePicker = ({
           {state.value && (
             <input type="hidden" name={name} value={state.value?.toString()} />
           )}
-          <Button
-            {...{
-              ...otherButtonProps,
-              "aria-label": t(
-                state.isOpen
-                  ? "components.forms.date_picker.toggle_button_aria_label_close"
-                  : "components.forms.date_picker.toggle_button_aria_label_open"
-              ),
-            }}
-            color="tertiary"
-            size="small"
-            className="c__date-picker__wrapper__toggle"
-            onClick={state.toggle}
-            icon={<span className="material-icons">calendar_today</span>}
-            disabled={disabled}
-          />
+          <div className="c__date-picker__wrapper__icon">
+            <Button
+              {...{
+                ...otherButtonProps,
+                "aria-label": t(
+                  state.isOpen
+                    ? "components.forms.date_picker.toggle_button_aria_label_close"
+                    : "components.forms.date_picker.toggle_button_aria_label_open"
+                ),
+              }}
+              color="tertiary"
+              size="small"
+              className="c__date-picker__wrapper__toggle"
+              onClick={state.toggle}
+              icon={<span className="material-icons">calendar_today</span>}
+              disabled={disabled}
+            />
+          </div>
           <LabelledBox label={label} labelAsPlaceholder={labelAsPlaceholder}>
             <div className="c__date-picker__inner">
               {!labelAsPlaceholder && (