[LG-5504] refactor(date-picker): migrate to use InputBox component
#3286
+407
−1,797
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
adamrasheed
reviewed
Nov 7, 2025
Comment on lines
39
to
43
| ctx?.args.segment === 'day' | ||
| ? 'DD' | ||
| : ctx?.args.segment === 'month' | ||
| ? 'MM' | ||
| : 'YYYY' |
Collaborator
There was a problem hiding this comment.
can we use if/else instead?
https://github.com/mongodb/leafygreen-ui/blob/main/STYLEGUIDE.md
Collaborator
Author
There was a problem hiding this comment.
turns out i don't even need this, removing
…ygreen-ui into LG-5504/input-box-in-date-picker-3
…tories for better segment handling
shaneeza
commented
Nov 7, 2025
This was referenced Nov 7, 2025
shaneeza
changed the title
InputBox component
…ygreen-ui into LG-5504/input-box-in-date-picker-3
…ygreen-ui into LG-5504/input-box-in-date-picker-3
… props and enhancing context usage
…ygreen-ui into LG-5504/input-box-in-date-picker-3
…reen-ui into LG-5504/input-box-in-date-picker-3
…reen-ui into LG-5504/input-box-in-date-picker-3
stephl3
reviewed
Nov 13, 2025
| const segment = part.type as DateSegment; | ||
| const formatter = getValueFormatter(segment); | ||
| const formatter = getValueFormatter({ | ||
| charsPerSegment: charsPerSegment[segment], |
Collaborator
There was a problem hiding this comment.
It feels like there could be some confusion that the charsPerSegment param is a number while the charsPerSegment const is an object mapping a segment to a number. Could be helpful to rename charsPerSegment constant more explicitly. i.e. charsPerSegmentObj or charsPerSegmentMap
Collaborator
Author
There was a problem hiding this comment.
Good call out. I like charsPerSegmentObj
Collaborator
Author
There was a problem hiding this comment.
Or maybe changing the param to charsCount might be better, so that getValueFormatter is not exclusive to segments if we want to use this somewhere else in the future.
Comment on lines
19
to
23
| customValidation: | ||
| segment === DateSegment.Year | ||
| ? (value: DateSegmentValue) => inRange(Number(value), 1000, 9999 + 1) | ||
| : undefined, | ||
| }), |
Collaborator
There was a problem hiding this comment.
could we add a comment about what this is for? does this override min / max validation?
Comment on lines
10
to
15
| export interface DateInputBoxProviderProps { | ||
| /** | ||
| * Date value in UTC time | ||
| */ | ||
| value?: DateType; | ||
| } |
Collaborator
There was a problem hiding this comment.
I think something like this could work as well and be a little DRYer
Suggested change
| export interface DateInputBoxProviderProps { | |
| /** | |
| * Date value in UTC time | |
| */ | |
| value?: DateType; | |
| } | |
| export interface DateInputBoxProviderProps extends PropsWithChildren<DateInputBoxContextType> {}; |
Comment on lines
102
to
113
| onKeyDown={onKeyDown} | ||
| segmentRefs={segmentRefs} | ||
| segmentEnum={DateSegment} | ||
| charsPerSegment={charsPerSegment} | ||
| formatParts={formatParts} | ||
| segments={segments} | ||
| setSegment={setSegment} | ||
| disabled={disabled} | ||
| segmentRules={dateSegmentRules} | ||
| onSegmentChange={onSegmentChange} | ||
| labelledBy={labelledBy} | ||
| segmentComponent={DateInputSegment} |
Collaborator
There was a problem hiding this comment.
if there are props that are not used for component logic, can we instead pass them through to InputBox through the spread ...rest?
…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
Contributor
|
Coverage after merging LG-5504/input-box-in-date-picker-3 into LG-5504/input-box-component 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