Split time input component (with subfields for each part)

[rolfsmeds]

Description

An alternative to TimePicker composed of 2+ sub-fields for hours, minutes, seconds, etc, with support for text entry, dropdown selection and spinner (up & down arrows) for setting the value in each.

Also see #7105

Motivation

The TimePicker component is a bit limiting in that it represents time as a single unitary field, and provides a single dropdown for selecting both hours and minutes. In many use cases, a field split into hours, minutes, seconds etc, with either dropdowns or spinners for each, can be more convenient.

Acceptance criteria

• Split-field similar to DateTimePicker
• Configurable to 24 or 12 hour format
  • 12 hour format provides am/pm toggle
  • Default based on locale
• Configurable resolution: minutes or seconds (millisecond support could be added later)
• Can be configured to render sub-fields as either
  • Combo-boxes with autogenerated values, or
  • Spinners (up & down arrows increment/decrement)
• Allows specifying a step size for each part
  • Step size only affects dropdown options / spinner steps, not validation
• Configurable to auto-increment to the next sub-field after filling in valid value in current sub-field
• Clear button at the end (non-focusable, with Esc as kbd-equivalent)
• i18n:
  • Sub-field placeholders
  • Sub-field aria-labels that are automatically prefixed with root label/aria-label

Possible later enhancements

• API for providing a callback function that evaluates valid values in each sub-field (this would allow e.g. updating available minute options based on the currently selected hour)
• Style variant that looks like a single unitary field (with separator chars instead of gaps between subfields)

General criteria

• APIs reviewed

• Design

• Performance

• UX/DX tests in Alpha

• Documentation:

• How to test?

• Limitations:

Security

• Security implications have been taken into account (elaborate or link to product security requirement specification if there are implications)