[LG-5532] feat(time-input) display segment values #3379
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
…omponents with context integration
…tate handling in TimeInputInputs component
…segment rules and default values
… support 12/24 hour formats
…kMode and size, and add console log for debugging in TimeInputInputs
…omponent, covering rendering, value updates, and keyboard interactions
…omponent, covering rendering, value updates, and keyboard interactions
…12HourFormat prop, replacing TimeSegments with TimeSegment for improved clarity and consistency
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR implements display functionality for time input segments in the TimeInput component, enabling users to see and interact with individual time parts (hour, minute, second) in a segmented input format.
Key Changes
- Introduced
TimeInputSegmentcomponent with comprehensive test coverage for keyboard navigation and value formatting - Added
InputBoxintegration to render segmented time inputs with proper validation and formatting rules - Refactored time format detection from
is12hFormattois12HourFormatfor clarity and consistency
Reviewed changes
Copilot reviewed 27 out of 32 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
packages/time-input/src/TimeInputSegment/TimeInputSegment.tsx |
New component rendering individual time segments with validation |
packages/time-input/src/TimeInputSegment/TimeInputSegment.spec.tsx |
Comprehensive test suite for segment keyboard interactions |
packages/time-input/src/TimeInputBox/TimeInputBox.tsx |
Container component integrating InputBox with time-specific configuration |
packages/time-input/src/TimeInputInputs/TimeInputInputs.tsx |
Updated to use TimeInputBox and manage segment state |
packages/time-input/src/constants.ts |
Added segment rules, min/max values, and placeholder definitions |
packages/time-input/src/shared.types.ts |
Defined TimeSegment enum and TimeSegmentsState type |
packages/time-input/src/hooks/useSelectUnit/useSelectUnit.ts |
Hook managing AM/PM select unit synchronization with date value |
packages/time-input/src/TimeFormField/* |
New wrapper components for FormField with time-specific styling |
packages/time-input/src/Context/TimeInputDisplayContext/* |
Renamed is12hFormat to is12HourFormat across context |
packages/date-picker/src/shared/hooks/useDateSegments/useDateSegments.ts |
Added clarifying comments for segment update flow |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
packages/time-input/src/TimeInputSegment/TimeInputSegment.spec.tsx
Outdated
Show resolved
Hide resolved
| const onChangeHandler = | ||
| jest.fn<TimeInputSegmentChangeEventHandler>(); | ||
| const { input } = renderSegment({ | ||
| segment: 'minute', |
There was a problem hiding this comment.
Hardcoded segment value 'minute' should use the dynamic segment variable from the test parameter (line 368) to ensure test correctness for both 'minute' and 'second' segments.
Suggested change
| segment: 'minute', | |
| segment, |
packages/time-input/src/Context/TimeInputDisplayContext/index.ts
Outdated
Show resolved
Hide resolved
shaneeza
commented
Dec 12, 2025
Collaborator
Author
There was a problem hiding this comment.
This is being replaced in the next PR so it doesn't need to be reviewed
… in TimeInputSegment tests
Contributor
|
Size Change: +1.67 kB (+0.09%) Total Size: 1.82 MB
ℹ️ View Unchanged
|
…ygreen-ui into LG-5532/segments-display-values
shaneeza
requested review from
TheSonOfThomp and
stephl3
and removed request for
a team
…en showSeconds is false
Contributor
|
Coverage after merging LG-5532/segments-display-values into LG-5538/segments-parse-time will be
Coverage Report for Changed Files
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This was referenced Dec 15, 2025
adamrasheed
reviewed
Dec 16, 2025
| Intl.DateTimeFormat().resolvedOptions().timeZone, | ||
| ); | ||
|
|
||
| // TODO: min, max helpers will be in a future PR |
Collaborator
There was a problem hiding this comment.
Nit: Would be helpful to create a backlog ticket for this and reference that in this comment
| const { | ||
| label, | ||
| description, | ||
| // stateNotification: { state, message: errorMessage }, |
Collaborator
There was a problem hiding this comment.
do we need to remove this?
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.
✍️ Proposed changes
🎟 Jira ticket: LG-5532
This PR is the second PR in a chain of PRs
This PR implements display functionality for time input segments, enabling users to view individual time parts (hour, minute, second) in a segmented input format. The ability to update segments is not included in this PR.
✅ Checklist
🧪 How to test changes