Form prefix/suffix redesign in Claro

Created on 20 September 2019, about 5 years ago
Updated 3 May 2023, over 1 year ago

Problem/Motivation

In form-text.css, .form-element width is set to 100% at widths up to 600px. This pushes prefixes and suffixes to a new line in a way that doesn't look good. (Found using Umami profile on Chrome at admin/config/media/image-toolkit)

Testing instructions

  • Enable Claro as the administration theme if it is not.
  • Visit /admin/config/system/site-information and verify the Default front page field.
  • Test it working with the focus design (using the keyboard to navigate to this field, for example).
  • Visit /admin/config/media/image-toolkit and verify the JPEG quality field.
  • Navigate to /admin/structure/types/manage/page/fields and start adding a field. Before saving it, edit the machine name.The preffix "field" should look like a preffix.
  • Enter a wrong machine name (like add and space in the middle) and verify the error looks as in the designs.
  • Test the focus working fine with the error.
  • Add several combinations of Number fields with Prefix and suffix, and multiple fields too.
  • Visit /admin/structure/views/view/comment and click on edit Path under "Page settings". The field path on the dialog should look OK (no prefix).
  • Visit /user/1/edit and edit the Password field. The confirm password field shouldn't be visible until a password is entered, and the input and strength indicator shouldn't be too wide. (Per comment #66).

Outside of scope:

Proposed resolution

Implement a new design to solve this:

This image is just a reference. Please use this Figma link to check spacing and other definitions.

Remaining tasks

  • Accessibility review
  • Create a new patch

User interface changes

A new design for prefix will be available.

Release notes snippet

Known Issues


1- Visit /admin/structure/views/view/comment and click on edit Path under "Page settings". The field path on the dialog should look OK (no prefix).

This is an issue with Views actually, since it's adding some HTML to the prefix without checking if there is a value, see: https://git.drupalcode.org/project/drupal/-/blob/9.4.x/core/modules/view...
which ends up with an empty prefix with just a "&lrm;" entity on it. (Although the problem seems to be that Url::fromRoute('<none>', [], ['absolute' => TRUE])->toString() it's returning an empty string). In any case, should this be addressed in a separate ticket for Views and not for Claro.
🐛 Bug report
Status

Needs work

Version

10.1

Component
Claro 

Last updated about 2 hours ago

Created by

🇺🇸United States bnjmnm Ann Arbor, MI

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

  • Needs accessibility review

    Used to alert the accessibility topic maintainer(s) that an issue significantly affects (or has the potential to affect) the accessibility of Drupal, and their signoff is needed (see the governance policy draft for more information). Useful links: Drupal's accessibility standards, the Drupal Core accessibility gate.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024