DateTime: Create TimeInput component and integrate into TimePicker

[bogiii]

What?

• Introduces a simple TimeInput component
• Integrates the TimeInput into TimePicker component

Why?

Before these changes, there was no option to use the simple time input component.

Before	After

How?

Here are more details: #52734

Testing Instructions

• Go to TimeInput component: http://localhost:50240/?path=/docs/components-timeinput--docs
• Play with applying different combination of arguments

--

• Go to TimePicker component: http://localhost:50240/?path=/docs/components-timepicker--docs
• Check if everything work on same way as before this changes

Unit tests: Good old unit tests found a bug, which is resolved. ✅

Testing Instructions for Keyboard

Screenshots or screencast

---

✍️ Dev Note

TimePicker: Time input can be used in isolation

The time input of the TimePicker component can now be used in isolation as <TimePicker.TimeInput />. In this case, the value will be passed as an object in 24-hour format ({ hours: number, minutes: number }).

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @bogiii! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @bogiii.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: bogiii.

Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[mirka]

Thank you for your patience here! Nice refactor, and thank you for adding tests. I did a first-pass review and wrote some comments.

Have you looked into the e2e failures? They seem relevant.

[bogiii]

Have you looked into the e2e failures? They seem relevant

Hmmm, it's strange. I've run the tests locally multiple times and passed without any problem.
Also, I've checked the testing flow manually, and it looks fine. 🤔

[mirka]

Thank you for the follow up!

There are a few more details that need to be sorted out before shipping this publicly, but since this PR is big and has been running long, I'd like to merge this now as a WIP component so @WordPress/gutenberg-components and others (like for #61163) can iterate on it.

I went ahead and pushed two big tweaks, which I'd like you to review in case I'm missing something:

• Simplify minutesProps passing (58b60be) — The idea here is to pass on all props, not just step, adhering to the "open/closed" pattern.
• Simplify controlled/uncontrolled logic (fbf1458) — My intent here is twofold. First, to cut down on some useEffect usage that seemed avoidable. Second, to use the useControlledValue hook to simplify the handling of controlled/uncontrolled usage modes. Here, we add a defaultValue prop for the uncontrolled pattern.

Everything else looks good, so I'm ready to merge if you're ok with my changes. Let me know if you find any issues!

[bogiii]

Hey @mirka,

Thanks for the help. I reviewed your changes/suggestions and all looks good!

I'm happy to see it merge. 👍

[mirka]

Thank you for the great work and collaboration here, @bogiii 🚀

I'll push through the remaining pieces to make this publicly available.

Planned tasks before public ship

• Readme
• JSDoc TimeInput: Expose as subcomponent of TimePicker #63145
• TimeInput: Add label prop #63106
• Namespace to TimePicker.Input? TimeInput: Expose as subcomponent of TimePicker #63145
• TimePicker: Fix time zone overflow #63209

[github-actions]

Congratulations on your first merged pull request, @bogiii! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!