feat(input-date-picker, date-picker): improve date picking experience #8402

anveshmekala · 2023-12-12T00:18:43Z

Related Issue: #3455, #10113

Summary

Update calcite-date-picker & calcite-input-date-picker UI & UX.

Key changes

display two calendars for range irrespective of layout.
No longer switches focus from day to end input when startDate is selected initially.
Month selection is possible via select menu
No longer positions the date-picker component relative to endInput when endInput is focused in range.
Dates from previous months are not visible in range calendar.
Divider indicator icons are removed in horizontal layout for range in input-date-picker.
No longer uses chevron icon which indicate the open status of input-date-picker in startInput field.

Other issues resolved :
#6321
#6410
#10301
#10291
#10113

Blocked issues: #9167

Wiki https://github.com/Esri/calcite-design-system/wiki/date%E2%80%90picker-enhancement-%238402

macandcheese · 2023-12-12T17:50:21Z

Is the intention that these are separate public components? Or all housed within one public component?

I know the native input can be type="month", but from my understanding, across other design systems, this approach seems (more?) common: https://mui.com/x/react-date-pickers/date-picker/#views

anveshmekala · 2023-12-12T21:39:00Z

Is the intention that these are separate public components? Or all housed within one public component?

I know the native input can be type="month", but from my understanding, across other design systems, this approach seems (more?) common: https://mui.com/x/react-date-pickers/date-picker/#views

Yeah, the idea is to have independent input-month-picker and input-date-picker components which makes it easier to maintain. Started off with month-picker though which can be used in input-month-picker and also integrated to current date-picker to allow user change month from a dropdown style.

Concurrently, I am testing a different approach to use combobox for input-month-picker and input-year-picker (similar to input-time-zone) which seems promising but wouldn't work if we need to display two scroll bars one for month and one for year.

I also dig the idea mentioned in the issue for input-month-picker which is more like a table with year at the top. It doesn't require two scroll bars.

macandcheese · 2023-12-12T21:46:08Z

Concurrently, I am testing a different approach to use combobox for input-month-picker and input-year-picker (similar to input-time-zone) which seems promising but wouldn't work if we need to display two scroll bars one for month and one for year.

IMO, this approach is just an implementation of a Combobox, a user can already set something like that up. I'd think ours would be more custom picking experiences like the examples linked in the original issue / Material example (however the components are structured).

I also dig the idea mentioned in the issue for input-month-picker which is more like a table with year at the top. It doesn't require two scroll bars.

Agreed, I think that's more appropriate for a component offering. If it's just a Combobox, we're only setting up an existing component with a set of pre-configured options, not providing a unique selection experience.

…picker when switching between input's

…n date-picker

…vious month button when selecting endDate

…nitially

jcfranco

Aside from a few comments, I think this is good to go! Awesome job, @anveshmekala! 😎

📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅
📅👈📅📅📅👈📅📅👈👈📅📅👈👈👈📅📅👈👈👈📅👈👈👈👈📅👈📅
📅👈👈📅📅👈📅👈📅📅👈📅📅👈📅📅👈📅📅📅📅👈📅📅📅📅👈📅
📅👈📅👈📅👈📅👈📅📅👈📅📅👈📅📅👈📅📅📅📅👈👈👈📅📅👈📅
📅👈📅📅👈👈📅👈📅📅👈📅📅👈📅📅👈📅📅📅📅👈📅📅📅📅📅📅
📅👈📅📅📅👈📅📅👈👈📅📅👈👈👈📅📅👈👈👈📅👈👈👈👈📅👈📅
📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅📅

jcfranco · 2024-10-01T23:47:47Z

packages/calcite-components/src/components/input-date-picker/input-date-picker.stories.ts

@@ -53,23 +53,47 @@ export default {
 };

 export const simple = (args: InputDatePickerStoryArgs): string => html`
-  <div style="width: 400px">
+  <style>


Suggestion: not critical for this PR, but you might be able to simplify setting custom width and height by using a custom decorator (example).

Will create a followup PR.

jcfranco · 2024-10-01T23:54:00Z

packages/calcite-components/src/components/date-picker/date-picker.e2e.ts

+
+async function selectDayInMonthById(id: string, page: E2EPage): Promise<void> {
+  const day = await page.find(
+    `calcite-date-picker>>> calcite-date-picker-month >>> calcite-date-picker-day[current-month][id="${id}"]`,


Nitpick: can you add a space before the first piercing selector?

jcfranco · 2024-10-01T23:57:22Z

packages/calcite-components/src/components/date-picker/date-picker.e2e.ts

+    );
+    expect(firstDayInNextMonth.classList.contains("current-day")).toBe(false);
+    currentDay = await page.find(
+      "calcite-date-picker >>> calcite-date-picker-month >>> calcite-date-picker-day.current-day",


Can you create a follow-up issue to see if we can make these tests more robust? The complex selectors might make them a bit brittle.

jcfranco · 2024-10-02T00:06:31Z

packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

+    await page.keyboard.press("Enter");
+    await page.waitForChanges();
+    expect(await calendar.isVisible()).toBe(false);
+    expect((await inputDatePicker.getProperty("value"))[1]).toEqual("2024-07-02");


Nitpick: splitting up the value (storing in a var) and assertion might help with readability.

Is the below syntax suggested?

const [, endDate] = await inputDatePicker.getProperty("value"); expect(endValue).toEqual("2024-07-02");

jcfranco · 2024-10-02T00:17:05Z

...s/calcite-components/src/components/date-picker-month-header/date-picker-month-header.e2e.ts

-
-    expect(await date.getAttribute("aria-label")).toBe("Year");
+    const yearInput = await page.find(`calcite-date-picker-month-header >>> input`);
+    expect(yearInput.getAttribute("aria-label")).toBe("Year");


Nice. So we could do something like the following, right?

expect(yearInput.getAttribute("aria-label")).toBe(messages.year);

jcfranco · 2024-10-02T00:36:26Z

packages/calcite-components/src/components/date-picker/date-picker.tsx

    if (!Array.isArray(valueAsDate) && valueAsDate && valueAsDate !== this.activeDate) {
      this.activeDate = new Date(valueAsDate);
    }
-


Nitpick: For readability, can you restore these newlines? It should help scanning the code since there's a bit of if statements here.

jcfranco · 2024-10-02T00:40:04Z

...ages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

@@ -70,9 +84,21 @@ export class DatePickerMonthHeader {
   * @internal
   * @readonly
   */
-  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  // eslint-disable-next-line @stencil-community/strict-mutable
  @Prop({ mutable: true }) messages: DatePickerMessages;


How so? mutable is for internal prop updates and I don't see where it might get updated internally.

jcfranco · 2024-10-02T04:25:04Z

...ages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

+  private setSelectMenuWidth(select: HTMLCalciteSelectElement): void {
+    const selectEl = select.shadowRoot.querySelector("select");
+    let selectedOptionWidth: number;
+    const fontStyle = getComputedStyle(selectEl).font;


We could add inherit here & reference the font css prop at :host.

I dig it!

jcfranco · 2024-10-02T05:00:54Z

...ages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

+
+  private handleKeyDown = (event: KeyboardEvent): void => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.stopPropagation();


~~We cancel the event for these cases. input-date-picker will ignore canceled arrow key presses.~~

Actually, after taking a closer look, this is a totally different issue. We can address it separately.

jcfranco · 2024-10-02T05:28:32Z

...ages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx

+  }
+
+  private async setSelectMenuIconOffset(select: HTMLCalciteSelectElement): Promise<void> {
+    const iconEl = select.shadowRoot.querySelector("calcite-icon");


Could we get the icon container dimensions from the design spec and tokens? If not, I’m inclined to hardcode the sizes (based on the spec) while we explore alternatives in a follow-up issue.

feat(month-picker): adds month-picker component

b5d8eff

github-actions bot added the enhancement Issues tied to a new feature or request. label Dec 12, 2023

github-actions bot assigned anveshmekala Dec 12, 2023

anveshmekala added 24 commits December 12, 2023 17:40

emit change event when month is selected

78c58eb

redesign month-picker and adds year-picker

963868b

add range and emit change event in year-picker

47449cf

disable years based on start and end year selected

2d67c2b

add year picker and month picker in date-picker-header

2657e2c

add second date-picker in input-date-picker when range is enabled

cfad87b

revert input-date-picker changes and update date-picker for range

bf7179b

simplify calendar render logic

d1a0da2

allows editing date values and navigating using action buttons

11f48d8

clean up

6967b7b

allows start date in range to be greater than end date, unhide date-…

d813943

…picker when switching between input's

Merge branch 'main' into anveshmekala/3455-add-month-and-year-picker

ba51c6b

avoid closing date-picker while editing start date & remove methods i…

8e2dac9

…n date-picker

update displayedDate only on blur in date-picker

2325640

refactor updating activeStartDate and activeEndDate

33f55a2

fix minDate for start calendar when activeRange is set to end

2ee6fbe

add readme files

5399e2b

Merge branch 'main' into anveshmekala/3455-add-month-and-year-picker

7dcfa61

skip tests related to input year in month-header

36ed5a3

fix keyboard selection

ea4308c

restore focus on to endinput after day selection

12b2d84

reset endDate when user select startDate beyond endDate & disable pre…

177d0c6

…vious month button when selecting endDate

avoid updating activeDate of date-picker while selecting date range i…

c4cd1fa

…nitially

update demo page for debugging

e9d1863

anveshmekala added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Sep 27, 2024

fix rem to px mapping in header

8cd7f5c

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 27, 2024

fix flaky screenshot test

8c2abfd

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 27, 2024

anveshmekala mentioned this pull request Sep 27, 2024

Design token phase II - Integration across components #7180

Open

jcfranco mentioned this pull request Sep 30, 2024

Input Date Picker Range steals focus from other inputs #10301

Open

6 tasks

update focus stories

3b34c2f

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Sep 30, 2024

anveshmekala and others added 2 commits September 30, 2024 22:05

add test for #10301

1abbe21

Merge branch 'dev' into anveshmekala/3455-add-month-and-year-picker

f6eb79a

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 1, 2024

fix hover outline transition for year

ef570ea

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 1, 2024

anveshmekala and others added 2 commits October 1, 2024 18:06

fix font family for year

8d9b339

Merge branch 'dev' into anveshmekala/3455-add-month-and-year-picker

d278bf8

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 1, 2024

jcfranco approved these changes Oct 2, 2024

View reviewed changes

more feedback changes

b5f0474

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 2, 2024

fix flaky test

71d2cb5

anveshmekala added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Oct 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(input-date-picker, date-picker): improve date picking experience #8402

feat(input-date-picker, date-picker): improve date picking experience #8402

anveshmekala commented Dec 12, 2023 •

edited

Loading

macandcheese commented Dec 12, 2023

anveshmekala commented Dec 12, 2023 •

edited

Loading

macandcheese commented Dec 12, 2023 •

edited

Loading

jcfranco left a comment

jcfranco Oct 1, 2024

anveshmekala Oct 2, 2024

jcfranco Oct 1, 2024

jcfranco Oct 1, 2024

jcfranco Oct 2, 2024

anveshmekala Oct 2, 2024 •

edited

Loading

jcfranco Oct 2, 2024

jcfranco Oct 2, 2024

jcfranco Oct 2, 2024

jcfranco Oct 2, 2024

jcfranco Oct 2, 2024 •

edited

Loading

jcfranco Oct 2, 2024

feat(input-date-picker, date-picker): improve date picking experience #8402

Are you sure you want to change the base?

feat(input-date-picker, date-picker): improve date picking experience #8402

Conversation

anveshmekala commented Dec 12, 2023 • edited Loading

Summary

Key changes

macandcheese commented Dec 12, 2023

anveshmekala commented Dec 12, 2023 • edited Loading

macandcheese commented Dec 12, 2023 • edited Loading

jcfranco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anveshmekala Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jcfranco Oct 2, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anveshmekala commented Dec 12, 2023 •

edited

Loading

anveshmekala commented Dec 12, 2023 •

edited

Loading

macandcheese commented Dec 12, 2023 •

edited

Loading

anveshmekala Oct 2, 2024 •

edited

Loading

jcfranco Oct 2, 2024 •

edited

Loading