feat: new value and constraints API for Calendar and DateTimePicker #4726

mizgaionutalexandru · 2024-09-05T12:53:18Z

Description

New value API

type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime
type DateTimePickerValue = DateValue 

// and for the Calendar because different types allow for separate further developing
type CalendarValue = DateValue

The components accept multiple types but will convert the types that have time/time zone to CalendarDate using the toCalendarDate funtion provided by the internationalized/date library.
The components also have a clear method that clears its value, being a more declarative way of saying value = undefined

Min and max contraints

Note

Currently WIP for the DateTimePicker component.

import {CalendarDate} from '@internationalized/date';

<sp-calendar
    .value=${new CalendarDate(2020, 2, 14)}
    .min=${new CalendarDate(2020, 0, 1)}
    .max=${new CalendarDate(2025, 0, 1)}
></sp-calendar>

 // or the DateTimePicker
<sp-date-time-picker
    .value=${new CalendarDate(2020, 2, 14)}
    .min=${new CalendarDate(2020, 0, 1)}
    .max=${new CalendarDate(2025, 0, 1)}
>
    <sp-help-text slot="negative-help-text">
        Select a date between 2020 and 2025.
    </sp-help-text>
</sp-date-time-picker>

If the DateTimePicker's set properties have different types the component will try to convert to the most specific one.
For example, if value is of type CalendarDate but the min constraint is of type CalendarDateTime, the value will be converted to CalendarDateTime with a time of 00.00 or 12 AM. If said date's time doesn't comply with the min constraint it should get the minimum available time from it.
If the transformed dates don't comply with the min and max constraints the pre-selected value will be ignored and a warning will be shown in debug mode.

Removed TextField and InputSegments from the inheritance chain

It looks like the Textfield class was extended only for styling purposes. This PR removes that from the inheritance chain and the styles were be added manually from spectrum-css. This surfaced some problems with the valid variant and it was deleted for now since no requirement mentioned it but it was included in the RFC because it was previously available when the TextField was extended. This can be prio'ed later on if required.
The InputSegments class seems too big and handles a lot of logic that is specific for the DateTimePicker. Currently the logic was moved to the DateTimePicker file and will be extracted after some changes like the new value API are complete. An idea is to use something similar to a ReactiveController or simply a InputManager class that can partially handle some logic for the segments and be instantiated in the DateTimePicker.

Tests structure for DateTimePicker

These will be created in future PRs but this one includes the one for the new features introduced as well as some for the basic behavior of value changing of the segments. Many of them will fail and their exact specifics will be clarified and bugs will be solved in future PRs.

Others

Calendar's getDatesInWeek method now gets executed only when needed instead of every update, using currentMonthDates as a 2D array
Fixed a bug in the Calendar component where the user couldn't use the prev/next month buttons to go more than 1 year ahead/behind

Related issue(s)

How has this been tested?

Many changes are code refactoring, improvements and API changes. The changes should be covered by tests as well as the storybook.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

github-actions · 2024-09-06T06:22:33Z

Branch preview

Visual regression test results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

github-actions · 2024-09-06T06:24:17Z

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.99
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	226.054 kB	214.298 kB 🏆	214.743 kB
Scripts	55.566 kB	49.717 kB 🏆	49.916 kB
Stylesheet	34.326 kB	30.181 kB 🏆	30.309 kB
Document	6.19 kB	5.433 kB 🏆	5.535 kB
Font	126.973 kB	126.614 kB 🏆	126.632 kB

Request Count

Category	Latest	Main	Branch
Total	52	52	52
Scripts	41	41	41
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

github-actions · 2024-09-06T06:47:35Z

Tachometer results

Chrome

accordion permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	431 kB	77.82ms - 79.25ms	-	faster ✔ 7% - 10% 5.92ms - 9.04ms
branch	408 kB	84.63ms - 87.40ms	slower ❌ 7% - 12% 5.92ms - 9.04ms	-

action-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	501 kB	49.44ms - 51.31ms	-	faster ✔ 3% - 7% 1.80ms - 3.97ms
branch	477 kB	52.70ms - 53.82ms	slower ❌ 3% - 8% 1.80ms - 3.97ms	-

action-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	529 kB	70.92ms - 72.37ms	-	faster ✔ 2% - 5% 1.53ms - 3.86ms
branch	506 kB	73.44ms - 75.25ms	slower ❌ 2% - 5% 1.53ms - 3.86ms	-

action-group permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	552 kB	47.15ms - 48.65ms	-	faster ✔ 3% - 7% 1.31ms - 3.43ms
branch	529 kB	49.52ms - 51.02ms	slower ❌ 3% - 7% 1.31ms - 3.43ms	-

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	669 kB	138.06ms - 142.67ms	-	faster ✔ 5% - 9% 7.12ms - 13.21ms
branch	646 kB	148.53ms - 152.51ms	slower ❌ 5% - 10% 7.12ms - 13.21ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	623 kB	66.70ms - 68.18ms	-	faster ✔ 5% - 8% 3.94ms - 5.99ms
branch	599 kB	71.70ms - 73.11ms	slower ❌ 6% - 9% 3.94ms - 5.99ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	622 kB	65.16ms - 66.43ms	-	faster ✔ 6% - 8% 4.19ms - 6.04ms
branch	598 kB	70.24ms - 71.58ms	slower ❌ 6% - 9% 4.19ms - 6.04ms	-

test-open-close-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	813 kB	1882.23ms - 1885.26ms	-	unsure 🔍 -0% - +0% -0.95ms - +3.02ms
branch	789 kB	1881.44ms - 1883.99ms	unsure 🔍 -0% - +0% -3.02ms - +0.95ms	-

test-open-close permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	812 kB	1876.71ms - 1879.94ms	-	unsure 🔍 -0% - -0% -4.52ms - -0.23ms
branch	787 kB	1879.29ms - 1882.11ms	unsure 🔍 +0% - +0% +0.23ms - +4.52ms	-

alert-banner permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	439 kB	12.15ms - 13.13ms	-	unsure 🔍 -5% - +5% -0.60ms - +0.64ms
branch	415 kB	12.24ms - 13.01ms	unsure 🔍 -5% - +5% -0.64ms - +0.60ms	-

alert-dialog permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	467 kB	103.70ms - 104.93ms	-	faster ✔ 2% - 5% 2.33ms - 5.47ms
branch	443 kB	106.78ms - 109.66ms	slower ❌ 2% - 5% 2.33ms - 5.47ms	-

asset permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	373 kB	8.78ms - 8.89ms	-	unsure 🔍 -2% - +0% -0.18ms - +0.01ms
branch	351 kB	8.84ms - 8.99ms	unsure 🔍 -0% - +2% -0.01ms - +0.18ms	-

avatar permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	412 kB	18.40ms - 18.72ms	-	faster ✔ 2% - 6% 0.42ms - 1.26ms
branch	388 kB	19.02ms - 19.79ms	slower ❌ 2% - 7% 0.42ms - 1.26ms	-

badge permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	412 kB	21.91ms - 22.40ms	-	faster ✔ 1% - 5% 0.32ms - 1.04ms
branch	389 kB	22.57ms - 23.10ms	slower ❌ 1% - 5% 0.32ms - 1.04ms	-

banner permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	372 kB	10.47ms - 11.42ms	-	unsure 🔍 -5% - +5% -0.57ms - +0.51ms
branch	350 kB	10.72ms - 11.23ms	unsure 🔍 -5% - +5% -0.51ms - +0.57ms	-

breadcrumbs permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	686 kB	482.13ms - 487.66ms	-	faster ✔ 1% - 3% 5.22ms - 13.78ms
branch	662 kB	491.13ms - 497.66ms	slower ❌ 1% - 3% 5.22ms - 13.78ms	-

button-group permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	458 kB	42.85ms - 43.70ms	-	faster ✔ 5% - 8% 2.43ms - 3.76ms
branch	435 kB	45.86ms - 46.88ms	slower ❌ 6% - 9% 2.43ms - 3.76ms	-

button permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	464 kB	47.14ms - 48.16ms	-	faster ✔ 4% - 8% 2.22ms - 4.23ms
branch	441 kB	50.01ms - 51.74ms	slower ❌ 5% - 9% 2.22ms - 4.23ms	-

Firefox

accordion permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	431 kB	164.86ms - 171.50ms	-	faster ✔ 4% - 9% 6.30ms - 17.22ms
branch	408 kB	175.60ms - 184.28ms	slower ❌ 4% - 10% 6.30ms - 17.22ms	-

action-bar permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	501 kB	110.37ms - 116.55ms	-	faster ✔ 1% - 7% 0.55ms - 8.81ms
branch	477 kB	115.41ms - 120.87ms	slower ❌ 0% - 8% 0.55ms - 8.81ms	-

action-button permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	529 kB	147.15ms - 153.49ms	-	faster ✔ 1% - 6% 1.12ms - 9.56ms
branch	506 kB	152.88ms - 158.44ms	slower ❌ 1% - 6% 1.12ms - 9.56ms	-

action-group permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	552 kB	112.07ms - 118.17ms	-	faster ✔ 1% - 7% 0.91ms - 8.41ms
branch	529 kB	117.59ms - 121.97ms	slower ❌ 1% - 7% 0.91ms - 8.41ms	-

action-menu permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	669 kB	277.51ms - 282.37ms	-	faster ✔ 11% - 13% 34.84ms - 41.72ms
branch	646 kB	315.78ms - 320.66ms	slower ❌ 12% - 15% 34.84ms - 41.72ms	-

test-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	623 kB	133.59ms - 136.41ms	-	unsure 🔍 -1% - +2% -0.99ms - +2.15ms
branch	599 kB	133.73ms - 135.11ms	unsure 🔍 -2% - +1% -2.15ms - +0.99ms	-

test-lazy permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	622 kB	143.88ms - 151.00ms	-	slower ❌ 4% - 10% 5.17ms - 14.23ms
branch	598 kB	134.94ms - 140.54ms	faster ✔ 4% - 10% 5.17ms - 14.23ms	-

test-open-close-directive permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	813 kB	1912.77ms - 1925.47ms	-	slower ❌ 1% - 1% 11.77ms - 25.35ms
branch	789 kB	1898.16ms - 1902.96ms	faster ✔ 1% - 1% 11.77ms - 25.35ms	-

test-open-close permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	812 kB	1897.71ms - 1904.01ms	-	unsure 🔍 -0% - +0% -4.48ms - +4.72ms
branch	787 kB	1897.39ms - 1904.09ms	unsure 🔍 -0% - +0% -4.72ms - +4.48ms	-

alert-banner permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	439 kB	29.62ms - 32.62ms	-	unsure 🔍 -0% - +12% -0.06ms - +3.58ms
branch	415 kB	28.33ms - 30.39ms	unsure 🔍 -11% - -0% -3.58ms - +0.06ms	-

alert-dialog permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	467 kB	197.17ms - 203.67ms	-	faster ✔ 2% - 7% 4.41ms - 15.59ms
branch	443 kB	205.88ms - 214.96ms	slower ❌ 2% - 8% 4.41ms - 15.59ms	-

asset permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	373 kB	21.02ms - 23.62ms	-	unsure 🔍 -3% - +13% -0.64ms - +2.68ms
branch	351 kB	20.27ms - 22.33ms	unsure 🔍 -12% - +3% -2.68ms - +0.64ms	-

avatar permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	412 kB	41.68ms - 43.44ms	-	unsure 🔍 -6% - +1% -2.51ms - +0.55ms
branch	388 kB	42.28ms - 44.80ms	unsure 🔍 -1% - +6% -0.55ms - +2.51ms	-

badge permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	412 kB	49.55ms - 53.93ms	-	unsure 🔍 -5% - +7% -2.34ms - +3.34ms
branch	389 kB	49.43ms - 53.05ms	unsure 🔍 -6% - +4% -3.34ms - +2.34ms	-

banner permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	372 kB	25.22ms - 27.66ms	-	unsure 🔍 -7% - +7% -1.74ms - +1.82ms
branch	350 kB	25.11ms - 27.69ms	unsure 🔍 -7% - +7% -1.82ms - +1.74ms	-

breadcrumbs permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	686 kB	774.10ms - 795.10ms	-	faster ✔ 1% - 4% 8.29ms - 32.35ms
branch	662 kB	799.06ms - 810.78ms	slower ❌ 1% - 4% 8.29ms - 32.35ms	-

button-group permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	458 kB	93.85ms - 99.47ms	-	faster ✔ 4% - 11% 3.51ms - 12.01ms
branch	435 kB	101.23ms - 107.61ms	slower ❌ 3% - 13% 3.51ms - 12.01ms	-

button permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	464 kB	98.88ms - 105.24ms	-	faster ✔ 2% - 10% 2.07ms - 10.85ms
branch	441 kB	105.49ms - 111.55ms	slower ❌ 2% - 11% 2.07ms - 10.85ms	-

mizgaionutalexandru added 23 commits August 12, 2024 13:41

feat(calendar): keyboard navigation

a05159f

chore: fix todo message

bba0ffa

fix: focus on disabled dates

9cf1fac

refactor: storybook absolute Dates for VRTs

3e12b02

chore: update golden img hash

25e48a4

fix(calendar): focusable day management when changing months

8f114cb

feat(calendar): new value API

cca3b0b

fix: story decorator locale picker lang resolver

a13486e

perf(calendar): run getDatesInWeek only when needed

e042eee

chore: rebase fix

4223fdb

refactor: remove textfield and inputsegments from DTP inheritance chain

8b4561f

style(date-time-picker): style fixing

f55a997

fix(calendar): weeks in current month number updates

81f0955

fix(calendar): preselected value not changing current month dates

2d4489f

feat(date-time-picker): update value API and granularity

7cbc3c7

fix(date-time-picker): value updates controller with precision

0c4f619

fix(date-time-picker): date type coming from calendar

a49bc0b

test(date-time-picker): added tests structure

174c30d

chore(date-time-picker): type changes

a460099

test(date-time-picker): value changes on arrow key up

7b96781

test(date-time-picker): value changes on arrow key down

e57fb59

feat(date-time-picker): clear method

2824659

feat(calendar): clear method

7c89ec3

mizgaionutalexandru changed the base branch from main to feature/date-time-picker September 5, 2024 12:55

mizgaionutalexandru added 3 commits September 5, 2024 15:57

test(date-time-picker): typed in values partially

bedc4d5

chore: remove LanguageResolution change

4e06cd0

Merge branch 'feature/date-time-picker' into imizga/DTP-value-api

056bea3

chore: remove lit direct dep

a3c9079

mizgaionutalexandru and others added 8 commits September 9, 2024 17:03

test: added tests for changing the segments using typed in values

3e87297

test: added tests for deleting the segments' value

59acf53

fix(calendar): fixed navigation using prev/next month buttons

f2800d3

fix(calendar): fixed navigation using prev/next month buttons

5094797

fix(date-time-picker): check values compliance

775103b

test(date-time-picker): multiple types management for values

2561b3a

fix(date-time-picker): fixed storybook precision not applying

d72ba0c

test(date-time-picker): test structure for events

6bff8e0

feat: new value and constraints API for Calendar and DateTimePicker #4726

Are you sure you want to change the base?

feat: new value and constraints API for Calendar and DateTimePicker #4726

Conversation

mizgaionutalexandru commented Sep 5, 2024 • edited Loading

Description

New value API

Min and max contraints

Removed TextField and InputSegments from the inheritance chain

Tests structure for DateTimePicker

Others

Related issue(s)

How has this been tested?

Types of changes

Checklist

Best practices

github-actions bot commented Sep 6, 2024

Branch preview

github-actions bot commented Sep 6, 2024 • edited Loading

Lighthouse scores

Transfer Size

Request Count

github-actions bot commented Sep 6, 2024 • edited Loading

Tachometer results

accordion permalink

basic-test

action-bar permalink

basic-test

action-button permalink

basic-test

action-group permalink

basic-test

action-menu permalink

test-basic

test-directive permalink

test-lazy permalink

test-open-close-directive permalink

test-open-close permalink

alert-banner permalink

basic-test

alert-dialog permalink

basic-test

asset permalink

basic-test

avatar permalink

test-basic

badge permalink

basic-test

banner permalink

test-basic

breadcrumbs permalink

basic-test

button-group permalink

basic-test

button permalink

test-basic

accordion permalink

basic-test

action-bar permalink

basic-test

action-button permalink

basic-test

action-group permalink

basic-test

action-menu permalink

test-basic

test-directive permalink

test-lazy permalink

test-open-close-directive permalink

test-open-close permalink

alert-banner permalink

basic-test

alert-dialog permalink

basic-test

asset permalink

basic-test

avatar permalink

test-basic

badge permalink

basic-test

mizgaionutalexandru commented Sep 5, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading

github-actions bot commented Sep 6, 2024 •

edited

Loading