[major] Date field - Usability issues

packages/lib/src/date-input/DateInput.stories.tsx

@@ -8,9 +8,10 @@ import DxcContainer from "../container/Container";
 import Calendar from "./Calendar";
 import DxcDateInput from "./DateInput";
 import DxcDatePicker from "./DatePicker";
-import YearPicker from "./YearPicker";
+import DateUnitPicker from "./DateUnitPicker";
 import { fireEvent, screen, userEvent, within } from "storybook/internal/test";
 import { HalstackProvider } from "../HalstackContext";
+import { getMonthPickerItems, getYearPickerItems } from "./utils";
 
 export default {
   title: "Date Input",
@@ -40,7 +41,7 @@ const DateInputChromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Complete date input" theme="light" level={4} />
-      <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional />
+      <DxcDateInput label="Date input" helperText="Help message" format="dd/yyyy/MM" placeholder optional />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
@@ -147,86 +148,160 @@ const DatePickerButtonStates = () => (
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Isolated calendar focused" theme="light" level={4} />
-      <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar1" />
+      <DxcDatePicker
+        date={dayjs("06-04-1950", "DD-MM-YYYY")}
+        onDateSelect={() => {}}
+        id="test-calendar1"
+        format="dd/mm/yy"
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Isolated calendar hovered" theme="light" level={4} />
-      <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar2" />
+      <DxcDatePicker
+        date={dayjs("06-04-1950", "DD-MM-YYYY")}
+        onDateSelect={() => {}}
+        id="test-calendar2"
+        format="dd/mm/yy"
+      />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Isolated calendar actived" theme="light" level={4} />
-      <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar3" />
+      <DxcDatePicker
+        date={dayjs("06-04-1950", "DD-MM-YYYY")}
+        onDateSelect={() => {}}
+        id="test-calendar3"
+        format="dd/mm/yy"
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Isolated calendar with locale" theme="light" level={4} />
       <HalstackProvider localeTag="en-US">
-        <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar3" />
+        <DxcDatePicker
+          date={dayjs("06-04-1950", "DD-MM-YYYY")}
+          onDateSelect={() => {}}
+          id="test-calendar3"
+          format="dd/mm/yy"
+        />
       </HalstackProvider>
     </ExampleContainer>
   </>
 );
 
-const YearPickerButtonStates = () => (
-  <>
-    <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="Isolated year picker focused" theme="light" level={4} />
-      <YearPicker
-        selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
-        onYearSelect={() => {}}
-        today={dayjs("1904-04-03", "YYYY-MM-DD")}
-      />
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Isolated year picker hovered" theme="light" level={4} />
-      <YearPicker
-        selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
-        onYearSelect={() => {}}
-        today={dayjs("1904-04-03", "YYYY-MM-DD")}
-      />
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-active">
-      <Title title="Isolated year picker actived" theme="light" level={4} />
-      <YearPicker
-        selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
-        onYearSelect={() => {}}
-        today={dayjs("1904-04-03", "YYYY-MM-DD")}
-      />
-    </ExampleContainer>
-  </>
-);
+const YearPickerButtonStates = () => {
+  const yearItems = getYearPickerItems();
+  return (
+    <>
+      <ExampleContainer pseudoState="pseudo-focus">
+        <Title title="Isolated date unit picker focused" theme="light" level={4} />
+        <DateUnitPicker
+          selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+          onDateUnitSelect={() => {}}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          items={yearItems}
+        />
+      </ExampleContainer>
+      <ExampleContainer pseudoState="pseudo-hover">
+        <Title title="Isolated date unit picker hovered" theme="light" level={4} />
+        <DateUnitPicker
+          selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+          onDateUnitSelect={() => {}}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          items={yearItems}
+        />
+      </ExampleContainer>
+      <ExampleContainer pseudoState="pseudo-active">
+        <Title title="Isolated date unit picker actived" theme="light" level={4} />
+        <DateUnitPicker
+          selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+          onDateUnitSelect={() => {}}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          items={yearItems}
+        />
+      </ExampleContainer>
+    </>
+  );
+};
 
-const DatePickerToday = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Isolated calendar with today" theme="light" level={4} />
-      <Calendar
-        selectedDate={dayjs("06-04-1904", "DD-MM-YYYY")}
-        today={dayjs("1904-04-03", "YYYY-MM-DD")}
-        onInnerDateChange={() => {}}
-        onDaySelect={() => {}}
-        innerDate={dayjs("06-04-1904", "DD-MM-YYYY")}
-      />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Isolated year picker with today" theme="light" level={4} />
-      <YearPicker
-        selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
-        onYearSelect={() => {}}
-        today={dayjs("1904-04-03", "YYYY-MM-DD")}
-      />
-    </ExampleContainer>
-  </>
-);
+const DatePickerToday = () => {
+  const monthLabels = {
+    calendar: {
+      months: [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+      ],
+    },
+  };
+  const monthItems = getMonthPickerItems(monthLabels.calendar.months);
+  const yearItems = getYearPickerItems();
+
+  return (
+    <>
+      <ExampleContainer>
+        <Title title="Isolated calendar with today" theme="light" level={4} />
+        <Calendar
+          selectedDate={dayjs("06-04-1904", "DD-MM-YYYY")}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          onInnerDateChange={() => {}}
+          onDaySelect={() => {}}
+          innerDate={dayjs("06-04-1904", "DD-MM-YYYY")}
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Isolated month picker with today" theme="light" level={4} />
+        <DateUnitPicker
+          selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+          onDateUnitSelect={() => {}}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          items={monthItems}
+          unit="month"
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Isolated date unit picker with today" theme="light" level={4} />
+        <DateUnitPicker
+          selectedDate={dayjs("06-04-1905", "DD-MM-YYYY")}
+          onDateUnitSelect={() => {}}
+          today={dayjs("1904-04-03", "YYYY-MM-DD")}
+          items={yearItems}
+        />
+      </ExampleContainer>
+    </>
+  );
+};
 
 const Tooltip = () => (
   <>
     <Title title="Default tooltip" theme="light" level={2} />
     <ExampleContainer>
-      <DxcDatePicker date={dayjs("06-04-1950", "DD-MM-YYYY")} onDateSelect={() => {}} id="test-calendar-tooltip" />
+      <DxcDatePicker
+        date={dayjs("06-04-1950", "DD-MM-YYYY")}
+        onDateSelect={() => {}}
+        id="test-calendar-tooltip"
+        format="dd/mm/yy"
+      />
     </ExampleContainer>
   </>
 );
 
+const YearMonthPickerZhCn = () => (
+  <ExampleContainer>
+    <Title title="Year/Month picker order zh-CN" theme="light" level={4} />
+    <HalstackProvider localeTag="zh-CN">
+      <DxcDateInput label="Date input" format="dd-yyyy-mm" defaultValue="06-1905-05" />
+    </HalstackProvider>
+  </ExampleContainer>
+);
+
 type Story = StoryObj<typeof DxcDateInput>;
 
 export const Chromatic: Story = {
@@ -290,3 +365,17 @@ export const DatePickerTooltipAfter: Story = {
     }
   },
 };
+
+export const YearMonthPickerWithLocale: Story = {
+  render: YearMonthPickerZhCn,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const calendarAction = await canvas.findByRole("combobox");
+    await userEvent.click(calendarAction);
+    const dialog = await screen.findByRole("dialog");
+    const yearMonthTrigger = within(dialog).getAllByRole("button")[1];
+    if (yearMonthTrigger != null) {
+      await userEvent.click(yearMonthTrigger);
+    }
+  },
+};

packages/lib/src/date-input/DateInput.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import "@testing-library/jest-dom";
 import dayjs from "dayjs";
 import DxcDateInput from "./DateInput";
 import MockDOMRect from "../../test/mocks/domRectMock";
@@ -201,7 +202,7 @@ describe("DateInput component tests", () => {
     });
     expect(input.value).toBe(d.format("DD-MM-YYYY"));
   });
-  test("Selecting a year from the calendar year picker", () => {
+  test("Selecting a year and month from the calendar year picker", () => {
     const { getByText, getByRole } = render(<DxcDateInput format="dd-mm-yyyy" defaultValue="10-08-2021" />);
     const input = getByRole("textbox") as HTMLInputElement;
     const calendarAction = getByRole("combobox");
@@ -210,9 +211,11 @@ describe("DateInput component tests", () => {
     userEvent.click(getByText(d.format("MMMM YYYY")));
     expect(getByText("2024")).toBeTruthy();
     userEvent.click(getByText("2024"));
-    userEvent.click(getByText(d.set("year", 2024).format("MMMM YYYY")));
+    expect(getByText("February")).toBeTruthy();
+    userEvent.click(getByText("February"));
+    userEvent.click(getByText(d.set("year", 2024).set("month", 1).format("MMMM YYYY")));
     fireEvent.keyDown(document, { key: "Escape", code: "Escape", keyCode: 27, charCode: 27 });
-    expect(input.value).toBe(d.format("DD-MM-YYYY"));
+    expect(input.value).toBe(d.set("year", 2024).set("month", 1).format("DD-MM-YYYY"));
   });
   test("Selecting a date from the calendar (using keyboard presses)", () => {
     const { getByRole, getAllByText, getByText } = render(<DxcDateInput />);
@@ -488,6 +491,7 @@ describe("DateInput component tests", () => {
     expect(getByText("October 1910")).toBeTruthy();
     userEvent.click(getByText("October 1910"));
     userEvent.click(getByText("2010"));
+    userEvent.click(getByText("October 2010"));
     const day1 = getAllByText("1")[0];
     if (day1 != null) {
       userEvent.click(day1);
@@ -530,4 +534,43 @@ describe("DateInput component tests", () => {
     userEvent.type(calendarAction, "{enter}");
     expect(onSubmit).not.toHaveBeenCalled();
   });
+  test("Two listboxes are shown", () => {
+    const { getByRole, container } = render(<DxcDateInput defaultValue="15-03-2020" />);
+    const calendarAction = getByRole("combobox");
+    userEvent.click(calendarAction);
+
+    const monthYearButton = getByRole("button", { name: "March 2020" });
+    expect(monthYearButton).toBeTruthy();
+    userEvent.click(monthYearButton);
+
+    const listboxes = container.querySelectorAll("[role='listbox']");
+    expect(listboxes.length).toBe(2);
+  });
+  test("Calendar header formatting", () => {
+    const { getByRole, container } = render(<DxcDateInput defaultValue="2020/03/15" format="yyyy/MM/dd" />);
+    const calendarAction = getByRole("combobox");
+    userEvent.click(calendarAction);
+
+    const monthYearButton = getByRole("button", { name: "2020 March" });
+    expect(monthYearButton).toBeTruthy();
+    userEvent.click(monthYearButton);
+
+    const listboxes = container.querySelectorAll("[role='listbox']");
+    expect(listboxes.length).toBe(2);
+    expect(listboxes[0]).toHaveTextContent("2019");
+    expect(listboxes[1]).toHaveTextContent("February");
+  });
+  // listbox keyboard control
+  test("Listbox keyboard control", () => {
+    const { getByRole, getAllByRole } = render(<DxcDateInput defaultValue="15-03-2020" />);
+    const calendarAction = getByRole("combobox");
+    userEvent.click(calendarAction);
+    expect(getByRole("button", { name: "March 2020" })).toBeTruthy();
+    userEvent.click(getByRole("button", { name: "March 2020" }));
+    const yearListbox = getAllByRole("listbox")[1];
+    expect(yearListbox).toBeTruthy();
+    userEvent.keyboard("{ArrowDown}");
+    userEvent.keyboard("{Enter}");
+    expect(getByRole("button", { name: "March 2021" })).toBeTruthy();
+  });
 });

packages/lib/src/date-input/DateInput.tsx

@@ -322,7 +322,12 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
                   onKeyDown={handleDatePickerEscKeydown}
                   ref={popoverContentRef}
                 >
-                  <DatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} />
+                  <DatePicker
+                    id={calendarId}
+                    onDateSelect={handleCalendarOnClick}
+                    date={dayjsDate}
+                    format={formatter}
+                  />
                 </StyledPopoverContent>
               </Popover.Portal>
             )}