From 87ec3a5061119d2649e05e30e07398efb9386ba7 Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Jun 2023 16:58:23 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20revamp=20clear=20da?=
 =?UTF-8?q?te=20picker=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Revamp DatePicker component to enhance range functionalities by elevating
the clear button, resulting in the utilization of a single button across
multiple DateField inputs.
---
 .../components/Forms/DatePicker/DateField.tsx | 38 +++++--------------
 .../components/Forms/DatePicker/index.scss    | 11 +++++-
 .../Forms/DatePicker/index.spec.tsx           |  6 ++-
 .../src/components/Forms/DatePicker/index.tsx | 16 ++++++++
 4 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/packages/react/src/components/Forms/DatePicker/DateField.tsx b/packages/react/src/components/Forms/DatePicker/DateField.tsx
index 308fe7f..26e890e 100644
--- a/packages/react/src/components/Forms/DatePicker/DateField.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DateField.tsx
@@ -52,37 +52,17 @@ export const DateField = (props: AriaDatePickerProps<DateValue>) => {
   });
   const ref = useRef<HTMLDivElement>(null);
   const { fieldProps } = useDateField(props, state, ref);
-  const { t } = useCunningham();
 
   return (
-    <>
-      <div className="c__date-picker__inner__value" {...fieldProps} ref={ref}>
-        {state.segments.map((segment, i, segments) => (
-          <DateSegmentInput
-            key={i}
-            currentSegment={segment}
-            previousSegment={segments[i - 1]}
-            state={state}
-          />
-        ))}
-      </div>
-      {!props.isDisabled && (
-        <Button
-          className={classNames("c__date-picker__inner__action", {
-            "c__date-picker__inner__action--empty": !state.value,
-          })}
-          color="tertiary"
-          size="small"
-          icon={<span className="material-icons">cancel</span>}
-          onClick={() => {
-            // "era" option doesn't clear partially filled dataField.
-            state.clearSegment("day");
-            state.clearSegment("month");
-            state.clearSegment("year");
-          }}
-          aria-label={t("components.forms.date_picker.clear_button_aria_label")}
+    <div className="c__date-picker__inner__value" {...fieldProps} ref={ref}>
+      {state.segments.map((segment, i, segments) => (
+        <DateSegmentInput
+          key={i}
+          currentSegment={segment}
+          previousSegment={segments[i - 1]}
+          state={state}
         />
-      )}
-    </>
+      ))}
+    </div>
   );
 };
diff --git a/packages/react/src/components/Forms/DatePicker/index.scss b/packages/react/src/components/Forms/DatePicker/index.scss
index 31c35b8..f9e1722 100644
--- a/packages/react/src/components/Forms/DatePicker/index.scss
+++ b/packages/react/src/components/Forms/DatePicker/index.scss
@@ -62,7 +62,9 @@
       height: auto;
 
       &.c__button--small.c__button--icon-only {
-        width: 1.25rem;
+        width: fit-content;
+        height: fit-content;
+        margin: 1.65rem 0 0 0;
       }
 
       &--empty {
@@ -71,6 +73,13 @@
 
       .material-icons {
         font-size: 1rem;
+        position: relative;
+        top: 0.06rem;
+      }
+
+      &--hidden {
+        visibility: hidden;
+        transition: none;
       }
     }
   }
diff --git a/packages/react/src/components/Forms/DatePicker/index.spec.tsx b/packages/react/src/components/Forms/DatePicker/index.spec.tsx
index 183f99a..06df05b 100644
--- a/packages/react/src/components/Forms/DatePicker/index.spec.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.spec.tsx
@@ -529,8 +529,10 @@ describe("<DatePicker/>", () => {
     expect(input.getAttribute("aria-disabled")).eq("true");
     expect(button).toBeDisabled();
 
-    // Make sure the clear button is not rendered.
-    expect(screen.queryByRole("button", { name: "Clear date" })).toBeNull();
+    // Make sure the clear button is not visible and disabled.
+    expect(
+      screen.queryByRole("button", { name: "Clear date", hidden: true })
+    ).toBeDisabled();
 
     // Make sure each segment of the date field is disabled.
     const dateFieldInputs = await screen.queryAllByRole("spinbutton");
diff --git a/packages/react/src/components/Forms/DatePicker/index.tsx b/packages/react/src/components/Forms/DatePicker/index.tsx
index f46cd96..1750cf4 100644
--- a/packages/react/src/components/Forms/DatePicker/index.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.tsx
@@ -160,6 +160,22 @@ export const DatePicker = ({
               )}
             </div>
           </LabelledBox>
+          <Button
+            className={classNames("c__date-picker__inner__action", {
+              "c__date-picker__inner__action--empty": !state.value,
+              "c__date-picker__inner__action--hidden":
+                labelAsPlaceholder || disabled,
+            })}
+            color="tertiary"
+            size="small"
+            icon={<span className="material-icons">cancel</span>}
+            // Intentionally pass a null value to reset date picker state
+            onClick={() => state.setValue(null as unknown as DateValue)}
+            aria-label={t(
+              "components.forms.date_picker.clear_button_aria_label"
+            )}
+            disabled={disabled}
+          />
         </div>
         {state.isOpen && (
           <Popover