Form Required Class Missing from Claro

Created on 23 July 2020, almost 4 years ago
Updated 14 June 2024, 29 days ago

The required asterisk is missing from horizontal tabs when using Claro.

This works on seven admin theme due to there being a generic `form-required::after` selector in the CSS, whereas Claro only contains specific selectors such as

.form-item__label.form-required::after,
.fieldset__label.form-required::after,

I propose a patch to either add a generic selector like Seven theme OR add horizontal tabs styling

.form-item__label.form-required::after,
.fieldset__label.form-required::after,
.horizontal-tabs .form-required::after

Steps to reproduce:

  1. Install field_group module
  2. Go to any content type manage form display
    (eg /admin/structure/types/manage/article/form-display)
  3. Click on Add field group and select Tabs as type and select horizontal or vertical tabs and mark that group should be marked as required if it contains mandatory fields.
  4. Click again on Add field group and add a tab for each tab you want.
  5. Drag the specific fields to the respective tab created and mark them as required.
  6. Put all tabs inside the tabs container
  7. For each tab item on the widget select choose the tab widget
  8. To test the opposite orientation of the tabs go to manage form display. Click on the cogs icon on the tabs container item, and change the direction to vertical or horizontal value.
  9. Go to the Add Content screen for the content type and view the Tabs.

This will show that the * to mark tabs that contain fields that are mandatory is not displayed. See screenshot from Contribution Workshop DrupalCon Portland 2024 which verifies the issue.

🐛 Bug report
Status

Needs work

Version

11.0 🔥

Component
Field 

Last updated about 2 hours ago

Created by

🇬🇧United Kingdom alanoakden

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

    It would make a good project for someone who is new to the Drupal contribution process. It's preferred over Newbie.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

  • Needs manual testing

    The change/bugfix cannot be fully demonstrated by automated testing, and thus requires manual testing in a variety of environments.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

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

  • 🇧🇷Brazil joaopauloc.dev

    The patch was applied and works fine.

    Steps followed.
    1 - Install field group
    2 - Go to any content type manage form display
    3 - Click on Add field group and select Tabs item and select horizontal or vertical tabs.
    4 - Click again on Add field group and add one tab for each tab you want.
    5 - Drag the specific fields to the respective tab created.
    6 - Put all tabs inside the tabs container
    7 - For each tab item on the widget select choose the tab widget
    8 - To test the opposite orientation of the tabs go to manage form display. Click on the cogs icon on the tabs container item, and change the direction to vertical or horizontal value.

    Screenshots are attached for evidence.
    Note, the last tab doesn't have the required fields and the * does not appear as expected.

  • Status changed to Needs review over 1 year ago
  • 🇫🇮Finland lauriii Finland

    It seems like the solution is using CSS classes that don't exist in core, and are used by contrib modules instead. We usually don't write CSS in the core themes to explicitly accommodate contrib modules. The solution should either be generic enough for it to not include CSS classes not used by core, or it should be moved to the contrib module queue.

  • Status changed to Needs work over 1 year ago
  • 🇺🇸United States smustgrave

    Vertical tabs appear to be valid in claro but horizontal tabs are not so those would need to be replaced.

    Tagging for novice as it should be easy to find the replacement.

    Also this could use an issue summary update with more recent screenshots of before/after.

  • Assigned to shree0007
  • Issue was unassigned.
  • 🇺🇸United States mradcliffe USA

    I performed Novice Triage on this issue. I am leaving the Novice tag on this issue because @smustgrave's comment still applies.

  • 🇵🇰Pakistan Drupak

    Hello, I am at Mentored Contribution DrupalCon Portland2024, I will be working on it during the next hour or two.

  • 🇺🇸United States tanzeel

    Hi, I am at the mentor contribution at Drupalcon24 Portland. I will be working on this one for the next couple of hours.

  • 🇨🇦Canada veades

    Hi I'm novice at DrupalCon Portland2024, I'm part of table looking into this one for next hour.

  • 🇨🇦Canada Simon-P Vancouver

    Working on this at DrupalCon 2024 for the next hour

  • Merge request !7989Draft: Resolve #3160987 "Form required class" → (Open) created by tanzeel
  • 🇯🇵Japan hktang

    Hi there, working on this at DrupalCon 2024 for the next hour or so.

  • Hi I'm novice at DrupalCon Portland2024, I'm part of table looking into this one for next hour.

  • Hello!
    Portland DrupalCon 2024 – working on this for the next 2-ish hours.

  • 🇨🇦Canada Simon-P Vancouver
  • 🇨🇦Canada Simon-P Vancouver
  • 🇨🇦Canada Simon-P Vancouver
  • 🇨🇦Canada Simon-P Vancouver

    Verified * marking tab groups that contain mandatory fields is missing form tab Field Groups when using Claro admin theme at Contribution Workshop at DrupalCon Portland 2024.

  • 🇺🇸United States joshmiller Indianapolis, Indiana, USA

    Commenting that I helped a mentored contribution table look into this issue. We were able to confirm the issue and we looked at the patches. Unfortunately this was happening later in the day and I think we all ran out of gas at the end. I'll review this in a few days if no one else from the group does and try to get it to RTBC so we might get some core credit for everyone's efforts.

  • First commit to issue fork.
  • checked with "drupal/field_group": "3.x-dev@dev" with 11.0-dev

    before vertical fix

    After vertical fix:

    After horizontal fix :

    Fixed with this patch claro_field_group_required_patch.diff

Production build 0.69.0 2024