♻️(react) revamp clear date picker button

Revamp DatePicker component to enhance range functionalities by elevating
the clear button, resulting in the utilization of a single button across
multiple DateField inputs.

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

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

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

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