Skip to content

Commit

Permalink
feat(input-time-picker): add hour-format property (#10997)
Browse files Browse the repository at this point in the history
**Related Issue:** #4756

## Summary

This PR exposes a new `hour-format` property to `input-time-picker` and
`time-picker` that overrides the locale's default `hourCycle` setting,
allowing a 12-hour locale to be formatted in 24-hour time and vice
versa. Confirmed with the i18n team that the bulgarian `ч.` character
(abbreviation for "hours") should not display for short and medium time
formats.

---------

Co-authored-by: Kitty Hurley <khurley@esri.com>
  • Loading branch information
eriklharper and geospatialem authored Jan 1, 2025
1 parent adefb85 commit 52e9013
Show file tree
Hide file tree
Showing 11 changed files with 1,619 additions and 936 deletions.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,24 @@ import { boolean, createBreakpointStories, modesDarkDefault } from "../../../.st
import { html } from "../../../support/formatting";
import { defaultMenuPlacement, menuPlacements } from "../../utils/floating-ui";
import { ATTRIBUTES } from "../../../.storybook/resources";
import { hourFormats } from "../../utils/time";
import { InputTimePicker } from "./input-time-picker";

const { scale, status } = ATTRIBUTES;

interface InputTimePickerStoryArgs
extends Pick<
InputTimePicker,
"disabled" | "name" | "placement" | "scale" | "status" | "step" | "validationMessage" | "validationIcon" | "value"
| "disabled"
| "hourFormat"
| "name"
| "placement"
| "scale"
| "status"
| "step"
| "validationMessage"
| "validationIcon"
| "value"
> {
hidden: boolean;
}
Expand All @@ -20,6 +30,7 @@ export default {
args: {
disabled: false,
hidden: false,
hourFormat: undefined,
name: "simple",
placement: defaultMenuPlacement,
scale: scale.defaultValue,
Expand All @@ -30,6 +41,10 @@ export default {
value: "10:37",
},
argTypes: {
hourFormat: {
options: hourFormats,
control: { type: "select" },
},
placement: {
options: menuPlacements,
control: { type: "select" },
Expand All @@ -53,6 +68,7 @@ export const simple = (args: InputTimePickerStoryArgs): string => html`
<calcite-input-time-picker
${boolean("disabled", args.disabled)}
${boolean("hidden", args.hidden)}
hour-format="${args.hourFormat}"
name="${args.name}"
placement="${args.placement}"
scale="${args.scale}"
Expand Down
Loading

0 comments on commit 52e9013

Please sign in to comment.