search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
282 stars 76 forks source link

Enhancement: step support for time picker components #1529

Open eriklharper opened 3 years ago

eriklharper commented 3 years ago

Description

Add support for the step attribute/property for calcite-time-picker and calcite-input-time-picker. Functionality should probably match what the native time input does in Chromium.

Acceptance Criteria

Both time-picker components support the step attribute as specified by the most popular browser implementations. Involve design on how best to implement this as well.

Relevant Info

Docs on the step attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step

Codepen demonstrating all the available options for step that change the behavior of the time input (not all values work). https://codepen.io/eriklharper/pen/abBmOGz?editors=1010

Which Component

calcite-time-picker calcite-input-time-picker

Example Use Case

macandcheese commented 3 years ago

@eriklharper - looks like step is available in the component - can this be closed?

eriklharper commented 3 years ago

@eriklharper - looks like step is available in the component - can this be closed?

step is technically available, but it doesn't exactly function as intended for every possible step value. There currently are not enough sufficient unit tests for all the possible step values (we're currently only testing step="1" to allow seconds input) so we should keep this issue open to not only add the missing tests for the various step values we want to support. but deciding which values we should support and why. The native time inputs in browsers like Chromium only support certain step values, and we have not yet built and tested that support into the time components. Click the codepen link I posted above to see the step values that actually take effect in the native time inputs on Chrome. Any value that is missing from that example doesn't actually do anything.

macandcheese commented 3 years ago

@eriklharper cool, thanks for the context, was just doing some cleanups 🧹