Originally submitted on Github

Problem/Motivation

Recent interviews and research exposed pain points around Drupal's admin experience of looking and feeling dated. Tags and entity reference fields are currently representing selected elements just by text and its id, giving a very poor visual experience.

Only local images are allowed.

Proposed resolution

Implement new Tag / Entity reference field style to create a favorable first impression of Drupal for evaluators and a better user experience for site authors. Styling the same information in a more appealing and self-explanatory way will also help users understand the UI faster and lower the cognitive load.

Specs:

@todo

Remaining tasks

  • Define how the new styling will be rendered
  • Add design detailed specs
  • Update patch styling to include time inputs
  • Accessibility review
  • RTL review (Right to left)

User interface changes

@todo

Test Pages

@todo

CommentFileSizeAuthor
#7 tags.png16.02 KBckrina
#6 tagsv2.png115.36 KBckrina
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

antonellasevero created an issue. See original summary.

antonellasevero’s picture

Issue summary: View changes
saschaeggi’s picture

Version: » 8.x-1.x-dev
Status: Active » Postponed
ckrina’s picture

Issue summary: View changes

Removing outdated link to Figma and minimizing some summary info.

lauriii’s picture

What is this issue for? Would it be possible to get more background information about the component in the issue summary and/or link to Figma?

ckrina’s picture

FileSize
115.36 KB

This one is to update the visual styles for tags with a new design, but we're stopping this until all the other MVP components are ready since it clearly implies much more than just CSS. Here's the design proposal:

New design for tags

ckrina’s picture

Title: Tag fields style update » Tag / entity reference fields style update
Issue summary: View changes
FileSize
16.02 KB

Updating the issue summary. The title probably needs to be changed once we know the final implementation to be able to render all the info.

ckrina’s picture

huzooka’s picture

Project: Claro » Drupal core
Version: 8.x-1.x-dev » 8.9.x-dev
Component: Code » Claro theme
ckrina’s picture

Issue tags: +Needs design

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

oliversiegel’s picture

I think this is a fantastic issue, and well described. Yes, lowering cognitive load for the user!! So important!

Actually I really need this for my project/Drupal site. It's a crucial building block to it. Taxonomy is an important native Drupal feature, but I need it to be user friendly and better looking. Just as proposed here.

No Sssweat’s picture

In the meantime, until such feature gets added to core, you can use the Select 2 module, here is an article about it. Make sure you read its READ.me to learn how to use.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

ckrina’s picture

Status: Postponed » Closed (duplicate)