feat: Calendar and DateTimePicker components #5002
Draft
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* 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
* feat: add input segments * refactor: input segments improvements * fix(textfield): convert pseudo :read-only to attribute * feat(time-field): add new time field component * refactor: remove `_` from private properties and methods and convert property `locale` to a getter * refactor: add new `@internationalized/number` package * refactor: reduce cognitive complexity for `handleTypedValue()` method * "Refactor this function to reduce its Cognitive Complexity from 41 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `handleClear()` method * "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `setNewDateTime()` method * "Refactor this function to reduce its Cognitive Complexity from 30 to the 15 allowed." (SonarLint) * refactor: add correct placeholder for year * refactor: reduce cognitive complexity for `getSegmentValueAndLimits()` method * "Refactor this function to reduce its Cognitive Complexity from 34 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `updateHour()` method * "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint) * refactor: add missing comments and minor code improvements * refactor: preserve white spaces inside literal segments * refactor: add types to variables * refactor: formatting year * refactor: increment/decrement year when is `undefined` * feat: add logic to update day if needed * fix: improve logic to update the day * fix: package version * fix: add missing references * refactor: maintain alphabetical order * fix: duplicate identifier 'ClassInfo' * refactor: upgrade `@internationalized/date` package version used by the calendar * refactor: minor code improvements and comments * refactor: add new items to to-do list * refactor: add missing "time-field" entry * refactor: update packages version * refactor: use `import type` when possible * refactor: remove unnecessary configuration * refactor: remove unnecessary code * refactor: code and comments improvements * refactor: remove unused files * refactor: update `@spectrum-css/calendar` * refactor: move `input-segments` from `/packages` to `/tools` * fix: segment text colour * refactor(calendar): remove unnecessary code
* feat: add input segments + time field (#3464) * feat: add input segments * refactor: input segments improvements * refactor: remove `_` from private properties and methods and convert property `locale` to a getter * refactor: add new `@internationalized/number` package * refactor: reduce cognitive complexity for `handleTypedValue()` method * "Refactor this function to reduce its Cognitive Complexity from 41 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `handleClear()` method * "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `setNewDateTime()` method * "Refactor this function to reduce its Cognitive Complexity from 30 to the 15 allowed." (SonarLint) * refactor: add correct placeholder for year * refactor: reduce cognitive complexity for `getSegmentValueAndLimits()` method * "Refactor this function to reduce its Cognitive Complexity from 34 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `updateHour()` method * "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint) * refactor: add missing comments and minor code improvements * refactor: preserve white spaces inside literal segments * refactor: add types to variables * refactor: formatting year * refactor: increment/decrement year when is `undefined` * feat: add logic to update day if needed * fix: improve logic to update the day * fix: package version * fix: add missing references * refactor: maintain alphabetical order * fix: duplicate identifier 'ClassInfo' * refactor: upgrade `@internationalized/date` package version used by the calendar * refactor: minor code improvements and comments * refactor: add new items to to-do list * refactor: add missing "time-field" entry * refactor: update packages version * refactor: use `import type` when possible * refactor: remove unnecessary configuration * refactor: remove unnecessary code * refactor: code and comments improvements * refactor: remove unused files * refactor: update `@spectrum-css/calendar` * refactor: move `input-segments` from `/packages` to `/tools` * fix: segment text colour * 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: 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 * feat: add input segments * refactor: input segments improvements * refactor: remove `_` from private properties and methods and convert property `locale` to a getter * refactor: add new `@internationalized/number` package * refactor: reduce cognitive complexity for `handleTypedValue()` method * "Refactor this function to reduce its Cognitive Complexity from 41 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `handleClear()` method * "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `setNewDateTime()` method * "Refactor this function to reduce its Cognitive Complexity from 30 to the 15 allowed." (SonarLint) * refactor: add correct placeholder for year * refactor: reduce cognitive complexity for `getSegmentValueAndLimits()` method * "Refactor this function to reduce its Cognitive Complexity from 34 to the 15 allowed." (SonarLint) * refactor: reduce cognitive complexity for `updateHour()` method * "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint) * refactor: add missing comments and minor code improvements * refactor: preserve white spaces inside literal segments * refactor: add types to variables * refactor: formatting year * refactor: increment/decrement year when is `undefined` * feat: add logic to update day if needed * fix: improve logic to update the day * fix: package version * fix: add missing references * refactor: maintain alphabetical order * fix: duplicate identifier 'ClassInfo' * refactor: upgrade `@internationalized/date` package version used by the calendar * refactor: minor code improvements and comments * refactor: add new items to to-do list * refactor: add missing "time-field" entry * refactor: update packages version * refactor: use `import type` when possible * refactor: remove unnecessary configuration * refactor: remove unnecessary code * refactor: code and comments improvements * refactor: remove unused files * refactor: update `@spectrum-css/calendar` * refactor: move `input-segments` from `/packages` to `/tools` * fix: segment text colour * refactor: remove time field * refactor: move locales to be used globally * fix: picker button import * refactor: use `beforeinput` and `input` events * feat: add `date-time-picker` component * fix: use innerText to render segment text * fix: dealing with days and hours * fix: fix quiet variant styles * fix: add calculation to count the width of the date/time picker * refactor: removes solved TODO's points * refactor: removes broken unit test * refactor: adds unit test for default datetime picker * refactor: unit tests for date-time-picker * refactor: fixes input line height * chore: bump packages to 0.41.2 * refactor: feedback implementation v1 * refactor: mock slected date for timeGlanularity story * refactor: adds unit test to calendar * refactor: update naming * refactor: adds unit test for handleDayClick method * refactor: update TODO list * fix: create new segments when granularity is changed * fix: renaming attribute from `locale` to `lang` * refactor: use "quiet" variant of `sp-picker-button` when input is read-only * refactor: remove unused imports * refactor: enable "valid" and "invalid" attributes for all stories * refactor: italicised placeholders for non-CJK languages * refactor: date/time picker width definition * chore: bump packages to 0.41.2 * refactor: add comment about use of `.innerText` * refactor: reduce cognitive complexity * refactor: calendar improvements + unit tests * refactor: invalid picker button styles * chore: bump packages to 0.41.2 * refactor: small code improvements * chore: fix test imports * chore: update golden img hash * chore: update golden img hash --------- Co-authored-by: Paulo de Tarso Furtado Machado <[email protected]> Co-authored-by: Mirek Szot <[email protected]> Co-authored-by: Mizga Ionut-Alexandru <[email protected]>
* feat(calendar): keyboard navigation * fix: focus on disabled dates * refactor: storybook absolute Dates for VRTs * chore: update golden img hash * fix(calendar): focusable day management when changing months
…4726) * feat(calendar): keyboard navigation * fix: focus on disabled dates * refactor: storybook absolute Dates for VRTs * chore: update golden img hash * fix(calendar): focusable day management when changing months * feat(calendar): new value API * fix: story decorator locale picker lang resolver * perf(calendar): run getDatesInWeek only when needed * chore: rebase fix * refactor: remove textfield and inputsegments from DTP inheritance chain * style(date-time-picker): style fixing * fix(calendar): weeks in current month number updates * fix(calendar): preselected value not changing current month dates * feat(date-time-picker): update value API and granularity * fix(date-time-picker): value updates controller with precision * fix(date-time-picker): date type coming from calendar * test(date-time-picker): added tests structure * chore(date-time-picker): type changes * test(date-time-picker): value changes on arrow key up * test(date-time-picker): value changes on arrow key down * feat(date-time-picker): clear method * feat(calendar): clear method * test(date-time-picker): typed in values partially * chore: remove LanguageResolution change * chore: remove lit direct dep * test: added tests for changing the segments using typed in values * test: added tests for deleting the segments' value * fix(calendar): fixed navigation using prev/next month buttons * fix(calendar): fixed navigation using prev/next month buttons * fix(date-time-picker): check values compliance * test(date-time-picker): multiple types management for values * fix(date-time-picker): fixed storybook precision not applying * test(date-time-picker): test structure for events * refactor(date-time-picker): extract helpers * refactor(date-time-picker): added SegmentsFactory * refactor(date-time-picker): added SegmentsModifier * refactor(date-time-picker): added SegmentsFormatter and initial usage * fix(date-time-picker): fixed 12h hour conversion * refactor(date-time-picker): moved segment formatting to SegmentsModifier * refactor(date-time-picker): added Clear and Input segment modifiers * refactor(date-time-picker): localized support for dayPeriod typed in values * refactor(date-time-picker): created segments wrapper * refactor(date-time-picker): cleanup * refactor(date-time-picker): moved get date from segments to DateTimeSegments * chore: improved dates compliance check readability * chore: small improvements * test(date-time-picker): fix failing tests --------- Co-authored-by: Mizga Ionut-Alexandru <[email protected]>
* fix(date-time-picker): fixed value clearing * test(calendar): extracted test helpers * fix: clear value when interval is changed and value is non compliant * fix(date-time-picker): zonedDateTime edge-cases * test(date-time-picker): added calendar management tests * test(date-time-picker): added tests for value type when segments are set/change * test: improved readability * feat(date-time-picker): precision and date value props interactions * test: fixed mouse coord. float * style: fix second precision with invalid style * style: fix large theme * chore: added clarifying comment
* test(date-time-picker): added tests for input/change events and invalid triggering * feat(date-time-picker): change and input events * feat(date-time-picker): invalid triggering * fix(date-time-picker): no more invalid on fully empty dtp * refactor: improved readability * chore: version bump * test: fixed failing tests * chore: update golden img hash
* fix(calendar): display the current month when the value is deleted * fix(date-time-picker): 2-digit year misformatting * test(date-time-picker): current date independence * test(calendar): added limits for gregorian AD era * fix(calendar): gregorian AD limits * fix(date-time-picker): year deletion on safari * test(date-time-picker): added localization tests * fix(date-time-picker): localized formatting * fix(date-time-picker): multiple small ux fixes * test(calendar): initial month tests when today doesnt comply * fix(calendar): initial month displayed * chore: update golden img hash
* fix: update segment digits overflow * style: uncomment webkit prefix * refactor(calendar): extract updateCurrentDate method * test(date-time-picker): added focus tests * fix(date-time-picker): focus trap on calendar open * feat(date-time-picker): change segments focus on empty delete * test(date-time-picker): created expectFocused helper * test(date-time-picker): added disabled tests * test(calendar): added disabled and localized tests * docs: allow value overrides in storybook * test(calendar): added clear method test * test(date-time-picker): added calendar close when disabled changes test * chore: organize imports * chore: build * fix(date-time-picker): mobile text inputMode on dayPeriod segment * chore: golden img hash update
* refactor(calendar): clarify navigation methods naming * feat(calendar): screen reader labels * feat(calendar): labels prop * test(calendar): query fixes * feat(date-time-picker): intl segment labels and min-max value aria * feat(date-time-picker): labels prop * feat(date-time-picker): selected value/empty announce on focus * ci: update golden image hash * fix: update selectedDateLabel * ci: update golden image hash * docs(date-time-picker): added labels in stories
#5001) * docs(calendar): updated docs * docs(date-time-picker): updated docs * chore: remove duplicate DateValue declaration * docs: added clear selected stories * docs(date-time-picker): custom precision story * chore: comments cleanup * chore: import fixes * docs: addressed comms * docs: updated chromatic settings to include locale picker * chore: remove unnecessary types * test(date-time-picker): update arrow-left test
|
Branch previewReview the following VRT differencesWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
If the changes are expected, update the |
Pull Request Test Coverage Report for Build 12479463131Details
💛 - Coveralls |
Lighthouse scores
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 Transfer Size
Request Count
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
CalendarandDateTimePickercomponents with functionality for the initial release. More about each component can be seen in their documentation and storybook.These components are currently the main ones that benefit from the Storybook locale picker, apart from
NumberField. Therefore, this PR also includes the addition of said locale picker using chromatic globals.Important
Since this is a fairly large PR, I strongly encourage checking out the internal RFC as well as the previous PR merged into the feature branch (see PR commits) before raising any concerns in the comments here, as not to bloat the PR. Thank you! 🙏
Related issue(s)
Motivation and context
How has this been tested?
Types of changes
Checklist
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.