[WEB-371]: Implemented react-day-picker for date selections (#3679)

* dev: initialize new date picker

* style: selected date focus state

* chore: replace custom date filter modal components

* chore: replaced inbox snooze popover datepicker

* chore: replaced the custom date picker

* style: date range picker designed

* chore: date range picker implemented throughout the platform

* chore: updated tab indices

* chore: range-picker in the issue layouts

* chore: passed due date color

* chore: removed range picker from issue dates
This commit is contained in:
Aaryan Khandelwal 2024-02-21 19:55:18 +05:30 committed by GitHub
parent e86d2ba743
commit b1592adc66
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
32 changed files with 1018 additions and 998 deletions

View file

@ -494,14 +494,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
<div className="h-7">
<DateDropdown
value={value}
onChange={(date) => {
onChange(date ? renderFormattedPayloadDate(date) : null);
handleFormChange();
}}
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
buttonVariant="border-with-text"
placeholder="Start date"
maxDate={maxDate ?? undefined}
tabIndex={10}
placeholder="Start date"
/>
</div>
)}
@ -513,14 +509,10 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
<div className="h-7">
<DateDropdown
value={value}
onChange={(date) => {
onChange(date ? renderFormattedPayloadDate(date) : null);
handleFormChange();
}}
onChange={(date) => onChange(date ? renderFormattedPayloadDate(date) : null)}
buttonVariant="border-with-text"
placeholder="Due date"
minDate={minDate ?? undefined}
tabIndex={11}
placeholder="Due date"
/>
</div>
)}
@ -539,7 +531,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
}}
value={value}
buttonVariant="border-with-text"
tabIndex={12}
tabIndex={11}
/>
</div>
)}
@ -559,7 +551,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
handleFormChange();
}}
buttonVariant="border-with-text"
tabIndex={13}
tabIndex={12}
multiple
showCount
/>
@ -581,7 +573,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
}}
projectId={projectId}
buttonVariant="border-with-text"
tabIndex={14}
tabIndex={13}
/>
</div>
)}
@ -611,7 +603,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
</button>
}
placement="bottom-start"
tabIndex={15}
tabIndex={14}
>
{watch("parent_id") ? (
<>
@ -661,7 +653,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
onKeyDown={(e) => {
if (e.key === "Enter") onCreateMoreToggleChange(!isCreateMoreToggleEnabled);
}}
tabIndex={16}
tabIndex={15}
>
<div className="flex cursor-pointer items-center justify-center">
<ToggleSwitch value={isCreateMoreToggleEnabled} onChange={() => {}} size="sm" />
@ -669,7 +661,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
<span className="text-xs">Create more</span>
</div>
<div className="flex items-center gap-2">
<Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={17}>
<Button variant="neutral-primary" size="sm" onClick={onClose} tabIndex={16}>
Discard
</Button>
@ -681,7 +673,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
size="sm"
loading={isSubmitting}
onClick={handleSubmit((data) => handleFormSubmit({ ...data, is_draft: false }))}
tabIndex={18}
tabIndex={17}
>
{isSubmitting ? "Moving" : "Move from draft"}
</Button>
@ -691,7 +683,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
size="sm"
loading={isSubmitting}
onClick={handleSubmit((data) => handleFormSubmit(data, true))}
tabIndex={18}
tabIndex={17}
>
{isSubmitting ? "Saving" : "Save as draft"}
</Button>
@ -699,7 +691,7 @@ export const IssueFormRoot: FC<IssueFormProps> = observer((props) => {
</Fragment>
)}
<Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={isDraft ? 19 : 18}>
<Button variant="primary" type="submit" size="sm" loading={isSubmitting} tabIndex={isDraft ? 18 : 17}>
{data?.id ? (isSubmitting ? "Updating" : "Update issue") : isSubmitting ? "Creating" : "Create issue"}
</Button>
</div>