Add date time component usage guides #165
Conversation
Introduces documentation for the date-time picker component, updates the input-date-time guide with expanded options and usage details, and refines the date-picker guide for consistency. Adds new Figma illustration assets for the updated documentation.
✅ Deploy Preview for industrial-experience ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Revised the 'Related' sections in date-picker, date-time-picker, input-date-time, and input-time documentation to add a link to writing guidelines for date and time, and to remove or reorder other related links for improved clarity and consistency.
Improved documentation for date picker, date-time picker, input-date-time, input-date, input-time, and time picker components with clearer option descriptions and behavior explanations. Added links to the W3C date picker accessibility reference for all related guides. Updated Figma illustration for date-time picker states.
Updated references to date picker and time picker states to point to the correct guide sections, ensuring documentation links work as intended.
|
/gemini review |
kathrinschalber
requested review from
flxlst09
and removed request for
flxlst09
|
@flxlst09 added you as a reviewer for the "actual" review. |
flxlst09
left a comment
flxlst09
left a comment
There was a problem hiding this comment.
Very good, only smaller suggestions. As discussed: Date time input usage guide will be hidden until the component is ready.
Updated internal documentation links in date picker, date-time picker, input-date, and input-date-time guides to point to more specific sections and correct files. This improves navigation and clarity for users referencing related options and components.
Improved explanations and formatting in guides for date-time-picker, input-date-time, input-date, and input-time components. Clarified range selection behavior, input formats, and updated references to related documentation for better usability and consistency.
| - **Error message**: Feedback text when date or time is not parsable. We typically use this to inform users that the entered date time format is incorrect and guide them to enter a valid date and time. | ||
| - **Format**: Define the date and time format, e.g. `yyyy/LL/dd TT` for 2024/06/15 13:07:04. | ||
| - **Min and max dates**: Restrict the selectable date range by defining the earliest and latest dates users can choose. | ||
| - **Date time picker appearance**: See [date time picker](../date-time-picker/guide#options). |
There was a problem hiding this comment.
time intervals (hourInterval, minuteInterval, etc.) will not be supported.
why: users might expect them since time-input has intervals. datetime-picker doesn't expose these props, so datetime-input can't support them
There was a problem hiding this comment.
could you provide the list of properties that will be supported on the datetime picker? Atm, I've got week start and week numbers (e.g. header is hidden on the input, and corners are not shown)
There was a problem hiding this comment.
Draft for properties is provided in corresponding Jira. Let's discuss it separately if needed.
| - Refer to the [validation](../forms-validation) chapter for detailed guidelines. | ||
| - **Overflow**: The input field should be wide enough to display the full date and time without truncation. | ||
| - **Alignment**: Date time inputs are aligned to the left by default. | ||
| - **Combined selection**: Users select both a date and a time before confirming their choice. The selection is only finalized when the confirmation button is clicked. |
There was a problem hiding this comment.
value format is ISO 8601 datetime-local (YYYY-MM-DDTHH:mm:ss). Display format will be controlled by date-format and time-format props
it might helps developers to understand what format they'll get in events/forms
There was a problem hiding this comment.
the return value in events & co should be defined in the props table. In the usage guide, we describe how to use the component on a rather non-technical level.
However, this raises another question in my header: If we have this single value format, how comes we have separate date and time formats?
There was a problem hiding this comment.
Same as datetime-picker
https://ix-dev.siemens.io/docs/components/date-time-picker/code#property-dateFormat
https://ix-dev.siemens.io/docs/components/date-time-picker/code#property-timeFormat
It allows to be consistent in terms. Additionally datetime-picker will be used internally by datetime-input
Improved clarity and consistency in guides for date-time picker, input-date-time, input-date, and input-time components. Adjusted format descriptions, added details for week start and week numbers, and refined terminology for selected dates and current day.
💡 What is the current behavior?
Missing a few usage guides
GitHub Issue Number: #
🆕 What is the new behavior?
Note: As the date time input doesn't exsit at this time, this is a first draft. In case it isn't finished once this PR is ready to be merged, I would hide it from the sidebar in the meanwhile.
👨💻 Help & support