DateTime: Create TimeInput component and integrate into TimePicker #60613

bogiii · 2024-04-09T19:18:53Z

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 · 2024-04-09T19:19:34Z

👋 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 · 2024-04-11T21:31:14Z

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.

packages/components/src/date-time/time/index.tsx

packages/components/src/date-time/stories/time-input.story.tsx

packages/components/src/date-time/time-input/index.tsx

packages/components/src/date-time/time-input/test/index.tsx

packages/components/src/date-time/stories/time-input.story.tsx

bogiii · 2024-05-29T11:10:05Z

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

With a new TimeInput component, the hours value is in 24 hours format.

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!

packages/components/src/date-time/time-input/test/index.tsx

Co-authored-by: Lena Morita <lena@jaguchi.com>

bogiii · 2024-07-01T10:24:02Z

Hey @mirka,

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

I'm happy to see it merge. 👍

mirka · 2024-07-01T20:28:49Z

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 · 2024-07-01T20:29:43Z

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!

…ordPress#60613) * Move reducer util func to the upper level of utils * Move from12hTo24h util func to the upper level of utils * Extract validation logic into separate function * Add from24hTo12h util method * Create initial version of TimeInput component * Support two way data binding of the hours and minutes props * Add pad start zero to the hours and minutes values * Add TimeInput story * Fix two way binding edge cases and optimize onChange triggers * Remove unnecesarry Fieldset wrapper and label * Add TimeInput change args type * Integrate TimeInput into TimePicker component * Fix edge case of handling day period * Get proper hours format from the time picker component With a new TimeInput component, the hours value is in 24 hours format. * Add TimeInput unit tests * Update default story to reflect the component defaults * Simplify passing callback function * Test: update element selectors * Add todo comment * Null-ing storybook value props * Replace minutesStep with minutesProps prop * Update time-input component entry props * Don't trigger onChange event if the entry value is updated * Simplify minutesProps passing * Simplify controlled/uncontrolled logic * Set to WIP status * Add changelog * Update test description Co-authored-by: Lena Morita <lena@jaguchi.com> --------- Unlinked contributors: bogiii. Co-authored-by: mirka <0mirka00@git.wordpress.org>

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Apr 9, 2024

bogiii changed the title ~~DateTime: Add TimeInput component~~ Apr 9, 2024

bogiii changed the title ~~WIP: DateTime: Add TimeInput component~~ Apr 11, 2024

bogiii marked this pull request as ready for review April 11, 2024 21:31

bogiii requested a review from ajitbohra as a code owner April 11, 2024 21:31

This was referenced Apr 12, 2024

TimePicker components should have option to disable date field #52734

Closed

Gutenberg contribution: Extend time-picker component Automattic/wp-calypso#88623

Closed

mirka assigned bogiii Apr 12, 2024

mirka requested a review from a team April 12, 2024 21:37

mirka added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Apr 12, 2024

mirka reviewed Apr 26, 2024

View reviewed changes

bogiii force-pushed the add/time-input branch from 13349cb to 6f7333e Compare May 28, 2024 21:20

bogiii added 14 commits May 29, 2024 15:41

Move reducer util func to the upper level of utils

5351786

Move from12hTo24h util func to the upper level of utils

9d33a34

Extract validation logic into separate function

745d365

Add from24hTo12h util method

121f3bb

Create initial version of TimeInput component

ec654b4

Support two way data binding of the hours and minutes props

77ed54c

Add pad start zero to the hours and minutes values

b6c037f

Add TimeInput story

12d9f72

Fix two way binding edge cases and optimize onChange triggers

d1c5ec7

Remove unnecesarry Fieldset wrapper and label

0c3383c

Add TimeInput change args type

71174f0

Integrate TimeInput into TimePicker component

9d7105d

Fix edge case of handling day period

4d5d4cc

Get proper hours format from the time picker component

d531e6e

With a new TimeInput component, the hours value is in 24 hours format.

bogiii added 6 commits May 29, 2024 15:41

Add TimeInput unit tests

87bf436

Update default story to reflect the component defaults

430d4ce

Simplify passing callback function

b7e2f38

Test: update element selectors

9b34762

Add todo comment

4b6b386

Null-ing storybook value props

5cae065

bogiii force-pushed the add/time-input branch from 6f7333e to 5cae065 Compare May 29, 2024 16:10

bogiii requested a review from mirka May 29, 2024 16:11

bogiii and others added 8 commits June 4, 2024 14:45

Replace minutesStep with minutesProps prop

6a2cb4b

Update time-input component entry props

6250a92

Don't trigger onChange event if the entry value is updated

b4c26b9

Simplify minutesProps passing

58b60be

Simplify controlled/uncontrolled logic

fbf1458

Set to WIP status

2d18880

Merge branch 'trunk' into add/time-input

9443a7d

Add changelog

f7effc9

mirka approved these changes Jun 28, 2024

View reviewed changes

packages/components/src/date-time/time-input/test/index.tsx Outdated Show resolved Hide resolved

Update test description

5dfd31b

Co-authored-by: Lena Morita <lena@jaguchi.com>

mirka merged commit 67d7413 into WordPress:trunk Jul 1, 2024
59 checks passed

github-actions bot added this to the Gutenberg 18.8 milestone Jul 1, 2024

This was referenced Jul 3, 2024

TimeInput: Add label prop #63106

Merged

TimeInput: Expose as subcomponent of TimePicker #63145

Merged

TimePicker: Fix time zone overflow #63209

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DateTime: Create TimeInput component and integrate into TimePicker #60613

DateTime: Create TimeInput component and integrate into TimePicker #60613

bogiii commented Apr 9, 2024 •

edited

Loading

github-actions bot commented Apr 9, 2024

github-actions bot commented Apr 11, 2024 •

edited

Loading

mirka left a comment

bogiii commented May 29, 2024

mirka left a comment

bogiii commented Jul 1, 2024

mirka commented Jul 1, 2024 •

edited

Loading

github-actions bot commented Jul 1, 2024

DateTime: Create TimeInput component and integrate into TimePicker #60613

DateTime: Create TimeInput component and integrate into TimePicker #60613

Conversation

bogiii commented Apr 9, 2024 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

github-actions bot commented Apr 9, 2024

github-actions bot commented Apr 11, 2024 • edited Loading

Unlinked Accounts

mirka left a comment

Choose a reason for hiding this comment

bogiii commented May 29, 2024

mirka left a comment

Choose a reason for hiding this comment

bogiii commented Jul 1, 2024

mirka commented Jul 1, 2024 • edited Loading

Planned tasks before public ship

github-actions bot commented Jul 1, 2024

bogiii commented Apr 9, 2024 •

edited

Loading

github-actions bot commented Apr 11, 2024 •

edited

Loading

mirka commented Jul 1, 2024 •

edited

Loading