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

[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.

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.

[mirka]

Any reason why this is split into two props?

I think it would be more straightforward if it was one value prop that matched the first argument of the onChange callback. Most components in this package follow that pattern.

We don't need to worry about re-renders because this is tiny, and most consumers won't stabilize their onChange functions anyway.

[mirka]

We generally want the default story to reflect the component defaults, so let's remove this one. We can show that state in another story if you want to highlight it (no strong opinion).

[mirka]

Is this step prop a strong requirement? If consumers want to override props on the underlying elements, it can be unsustainable to keep adding ad hoc props to the root like this.

I think it's something to triage/address as a separate issue.

[mirka]

We generally want to use *ByRole() queries wherever possible, since it can also surface accessibility issues.

[mirka]

We generally want to assert these states through the accessibility tree rather than through styles. And through this test I noticed that this switcher is not screen reader accessible, so I posted an issue here #61163.

This is a pre-existing issue so we don't have to fix it in this PR, but let's maybe add a TODO comment here to flag that it should be fixed.

[mirka]

Suggested change

	onChange: ( obj ) => {
	action( 'onChange' )( obj );
	},
	onChange: action( 'onChange' ),

Equivalent?

[mirka]

Suggested change

	argTypes: {
	onChange: { action: 'onChange', control: { type: null } },
	},
	argTypes: {
	onChange: { action: 'onChange', control: { type: null } },
	value: { control: { type: null } },
	},

We've usually been null-ing out the Storybook control for the value prop. In this case I think it's especially good because when the value control can take arbitrary user-generated values, any out-of-bounds value (let's say 100) can be rendered directly into the input field for the component, and that's weird 😅 And it's overkill to add value-clamping logic before it hits the input's own min/max validation.