🩹(react) fix DateRangePicker layout overflow

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.

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], {

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,

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);

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>
+    </>
   );
 };