search

carbon-design-system / carbon-addons-iot-react

A collection of React components shared between IBM Maximo Asset Monitor (Watson IoT), IBM Maximo Visual Inspection, and Graphite products.
https://carbon-design-system.github.io/carbon-addons-iot-react/
Apache License 2.0
96 stars 78 forks source link

[DateTimePickerV2] inconsistency in placeholder text #3762

Closed jessieyan closed 1 year ago

jessieyan commented 1 year ago

What package is this for?

Describe the bug

In <TimePickerDropDown>, we use placeholder text 'hh:mm XM' for 12 hours format and 'HH:mm' for 24 hours format In <DateTimePickerV2>, we use dateTimeMask as the format. There are 2 places indicate incosistency.

  1. The meridian, XM vs A
  2. When hours are in single h or H format, time picker is not able to show it in placeholder text. image

To Reproduce

Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Please create a reduced test case in CodeSandbox: https://codesandbox.io/s/github/carbon-design-system/carbon-addons-iot-react/tree/next/packages/react/examples/codesandbox

Expected behavior

A clear and concise description of what you expected to happen.

Environment/versions:

Additional context

If applicable, add screenshots to help explain your problem.

Add any other context about the problem here.

Specific timeline issues / requests

Do you want this work within a specific time period? Is it related to an upcoming release?

NB: The core contributors will try to work with your timeline, but it's not guaranteed. The earlier you make a request in advance of a desired delivery date, the better!

davidicus commented 1 year ago

While the format should not change that we are passing into the component's dateTimeMask, it should dictate the placeholder text for both inputs. Perhaps Robin Rock can weigh in on what would be best. Whatever is decided should be consistent between the DateTimePicker and the TimePickerDropdown

jessieyan commented 1 year ago

@robinrock Would you please confirm the placeholder text for DateTimePicker and TimePickerDropDown?

In the design of TimePickerDropDown, we have hh:mm XM for 12 hour format placeholder text. Should we do the same in DateTimePicker? Note that there might be format like h:mm am. We probably need to add a few more placeholder text for varies time formats.

contentdesi commented 1 year ago

Hi @jessieyan trying to make sure I (Robin Rock) understand the issue (also I am @contentdesi in Carbon GitHub, FYI). This is the Sustainability Software PAL guidance for 12 and 24 hour times: https://pages.github.ibm.com/ai-applications/design/content-guide/dates-and-times/overview/#12-hour-and-24-hour-time-notation

jessieyan commented 1 year ago

Copied from Robin's comment from slack https://ibm-watson-iot.slack.com/archives/GNHE0BJ90/p1681393085516099?thread_ts=1681155517.241189&cid=GNHE0BJ90

"We don't currently have a different variation of placeholder text for that. Using placeholder text with only one "h" would be confusing to people needing to enter the two-digit hour 10, 11, or 12. Typically standard placeholder text for hours is "hh" - hope that helps!"

Robin recommended "hh" as the placeholder instead of 'h' considering 'h' is confusing for people. In DateTimePicker, we use dateTimeMask as the placeholder so that people can expect the time format. If dateTimeMask has 'h', we show it as 'h'.

Robin is leaving the team so we need to confirm with the design team on how to approach.

jessieyan commented 1 year ago

Kevin will look into the design. We will recap during sync meeting.