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

paulodetarsofm · 2023-07-18T16:49:53Z

Description

Adding the second component that will be part of the date/time picker: the time field. The time field uses an "abstract component" as a base, called input segments, which will also be used by the date/time picker.

The first component is the calendar.

This PR will also include:

Disable Storybook shortcuts for contenteditable
Textfield: convert pseudo :read-only to attribute

Related issue(s)

#2626

Motivation and context

Allow the user to enter a specific time to publish a post on social media.

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-07-18T16:54:28Z

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-07-18T16:59:50Z

Tachometer results

Chrome

accordion permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	403 kB	396.07ms - 401.92ms	-	unsure 🔍 -1% - +2% -3.81ms - +6.16ms
branch	398 kB	393.78ms - 401.86ms	unsure 🔍 -2% - +1% -6.16ms - +3.81ms	-

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	476 kB	193.98ms - 198.10ms	-	slower ❌ 1% - 4% 2.45ms - 7.41ms
branch	471 kB	189.72ms - 192.49ms	faster ✔ 1% - 4% 2.45ms - 7.41ms	-

action-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	517 kB	355.06ms - 360.15ms	-	unsure 🔍 -1% - +1% -4.50ms - +3.55ms
branch	512 kB	354.96ms - 361.20ms	unsure 🔍 -1% - +1% -3.55ms - +4.50ms	-

action-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	537 kB	219.73ms - 224.64ms	-	slower ❌ 4% - 7% 8.43ms - 14.24ms
branch	532 kB	209.30ms - 212.40ms	faster ✔ 4% - 6% 8.43ms - 14.24ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	748 kB	303.32ms - 309.41ms	-	faster ✔ 8% - 11% 27.91ms - 36.30ms
branch	757 kB	335.59ms - 341.36ms	slower ❌ 9% - 12% 27.91ms - 36.30ms	-

asset permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	351 kB	25.69ms - 26.34ms	-	unsure 🔍 -2% - +2% -0.58ms - +0.54ms
branch	346 kB	25.58ms - 26.49ms	unsure 🔍 -2% - +2% -0.54ms - +0.58ms	-

avatar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	389 kB	53.44ms - 55.66ms	-	unsure 🔍 -0% - +5% -0.20ms - +2.42ms
branch	384 kB	52.75ms - 54.14ms	unsure 🔍 -4% - +0% -2.42ms - +0.20ms	-

badge permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	385 kB	82.41ms - 84.47ms	-	faster ✔ 2% - 6% 1.83ms - 5.67ms
branch	383 kB	85.58ms - 88.81ms	slower ❌ 2% - 7% 1.83ms - 5.67ms	-

banner permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	350 kB	44.98ms - 49.83ms	-	unsure 🔍 -4% - +8% -1.89ms - +3.51ms
branch	345 kB	45.41ms - 47.77ms	unsure 🔍 -7% - +4% -3.51ms - +1.89ms	-

button-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	432 kB	190.55ms - 194.35ms	-	unsure 🔍 -1% - +2% -2.03ms - +3.54ms
branch	427 kB	189.66ms - 193.73ms	unsure 🔍 -2% - +1% -3.54ms - +2.03ms	-

button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	437 kB	224.19ms - 228.98ms	-	unsure 🔍 -0% - +3% -0.02ms - +6.55ms
branch	432 kB	221.07ms - 225.57ms	unsure 🔍 -3% - -0% -6.55ms - +0.02ms	-

Firefox

accordion permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	403 kB	470.02ms - 491.34ms	-	unsure 🔍 -3% - +4% -15.21ms - +17.13ms
branch	398 kB	467.57ms - 491.87ms	unsure 🔍 -4% - +3% -17.13ms - +15.21ms	-

action-bar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	476 kB	312.26ms - 335.10ms	-	unsure 🔍 -3% - +7% -9.32ms - +22.00ms
branch	471 kB	306.62ms - 328.06ms	unsure 🔍 -7% - +3% -22.00ms - +9.32ms	-

action-button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	517 kB	457.22ms - 479.62ms	-	unsure 🔍 -4% - +4% -18.36ms - +16.96ms
branch	512 kB	455.46ms - 482.78ms	unsure 🔍 -4% - +4% -16.96ms - +18.36ms	-

action-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	537 kB	302.74ms - 327.18ms	-	unsure 🔍 -3% - +8% -8.91ms - +24.07ms
branch	532 kB	296.31ms - 318.45ms	unsure 🔍 -8% - +3% -24.07ms - +8.91ms	-

action-menu permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	748 kB	342.19ms - 366.13ms	-	faster ✔ 5% - 13% 17.80ms - 49.24ms
branch	757 kB	377.49ms - 397.87ms	slower ❌ 5% - 14% 17.80ms - 49.24ms	-

asset permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	351 kB	43.85ms - 51.23ms	-	unsure 🔍 -4% - +21% -1.52ms - +8.88ms
branch	346 kB	40.20ms - 47.52ms	unsure 🔍 -18% - +3% -8.88ms - +1.52ms	-

avatar permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	389 kB	97.69ms - 106.11ms	-	unsure 🔍 -6% - +6% -6.37ms - +6.21ms
branch	384 kB	97.30ms - 106.66ms	unsure 🔍 -6% - +6% -6.21ms - +6.37ms	-

badge permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	385 kB	131.96ms - 146.52ms	-	unsure 🔍 -10% - +4% -14.74ms - +6.02ms
branch	383 kB	136.20ms - 151.00ms	unsure 🔍 -4% - +11% -6.02ms - +14.74ms	-

banner permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	350 kB	56.65ms - 65.87ms	-	unsure 🔍 -16% - +5% -10.30ms - +3.54ms
branch	345 kB	59.48ms - 69.80ms	unsure 🔍 -6% - +17% -3.54ms - +10.30ms	-

button-group permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	432 kB	274.79ms - 296.65ms	-	unsure 🔍 -4% - +7% -11.79ms - +19.51ms
branch	427 kB	270.65ms - 293.07ms	unsure 🔍 -7% - +4% -19.51ms - +11.79ms	-

button permalink

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	437 kB	286.64ms - 305.24ms	-	unsure 🔍 -6% - +3% -18.28ms - +9.76ms
branch	432 kB	289.70ms - 310.70ms	unsure 🔍 -3% - +6% -9.76ms - +18.28ms	-

davidjgonzalez · 2023-08-11T22:30:11Z

Haven't reviewed the code (on phone) but it would be awesome if you could specify in the web component if the date should resolve to the first "moment" (12:00:00am) of the selected date, or the last (11:59:59). This is incredibly helpful for specifying ranges, which are almost always selected by day, and the first selection is the first moment of the selected day, and the second selection really means the last moment of that day. Second or Ms granularity would be fine with me.

Westbrook

This is a great start. Lots of little things, many for my own understanding.

packages/input-segments/README.md

packages/input-segments/package.json

packages/input-segments/src/InputSegments.ts

packages/time-field/README.md

packages/time-field/src/TimeField.ts

packages/time-field/stories/time-field.stories.ts

packages/time-field/test/benchmark/basic-test.ts

packages/time-field/test/time-field.test.ts

…property `locale` to a getter

* "Refactor this function to reduce its Cognitive Complexity from 41 to the 15 allowed." (SonarLint)

* "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint)

* "Refactor this function to reduce its Cognitive Complexity from 30 to the 15 allowed." (SonarLint)

…` method * "Refactor this function to reduce its Cognitive Complexity from 34 to the 15 allowed." (SonarLint)

* "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint)

Westbrook

Looks good to get into the project branch!

* 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 <paulodetarsofm@yahoo.com.br> Co-authored-by: Mirek Szot <ind34343@adobe.com> Co-authored-by: Mizga Ionut-Alexandru <mizgaionutalexandru@gmail.com>

* 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 <paulodetarsofm@yahoo.com.br> Co-authored-by: Mirek Szot <ind34343@adobe.com> Co-authored-by: Mizga Ionut-Alexandru <mizgaionutalexandru@gmail.com>

paulodetarsofm requested review from Rajdeepc, Westbrook, hunterloftis, jnjosh, najikahalsema and pfulton July 18, 2023 16:49

paulodetarsofm force-pushed the paulodetarsofm/input-segments-and-time-field branch from f2ad6bb to 23f793f Compare August 1, 2023 10:08

Westbrook mentioned this pull request Aug 11, 2023

[Feat]: Add Date Picker Pattern #2559

Closed

1 task

Westbrook reviewed Aug 14, 2023

View reviewed changes

paulodetarsofm force-pushed the feature/date-time-picker branch from 5a98374 to 3611f56 Compare August 15, 2023 13:00

paulodetarsofm added 17 commits August 15, 2023 14:17

feat: add input segments

5744cd9

refactor: input segments improvements

67b445a

fix(textfield): convert pseudo :read-only to attribute

4032e7f

feat(time-field): add new time field component

bcd9d71

refactor: remove _ from private properties and methods and convert …

107c0b4

…property `locale` to a getter

refactor: add new @internationalized/number package

018b50b

refactor: reduce cognitive complexity for handleTypedValue() method

03a31dd

* "Refactor this function to reduce its Cognitive Complexity from 41 to the 15 allowed." (SonarLint)

refactor: reduce cognitive complexity for handleClear() method

50a3b74

* "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint)

refactor: reduce cognitive complexity for setNewDateTime() method

6997981

* "Refactor this function to reduce its Cognitive Complexity from 30 to the 15 allowed." (SonarLint)

refactor: add correct placeholder for year

e3f1587

refactor: reduce cognitive complexity for `getSegmentValueAndLimits()…

a23f778

…` method * "Refactor this function to reduce its Cognitive Complexity from 34 to the 15 allowed." (SonarLint)

refactor: reduce cognitive complexity for updateHour() method

ebe93c3

* "Refactor this function to reduce its Cognitive Complexity from 21 to the 15 allowed." (SonarLint)

refactor: add missing comments and minor code improvements

7dca5fc

refactor: preserve white spaces inside literal segments

d8cfe99

refactor: add types to variables

ba56c75

refactor: formatting year

a9303e1

refactor: increment/decrement year when is undefined

1dc517b

paulodetarsofm added 4 commits August 15, 2023 14:49

refactor: remove unnecessary configuration

6987ce6

refactor: remove unnecessary code

1255d42

refactor: code and comments improvements

9a65a6a

refactor: remove unused files

72fbfff

paulodetarsofm force-pushed the paulodetarsofm/input-segments-and-time-field branch from 6c869f6 to 72fbfff Compare August 16, 2023 14:30

paulodetarsofm added 3 commits August 16, 2023 16:23

refactor: update @spectrum-css/calendar

7afa951

refactor: move input-segments from /packages to /tools

de22124

fix: segment text colour

6b74960

paulodetarsofm requested a review from Westbrook August 16, 2023 16:44

refactor(calendar): remove unnecessary code

8eabd8e

Westbrook approved these changes Aug 23, 2023

View reviewed changes

Westbrook merged commit edb0fe4 into feature/date-time-picker Aug 23, 2023

Westbrook deleted the paulodetarsofm/input-segments-and-time-field branch August 23, 2023 15:40

paulodetarsofm mentioned this pull request Nov 30, 2023

feat(date-time-picker): add date/time input + picker #3838

Closed

13 tasks

mirekszot mentioned this pull request Dec 6, 2023

feat(date-time-picker): add date/time input + picker #3856

Merged

13 tasks

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

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

Uh oh!

Conversation

paulodetarsofm commented Jul 18, 2023

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 Jul 18, 2023

Branch Preview

Uh oh!

github-actions bot commented Jul 18, 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!

davidjgonzalez commented Aug 11, 2023

Uh oh!

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

Westbrook left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Jul 18, 2023 •

edited

Loading