[LG-5532] feat(time-input) display segment values #3379
Merged
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.08 kB (+0.11%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
| 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 Will update!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 added it early since I know I will be using it, but I'll move this to shared.types since it 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
…hRef for better ref handling
…ctions to utils for better organization
…ontainer for improved accessibility
stephl3
reviewed
Dec 22, 2025
Comment on lines
18
to
26
| const { ariaLabelProp, ariaLabelledbyProp, is12HourFormat } = | ||
| useTimeInputDisplayContext(); | ||
|
|
||
| return ( | ||
| <FormFieldInputContainer | ||
| ref={fwdRef} | ||
| tabIndex={-1} | ||
| aria-label={ariaLabelProp} | ||
| aria-labelledby={ariaLabelledbyProp} |
Collaborator
There was a problem hiding this comment.
These aria attributes still should be moved to FormField. aria-label and aria-labelledby are being rendered in the DOM on 2 different nodes
Collaborator
Author
There was a problem hiding this comment.
If i add this to FormField, then aria-label and aria-labelledby always show up on the form field parent container. This may be a bug in FormField because props that should only be included with inputProps are still passed to the main FormField container. I can open a separate PR outside of this integration branch to fix this.
Collaborator
Author
There was a problem hiding this comment.
| return ( | ||
| <FormFieldInputContainer | ||
| ref={fwdRef} | ||
| tabIndex={-1} |
Collaborator
There was a problem hiding this comment.
is it worth adding a comment about why we need to include this?
Collaborator
Author
There was a problem hiding this comment.
I don't think I need this, removing
| ? ariaLabelledbyProp | ||
| : undefined | ||
| } | ||
| onClick={onInputClick} |
Collaborator
There was a problem hiding this comment.
It's difficult to provide feedback on this because it's unclear what it's getting used for. Is it possible to add some docs for what this is used for or add it when it gets used? If it's actually for the *InputContainer and not the input element, any reason not to use the native onClick attribute?
packages/time-input/src/constants.ts
Outdated
| /** | ||
| * The default placeholders for each segment | ||
| */ | ||
| export const defaultPlaceholder = { |
Collaborator
There was a problem hiding this comment.
nit: use plural for consistency with surrounding objects
Suggested change
| export const defaultPlaceholder = { | |
| export const defaultPlaceholders = { |
Comment on lines
38
to
41
| meta?: { | ||
| key?: (typeof keyMap)[keyof typeof keyMap]; | ||
| [key: string]: any; | ||
| }; |
Collaborator
There was a problem hiding this comment.
curious do we actually need this or can we rely on native change events instead?
Collaborator
Author
There was a problem hiding this comment.
We need this, but I will remove it from this PR since it isn't being used right now. I was optimizing too early.
| const { is12HourFormat, lgIds } = useTimeInputDisplayContext(); | ||
|
|
||
| return ( | ||
| <InputSegment |
Collaborator
There was a problem hiding this comment.
Separate from the scope of this PR, I found a bug in InputSegment in which the segment is being assigned to the id attribute. This will mean that multiple instances of DatePicker or TimeInput will have duplicate id's
Collaborator
Author
There was a problem hiding this comment.
I'll create a ticket for this
…and enhance accessibility attributes in TimeFormField and TimeFormFieldInputContainer
…s for consistency in time input segment
Contributor
|
Coverage after merging LG-5532/segments-display-values into shaneeza/segment-logic-integration will be
Coverage Report for Changed Files
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
stephl3
approved these changes
Dec 23, 2025
Comment on lines
+13
to
+18
| /** | ||
| * Dynamically generated LGIDs that will be used for the data-lgid and data-testid attributes in child components | ||
| */ | ||
| interface LgIds { | ||
| lgIds: GetLgIdsReturnType; | ||
| } |
Collaborator
There was a problem hiding this comment.
Taking another look, I see this pattern here and elsewhere. Don't want to blow up scope of these changes, but with this many instances, it seems like a repeat pattern worth abstracting in some way
Collaborator
Author
There was a problem hiding this comment.
I'll create a ticket for this
Collaborator
Author
There was a problem hiding this comment.
shaneeza
merged commit 172eefe
into
shaneeza/segment-logic-integration
13 of 14 checks passed
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