Problem/Motivation

- a content type
- with a date time field
- with "Select" chosen as the widget on "Manage form display"

The UX of the select elements is not great.

If no default datetime is given, a row of blank select boxes is presented:

Proposed resolution

Supply pseudo values like "-Year-" etc. instead of having each box blank when no default is given:

This can be accomplished using the FAPI '#empty_option' attribute.

Remaining tasks

None.

User interface changes

The select widget for datetime entry will now have empty options, which will be user facing text to serve as labels for the various selects.

API changes

None.

Data model changes

None.

Disruption

None. We are not introducing new strings, so this should be eligible for 8.1.x under https://www.drupal.org/core/d8-allowed-changes per

- non-disruptive bug fixes, where the bug is under the "Incorrect or misleading user interface text" category

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jonathanjfshaw created an issue. See original summary.

jonathanshaw’s picture

Issue summary: View changes
emma.maria’s picture

Issue tags: +Needs screenshots
jonathanshaw’s picture

Screenshots attached, "needs screenshot" tag removed

jonathanshaw’s picture

Issue summary: View changes
joelpittet’s picture

Category: Feature request » Bug report
Issue summary: View changes
Issue tags: +Usability

This actually looks more like a usability bug than a feature reqest. We may be able to get this in a 8.0.1 bug fix I think.

emma.maria’s picture

Issue summary: View changes
FileSize
10.36 KB

The screenshots posted so far are for the Seven theme.

Bartik looks like this...

Which component should this be filed under? It's not theme specific.

yoroy’s picture

Component: Bartik theme » field_ui.module
FileSize
27.27 KB

Maybe Field UI is the right component for this.

Actually providing the option to have select lists for this may be the acual bug because this doesn't seem useful to me at all. But I'm sure we can come up with a use case where this is what you want.

What about removing the option to not have a default value for these? Another option is to have "Year", "Month", "Day", etc. as the first values in each list and show those as selected when no default date is specified.

jonathanshaw’s picture

What about removing the option to not have a default value for these?

Sometimes you know any default will be wrong. And a default that is wrong can be more confusing and more mental work for the user than a blank canvas.

Another option is to have "Year", "Month", "Day", etc. as the first values in each list and show those as selected when no default date is specified.

+1
-Label- is the pattern in other places.

yoroy’s picture

Don't think I agree that a blank canvas is clearer than a prefilled date. They’d be equally "wrong", but with a default date you can at least recognize the pattern.

Adding values of -Year-, -Month- on top of each list seems like the quickest reasonable fix indeed.

swentel’s picture

Component: field_ui.module » datetime.module
mpdonadio’s picture

jonathanshaw’s picture

Title: Improve appearance of Date time form select elements » Better labelling for Date time form select elements
Issue summary: View changes

@mpdonadio, good point.

I've removed the reference to spacing and focused on the labelling issue which seems to overlap less with the other issue.

mpdonadio’s picture

Version: 8.0.x-dev » 8.1.x-dev
Issue tags: +Needs tests, +Needs issue summary update

Changing to 8.1.x since we will be adding strings, so this can't be in a patch update.

I think adding -Year-, -Month-, etc is a good solution here (IS should be adjusted). Likely also need to adjust the validation on these, and add some test coverage to make sure the validation doesn't break in the future.

yoroy’s picture

Issue summary: View changes
FileSize
7 KB
jonathanshaw’s picture

Issue summary: View changes
FileSize
8.67 KB

Changed the "before" screenshot to be a like-for-like comparison with the "after" screenshot

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

jhedstrom’s picture

Status: Active » Needs review
Issue tags: -Needs issue summary update
FileSize
536 bytes
34.42 KB

Here's a fix that uses the #empty_option property for Select elements to address this issue. It doesn't add the - as suggested, but here's what it looks like just using the element title:

The IS seems up-to-date.

I'm not sure if we need to write a test for this, unless we just want to verify that the #empty_option is properly used for each date part?

Status: Needs review » Needs work

The last submitted patch, 18: 2561993-18.patch, failed testing.

jhedstrom’s picture

Status: Needs work » Needs review

The fail is unrelated.

mpdonadio’s picture

Moving back to NR b/c #2724871: Random failure in \Drupal\migrate_drupal_ui\Tests\d7\MigrateUpgrade7Test.

I think I like this approach. That class is really weird, though. It's hard to read that w/o noting all of the quirks.

Core is pretty inconsistent about '- Foo -' vs 'Foo' for #empty_option; there may be more uses with the hyphen. Personally, I think the UX is better here without (since they are all in a row). @yoroy, what do you think?

Not seeing coverage for #empty_option anywhere else, but it couldn't hurt to add to DateTimeFieldTest::testDatelistWidget() if the xpath isn't that difficult.

yoroy’s picture

I think the pattern is to have the added hyphens, but I'm fine with leaving them out here. The labels are already wider than most of the acutal values, so I prefer compactness over consistency here.

jhedstrom’s picture

This adds a test for the labels. I also added a new method to the AssertContentTrait for finding select options via their text rather than their value.

The last submitted patch, 23: 2561993-23-TEST-ONLY.patch, failed testing.

mpdonadio’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
Issue tags: -Usability, -Needs tests

Played with this applied. Nice simple approach that leverages the FAPI for what it is meant for. We are not introducing new strings, so this should be eligible for 8.1.x under https://www.drupal.org/core/d8-allowed-changes per

- non-disruptive bug fixes, where the bug is under the "Incorrect or misleading user interface text" category

Setting RTBC, assuming this will also pass under 8.1.x.

mpdonadio’s picture

Issue summary: View changes
alexpott’s picture

Status: Reviewed & tested by the community » Fixed

Nice bug fix. Committed 7d3ab5a and pushed to 8.1.x and 8.2.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.