[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
…cale dependency and enhancing formatting logic
… format output with and without seconds
…meInputDisplayContext
…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
…ity in time input context
|
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: +2.16 kB (+0.12%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
… and update related logic for clarity
…nclude time parts and improve tests for locale handling
…meInputDisplayContext
…r formatting date and time parts
…lated logic for consistency
…ts to reflect date time terminology
…FormField component
| is12HourFormat: boolean; | ||
| }) => | ||
| cx(baseStyles, { | ||
| [selectStyles]: is12HourFormat, |
Collaborator
There was a problem hiding this comment.
might be worth adding a comment on why we're removing border radius for 12hr format
Collaborator
There was a problem hiding this comment.
since this is a pattern that exists in NumberInput as well, what do you think about building this into FormFieldInputContainer itself?
| return ( | ||
| <FormFieldInputContainer | ||
| ref={fwdRef} | ||
| role="combobox" |
Collaborator
There was a problem hiding this comment.
Time input isn't a combobox. I's just a text input
Comment on lines
75
to
88
| describe('12 hour format', () => { | ||
| it('should have a min of 1 for the hour segment', () => { | ||
| const { hourInput } = renderTimeInputBox({ | ||
| displayProps: { locale: SupportedLocales.en_US }, | ||
| }); | ||
| expect(hourInput).toHaveAttribute('min', '1'); | ||
| }); | ||
| it('should have a max of 12 for the hour segment', () => { | ||
| const { hourInput } = renderTimeInputBox({ | ||
| displayProps: { locale: SupportedLocales.en_US }, | ||
| }); | ||
| expect(hourInput).toHaveAttribute('max', '12'); | ||
| }); | ||
| }); |
Collaborator
There was a problem hiding this comment.
These tests are brittle since we're checking the DOM attributes, not the actual behavior
Collaborator
Author
There was a problem hiding this comment.
I can remove these since i'm testing the behavior in TimeInputSegment
packages/time-input/src/constants.ts
Outdated
| return { | ||
| [TimeSegment.Hour]: { | ||
| maxChars: 2, | ||
| minExplicitValue: is12HourFormat ? 1 : 2, |
Collaborator
There was a problem hiding this comment.
shouldn't this be:
Suggested change
| minExplicitValue: is12HourFormat ? 1 : 2, | |
| minExplicitValue: is12HourFormat ? 2 : 3, |
Collaborator
Author
There was a problem hiding this comment.
whoops, should be. I thought I changed this in this PR, but I did it in the next PR, which adds tests for it.
Comment on lines
42
to
61
| test('has 2 options', () => { | ||
| const { getInput, getOptions } = renderTimeInputSelect({ | ||
| unit: 'AM', | ||
| onChange: () => {}, | ||
| }); | ||
|
|
||
| userEvent.click(getInput()); | ||
| expect(getOptions()).toHaveLength(2); | ||
| }); | ||
|
|
||
| test('has AM and PM options', () => { | ||
| const { getInput, getOptionByValue } = renderTimeInputSelect({ | ||
| unit: 'AM', | ||
| onChange: () => {}, | ||
| }); | ||
|
|
||
| userEvent.click(getInput()); | ||
| expect(getOptionByValue('AM')).toBeInTheDocument(); | ||
| expect(getOptionByValue('PM')).toBeInTheDocument(); | ||
| }); |
Collaborator
There was a problem hiding this comment.
these tests can be combined
…ean up tests by removing unused code
…db/leafygreen-ui into LG-5538/segments-parse-time
…ygreen-ui into LG-5532/segments-display-values
Base automatically changed from
LG-5538/segments-parse-time
to
shaneeza/segment-logic-integration
December 19, 2025 21:20
…orrect time input handling
stephl3
reviewed
Dec 19, 2025
| /** | ||
| * Determines if the input should show a select for the day period (AM/PM) | ||
| */ | ||
| const is12HourFormat = !!hasDayPeriod(providerValue.locale); |
Collaborator
There was a problem hiding this comment.
Suggested change
| const is12HourFormat = !!hasDayPeriod(providerValue.locale); | |
| const is12HourFormat = hasDayPeriod(providerValue.locale); |
| formatParts?: Array<Intl.DateTimeFormatPart>; | ||
|
|
||
| /** | ||
| * LGIDs for the code snippet. |
| 'aria-labelledby'?: string; | ||
|
|
||
| /** | ||
| * LGIDs for the code snippet. |
Comment on lines
56
to
59
| /** | ||
| * LGIDs for the code snippet. | ||
| */ | ||
| lgIds: GetLgIdsReturnType; |
Collaborator
There was a problem hiding this comment.
could you remind me what this pattern is for? It seems odd to pass these down through props and can't remember why it's necessary
Collaborator
Author
There was a problem hiding this comment.
Yeah, this is so that nested child components have access to the dynamic LGIDs.
| @@ -0,0 +1,5 @@ | |||
| import { FormFieldProps } from '@leafygreen-ui/form-field'; | |||
|
|
|||
| export type TimeFormFieldProps = React.ComponentPropsWithoutRef<'div'> & { | |||
Collaborator
There was a problem hiding this comment.
should this be ComponentPropsWithRef?
Collaborator
Author
There was a problem hiding this comment.
If a component is wrapped in a forwardRef, you should use ComponentPropsWithoutRef because the ref shouldn't be included with the props. React gives you the ref as the second parameter in the forwardRef callback function.
Comment on lines
12
to
15
| meta?: { | ||
| key?: (typeof keyMap)[keyof typeof keyMap]; | ||
| [key: string]: any; | ||
| }; |
Collaborator
There was a problem hiding this comment.
what is this / what is it used for?
Collaborator
Author
There was a problem hiding this comment.
I'm moving this to shared.types since will be used in TimeInputBox for the onSegmentChange callback.
| import { TimeSegment, TimeSegmentsState } from '../shared.types'; | ||
|
|
||
| export interface TimeInputBoxProps | ||
| extends React.ComponentPropsWithoutRef<'div'> { |
Comment on lines
+81
to
+83
| test.todo( | ||
| 'should call onSegmentChange with the segment name and the value', | ||
| ); |
Collaborator
There was a problem hiding this comment.
any reason we can't do this now? imo we should avoid test.todo() because they tend to be left as todos or leave a ticket so it's returned to
Collaborator
Author
There was a problem hiding this comment.
Since this is one large PR that I've broken into 5 separate PRs, this has been added in the 5th PR.
|
|
||
| import { TimeInputBoxProps } from './TimeInputBox.types'; | ||
|
|
||
| export const TimeInputBox = React.forwardRef<HTMLDivElement, TimeInputBoxProps>( |
Collaborator
There was a problem hiding this comment.
can we axe the empty *.styles.ts file?
|
|
||
| import { TimeInputSegmentProps } from './TimeInputSegment.types'; | ||
|
|
||
| export const TimeInputSegment = React.forwardRef< |
Collaborator
There was a problem hiding this comment.
can we axe the empty *.styles.ts file?
Collaborator
Author
There was a problem hiding this comment.
I plan on adding some styles to this file in a future PR
…efault context values
Contributor
|
Coverage after merging LG-5532/segments-display-values into shaneeza/segment-logic-integration will be
Coverage Report for Changed Files
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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