Contrib.social

Field-required indicators need to be pure CSS rather than markup

Open on Drupal.org →
Created on 20 June 2024, 6 months ago
Updated 10 September 2024, 3 months ago

Problem/Motivation

The "form-element" and "fieldset" components add markup after the label/legend when a form element is required. (A text-danger span containing an asterisk.)

The required status of an element can be altered by javascript triggered by the "#states" API. This won't add/remove the markup, so the element's appearance won't be updated to indicate its new status.

Steps to reproduce

Alter a form to add the required #states to an element depending on the status of another.

The required indicator is not added/removed.

Proposed resolution

Core themes add this marker purely as CSS. Radix should remove the markup from these components and add the required styles.

Olivero has the following style that does this:

/* Form required star icon */

.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.required-mark::after {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: 0.3em;
  content: "";
  vertical-align: text-top;
  /* Use a background image to prevent screen readers from announcing the text. */
  background-image: url("data:image/svg+xml,%3Csvg height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m0 7.562 1.114-3.438c2.565.906 4.43 1.688 5.59 2.35-.306-2.921-.467-4.93-.484-6.027h3.511c-.05 1.597-.234 3.6-.558 6.003 1.664-.838 3.566-1.613 5.714-2.325l1.113 3.437c-2.05.678-4.06 1.131-6.028 1.356.984.856 2.372 2.381 4.166 4.575l-2.906 2.059c-.935-1.274-2.041-3.009-3.316-5.206-1.194 2.275-2.244 4.013-3.147 5.206l-2.856-2.059c1.872-2.307 3.211-3.832 4.017-4.575-2.081-.402-4.058-.856-5.93-1.356' fill='%232494DB'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 0.5rem 0.5rem;
}

And Claro does this:

.form-item__label.form-required::after,
.fieldset__label.form-required::after {
  display: inline-block;
  margin-inline: 0.15em;
  content: "*";
  color: var(--color-maximumred);
  font-size: 0.875rem;
}

I replaced the "__" in the rules with spaces, and Olivero's solution worked for me. (Although I don't love the color. ;) But that's easily changed.)

🐛 Bug report
Status

Fixed

Version

6.0

Component

Code

Created by

🇨🇦Canada samalander

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @samalander
  • Comment 6 months ago →
    🇨🇦Canada samalander

    I moved the required-indicator from markup to styles in the form-element and fieldset components of the issue branch so that the #states core API can modify it.

    I used the Claro method as a model because it lets us use a Bootstrap variable for the indicator's color.

    I had to add .css files to the components. The existing .scss files are ignored by the single directory components functionality when rendering the component in a starterkit-created theme. They also do not get preprocessed by npm when processing the child theme.

    I had a discussion with doxigo → on Slack (in the #radix channel starting 2024-06-26) about that. There are multiple ways to go. I chose to just add the matching .css files as that was the simplest way to get it working for this issue.

    Another issue should probably be created to find the best solution for the whole theme and apply it. (For example, the alert component has code in its .scss file that is currently not used.)

  • Merge request !104Issue #3456054: Field-required indicators need to be pure CSS rather than markup → (Merged) created by samalander
  • Pipeline finished with Canceled
    6 months ago
    Total: 102s
    #214236
  • Pipeline finished with Success
    6 months ago
    Total: 150s
    #214237
  • Comment 4 months ago →
    doxigo

    Hey thanks a lot for the work. Can you check the MR again and fix the merge issues?

  • Status changed to Needs work 4 months ago
  • Comment 4 months ago →
    doxigo

    Hey thanks a lot for the work. Can you check the MR again and fix the merge issues?

  • Pipeline finished with Skipped
    4 months ago
    #265708
  • Comment 4 months ago →
    System Message
  • Status changed to Fixed 4 months ago
  • Comment 4 months ago →
    doxigo

    I went on and updated the MR, thanks a lot, will check this a bit further

  • Comment 3 months ago →
    System Message

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

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024