From 7461626822e44332e384d037d258ea8c4a22dcef Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 23 Feb 2024 14:25:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1(react)=20improve=20DateRangerPicke?=
 =?UTF-8?q?r=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component was not able to resize properly on narrow screens.
---
 .changeset/nine-pots-fold.md                  |  5 +++
 .../components/Forms/DatePicker/_index.scss   | 42 +++++++++++++++++--
 .../Forms/DatePicker/index.stories.tsx        | 31 ++++++++++++++
 3 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nine-pots-fold.md

diff --git a/.changeset/nine-pots-fold.md b/.changeset/nine-pots-fold.md
new file mode 100644
index 0000000..708c501
--- /dev/null
+++ b/.changeset/nine-pots-fold.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": patch
+---
+
+improve DateRangerPicker responsive
diff --git a/packages/react/src/components/Forms/DatePicker/_index.scss b/packages/react/src/components/Forms/DatePicker/_index.scss
index 6b23c26..041cb7f 100644
--- a/packages/react/src/components/Forms/DatePicker/_index.scss
+++ b/packages/react/src/components/Forms/DatePicker/_index.scss
@@ -1,5 +1,5 @@
 @use 'src/utils' as *;
-
+@use "../../../utils/responsive" as *;
 
 .c__date-picker {
   position: relative;
@@ -222,12 +222,48 @@
 
   &__range {
     $component-min-width: px-to-rem(350px);
-    min-width: $component-min-width;
+
+    // MUST READ:
+    // We can only use @container property for full-width fields, as the container-type: inline-size property
+    // should not be based on the children's width. We cannot at the same time use container-type and a default
+    // width.
+    // So in order to make this work we use @media for the non-full-width fields and @container for the full-width.
 
     &__container {
-      min-width: $component-min-width;
+
+      &:not(.c__field--full-width) {
+        min-width: $component-min-width;
+
+        @include media(sm) {
+          min-width: auto;
+
+          .c__date-picker__wrapper__icon {
+            display: none;
+          }
+        }
+      }
+
+      &.c__field--full-width {
+
+        .c__date-picker__wrapper {
+          // The container-type must absolutely not be parent of the calendar popover or otherwise the popover will
+          // not be able to float above other DOM elements as a container-type: inline-size defines a new stacking
+          // context.
+          container-type: inline-size;
+        }
+
+        @container (max-width: #{$component-min-width}) {
+
+          .c__date-picker__wrapper__icon {
+            display: none;
+          }
+        }
+      }
     }
 
+
+
+
     &__separator {
       background-color: var(--c--theme--colors--greyscale-400);
       height: px-to-rem(24px);
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index 06055bc..d119d0a 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -212,3 +212,34 @@ export const RangeControlled = () => {
     </>
   );
 };
+
+export const RangeControlledFull = () => {
+  const [value, setValue] = useState<[string, string] | null>([
+    "2023-05-23T13:37:00.000+02:00",
+    "2023-06-23T13:37:00.000+02:00",
+  ]);
+  return (
+    <>
+      <div className="clr-greyscale-900">Value: {value?.join("  ")}</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)}
+          fullWidth={true}
+        />
+        <Button onClick={() => setValue(null)}>Reset</Button>
+      </div>
+    </>
+  );
+};