🐛(react) fix DatePicker alignments

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.
openfun · Jun 19, 2023 · 501ba1a · 501ba1a
1 parent 760ffb4
commit 501ba1a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 17 deletions.
diff --git a/.changeset/seven-icons-peel.md 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
@@ -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
@@ -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 && (