Add TimeRangePicker component

[sashathor]

Description of changes

This PR implements Add Date & Time Picker component and syncs all the UI components with new design tokens introduced in https://github.com/propeldata/ui-kit/pull/165.

New components:

• [x] Button
• [x] Divider
• [x] FormField
• [x] Input
• [x] Select
• [x] Option
• [x] DateTimeField
• [x] TimeRangePicker
• [x] Typography

Checklist

Before merging to main:

• [x] Tests
• [x] Manually tested in React apps
• [x] Changesets
• [ ] Approved

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: ce41b55cfc70cbd2d594fb98a3ff3d0883e7252c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@propeldata/ui-kit	Minor
dashboard-example	Major
react-16	Patch
react-18	Patch
react-17	Patch

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

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
ui-kit	⬜️ Ignored (Inspect)	Visit Preview		May 21, 2024 11:52am

[acossta]

The component looks great. I'm worried about the additional dependency on Google fonts.

A couple of questions:

• Can we ship this with a font that doesn't require that, like Helvetica or Arial?
• Ideally, customizing the font would be done at the theme level. If you need Inter or any other Google font, it would be expected that you have to install additional dependencies. Would this be a feasible approach?

[sashathor]

The component looks great. I'm worried about the additional dependency on Google fonts.

A couple of questions:

• Can we ship this with a font that doesn't require that, like Helvetica or Arial?
• Ideally, customizing the font would be done at the theme level. If you need Inter or any other Google font, it would be expected that you have to install additional dependencies. Would this be a feasible approach?

@acossta I've added sans-serif as a fallback.

So, before the change and without Inter installed we had the following:

After the change and without Inter installed we will have:

With Inter installed:

[markandrus]

Some more things I noticed

• [x] 1. "From date until now": Choose this, apply a date range, re-open the menu, choose this again, notice the previously chosen date range is no longer visible. If you do the same flow with "Custom date range", it's not reset. I.e., you can see the value you previously applied. IMO, it should remember the value that was last set, and the two options should behave the same.

• [ ] 2. Keyboard navigation: If you tab into the numeric input, increment or decrement it, and then tab next to the days/weeks/months dropdown (because you want to see the time unit now), the outermost menu quickly closes. IMO, so long as an input/submenu is focused in the menu, the outermost menu should not close.

• [x] 3. Keyboard navigation: Tabbing out of the days/weeks/months dropdown does not close it.

  

• [x] 4. Clearing: clearing a cleared date range leaves the button focused.

  

• [x] 5. Closing: can't close the outermost menu via escape key or clicking outside of it. Within the inner date range pickers, escape key and clicking outside work to close the whole menu.

[sashathor]

2. Keyboard navigation: If you tab into the numeric input, increment or decrement it, and then tab next to the days/weeks/months dropdown (because you want to see the time unit now), the outermost menu quickly closes. IMO, so long as an input/submenu is focused in the menu, the outermost menu should not close.

@markandrus I followed Posthog's picker behavior. We can re-think it later if needed. Wdyt?

[markandrus]

@sashathor sounds good for now!

[sashathor]

@markandrus found a few more bugs. I'll let you know when the PR will be ready for the next round.

[felipecadavid]

It seems like I cannot close the select by clicking back on it? it seems like it closes but quickly opens again. The behavior is a bit weird as I can tell sometimes it actually closes

https://github.com/propeldata/ui-kit/assets/84721399/f18b5694-f2a1-40a4-8172-8912298661e1