docs: DatePicker API #2138
docs: DatePicker API #2138
Conversation
|
|
✅ PR title follows Conventional Commits specification. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 8473a48:
|
| * Sets the picker type | ||
| * @default 'date' | ||
| */ | ||
| picker: PickerType; |
| ## Basic Usage | ||
|
|
||
| ```jsx | ||
| <DatePickerInput |
There was a problem hiding this comment.
can you add controlled example?
|
|
||
| ## Open Questions | ||
|
|
||
| - How should we approach locale? |
There was a problem hiding this comment.
seems good what you've proposed
| ## Open Questions | ||
|
|
||
| - How should we approach locale? | ||
| - What should we do about the triggers? will be have buttons/inputs both? |
There was a problem hiding this comment.
can discuss this once design is done with triggers
There was a problem hiding this comment.
we will only have inputs
|
|
||
| The Date Picker component lets users select a date from a calendar. It is used to input a date or range of dates. | ||
|
|
||
| <img src="./datepicker-thumbnail.png" width="380" /> |
There was a problem hiding this comment.
missing thumbnail
There was a problem hiding this comment.
yes, missing from design side
|
|
||
| ## Anatomy | ||
|
|
||
| <img src="./datepicker-anatomy.png" width="100%" alt="DatePicker Anatomy" /> |
There was a problem hiding this comment.
missing image
|
|
||
| ## Design | ||
|
|
||
| [Figma Link]() to all variants of the DatePicker component |
| */ | ||
| locale: string; | ||
|
|
||
| // Basic selection props |
There was a problem hiding this comment.
How will these callbacks work? Won't some of them overlap? For example when you change the month it will trigger - onMonthChange, onNext, onNextMonth (in edge cases it may also trigger onYearChange, onNextYear?)
Can we not just keep onChange and let users compute what has been changed?
There was a problem hiding this comment.
We are not going to provide onMonthChange/onYearChange.
Only:
onNext: (date: Date) => void;
onNextMonth: (date: Date) => void;
onNextYear: (date: Date) => void;
onNextDecade: (date: Date) => void;
onPrevious: (date: Date) => void;
onPreviousYear: (date: Date) => void;
onPreviousMonth: (date: Date) => void;
onPreviousDecade: (date: Date) => void;
Can we not just keep onChange and let users compute what has been changed?
That will not be a very DX friendly way to provide event handling information.
Plus our OnChange only triggers when you click on "Apply" button it doesn't trigger if you click the Chevrons.
There was a problem hiding this comment.
Mostly analytics and controlled state management.
There was a problem hiding this comment.
Update: we decided to remove the redundant onNextYear,onNextDecade,onNextMonth etc props in favour of 1 onNext prop.
onNext?: (args: { date: Date; type: "month" | "year" | "decade" }) => void;| - What should we do about the triggers? will be have buttons/inputs both? | ||
| - We will only have inputs as triggers | ||
|
|
||
| ## Integration with i18nify |
There was a problem hiding this comment.
Lets raise this with the i18nify team and figure out what can we do?
|
|
||
| <img src="./datepicker-anatomy.png" width="100%" alt="DatePicker Anatomy" /> | ||
|
|
||
| ## Components |
There was a problem hiding this comment.
So is this assumption correct:
- Calendar is an independent component that doesn't need a trigger
- DatePicker is a component that comes with a trigger upon clicking which a calendar is popped up
There was a problem hiding this comment.
Yes.
Tho we will not expose the Calendar component.
Formatted Doc