Problem/Motivation

Stable9's form-element template doesn't add the form-type-* class which is used by many contrib modules in CSS and JS selectors.
This is how the classes variable is set in the starterkit_theme/form-element.html.twig

{%
  set classes = [
    'js-form-item',
    'form-item',
    'js-form-type-' ~ type|clean_class,
    'form-type-' ~ type|clean_class,      <--- FORM TYPE IS ADDED HERE.
    'js-form-item-' ~ name|clean_class,
    'form-item-' ~ name|clean_class,
    title_display not in ['after', 'before'] ? 'form-no-label',
    disabled == 'disabled' ? 'form-disabled',
    errors ? 'form-item--error',
  ]
%}

This is how the classes variable is set in the stable9/form-element.html.twig

{%
  set classes = [
    'js-form-item',
    'form-item',
    'js-form-type-' ~ type|clean_class,
    'form-item-' ~ name|clean_class,
    'js-form-item-' ~ name|clean_class,
    title_display not in ['after', 'before'] ? 'form-no-label',
    disabled == 'disabled' ? 'form-disabled',
    errors ? 'form-item--error',
  ]
%}

Steps to reproduce

Build a form and inspect its elements. No elements have the form-type- class related to its type.

Proposed resolution

Add the 'form-type-' ~ type|clean_class, snippet to the classes variable:

{%
  set classes = [
    'js-form-item',
    'form-item',
    'form-type-' ~ type|clean_class,
    'js-form-type-' ~ type|clean_class,
    'form-item-' ~ name|clean_class,
    'js-form-item-' ~ name|clean_class,
    title_display not in ['after', 'before'] ? 'form-no-label',
    disabled == 'disabled' ? 'form-disabled',
    errors ? 'form-item--error',
  ]
%}

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#2 3380021-2.patch529 bytesdineshkumarbollu

Issue fork drupal-3380021

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

andre.bonon created an issue. See original summary.

dineshkumarbollu’s picture

StatusFileSize
new529 bytes

provided patch, added 'form-type-' ~ type|clean_class in stable9 theme.please review.

andre.bonon’s picture

Status: Active » Reviewed & tested by the community

@dineshkumarbollu it works. Thanks for providing a patch for that.

lauriii’s picture

Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs frontend framework manager review

The contributed modules should be using js-form-type-{type} class. Looks like there are quite a few uses of this class in contrib so maybe the pragmatic solution would be to just add the class to Stable. Tagging with FEFM review tag to get their feedback.

ckrina’s picture

Agreed, this addition makes sense for me.

bnjmnm’s picture

I was trying to put myself in the shoes of a stark-theme-diehard who wants no excess markup, but this is a convention intended for functionality, not presentation, and I'd hope that theoretical purist would be OK with the markup being a little busier in order for contrib. modules to work as expected. This is a nice addition for the next minor.

lauriii’s picture

Status: Needs review » Reviewed & tested by the community
Issue tags: -Needs frontend framework manager review

Looks like this would be ready to go then! Should we open a CR for this?

  • lauriii committed 724c8d4d on 11.x
    Issue #3380021 by andre.bonon, dineshkumarbollu, ckrina, bnjmnm: Stable9...

lauriii’s picture

Version: 10.1.x-dev » 11.x-dev
Status: Reviewed & tested by the community » Fixed
Issue tags: +10.2.0 release notes

Committed 724c8d4 and pushed to 11.x. Thanks!

Added a brief snippet to the 10.2.0 draft release notes.

Status: Fixed » Closed (fixed)

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