feat: add DatePicker component #2173
Conversation
🦋 Changeset detectedLatest commit: 79cc179 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
✅ PR title follows Conventional Commits specification. |
anuraghazra
requested review from
chaitanyadeorukhkar,
kamleshchandnani,
snitin315 and
saurabhdaware
as code owners
| @@ -70,7 +71,7 @@ const _BottomSheetBody = ({ | |||
| paddingTop={bottomSheetHasActionList ? 'spacing.3' : padding} | |||
| paddingBottom={bottomSheetHasActionList ? 'spacing.3' : padding} | |||
| ref={contentRef} | |||
| overflow="auto" | |||
| overflow={overflow ?? 'auto'} | |||
There was a problem hiding this comment.
define it as overflow = 'auto' in top only maybe as default value
| xsmall: 'medium', | ||
| small: 'medium', | ||
| medium: 'medium', | ||
| large: 'medium', |
There was a problem hiding this comment.
do we need this object if its all medium 🙈
There was a problem hiding this comment.
Let's keep like this for now, sizes might change later.
| levelsGroup: 'DatePicker-levelsGroup', | ||
| day: 'DatePicker-cell', | ||
| monthsListControl: 'DatePicker-cell', | ||
| yearsListControl: 'DatePicker-cell', | ||
| calendarHeader: 'DatePicker-header', | ||
| monthRow: 'DatePicker-row', | ||
| yearsListRow: 'DatePicker-row', | ||
| monthsListRow: 'DatePicker-row', | ||
| weekdaysRow: 'DatePicker-row', | ||
| weekday: 'DatePicker-weekday', |
There was a problem hiding this comment.
maintain this in some tokens.ts / constants.ts file maybe? since we're reusing these strings while writing CSS also
| <BaseBox display="flex" flexDirection="column" gap="spacing.5"> | ||
| {isMobile ? null : <Divider />} | ||
| <BaseBox | ||
| width={isMobile ? '100%' : undefined} |
There was a problem hiding this comment.
| width={isMobile ? '100%' : undefined} | |
| width={{ base: '100%, m: undefined }} |
| marginTop={ | ||
| // Hacky layouting because the we cannot put this inside the internal layout of BaseInput. | ||
| hasLabel && !isLabelPositionLeft | ||
| ? `calc(${makeSize(iconVerticalMargin[size])} + ${isLarge ? '20px' : '15px'})` |
There was a problem hiding this comment.
use spacing tokens / sizing tokens
| id="start-date" | ||
| labelPosition={labelPosition} | ||
| label={label} | ||
| placeholder="DD MMM YYYY" |
There was a problem hiding this comment.
Static placeholder? this is not configurable like other inputs?
There was a problem hiding this comment.
Yes. non configurable.
| flexDirection="column" | ||
| gap="spacing.2" | ||
| backgroundColor="surface.background.gray.moderate" | ||
| minWidth={makeSpace(160)} |
There was a problem hiding this comment.
done, but at this point I'm actually questioning the use/existence of size tokens. We seem to randomly add pixel values in here.
| console.error( | ||
| '[@mantine/dates/use-uncontrolled-dates] Value must be type of `[string, string]`', | ||
| ); |
There was a problem hiding this comment.
not using throwBladeError utility?
| display="flex" | ||
| flexDirection="column" | ||
| gap="spacing.5" | ||
| data-nice |
| <FloatingPortal> | ||
| <FloatingFocusManager | ||
| initialFocus={defaultInitialFocusRef} | ||
| context={context} | ||
| guards={true} | ||
| > |
There was a problem hiding this comment.
I remember reading that FloatingPortal & FloatingFocusManager should always be mounted otherwise it may cause some issues
There was a problem hiding this comment.
🤔 Never heard about it. We do this in Popover,Tooltip etc components too.
And is also documented/present on their official examples: https://codesandbox.io/p/sandbox/withered-shadow-ot38mm
|
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 79cc179:
|
* test: add single datepicker tests * test: add date range tests * chore: minor changes * feat: add more tests * chore: update web snaps * chore: update rn snaps * chore: update
* chore: added storybook docs * chore: add docs for min,max,exclude date * chore: add storybook controls * chore: add locale example * chore: minor
Bundle Size ReportUpdated Components
|
|
Approve the chromatic reviews |
Description
Changes
Additional Information
Component Checklist