feat: add time-picker

[colinlienard]

Add the TimePicker component
Continuation of chakra-ui/zag#1415

• React
  • Component
  • Examples
  • Tests
• Solid
  • Component
  • Examples
  • Tests
• Vue
  • Component
  • Examples
  • Tests

[vercel]

@colinlienard is attempting to deploy a commit to the Chakra UI Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

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

Name	Status	Preview	Updated (UTC)
ark-docs	✅ Ready (Inspect)	Visit Preview	Jul 19, 2024 1:47pm

[cschroeter]

@colinlienard

Thanks a lot for working on this! I've started reviewing the PR, and it looks very promising. I'm debating whether we should have a dedicated anatomy part for each Cell (like hour, minute, etc.) or simply rely on the already existing data-unit="[hour|minute|second]" attribute for styling. What are your thoughts on this?

[colinlienard]

At the start I was thinking that is was more straightforward to have HourCell, MinuteCell, etc but it might be confusing in the dom because they would all have the data-part="cell" and not data-part="hour-cell" etc.
Also, the Column component has a unit props, so it may be more consistent to have the same prop on a Cell component.
So I would be keen to delete HourCell, MinuteCell, etc and have just a Cell with a unit prop.

What do you think @cschroeter?

[cschroeter]

@colinlienard

I've reviewed the PR, and it looks great! Excellent work!

However, I noticed some issues when forcing a 24h locale, like <TimePicker.Root locale="de-DE" />, so I need to debug this with @segunadebayo.

I'd like to simplify the API a bit. The unit on the column should be sufficient for the Cell to know its type.

Before:

<TimePicker.Column unit="hour">
  <TimePicker.Spacer />
  {api.getHours().map((item) => (
    <TimePicker.HourCell key={item.value} value={item.value}>
      {item.label}
    </TimePicker.HourCell>
  ))}
  <TimePicker.Spacer />
</TimePicker.Column>

After:

<TimePicker.Column unit="hour">
  <TimePicker.Spacer />
  {api.getHours().map((item) => (
    <TimePicker.Cell key={item.value} value={item.value}>
      {item.label}
    </TimePicker.Cell>
  ))}
  <TimePicker.Spacer />
</TimePicker.Column>

But that's something I can handle myself. Thank you again for your flawless contribution!

[pierresisson]

@colinlienard

I've reviewed the PR, and it looks great! Excellent work!

However, I noticed some issues when forcing a 24h locale, like <TimePicker.Root locale="de-DE" />, so I need to debug this with @segunadebayo.

I'd like to simplify the API a bit. The unit on the column should be sufficient for the Cell to know its type.

Before:

<TimePicker.Column unit="hour">
  <TimePicker.Spacer />
  {api.getHours().map((item) => (
    <TimePicker.HourCell key={item.value} value={item.value}>
      {item.label}
    </TimePicker.HourCell>
  ))}
  <TimePicker.Spacer />
</TimePicker.Column>

After:

<TimePicker.Column unit="hour">
  <TimePicker.Spacer />
  {api.getHours().map((item) => (
    <TimePicker.Cell key={item.value} value={item.value}>
      {item.label}
    </TimePicker.Cell>
  ))}
  <TimePicker.Spacer />
</TimePicker.Column>

But that's something I can handle myself. Thank you again for your flawless contribution!

hi @cschroeter when do you plan to release this feature? let us know if we can help on this topic ! :)

[cschroeter]

@colinlienard @pierresisson

I've updated the React portion but I'm running out of time for Solid and Vue. If you can take those, that would be great.