mi6
[ic-time-picker]: Time selector component
Summary
Develop a time selector component that will act as an atom within IcTimePicker.
Match to existing component definition:
Text entry Date input Required Disabled Interaction states Large, default and small size variants. Validation scrollable and selectable time options Limits
💬 Description
This issue addresses building one of the atomic components that make up time picker and date time picker.
💰 User value
Helps developers make clearer, more specific inputs for forms. Helps end users by simplifying interactions when inputting a time rather than using a standard text box/input
📚 User Stories
As a time picker user I need to be able to both freely type a time in text format (HH:MM:SS) AND select from a dropdown calendar view AND have any change reflected in both the bar and the selector SO that i have flexibility of input, as well as confirmation of user input
As a time picker user I need to feely type a time in text format (HH:MM:SS) So that i can input a date easily, without need to interact with a modal/dialogue window or dropdown
As a time picker user I need to have a ‘Clear’ button So that I can reset my input
As a designer/developer creating an app that uses time pickers I need to be able to set specific disabled times So that I can force users to pick from specific times, as well as clearly convey what times are enabled
As a designer/developer creating an app that uses time pickers I need to be able to pre-select a default time So that I can convey a message to my users (i.e. suggested time, current time, popular time...)
As a time picker user I need to view a focus indicator for any element that can be interacted with, So that I know where my keyboard actions will target.
As a time picker user I need to be able to navigate through the time picker dropdown using a keyboard So that I have equal access to its content.
📝 Acceptance Criteria
Variants
Time Input: An input field, very similar to date input, whereby a user can input a specific time.
Time Picker: Comprised of time input and a dropdown time picker to allow visual aid and mouse selection of time.
Timezone select: A select component used for choosing timezone that sits next to the time input/picker.
Properties
-
Display seconds: Toggles the visibility of seconds in the helper text, placeholder text, time picker and input.
-
Display milliseconds: Toggles the visibility of milliseconds in the helper text, placeholder text, time picker and input.
-
12hr/24hr clock: Toggles between a 12 hour and 24 hour clock selection and validation in picker and input.
-
Default values: Define the default values that autofill on a partial time selection.
-
Define placeholder: Allows selection of a specific time, now or 00:00:00 as the placeholder time displayed.
Time input interaction behaviour
Given that time input is displayed When it is navigated to Then a focus area should surround the input area and a cursor should be active
Given that time input is focussed and cursor active When directional keys or tab are pressed Then selection will move between individual time elements.
Given that the time input is focussed and the last time element selected When tab is pressed Then focus will move to the next page element
Given that focus is on time input and last element selected When arrow key 'right' is pressed Then nothing will happen
Given time input is focussed and an acceptable input has been entered When 'enter' is pressed Or When focus is shifted to another page element Then input will autocomplete will to the default values specified by the developer
Given that time input is focussed When micro-inputs of the time are selected with mouse or When micro-inputs of the time are moved to with 'tab' Then cursor focus will move to that element
Given that the time input is focussed and an input has been entered When the clear button is selected Then the time input will be cleared and reverted to placeholder text
Given that the time input component is formed of several separate micro-inputs (HH:MM:SS:MMS) When a user fills in one field Then there should be auto-tabbing behaviour (i.e. in a HH:MM:SS format, if a user types '10' in the HH: field, then the field would update to '10:' an focus would move to the MM: input)
Time picker interaction behaviour
Given the time picker is enabled on properties When the time picker icon is pressed within the time input Then time input dropdown will appear (300ms CSS transition)
Given the time picker has been opened When the focus moves from input to picker Then the leftmost selection area should be focussed
Given that time picker is open and focussed When an item is hovered with cursor Then focus should move to that item
Given that time picker is open and an item outside of the 'selection area' is focussed When that item is pressed/selected Then it will move into the selection area of its column
Given that time picker is open and an item within selection is focussed When arrow keys 'up' or 'down' are pressed Then the selected value will be replaced with the direction pressed.
Given that time picker is open and an item within selection is focussed When 'right' arrow key is pressed or When the 'tab' key is pressed Then focus will move to the next selection column where possible
Given that time picker is open and an item within selection is focussed When 'left' arrow key is pressed Then focus will move to the next selection column where possible
Given that time picker is open When an item within selection area changes or When focus moves from the selection column without value changing Then the state should change from 'default' to 'selected'
Given that time picker is open and the last column selection is focussed When the 'tab' key is pressed Then focus will move from the column to the confirmation 'tick'
Given the time picker is open and a partial time selected When the confirmation 'tick' is pressed Then any 'default' values in selection field will change to 'selected' and the picker will close
Given the time picker is open When a time within selection area changes Then the time value should reflect in time input
Validation
Given that the time input component has immediate formatting validation, only accepts numbers When a user types in a character which is not a number 0-9 Then no character should be shown in the field
Given that the time input component has immediate validation of valid times When a user types 13 or over in a 13hr time hour (HH:) field Then the field should update to reflect 01: in the hour (HH:) slot and update to 'PM'
Given that the time input component has immediate validation of valid times When a user types 25 or over in a 24hr time hour (HH:) field Then an error message should appear stating “Please enter a valid hours (HH:)”
Given that the time input component has immediate validation of valid times When a user types 61 in the MM: field Then an error message should appear stating “Please enter a valid time in minutes (MM:)”
Given that the time input component has immediate validation of valid times When a user types 61 in the SS: field Then an error message should appear stating “Please enter a valid time in seconds (SS:)”
Given that the time input component has immediate validation of valid times When a user enters a time outside of the 'allowed' specified times Then an error message should appear stating “Please enter a valid time between X:XX and X:XX"
Given that the time input component has immediate validation for specific rules When a developer chooses disableTimes=fromNow Then if a user types a future time, an error message should appear stating ‘Times in the future are not allowed. Please select a time in the past.”
Given that the time input component has immediate validation for specific rules When a developer chooses disableTime=untilNow Then if a user types a past time, an error message should appear stating ‘Times in the past are not allowed. Please select a time in the future.”
Focus and Accessibility
Time input focus state Given the focus state is set to the time pickers input field When a user opens the time picker view Then the focus state should move to within the time picker, focussing on the leftmost selection area.
Selecting a time in time input using the keyboard Given the focus is set to the time pickers input field When a user navigates through the time input with their arrow keys/tab Then the focus should move through the hours, minutes, seconds and milliseconds respective of the input.
Navigating to the time input using the keyboard Given the focus is set to the time picker input field and the focus is on either hours, minutes, seconds or milliseconds. When a user presses the up or down arrow keys Then the time should increase or decrease respective to the input and specified increments the developer has set.
Closing the time picker using the keyboard without selecting a time Given the time picker's dropdown is open When the user presses the 'Esc' key Then the time picker's dropdown should close And the focus should return to the time picker's icon button
🚨 Urgency (low, medium or high)
This issue has medium urgency. Whilst it is not critical, it's a prerequisite for date time picker
Additional info
Tell us anything else useful to help us understand your suggestion.
Unassigning myself from this because another ticket is taking longer than expected - I have made some initial work on a branch that might be salvageable, or you can ditch it
Time picker is currently under Experimental Components in Figma. It should be moved out under Canary components as per other similar items.
Design updated;
- added clear icon button to Atoms/Time selector - couldn't use tertiary button due to difference between icon and button sizing
- adjusted gap between vertical objects on Atoms/Label and selection area; small=48px, medium=unchanged 56px, large=64px
- added missing selected hover and pressed variants to atoms/... added corresponding colour tokens
- fixed missing digit on '03' value of Atoms/Time scroll on small, minute/seconds variant
- added column focus states (HH focus state, MM focus state and SS focus state) to Atoms/Label and selection area - couldn't do this on Atoms/Time scroll as the focus state would scroll as well, couldn't do this on Atoms/Time selection because it didn't cope with no seconds display. Focus states are all the same size (26px by 277px) and positioned centrally to the column they're displayed over.
The above changes are currently under a Figma branch but will be merged into the main branch once they have been reviewed by the dev team.
Changes were reviewed on 29/09...merging changes into main branch as component still under canary and this will help to update the imagery file.