From 9795b7184bdae49ee7ab8ea093ca9cc137d37daa Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Sun, 14 Jan 2024 21:32:08 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=A9=B9(react)=20fix=20DateRangePicker=20l?=
 =?UTF-8?q?ayout=20overflow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolved a width conflict in the date range picker where the field width
conflicted with the component's min-width. This caused content
overflow in the field container, resulting in layout issues.
---
 .changeset/tidy-beds-attack.md                |  5 +++
 .../Forms/DatePicker/DatePickerAux.tsx        |  9 +++++-
 .../Forms/DatePicker/DateRangePicker.tsx      |  1 +
 .../components/Forms/DatePicker/_index.scss   |  7 ++++-
 .../Forms/DatePicker/index.stories.tsx        | 31 ++++++++++++-------
 5 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/tidy-beds-attack.md

diff --git a/.changeset/tidy-beds-attack.md b/.changeset/tidy-beds-attack.md
new file mode 100644
index 0000000..6ac2092
--- /dev/null
+++ b/.changeset/tidy-beds-attack.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+fix DateRangePicker layout overflow
diff --git a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
index 9ef2319..7230bee 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -46,6 +46,7 @@ export type DatePickerAuxProps = PropsWithChildren &
     isFocused: boolean;
     labelAsPlaceholder: boolean;
     optionalClassName?: string;
+    isRange?: boolean;
     onClear: () => void;
   };
 
@@ -67,6 +68,7 @@ const DatePickerAux = forwardRef(
       locale,
       disabled = false,
       optionalClassName,
+      isRange,
       ...props
     }: DatePickerAuxProps,
     ref: Ref<HTMLDivElement>,
@@ -82,7 +84,12 @@ const DatePickerAux = forwardRef(
 
     return (
       <I18nProvider locale={locale || currentLocale}>
-        <Field {...props}>
+        <Field
+          {...props}
+          className={classNames({
+            "c__date-picker__range__container": isRange,
+          })}
+        >
           <div
             ref={pickerRef}
             className={classNames(["c__date-picker", optionalClassName], {
diff --git a/packages/react/src/components/Forms/DatePicker/DateRangePicker.tsx b/packages/react/src/components/Forms/DatePicker/DateRangePicker.tsx
index 5bb8514..6ca1e92 100644
--- a/packages/react/src/components/Forms/DatePicker/DateRangePicker.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DateRangePicker.tsx
@@ -80,6 +80,7 @@ export const DateRangePicker = ({
         pickerState,
         pickerProps,
         optionalClassName: "c__date-picker__range",
+        isRange: true,
         onClear: () => {
           pickerState.setValue({
             start: null as unknown as DateValue,
diff --git a/packages/react/src/components/Forms/DatePicker/_index.scss b/packages/react/src/components/Forms/DatePicker/_index.scss
index 3e63acc..6b23c26 100644
--- a/packages/react/src/components/Forms/DatePicker/_index.scss
+++ b/packages/react/src/components/Forms/DatePicker/_index.scss
@@ -221,7 +221,12 @@
   }
 
   &__range {
-    min-width: px-to-rem(350px);
+    $component-min-width: px-to-rem(350px);
+    min-width: $component-min-width;
+
+    &__container {
+      min-width: $component-min-width;
+    }
 
     &__separator {
       background-color: var(--c--theme--colors--greyscale-400);
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index 10fd693..06055bc 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -189,17 +189,26 @@ export const RangeControlled = () => {
     "2023-06-23T13:37:00.000+02:00",
   ]);
   return (
-    <div>
+    <>
       <div className="clr-greyscale-900">Value: {value?.join("  ")}</div>
-      <DateRangePicker
-        startLabel="Start date"
-        endLabel="Due date"
-        minValue="2023-01-23T00:00:00.000+00:00"
-        maxValue="2023-08-23T00:00:00.000+00:00"
-        value={value}
-        onChange={(e) => setValue(e)}
-      />
-      <Button onClick={() => setValue(null)}>Reset</Button>
-    </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "1rem",
+          marginTop: "1rem",
+        }}
+      >
+        <DateRangePicker
+          startLabel="Start date"
+          endLabel="Due date"
+          minValue="2023-01-23T00:00:00.000+00:00"
+          maxValue="2023-08-23T00:00:00.000+00:00"
+          value={value}
+          onChange={(e) => setValue(e)}
+        />
+        <Button onClick={() => setValue(null)}>Reset</Button>
+      </div>
+    </>
   );
 };