Docs/2182 Time Field Documentation #2746
Conversation
arecuenco-dsgn
commented
Oct 9, 2025
arecuenco-dsgn
commented
- New folder for the time field
- Update all the component names
- Usage tab content
- New folder for the time field - Update all the component names - Usage tab content
arecuenco-dsgn
requested review from
Diaan,
anna-lach and
jpzwarte
as code owners
|
🕸 Website previewYou can view a preview here (commit |
🕸 Storybook previewYou can view a preview here (commit |
…changed status and other improvements
There was a problem hiding this comment.
Pull Request Overview
This PR introduces documentation and website integration for a new Time Field component. The component allows users to input time values (HH:MM) through either direct typing or a dropdown picker with split hour/minute columns.
Key Changes
- Added comprehensive documentation files (usage, code, accessibility) for the time-field component
- Registered the time-field component in the website's component registry
- Updated CSS color tokens to use specific color palette values (grey, blue, red, orange, green) instead of semantic names (neutral, accent, danger, warning, success)
- Added code comments to the time-field component's rendering methods
Reviewed Changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 9 comments.
Show a summary per file
| File | Description |
|---|---|
| website/src/ts/scripts/slds-components.ts | Registers the time-field component for use in the website |
| website/src/styles/tokens-light.scss | Updates code text color tokens to use specific color palette values for light theme |
| website/src/styles/tokens-dark.scss | Updates code text color tokens to use specific color palette values for dark theme |
| website/src/styles/components/code.scss | Adds styling for class-name tokens in code blocks |
| website/src/categories/components/time-field/usage.md | Comprehensive usage documentation for the time-field component |
| website/src/categories/components/time-field/time-field.md | Main component metadata and description |
| website/src/categories/components/time-field/time-field.json | Component configuration and status information |
| website/src/categories/components/time-field/code.md | Developer-focused code examples and API documentation |
| website/src/categories/components/time-field/accessibility.md | Accessibility guidelines and keyboard interactions |
| website/package.json | Adds customElements field pointing to the custom elements manifest |
| packages/components/time-field/src/time-field.ts | Adds JSDoc comments to rendering methods |
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
|
||
| ### Relative timeframes | ||
| Avoid the Time Field when only approximate periods or relative notions of time are needed (e.g., “morning,” “after lunch,” “end of day”). In these cases, prefer radios, a segmented control, or a select that reflects coarse time choices without implying exact HH:MM precision. | ||
|
|
There was a problem hiding this comment.
Maybe also add for duration; so don't use this when you set the duration of a test for example, where you could select 01:30 if you want it to be 90 minutes long.
| Users can type any valid HH:MM time, regardless of whether it is a step time. The component validates for format and parsability (e.g., two-digit hours/minutes within valid ranges). Step alignment is not enforced unless enforceSteps=true. | ||
|
|
||
| ### Stepped Options (Shortcuts) | ||
| When steps are configured, the dropdown shows fixed, non-reordering stepped options in the hour and/or minute columns. These options act as shortcuts while typed input remains unrestricted. The dropdown content and order remain unchanged regardless of the user's input. |
There was a problem hiding this comment.
non-reordering stepped options
what do you mean by 'non-reordering'?
|
|
||
| |Item|Options|Description| | ||
| |-|-|-| | ||
| |Open|`on` or `off`|The time field is available in two sizes. If not specified the default value is `md` (medium).| |
There was a problem hiding this comment.
There is no property "open" that i can see, the description is for the size but the options aren't
Very confusing line 😁
| |Size|`md` `lg`|The time field is available in two sizes. If not specified the default value is `md` (medium).| | ||
| |Placeholder|`on` or `off`|If the setting is enabled, the placeholder will be visible, whereas if it is disabled, the user's input will be displayed. Default value is `off`.| | ||
| |Text|`value`|Use placeholder text to give the user a short hint about what they need to input (e.g. a sample value or a short description of the expected format). Placeholder is not a replacement for labels. It's an optional feature that disappears once users begin entering their data. | | ||
| |Placeholder text|`value`|Use placeholder text to give the user a short hint about what they need to input (e.g. a sample value or a short description of the expected format). Placeholder is not a replacement for labels. It's an optional feature that disappears once users begin entering their data. | |
There was a problem hiding this comment.
same description as for Text
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
