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

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

Related Issue: #3455

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
#10243
#10490
#10069

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.

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

github-actions · 2024-10-19T01:57:38Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

…orepo * origin/dev: build(deps): update typescript-eslint monorepo to v7.18.0 (#10593) feat(tile): add design tokens (#10476) deprecate: deprecate web-adaptor in favor of web-adapter (#10598) docs: update component READMEs (#10600) build(deps): update dependency @rollup/plugin-replace to v6 (#10604) chore: release main (#10597) ci(chromatic): build storybook even when skipping snapshots (#10589) build(deps): update dependency axe-core to v4.10.1 (#10566) ci: add calcite-ui-icons label to relevant package PRs (#10590) chore: release next feat: add buffer point, buffer polygon, buffer polyline, contour, offset (#10594) feat(input-date-picker, date-picker): improve date picking experience (#8402) chore: release next fix: updated web-adapter name (#10581) build(deps): update nrwl monorepo to v19.8.6 (#10575) build(deps): update dependency tsx to v4.19.1 (#10574) build(deps): update dependency @cspell/eslint-plugin to v8.15.4 (#10565)

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

SkyeSeitz approved these changes Oct 8, 2024

View reviewed changes

anveshmekala commented Oct 8, 2024

View reviewed changes

packages/calcite-components/src/components/date-picker/date-picker.scss Outdated Show resolved Hide resolved

jcfranco mentioned this pull request Oct 9, 2024

[input-date-picker] faulty element visibility assertion #10490

Closed

anveshmekala and others added 2 commits October 9, 2024 14:33

fix #10490

682ec6f

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

5b62353

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 9, 2024

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Oct 19, 2024

anveshmekala removed the Stale Issues or pull requests that have not had recent activity. label Oct 23, 2024

anveshmekala mentioned this pull request Oct 23, 2024

date-picker, input-date-picker : refactor selectors in e2e tests #10588

Closed

5 tasks

anveshmekala added 3 commits October 22, 2024 23:53

refactor

ca65a98

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

03117b0

fix font-weight cascade in select

58db674

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 23, 2024

anveshmekala merged commit 24d43ad into dev Oct 23, 2024
13 checks passed

anveshmekala deleted the anveshmekala/3455-add-month-and-year-picker branch October 23, 2024 18:12

github-actions bot added this to the 2024-10-29 - Oct Milestone milestone Oct 23, 2024

This was referenced Oct 28, 2024

fix(input-date-picker): no longer renders empty input #10641

Closed

CalciteInputDatePicker with range sets end date when changing the start date if there's an initial value set #10113

Open

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

github-actions bot commented Oct 19, 2024

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

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

github-actions bot commented Oct 19, 2024

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