Versions Compared

Version Old Version 45 New Version 46
Changes made by

Itay lapid (Unlicensed)

Asaf Ben-Oved

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

State

Visual

 

Regular

 

Hover

 

Active

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Disabled

 

Error

 

Warning

 

Focused

Focused, Hover

 

Focused, Active

 

Focused, Disabled

 

...

  • Clicking on the clock Icon Button or any blank space will open the time picker menu.

  • The time picker menu will be closed:

    • when a time is applied, or

    • by clicking outside of the time picker menu.

  • The time inputs are cyclical:

    • When the hour is set to 12 (in 12 hour time format), the up arrow loops the value back to 01.

    • When the hour is set to 23 (in 24 hour time format), the up arrow loops the value back to 00.

    • When the minutes are set to 00, the down arrow changes the value to 59.

    • When the minutes are set to 59, the up arrow changes the value to 00.

  • When For AM/PM is clicked on, it will toggle between the two options, the arrows are not cyclical. Up arrow will change to PM and Down arrow to AM.

  • Changing the time in the menu should immediately sync the direct input displayed time

...

Keyboard

Time picker field

Time picker menu

Tab

  • Navigates to the next input section.

  • When on the last input section, navigates to the next component.

Navigates between the different sections in a cyclical order:

  • Hours.

  • Minutes.

  • AM/PM.

Shift + Tab

  • Navigates to the previous input section.

  • When on the first input section, navigates to the previous component.

Reverses the order of navigation described for Tab.

Space

Opens the time picker menu.

  • Hours - N/A

  • Minutes - N/A

  • AM/PM - toggles between the values.

Enter

Applies the time.

  • Applies the time.

  • Closes the menu.

Esc

N/A

Closes the menu and returns the focus to the field, without applying any changes.

Arrows

  • Up - Increases the highlighted value.

  • Down - Decreases the highlighted value.

  • Holding down the up/down keys will scroll continuously.

  • Right/Left - Moves the input highlight accordingly.

  • Up - Increases the highlighted value for the focused section.

  • Down - Decreases the highlighted value for the focused section.

  • Holding down the up/down keys will scroll continuously.

  • Right/Left - Moves the focused section accordingly.

  • Up/Down changes between AM/PM

Mouse

Time picker field

Time picker menu

Right Click

Set Focus state on field

Set Regular state on component

...