ic-ui-kit icon indicating copy to clipboard operation
ic-ui-kit copied to clipboard

Time input- milliseconds, am\pm

Open mi6-577 opened this issue 4 months ago โ€ข 5 comments

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.

mi6-577 avatar Sep 19 '25 08:09 mi6-577

#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

mi6-577 avatar Sep 19 '25 08:09 mi6-577

Changes made to this Figma branch

Image
  • 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.

mi6-577 avatar Sep 19 '25 08:09 mi6-577

Time zone support to come under separate ticket #3979

As such, this ticket is ready for dev

mi6-577 avatar Sep 26 '25 11:09 mi6-577

Moved AM/PM toggle from timeinput component page to Atoms, as we'll need it centrally for datetime input too.

mi6-577 avatar Oct 15 '25 07:10 mi6-577

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

mi6-577 avatar Nov 10 '25 09:11 mi6-577