Time input- milliseconds, am\pm
Summary
Tell us, in a few words, what the component or pattern would do.
๐ฌ Description
A full description of what the component or pattern should be and how it should work.
๐ฐ User value
Describe why this is important and how it will help users (either developers, designers or the end-users). Think about how it makes people's lives easier, more accessible or quicker to build stuff.
๐ User Stories
If relevant, describe the high-level functionality as user stories.
As an ICDS user:
I need
So that
๐ Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given
When
Then
โ Designs
If there's a Figma design file (or other mock-up), include it here.
##โฏ๐งพ Guidance If there's written guidance or documentation, include a link to it here.
Additional info
Tell us anything else useful to help us understand your suggestion.
#3962 raised to cover enhancements needed to time input & picker for milliseconds, am\pm & time zone support which is needed before developing date-time components
Changes made to this Figma branch
- modified time input on this branch to utilise HH:MM:SS.SSS format as specified in ISO8601
- Amended helper text to match date input phrasing
- added property Show AMPM toggle to Time input component
- utilising toggle button pair to perform the AM/PM switch, which currently aligns nicely with the input field sizing, so it should slide into the designs neatly.
- Resized Atoms/Time field to 240px wide...previous width was far too wide for a simple time input
- Added autolayout frame called 'Field and toggle' around Atoms/Time status in Time input component with horizontal alignment (bottom left) and 8px padding between elements. Width and height are both set to Hug contents.
- Added (size-specific) instance of Atoms/AM PM toggle into new 'Field and toggle' frame and assigned Show AMPM toggle boolean to this item (so it can be shown/hidden via property)
- Amended parent variant frame to hug contents (if no AMPM toggle the frame is around the input field)
NB: This is quite a big change to time input...especially around frames and formatting in order to fit in a toggle button combo.
Time zone support to come under separate ticket #3979
As such, this ticket is ready for dev
Moved AM/PM toggle from timeinput component page to Atoms, as we'll need it centrally for datetime input too.
Have merged this change into the main Figma branch so we can move on with the guidance and datetime input which were dependent on it