Merge pull request #707 from vrk-kpa/fix/date-input-buttons-without-c…

…onfirm [Fix] Remove Confirm button from DateInput
vrk-kpa · Apr 14, 2023 · fd81a18 · fd81a18
2 parents 0555672 + 4d3c484
commit fd81a18
Show file tree

Hide file tree

Showing 8 changed files with 401 additions and 434 deletions.
diff --git a/src/core/Form/DateInput/DateInput.test.tsx b/src/core/Form/DateInput/DateInput.test.tsx
@@ -150,7 +150,7 @@ describe('callbacks', () => {
 
     it('calls onChange when date is selected', () => {
       const mockOnChange = jest.fn();
-      const { getByRole, getByText, getAllByText } = render(
+      const { getByRole, getAllByText } = render(
         <DateInput
           labelText="Date"
           datePickerEnabled
@@ -162,10 +162,6 @@ describe('callbacks', () => {
         'button',
       ) as HTMLButtonElement;
       fireEvent.click(dateButton);
-      const confirmButton = getByText('Valitse').closest(
-        'button',
-      ) as HTMLButtonElement;
-      fireEvent.click(confirmButton);
       expect(mockOnChange).toBeCalledWith({
         value: '1.1.2020',
         date: new Date(2020, 0, 1),
@@ -493,10 +489,6 @@ describe('props', () => {
       fireEvent.click(getByRole('button'));
       const dateButton = getByText('16').closest('button') as HTMLButtonElement;
       fireEvent.click(dateButton);
-      const confirmButton = getByText('Valitse').closest(
-        'button',
-      ) as HTMLButtonElement;
-      fireEvent.click(confirmButton);
       expect(getByRole('textbox')).toHaveValue('2020-1-16');
     });
   });

diff --git a/src/core/Form/DateInput/DateInput.tsx b/src/core/Form/DateInput/DateInput.tsx
@@ -16,13 +16,7 @@ import { Debounce } from '../../utils/Debounce/Debounce';
 import { getConditionalAriaProp } from '../../../utils/aria';
 import { getLogger } from '../../../utils/log';
 import { HTMLAttributesIncludingDataAttributes } from '../../../utils/common/common';
-import {
-  HtmlInputProps,
-  HtmlDiv,
-  HtmlSpan,
-  HtmlInput,
-  HtmlButton,
-} from '../../../reset';
+import { HtmlInputProps, HtmlDiv, HtmlInput, HtmlButton } from '../../../reset';
 import { DatePicker } from './DatePicker/DatePicker';
 import { Label, LabelMode } from '../Label/Label';
 import { StatusText } from '../StatusText/StatusText';
@@ -349,7 +343,7 @@ const BaseDateInput = (props: DateInputProps) => {
         [dateInputClassNames.hasPicker]: datePickerEnabled,
       })}
     >
-      <HtmlSpan className={dateInputClassNames.styleWrapper}>
+      <HtmlDiv className={dateInputClassNames.styleWrapper}>
         <Label
           htmlFor={id}
           labelMode={labelMode}
@@ -441,7 +435,7 @@ const BaseDateInput = (props: DateInputProps) => {
         >
           {statusText}
         </StatusText>
-      </HtmlSpan>
+      </HtmlDiv>
     </HtmlDiv>
   );
 };

diff --git a/src/core/Form/DateInput/DatePicker/DatePicker.baseStyles.tsx b/src/core/Form/DateInput/DatePicker/DatePicker.baseStyles.tsx
@@ -13,7 +13,7 @@ export const baseStyles = (theme: SuomifiTheme) => css`
 
   & .fi-date-picker_bottom-container {
     display: flex;
-    gap: ${theme.spacing.xs};
+    justify-content: flex-end;
   }
 
   & .fi-date-picker_application {
@@ -40,10 +40,6 @@ export const baseStyles = (theme: SuomifiTheme) => css`
       padding-top: ${theme.spacing.xs};
       padding-bottom: ${theme.spacing.xl};
     }
-
-    .fi-date-picker_bottom-container {
-      flex-direction: column;
-    }
   }
 
   &.fi-date-picker--hidden {
@@ -118,8 +114,4 @@ export const baseStyles = (theme: SuomifiTheme) => css`
     border-bottom: 1px solid ${theme.colors.blackLight1};
     border-right: 1px solid ${theme.colors.blackLight1};
   }
-
-  & .fi-date-picker_bottom-button {
-    flex: 1;
-  }
 `;
diff --git a/src/core/Form/DateInput/DatePicker/DatePicker.tsx b/src/core/Form/DateInput/DatePicker/DatePicker.tsx
@@ -37,7 +37,6 @@ export const datePickerClassNames = {
   slideIndicatorWrapper: `${baseClassName}_slide-indicator-wrapper`,
   application: `${baseClassName}_application`,
   bottomContainer: `${baseClassName}_bottom-container`,
-  bottomButton: `${baseClassName}_bottom-button`,
   popperArrow: `${baseClassName}_popper-arrow`,
 };
 
@@ -98,7 +97,7 @@ export const BaseDatePicker = (props: InternalDatePickerProps) => {
   const smallScreenAppRef = useRef<HTMLDivElement>(null);
   const yearSelectRef = useRef<HTMLButtonElement>(null);
   const monthSelectRef = useRef<HTMLButtonElement>(null);
-  const confirmButtonRef = useRef<HTMLButtonElement>(null);
+  const closeButtonRef = useRef<HTMLButtonElement>(null);
   const dayButtonRef = useRef<HTMLButtonElement>(null);
 
   useEnhancedEffect(() => {
@@ -217,7 +216,7 @@ export const BaseDatePicker = (props: InternalDatePickerProps) => {
     if (event.key === 'Tab') {
       // Trap focus to dialog
       const firstElement = yearSelectRef.current;
-      const lastElement = confirmButtonRef?.current;
+      const lastElement = closeButtonRef?.current;
       if (event.shiftKey && document.activeElement === firstElement) {
         event.preventDefault();
         lastElement?.focus();
@@ -341,11 +340,6 @@ export const BaseDatePicker = (props: InternalDatePickerProps) => {
       monthSelectRef.current.getAttribute('data-state') === 'expanded') ||
     false;
 
-  const handleConfirm = (): void => {
-    handleClose(true);
-    onChange(focusableDate);
-  };
-
   const handleClose = (focus: boolean = false): void => {
     setSelectedDate(null);
     setFocusedDate(null);
@@ -357,8 +351,9 @@ export const BaseDatePicker = (props: InternalDatePickerProps) => {
   };
 
   const handleDateSelect = (date: Date): void => {
+    handleClose(true);
+    onChange(date);
     setFocusableDate(date);
-    setSelectedDate(date);
   };
 
   const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -458,19 +453,9 @@ export const BaseDatePicker = (props: InternalDatePickerProps) => {
       />
       <HtmlDiv className={datePickerClassNames.bottomContainer}>
         <Button
-          disabled={selectedDate === null}
-          onClick={() => handleConfirm()}
-          className={datePickerClassNames.bottomButton}
-          fullWidth={smallScreen}
-        >
-          {texts.selectButtonText}
-        </Button>
-        <Button
-          variant="secondary"
+          variant="secondaryNoBorder"
           onClick={() => handleClose(true)}
-          forwardedRef={confirmButtonRef}
-          className={datePickerClassNames.bottomButton}
-          fullWidth={smallScreen}
+          forwardedRef={closeButtonRef}
         >
           {texts.closeButtonText}
         </Button>

diff --git a/src/core/Form/DateInput/DatePicker/DateSelectors/DateSelectors.baseStyles.tsx b/src/core/Form/DateInput/DatePicker/DateSelectors/DateSelectors.baseStyles.tsx
@@ -6,8 +6,10 @@ export const baseStyles = (
   yearSelectWidth: number,
   monthSelectWidth: number,
 ) => css`
-  & .fi-date-selectors_container {
+  &.fi-date-selectors_container {
     display: flex;
+    flex-wrap: wrap;
+    row-gap: ${theme.spacing.xs};
   }
 
   & .fi-date-selectors_year-select {
@@ -19,13 +21,18 @@ export const baseStyles = (
   }
 
   & .fi-date-selectors_month-select {
-    margin-right: ${theme.spacing.xs};
+    margin-right: ${theme.spacing.xxs};
     width: ${monthSelectWidth}px;
     .fi-dropdown_button {
       min-width: 145px;
     }
   }
 
+  & .fi-date-selectors_buttons {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
   & .fi-date-selectors_month-button {
     padding: 0;
     width: 40px;

diff --git a/src/core/Form/DateInput/DatePicker/DateSelectors/DateSelectors.tsx b/src/core/Form/DateInput/DatePicker/DateSelectors/DateSelectors.tsx
@@ -25,6 +25,7 @@ export const selectorsClassNames = {
   container: `${baseClassName}_container`,
   yearSelect: `${baseClassName}_year-select`,
   monthSelect: `${baseClassName}_month-select`,
+  buttons: `${baseClassName}_buttons`,
   monthButton: `${baseClassName}_month-button`,
   monthButtonIcon: `${baseClassName}_month-button_icon`,
 };
@@ -144,30 +145,32 @@ export const BaseDateSelectors = (props: DateSelectorsProps) => {
           ),
         )}
       </Dropdown>
-      <Button
-        onClick={() => handlePrevMonthButton()}
-        variant="secondaryNoBorder"
-        aria-label={getPrevMonthButtonLabel()}
-        className={selectorsClassNames.monthButton}
-        disabled={monthIsSame(focusableDate, minDate)}
-      >
-        <Icon
-          icon="chevronLeft"
-          className={selectorsClassNames.monthButtonIcon}
-        />
-      </Button>
-      <Button
-        onClick={() => handleNextMonthButton()}
-        variant="secondaryNoBorder"
-        aria-label={getNextMonthButtonLabel()}
-        className={selectorsClassNames.monthButton}
-        disabled={monthIsSame(focusableDate, maxDate)}
-      >
-        <Icon
-          icon="chevronRight"
-          className={selectorsClassNames.monthButtonIcon}
-        />
-      </Button>
+      <HtmlDiv className={selectorsClassNames.buttons}>
+        <Button
+          onClick={handlePrevMonthButton}
+          variant="secondaryNoBorder"
+          aria-label={getPrevMonthButtonLabel()}
+          className={selectorsClassNames.monthButton}
+          disabled={monthIsSame(focusableDate, minDate)}
+        >
+          <Icon
+            icon="chevronLeft"
+            className={selectorsClassNames.monthButtonIcon}
+          />
+        </Button>
+        <Button
+          onClick={handleNextMonthButton}
+          variant="secondaryNoBorder"
+          aria-label={getNextMonthButtonLabel()}
+          className={selectorsClassNames.monthButton}
+          disabled={monthIsSame(focusableDate, maxDate)}
+        >
+          <Icon
+            icon="chevronRight"
+            className={selectorsClassNames.monthButtonIcon}
+          />
+        </Button>
+      </HtmlDiv>
     </HtmlDiv>
   );
 };

diff --git a/src/core/Form/DateInput/DatePicker/MonthDay/MonthDay.tsx b/src/core/Form/DateInput/DatePicker/MonthDay/MonthDay.tsx
@@ -67,18 +67,10 @@ export const BaseMonthDay = (props: MonthDayProps) => {
   const isDisabledDate = (): boolean =>
     shouldDisableDate ? shouldDisableDate(date.date) : false;
 
-  const buttonText = (): string => {
-    const text = cellDateAriaLabel(date.date, texts);
-    if (isSelectedDate()) {
-      return `${texts.selectedDateLabel}, ${text}`;
-    }
-    return text;
-  };
-
   const cellDateElements = (
     <>
       <span aria-hidden>{date.number}</span>
-      <VisuallyHidden>{buttonText()}</VisuallyHidden>
+      <VisuallyHidden>{cellDateAriaLabel(date.date, texts)}</VisuallyHidden>
     </>
   );