Problem/Motivation

#3559156: Support Twig's CVA function added Twig's html-extra package to core, which introduces a few additional helpful functions. One of them is html_classes: https://twig.symfony.com/doc/3.x/functions/html_classes.html

Proposed resolution

The function is already available, maybe we can use this to partially clean up some of our Twig templates.

Comments

phenaproxima created an issue.

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented

Our current pattern is to prefer handling all attributes in one go, where I don't think this will help. As an example, Claro's details element does this:

{%
  set classes = [
    'claro-details',
    accordion ? 'claro-details--accordion',
    accordion_item ? 'claro-details--accordion-item',
    element['#module_package_listing'] ? 'claro-details--package-listing',
  ]
%}
<details{{ attributes.addClass(classes) }}>

However, there are a handful of places where we do construct class lists directly that could be improved slightly:

{% if counters|length == 3 %}
  {% set element_width_class = ' system-status-report-counters__item--third-width' %}
{% elseif counters|length == 2 %}
  {% set element_width_class = ' system-status-report-counters__item--half-width' %}
{% endif %}
<div class="system-status-report-counters">
  {% for counter in counters %}
    <div class="card system-status-report-counters__item{{ element_width_class }}">

In Claro's system-themes-page we do have a slightly awkward usage of createAttribute() that appears to double the ID attribute:

          {%
            set theme_title_classes = [
              'card__content-item',
              'heading-f',
            ]
          %}
...
                <h3{{ create_attribute({'id': theme.title_id}).addClass(theme_title_classes) }} id={{ theme.title_id }}>