feat(input-time-picker): add separate hour, minute, second and meridiem input fields #11712
Conversation
This file contains hidden or 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
…or meridiem order after adding the proper rendering order logic for meridiem. Also fixing background color css variable assignment to work with both light and dark modes
…inputs because of issue #3883 and adding meridiem ordering logic, although it doesn't currently work with arabic, so we'll fix that in a follow-up
… for RTL meridiems. This allows the Tab key to go in sequence properly. Need to fix this to match in time-picker too.
…ate localizeTimeStringToParts, updated tests. Refactoring to set the localized input value in willUpdate when the value changes. This will ensure that only the last change to value will relocalize the input value because Lit batches updates to properties in willUpdate.
…nd do some more clean-up
…der ring to match input-text styling, removing unused internal css variables that applied to input-text and getting the toggle icon working to open and close the popover
…g a step argument to toISOTimeString which will force the returned time value to conform to the provided step.
…ction that can be used by parseTimeString and toISOTimeString
…e meridiem setting somehow and there's still a lot of cleanup to do, but this is great progress.
…ding a component.requestUpdate to get the component to re-render when time properties change in the controller.
… removing toISOTimeStringFromParts in favor of just toISOTimeString
…ctored toISOTimeString and isValidTime to accept Time objects with expanded and improved unit tests.
…esses to move from 000 to 001
…ll having trouble re-rendering it on some changes to it
…n't include proper logic to validate fractional seconds
eriklharper
added
pr ready for visual snapshots
ashetland
approved these changes
Apr 30, 2025
jcfranco
approved these changes
May 1, 2025
There was a problem hiding this comment.
Great stuff, @eriklharper! The only thing I'd like addressed before merging is for the input to emit change events on blur and commit to preserve the expected behavior of emitting when users type and finalize a value.
Per our conversation, please create a high-priority follow-up issue to address suggested refactors.
👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈
👈🕐🕐🕐🕐👈🕐👈👈👈👈👈🕐👈🕐🕐🕐🕐👈👈🕐🕐🕐👈👈🕐🕐👈👈🕐👈👈👈🕐👈🕐🕐🕐🕐👈🕐👈
👈🕐👈👈🕐👈🕐👈👈👈👈👈🕐👈🕐👈👈👈👈🕐👈👈👈👈🕐👈👈🕐👈🕐🕐👈🕐🕐👈🕐👈👈👈👈🕐👈
👈🕐🕐🕐🕐👈🕐👈👈🕐👈👈🕐👈🕐🕐🕐👈👈👈🕐🕐👈👈🕐👈👈🕐👈🕐👈🕐👈🕐👈🕐🕐🕐👈👈🕐👈
👈🕐👈👈🕐👈🕐👈🕐👈🕐👈🕐👈🕐👈👈👈👈👈👈👈🕐👈🕐👈👈🕐👈🕐👈👈👈🕐👈🕐👈👈👈👈👈👈
👈🕐👈👈🕐👈👈🕐👈👈👈🕐👈👈🕐🕐🕐🕐👈🕐🕐🕐👈👈👈🕐🕐👈👈🕐👈👈👈🕐👈🕐🕐🕐🕐👈🕐👈
👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈👈
packages/calcite-components/src/components/input-time-picker/input-time-picker.tsx
Outdated
Show resolved
Hide resolved
packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
Outdated
Show resolved
Hide resolved
…in the component, removed unused ref on the time-picker element.
eriklharper
added
pr ready for visual snapshots
5 tasks
driskull
reviewed
May 2, 2025
Merged
eriklharper
added
the
visual changes
eriklharper
added a commit
that referenced
this pull request
May 15, 2025
…comments (#12108) **Related Issue:** #12090 ## Summary Addresses refactor changes originally requested in #11712. - Drops the `localized` prefix from the `LocalizedTime` interface. - Refactors `isValidTime()` util function to use more readable internal variable names. - Unifies the return and reduces duplication in the `toISOTimeString()` util function. - Converting an `if/else` to a ternary in stacked focus trap test
jcfranco
pushed a commit
that referenced
this pull request
May 29, 2025
…comments (#12108) **Related Issue:** #12090 ## Summary Addresses refactor changes originally requested in #11712. - Drops the `localized` prefix from the `LocalizedTime` interface. - Refactors `isValidTime()` util function to use more readable internal variable names. - Unifies the return and reduces duplication in the `toISOTimeString()` util function. - Converting an `if/else` to a ternary in stacked focus trap test
6 tasks
26 tasks
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.
Related Issue: #2709
Summary
This PR adds separate focusable and editable input fields for each portion of the time value in
calcite-input-time-picker.