feat(calendar): add calendar component #3327

paulodetarsofm · 2023-06-19T15:21:35Z

Description

Adding the first component that will be part of the date/time picker: the calendar. We also have these points discussed here: #3299

Related issue(s)

[Feat]: Add Calendar pattern #2560

Motivation and context

Allow choosing a date using a calendar instead of the user having to type the date

How has this been tested?

Test case 1
1. Go here
2. Do this
Test case 2
1. Go here
2. Do this

Screenshots (if appropriate)

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 · 2023-06-19T15:29:56Z

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 · 2023-06-19T15:37:04Z

Tachometer results

Chrome

accordion permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	396 kB	217.88ms - 220.79ms	-	unsure 🔍 -0% - +1% -0.87ms - +2.75ms
branch	398 kB	217.32ms - 219.47ms	unsure 🔍 -1% - +0% -2.75ms - +0.87ms	-

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	369 kB	36.47ms - 36.79ms	-	faster ✔ 67% - 67% 73.71ms - 74.83ms
branch	471 kB	110.37ms - 111.44ms	slower ❌ 201% - 205% 73.71ms - 74.83ms	-

action-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	509 kB	206.50ms - 210.33ms	-	unsure 🔍 -1% - +2% -1.38ms - +3.24ms
branch	512 kB	206.19ms - 208.77ms	unsure 🔍 -2% - +1% -3.24ms - +1.38ms	-

action-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	529 kB	126.84ms - 128.08ms	-	faster ✔ 1% - 3% 1.79ms - 4.04ms
branch	532 kB	129.44ms - 131.32ms	slower ❌ 1% - 3% 1.79ms - 4.04ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	740 kB	174.97ms - 178.03ms	-	unsure 🔍 -2% - +1% -2.75ms - +2.14ms
branch	740 kB	174.90ms - 178.72ms	unsure 🔍 -1% - +2% -2.14ms - +2.75ms	-

asset permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	344 kB	17.44ms - 17.62ms	-	faster ✔ 0% - 1% 0.01ms - 0.24ms
branch	346 kB	17.58ms - 17.73ms	slower ❌ 0% - 1% 0.01ms - 0.24ms	-

avatar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	382 kB	38.36ms - 38.71ms	-	unsure 🔍 -3% - +0% -1.37ms - +0.17ms
branch	384 kB	38.38ms - 39.88ms	unsure 🔍 -0% - +4% -0.17ms - +1.37ms	-

badge permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	378 kB	49.41ms - 50.73ms	-	unsure 🔍 -1% - +2% -0.44ms - +0.99ms
branch	380 kB	49.51ms - 50.07ms	unsure 🔍 -2% - +1% -0.99ms - +0.44ms	-

banner permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	343 kB	29.63ms - 29.92ms	-	faster ✔ 0% - 2% 0.09ms - 0.52ms
branch	345 kB	29.92ms - 30.25ms	slower ❌ 0% - 2% 0.09ms - 0.52ms	-

button-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	425 kB	114.24ms - 115.60ms	-	unsure 🔍 -1% - +0% -1.41ms - +0.47ms
branch	426 kB	114.73ms - 116.04ms	unsure 🔍 -0% - +1% -0.47ms - +1.41ms	-

button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	430 kB	127.09ms - 128.56ms	-	unsure 🔍 -1% - +1% -0.69ms - +1.37ms
branch	432 kB	126.76ms - 128.21ms	unsure 🔍 -1% - +1% -1.37ms - +0.69ms	-

Firefox

accordion permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	396 kB	501.01ms - 526.59ms	-	unsure 🔍 -5% - +1% -26.96ms - +7.84ms
branch	398 kB	511.57ms - 535.15ms	unsure 🔍 -2% - +5% -7.84ms - +26.96ms	-

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	369 kB	143.01ms - 154.39ms	-	faster ✔ 62% - 67% 247.28ms - 293.68ms
branch	471 kB	396.69ms - 441.67ms	slower ❌ 163% - 200% 247.28ms - 293.68ms	-

action-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	509 kB	461.97ms - 481.11ms	-	unsure 🔍 -6% - +0% -28.77ms - +1.37ms
branch	512 kB	473.60ms - 496.88ms	unsure 🔍 -0% - +6% -1.37ms - +28.77ms	-

action-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	529 kB	319.15ms - 336.05ms	-	unsure 🔍 -7% - +0% -24.91ms - +0.71ms
branch	532 kB	330.07ms - 349.33ms	unsure 🔍 -0% - +8% -0.71ms - +24.91ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	740 kB	370.41ms - 396.43ms	-	unsure 🔍 -7% - +2% -27.23ms - +9.03ms
branch	740 kB	379.89ms - 405.15ms	unsure 🔍 -2% - +7% -9.03ms - +27.23ms	-

asset permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	344 kB	44.66ms - 54.66ms	-	faster ✔ 4% - 28% 1.43ms - 17.37ms
branch	346 kB	52.85ms - 65.27ms	slower ❌ 2% - 36% 1.43ms - 17.37ms	-

avatar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	382 kB	102.32ms - 110.56ms	-	unsure 🔍 -7% - +6% -7.10ms - +6.62ms
branch	384 kB	101.20ms - 112.16ms	unsure 🔍 -6% - +7% -6.62ms - +7.10ms	-

badge permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	378 kB	136.11ms - 149.21ms	-	unsure 🔍 -7% - +5% -10.22ms - +7.62ms
branch	380 kB	137.90ms - 150.02ms	unsure 🔍 -5% - +7% -7.62ms - +10.22ms	-

banner permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	343 kB	62.24ms - 68.08ms	-	unsure 🔍 -3% - +10% -1.89ms - +6.13ms
branch	345 kB	60.29ms - 65.79ms	unsure 🔍 -9% - +3% -6.13ms - +1.89ms	-

button-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	425 kB	283.08ms - 306.12ms	-	unsure 🔍 -6% - +6% -17.11ms - +17.11ms
branch	426 kB	281.95ms - 307.25ms	unsure 🔍 -6% - +6% -17.11ms - +17.11ms	-

button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	430 kB	306.66ms - 327.78ms	-	unsure 🔍 -8% - +2% -26.17ms - +6.01ms
branch	432 kB	315.16ms - 339.44ms	unsure 🔍 -2% - +8% -6.01ms - +26.17ms	-

packages/calendar/package.json

Westbrook

Initial notes.

Westbrook · 2023-07-18T22:09:00Z

packages/calendar/README.md

@@ -0,0 +1,35 @@
+## Description


We can add more robust docs later...but know it'll be required at some point before a full release.

Westbrook · 2023-07-18T22:10:29Z

packages/calendar/README.md

+## To-do list
+
+-   Attribute `role="heading"` removed from `.spectrum-Calendar-title`, due to error _'The "heading" role requires the attribute "aria-level"'_
+-   Translate _"Previous"_ and _"Next"_ used in the `title` and `aria-label` of buttons displayed in the header of the calendar
+-   Translate _"Today"_ and _"selected"_ used in the `title` of the day when it is today
+-   Implement keyboard navigation


Are these still "to do"?

Yes. Most of the things involving ARIA attributes and other things related to accessibility have not been included yet, due to lack of knowledge.

packages/calendar/src/Calendar.ts

Rajdeepc

Thanks for bringing this to life! I have added few comments nothing major!

packages/calendar/package.json

packages/calendar/src/Calendar.ts

packages/textfield/stories/textarea.stories.ts

packages/textfield/test/textfield.test.ts

lerna.json

packages/checkbox/test/checkbox.test.ts

packages/color-slider/test/color-slider.test.ts

Westbrook

Another handful of nits and notes...

Other than rebasing to try and clean up some of these unrelated changes, I'm OK with moving anything that doesn't seem like a small change here. If you can do what you're comfortable with, and move the other things to notes, we can get this merged to the project branch tomorrow at Office Hours.

Westbrook · 2023-07-26T00:50:37Z

packages/calendar/src/spectrum-calendar.css

+.spectrum-Calendar-nextMonth,
+.spectrum-Calendar-prevMonth {
+    color: var(
+        --spectrum-calendar-button-icon-color,
+        var(--spectrum-global-color-gray-700)
+    );
+}


Likely not fixable here. But this makes the button color incorrect when disabled. I think this is getting Core Tokens soon, can we keep that in mind @pfulton?

lerna.json

Westbrook · 2023-07-26T00:53:25Z

packages/calendar/README.md

+-   Translate the "Previous" text used in the "title" and "aria-label" of the button displayed in the header of the calendar
+-   Translate the "Next" text used in the "title" and "aria-label" of the button displayed in the header of the calendar
+-   The title must include "Today," and " selected" translated to the current language
+-   Implement keyboard navigation


We just walked through the Focus Group and Roving Tab Index Reactive Controllers as a team today. This might be a good place to prove out the knowledge of those APIs @jnjosh.

packages/calendar/src/Calendar.ts

Westbrook · 2023-07-26T01:03:54Z

packages/calendar/src/Calendar.ts

+                <span
+                    role="presentation"
+                    class="spectrum-Calendar-date ${classMap(dayClasses)}"
+                    @click=${() => this.handleDayClick(calendarDate)}


There is a small perf win to be had to cache this call to handleDayClick() in a way that would allow us to pass the same method here each time. The anonymous method will be added and removed as a listener in each render.

Westbrook · 2023-07-26T01:07:31Z

packages/calendar/src/Calendar.ts

+     * Defines the array with data for the days of the week, starting on the first day of the week according to the
+     * defined location (Sunday, Monday, etc.)
+     */
+    private setWeekdays(): void {


This happens once a render, it might be clearer to make this.weekdays a getter that returns the work here, rather than needing to manually call setWeekdays each render pass. If there were an alternative path to being able to cache this so it doesn't need to be calculated so often, that would be cool, too.

packages/calendar/src/Calendar.ts

…er components

Westbrook

This is good to go for the project branch. Thanks for collecting all of these to dos on top of a great foundation here!

* feat: add calendar * feat: use first day of the week according to the locale * feat: add "disabled" property * feat: handle "Previous" and "Next" month buttons * feat: add locale for all stories * feat: add "min" and "max" date * refactor: add new render methods * feat: format day using Intl.NumberFormat * fix: lit-plugin "no-incompatible-property-type" * The built in converter doesn't handle the property type Date | undefined * fix: packages version + property type error * refactor: add to-do list to README * feat: add event handlers and slots for icons * refactor(calendar): update dependencies * refactor(calendar): changing Lit resource import source * refactor: add comments and use correct formatters * refactor: convert property `_locale` to a getter * refactor: remove `_` from private properties and methods * refactor: remove unnecessary method * refactor: remove unnecessary template checking * refactor: add new private properties * refactor: code improvements, new comments * refactor: remove reflect from properties they don't need * fix: add new package to tsconfig.json * refactor: use same version of `@internationalized/number` used by other components * refactor(calendar): improvements and new TODOs

paulodetarsofm added the Status: WIP PR is a work in progress or draft label Jun 19, 2023

paulodetarsofm changed the base branch from main to feature/date-time-picker June 19, 2023 15:22

paulodetarsofm requested review from Rajdeepc, Westbrook, jnjosh and najikahalsema June 20, 2023 14:37

Westbrook reviewed Jun 20, 2023

View reviewed changes

packages/calendar/package.json Outdated Show resolved Hide resolved

paulodetarsofm mentioned this pull request Jul 10, 2023

feat(date-time-picker): add time field component (WIP) #3427

Closed

13 tasks

paulodetarsofm marked this pull request as ready for review July 12, 2023 11:06

paulodetarsofm mentioned this pull request Jul 18, 2023

feat(date-time-picker): add input segments + time field #3464

Merged

13 tasks

paulodetarsofm changed the title ~~feat(date-time-picker): add calendar component (WIP)~~ feat(date-time-picker): add calendar component Jul 18, 2023

Westbrook reviewed Jul 18, 2023

View reviewed changes

Rajdeepc requested changes Jul 19, 2023

View reviewed changes

paulodetarsofm removed the Status: WIP PR is a work in progress or draft label Jul 19, 2023

Rajdeepc reviewed Jul 19, 2023

View reviewed changes

packages/calendar/src/Calendar.ts Outdated Show resolved Hide resolved

Rajdeepc reviewed Jul 19, 2023

View reviewed changes

packages/calendar/src/Calendar.ts Outdated Show resolved Hide resolved

paulodetarsofm commented Jul 19, 2023

View reviewed changes

packages/textfield/stories/textarea.stories.ts Show resolved Hide resolved

paulodetarsofm commented Jul 19, 2023

View reviewed changes

packages/textfield/test/textfield.test.ts Show resolved Hide resolved

paulodetarsofm commented Jul 19, 2023

View reviewed changes

lerna.json Outdated Show resolved Hide resolved

paulodetarsofm commented Jul 19, 2023

View reviewed changes

packages/checkbox/test/checkbox.test.ts Show resolved Hide resolved

paulodetarsofm commented Jul 19, 2023

View reviewed changes

packages/color-slider/test/color-slider.test.ts Show resolved Hide resolved

paulodetarsofm requested review from Rajdeepc and Westbrook July 19, 2023 18:37

Westbrook reviewed Jul 26, 2023

View reviewed changes

paulodetarsofm added 4 commits July 31, 2023 16:04

feat: add calendar

3ca0ba5

feat: use first day of the week according to the locale

f8e27de

feat: add "disabled" property

304e0c9

feat: handle "Previous" and "Next" month buttons

fdd0660

paulodetarsofm added 7 commits July 31, 2023 16:06

refactor: remove _ from private properties and methods

004029d

refactor: remove unnecessary method

3208d99

refactor: remove unnecessary template checking

19d288c

refactor: add new private properties

fbd2d29

refactor: code improvements, new comments

b18c3f1

refactor: remove reflect from properties they don't need

185f79f

fix: add new package to tsconfig.json

dec3be5

paulodetarsofm force-pushed the paulodetarsofm/calendar branch from e5e11c5 to dec3be5 Compare July 31, 2023 15:08

paulodetarsofm added 2 commits July 31, 2023 17:23

refactor: use same version of @internationalized/number used by oth…

d4f08ef

…er components

refactor(calendar): improvements and new TODOs

c235d4f

Westbrook approved these changes Jul 31, 2023

View reviewed changes

Westbrook changed the title ~~feat(date-time-picker): add calendar component~~ feat(calendar): add calendar component Jul 31, 2023

Westbrook merged commit 5a98374 into feature/date-time-picker Jul 31, 2023

Westbrook deleted the paulodetarsofm/calendar branch July 31, 2023 16:41

mizgaionutalexandru mentioned this pull request Aug 12, 2024

feat(calendar): keyboard navigation #4667

Merged

15 tasks

feat(calendar): add calendar component #3327

feat(calendar): add calendar component #3327

Uh oh!

Conversation

paulodetarsofm commented Jun 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

Uh oh!

github-actions bot commented Jun 19, 2023

Branch Preview

Uh oh!

github-actions bot commented Jun 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Tachometer results

accordion permalink

action-bar permalink

action-button permalink

action-group permalink

action-menu permalink

asset permalink

avatar permalink

badge permalink

banner permalink

button-group permalink

button permalink

accordion permalink

action-bar permalink

action-button permalink

action-group permalink

action-menu permalink

asset permalink

avatar permalink

badge permalink

banner permalink

button-group permalink

button permalink

Uh oh!

Uh oh!

Westbrook left a comment

Choose a reason for hiding this comment

Uh oh!

Westbrook Jul 18, 2023

Choose a reason for hiding this comment

Uh oh!

Westbrook Jul 18, 2023

Choose a reason for hiding this comment

Uh oh!

paulodetarsofm Jul 19, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Rajdeepc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

paulodetarsofm commented Jun 19, 2023 •

edited

Loading

github-actions bot commented Jun 19, 2023 •

edited

Loading