[LG-5504] refactor(date-picker): migrate to use InputBox component
#3286
+409
−1,812
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
… improved type handling and event management
…tSegment with additional props
…with improved type handling and segment management
…ved segment management and type handling
…es for better segment management
…pe handling and segment management
… new props for step handling and rollover management
…icker components for improved segment management and type handling
…nce segment validation logic for improved date handling
…ean up InputBox component
…alidation and formatting functions
…tSegment and InputBox tests for better coverage
…ent components by introducing utility functions
…gment components for improved clarity and documentation
…ent types with clearer examples
…Rules in InputBox types for better clarity
…ting getValueFormatter to accept segment-specific character counts
… for year segment and enhance validation logic
…ype safety and clarity
…ng and props validation
…r consistency and clarity across components
… tests for InputBox and InputSegment components
…eafygreen-ui into LG-5504/input-box-component
…y in digit input handling
…onsible for increment/decrement logic
…clarify functionality and usage
…nt components for enhanced customization
…nt usage across components
…mentRefs integration for improved focus handling
…n testutils for enhanced testing capabilities
…nputBox stories with date and time segment examples
…stutils for cleaner code
…ging in InputBox component
…ygreen-ui into LG-5504/input-box-in-date-picker-3
…elated references to charsCount for consistency
…ate DateInputBoxProviderProps to extend PropsWithChildren for better type handling
…-digit year value in custom validation for date segments
…tead of charsPerSegment across components and tests for consistency
stephl3
reviewed
Nov 19, 2025
Comment on lines
99
to
112
| <InputBox | ||
| ref={fwdRef} | ||
| segmentRefs={segmentRefs} | ||
| segmentEnum={DateSegment} | ||
| formatParts={formatParts} | ||
| segments={segments} | ||
| setSegment={setSegment} | ||
| disabled={disabled} | ||
| segmentRules={dateSegmentRules} | ||
| onSegmentChange={onSegmentChange} | ||
| labelledBy={labelledBy} | ||
| segmentComponent={DateInputSegment} | ||
| {...rest} | ||
| /> |
Collaborator
There was a problem hiding this comment.
re: previous comment on pass-through props, segmentRefs, onSegmentChange, and labelledBy look like they can also be passed through. I think this has the benefit of making it clearer which props are provided from DatePicker context or derived by other means
Collaborator
There was a problem hiding this comment.
Also, it looks like className is no longer being considered. Is that correct?
Collaborator
Author
There was a problem hiding this comment.
Whoops, I missed these. Thanks.
…for cleaner implementation
…ableSnapshot in DatePicker stories and pass size prop to InputBox
stephl3
approved these changes
Nov 19, 2025
| value, | ||
| }: PropsWithChildren<DateInputBoxProviderProps>) => { | ||
| return ( | ||
| <DateInputBoxContext.Provider value={{ value }}> |
Collaborator
There was a problem hiding this comment.
nit: it's a bit confusing to have the DateInputBoxProvider prop named value that's different from the DateInputBoxContext.Provider value prop
Comment on lines
+37
to
+43
| const { | ||
| autoComplete: autoCompleteProp, | ||
| min: minContextProp, | ||
| max: maxContextProp, | ||
| } = useSharedDatePickerContext(); | ||
|
|
||
| const { value: dateValue } = useDateInputBoxContext(); |
Collaborator
There was a problem hiding this comment.
My intuition says the dateValue should be on the useSharedDatePickerContext. Is it just not needed until the DateInputBoxContext?
Collaborator
Author
There was a problem hiding this comment.
I think the date value isn't stored in the SharedDatePickerProvider because this provider was built with the date range picker in mind. I believe because of the range picker, there can be multiple DateInputBox components within a SharedDatePickerProvider, and each component needs its own separate value, which DateInputSegment relies on. So storing a single value in the shared provider might not be correct.
Does that sound familiar? If any of that is incorrect, then I can add the value to the shared provider.
| ): boolean => { | ||
| return Object.entries(segments).every(([segment, value]) => | ||
| isExplicitSegmentValue(segment as DateSegment, value), | ||
| isExplicitSegmentValue({ segment: segment as DateSegment, value }), |
Collaborator
There was a problem hiding this comment.
Why is segment not automatically typed as DateSegment here?
Base automatically changed from
LG-5504/input-box-component
to
shaneeza/time-picker-integration
November 20, 2025 02:05
…/leafygreen-ui into LG-5504/input-box-in-date-picker-3
Contributor
|
Coverage after merging LG-5504/input-box-in-date-picker-3 into shaneeza/time-picker-integration will be
Coverage Report
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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
This PR is the third PR in a series of three PRs that add the new
InputBoxpackage and integrate it into the existingDatePickerpackage:InputSegment#3293InputBox#3285This PR refactors the date-picker package to leverage the new
@leafygreen-ui/input-boxcomponent instead of maintaining custom input segment implementations. This migration significantly simplifies the codebase by removing redundant logic and utilities, while maintaining the same functionality through the shared input-box component.Key changes include:
DateInputSegmentimplementation withInputSegmentfrom@leafygreen-ui/input-box🎟️ Jira ticket: LG-5504
✅ Checklist
pnpm changesetand documented my changes🧪 How to test changes