Contrib.social

Clean variant logic in templates

Open on Drupal.org →
Created on 5 January 2025, 16 days ago

Many components have variants:

  • accordion
  • alert
  • button
  • button_group
  • card
  • carousel
  • close_button
  • dropdown
  • list_group_item
  • list_group
  • list
  • modal
  • navbar
  • navbar_nav
  • nav
  • offcanvas
  • pagination
  • progress
  • spinner
  • table

Remove useless |lower filters

Maybe there was a time in the early UI Patterns 1.x when lowering the variant name was useful, but it is not anymore:

$ grep -r variant.*lower components/*/*.twig
components/accordion/accordion.twig:{% if variant and variant|lower != 'default' %}
components/accordion/accordion.twig:  {% set attributes = attributes.addClass('accordion-' ~ variant|lower|replace({'_': '-'})) %}
components/alert/alert.twig:{% if variant and variant|lower != 'default' %}
components/alert/alert.twig:  {% set attributes = attributes.addClass('alert-' ~ variant|lower|replace({'_': '-'})) %}
components/button/button.twig:{% if variant and variant|lower != 'default' %}
components/button/button.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'btn-' ~ v})|replace({'_': '-'})) %}
components/button_group/button_group.twig:{% if variant and variant|lower != 'default' %}
components/button_group/button_group.twig:  {% set attributes = attributes.addClass('btn-group-' ~ variant|lower|replace({'_': '-'})) %}
components/button_group/button_group.twig:{% if variant and variant|lower != 'vertical' %}
components/card/card.twig:{% if variant and variant|lower == 'horizontal' %}
components/carousel/carousel.twig:{% if variant and variant|lower != 'default' %}
components/carousel/carousel.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'carousel-' ~ v})|replace({'_': '-'})) %}
components/carousel/carousel.twig:{% set attributes = 'dark' in variant|lower ? attributes.setAttribute('data-bs-theme', 'dark') : attributes %}
components/close_button/close_button.twig:{% if variant and variant|lower != 'default' %}
components/list_group_item/list_group_item.twig:{% if variant and variant|lower != 'default' %}
components/list_group_item/list_group_item.twig:  {% set attributes = attributes.addClass('list-group-item-' ~ variant|lower|replace({'_': '-'})) %}
components/list_group/list_group.twig:{% if variant and variant|lower != 'default' %}
components/list_group/list_group.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'list-group-' ~ v})|replace({'_': '-'})) %}
components/list/list.twig:{% if variant and variant|lower != 'default' %}
components/list/list.twig:  {% set attributes = attributes.addClass('list-' ~ variant|lower|replace({'_': '-'})) %}
components/modal/modal.twig:{% if variant and variant|lower != 'default' %}
components/modal/modal.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'modal-' ~ v})|replace({'_': '-'})) %}
components/navbar/navbar.twig:{% if variant and variant|lower != 'default' %}
components/navbar/navbar.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'navbar-' ~ v})|replace({'_': '-'})) %}
components/navbar/navbar.twig:{% set attributes = 'dark' in variant|lower ? attributes.setAttribute('data-bs-theme', 'dark') : attributes %}
components/navbar_nav/navbar_nav.twig:{% if variant and variant|lower != 'default' %}
components/navbar_nav/navbar_nav.twig:  {% set attributes = attributes.addClass('navbar-nav-' ~ variant|lower|replace({'_': '-'})) %}
components/nav/nav.twig:{% if variant and variant|lower != 'default' %}
components/nav/nav.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'nav-' ~ v})|replace({'_': '-'})) %}
components/offcanvas/offcanvas.twig:{% set attributes = attributes.addClass('offcanvas-' ~ variant|default('start')|lower|replace({'_': '-'})) %}
components/pagination/pagination.twig:{% if variant and variant|lower != 'default' %}
components/pagination/pagination.twig:  {% set attributes = attributes.addClass('pagination-' ~ variant|lower|replace({'_': '-'})) %}
components/progress/progress.twig:{% if variant and variant|lower != 'default' %}
components/progress/progress.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'progress-bar-' ~ v})|replace({'_': '-'})) %}
components/spinner/spinner.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'spinner-' ~ v})|replace({'_': '-'})) %}
components/table/table.twig:{% if variant and variant|lower != 'default' %}
components/table/table.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'table-' ~ v})|replace({'_': '-'})) %}

Remove the filter.

Useless "__" (double underscore) logic and split filter

8 components with variants with "__" (dropdown removed):

 $ grep -lr __ components/*/*.component.yml
components/button/button.component.yml
components/carousel/carousel.component.yml
components/list_group/list_group.component.yml
components/navbar/navbar.component.yml
components/nav/nav.component.yml
components/progress/progress.component.yml
components/spinner/spinner.component.yml
components/table/table.component.yml

But 9 are manipulating it in templates:

$ grep -r variant.*__ components/*/*.twig
components/button/button.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'btn-' ~ v})|replace({'_': '-'})) %}
components/carousel/carousel.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'carousel-' ~ v})|replace({'_': '-'})) %}
components/list_group/list_group.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'list-group-' ~ v})|replace({'_': '-'})) %}
components/modal/modal.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'modal-' ~ v})|replace({'_': '-'})) %}
components/navbar/navbar.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'navbar-' ~ v})|replace({'_': '-'})) %}
components/nav/nav.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'nav-' ~ v})|replace({'_': '-'})) %}
components/progress/progress.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'progress-bar-' ~ v})|replace({'_': '-'})) %}
components/spinner/spinner.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'spinner-' ~ v})|replace({'_': '-'})) %}
components/table/table.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'table-' ~ v})|replace({'_': '-'})) %}

Remove the logic from modal?

Useless "_" (simple underscore) logic and replace filter

$ grep -r variant.*replace components/*/*.twig
components/accordion/accordion.twig:  {% set attributes = attributes.addClass('accordion-' ~ variant|lower|replace({'_': '-'})) %}
components/alert/alert.twig:  {% set attributes = attributes.addClass('alert-' ~ variant|lower|replace({'_': '-'})) %}
components/button/button.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'btn-' ~ v})|replace({'_': '-'})) %}
components/button_group/button_group.twig:  {% set attributes = attributes.addClass('btn-group-' ~ variant|lower|replace({'_': '-'})) %}
components/carousel/carousel.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'carousel-' ~ v})|replace({'_': '-'})) %}
components/dropdown/dropdown.twig:{% set variant = variant|default('dropdown')|replace({'_': '-'}) %}
components/list_group_item/list_group_item.twig:  {% set attributes = attributes.addClass('list-group-item-' ~ variant|lower|replace({'_': '-'})) %}
components/list_group/list_group.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'list-group-' ~ v})|replace({'_': '-'})) %}
components/list/list.twig:  {% set attributes = attributes.addClass('list-' ~ variant|lower|replace({'_': '-'})) %}
components/modal/modal.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'modal-' ~ v})|replace({'_': '-'})) %}
components/navbar/navbar.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'navbar-' ~ v})|replace({'_': '-'})) %}
components/navbar_nav/navbar_nav.twig:  {% set attributes = attributes.addClass('navbar-nav-' ~ variant|lower|replace({'_': '-'})) %}
components/nav/nav.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'nav-' ~ v})|replace({'_': '-'})) %}
components/offcanvas/offcanvas.twig:{% set attributes = attributes.addClass('offcanvas-' ~ variant|default('start')|lower|replace({'_': '-'})) %}
components/pagination/pagination.twig:  {% set attributes = attributes.addClass('pagination-' ~ variant|lower|replace({'_': '-'})) %}
components/progress/progress.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'progress-bar-' ~ v})|replace({'_': '-'})) %}
components/spinner/spinner.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'spinner-' ~ v})|replace({'_': '-'})) %}
components/table/table.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'table-' ~ v})|replace({'_': '-'})) %}

But some components doesn't have "_" (single underscore) in variant ID. If so, remove |replace() filter.

📌 Task
Status

Active

Version

5.1

Component

Code

Created by

🇫🇷France pdureau Paris

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

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024