Contrib.social

[2.0.0-beta1] Clean variant logic in templates

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

Many components have variants:

  • banner
  • button
  • card
  • chip
  • chip_set
  • drawer
  • fab
  • image_list
  • list_item
  • list
  • slider
  • snackbar
  • tab
  • top_app_bar

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/banner/banner.twig:{% if variant and variant|lower != 'default' %}
components/banner/banner.twig:  {% set attributes = attributes.addClass('mdc-banner--' ~ variant|lower|replace({_: '-'})) %}
components/button/button.twig:{% if variant and variant|lower != 'default' %}
components/button/button.twig:  {% set attributes = attributes.addClass('mdc-button--' ~ variant|lower|replace({_: '-'})) %}
components/card/card.twig:{% if variant and variant|lower != 'default' %}
components/card/card.twig:  {% set attributes = attributes.addClass('mdc-card--' ~ variant|lower|replace({_: '-'})) %}
components/chip/chip.twig:{% if variant and variant|lower != 'default' %}
components/chip/chip.twig:  {% set attributes = attributes.addClass('mdc-chip--' ~ variant|lower|replace({_: '-'})) %}
components/chip/chip.twig:  {% if variant|lower == 'touch' %}
components/chip/chip.twig:  {% if variant|lower == 'selected' %}
components/chip/chip.twig:  {% if icon and variant|lower != 'selected' %}
components/chip_set/chip_set.twig:{% if variant and variant|lower != 'default' %}
components/chip_set/chip_set.twig:    {% set attributes = attributes.addClass('mdc-chip-set--' ~ variant|lower|replace({_: '-'})) %}
components/drawer/drawer.twig:{% if variant and variant|lower != 'default' %}
components/drawer/drawer.twig:  {% set attributes = attributes.addClass('mdc-drawer--' ~ variant|lower|replace({_: '-'})) %}
components/fab/fab.twig:{% if variant and variant|lower != 'default' %}
components/fab/fab.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'mdc-fab--' ~ v})|replace({_: '-'})) %}
components/image_list/image_list.twig:{% if variant and variant|lower != 'default' %}
components/image_list/image_list.twig:  {% set attributes = attributes.addClass('mdc-image-list--' ~ variant|lower|replace({_: '-'})) %}
components/list_item/list_item.twig:{% if variant and variant|lower != 'default' %}
components/list_item/list_item.twig:  {% set attributes = attributes.addClass('mdc-deprecated-list-item--' ~ variant|lower|replace({_: '-'})) %}
components/list/list.twig:{% if variant and variant|lower != 'default' %}
components/list/list.twig:  {% set attributes = attributes.addClass('mdc-deprecated-list--' ~ variant|lower|replace({_: '-'})) %}
components/slider/slider.twig:{% if variant and variant|lower != 'default' %}
components/slider/slider.twig:  {% set variants = variants|map(v => v|lower|replace({(v): 'mdc-slider--' ~ v})|replace({_: '-'})) %}
components/snackbar/snackbar.twig:{% if variant and variant|lower != 'default' %}
components/snackbar/snackbar.twig:  {% set attributes = attributes.addClass('mdc-snackbar--' ~ variant|lower|replace({_: '-'})) %}
components/tab/tab.twig:{% if variant and variant|lower != 'default' %}
components/tab/tab.twig:  {% set attributes = attributes.addClass('mdc-tab--' ~ variant|lower|replace({_: '-'})) %}
components/top_app_bar/top_app_bar.twig:{% if variant and variant|lower != 'default' %}
components/top_app_bar/top_app_bar.twig:  {% set attributes = attributes.addClass('mdc-top-app-bar--' ~ variant|lower|replace({_: '-'})) %}

Remove the filter.

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

Only 2 components have variants with "__"

$ grep -r __ components/*/*.yml
components/fab/fab.component.yml:  mini__touch:
components/slider/slider.component.yml:  discrete__tick_marks:
components/slider/slider.component.yml:  range__discrete:
components/slider/slider.component.yml:  range__discrete__tick_marks:

But 3 are manipulating it:

$ grep -r variant.*__ components/*/*.twig
components/chip_set/chip_set.twig:  {% set variants = variant|split('__') %}
components/fab/fab.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'mdc-fab--' ~ v})|replace({_: '-'})) %}
components/slider/slider.twig:  {% set variants = variant|split('__') %}

Remove the logic from chip_set

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

$ grep -r variant.*replace components/*/*.twig
components/banner/banner.twig:  {% set attributes = attributes.addClass('mdc-banner--' ~ variant|lower|replace({_: '-'})) %}
components/button/button.twig:  {% set attributes = attributes.addClass('mdc-button--' ~ variant|lower|replace({_: '-'})) %}
components/card/card.twig:  {% set attributes = attributes.addClass('mdc-card--' ~ variant|lower|replace({_: '-'})) %}
components/chip/chip.twig:  {% set attributes = attributes.addClass('mdc-chip--' ~ variant|lower|replace({_: '-'})) %}
components/chip_set/chip_set.twig:    {% set attributes = attributes.addClass('mdc-chip-set--' ~ variant|lower|replace({_: '-'})) %}
components/drawer/drawer.twig:  {% set attributes = attributes.addClass('mdc-drawer--' ~ variant|lower|replace({_: '-'})) %}
components/fab/fab.twig:  {% set variants = variant|split('__')|map(v => v|lower|replace({(v): 'mdc-fab--' ~ v})|replace({_: '-'})) %}
components/image_list/image_list.twig:  {% set attributes = attributes.addClass('mdc-image-list--' ~ variant|lower|replace({_: '-'})) %}
components/list_item/list_item.twig:  {% set attributes = attributes.addClass('mdc-deprecated-list-item--' ~ variant|lower|replace({_: '-'})) %}
components/list/list.twig:  {% set attributes = attributes.addClass('mdc-deprecated-list--' ~ variant|lower|replace({_: '-'})) %}
components/slider/slider.twig:  {% set variants = variants|map(v => v|lower|replace({(v): 'mdc-slider--' ~ v})|replace({_: '-'})) %}
components/snackbar/snackbar.twig:  {% set attributes = attributes.addClass('mdc-snackbar--' ~ variant|lower|replace({_: '-'})) %}
components/tab/tab.twig:  {% set attributes = attributes.addClass('mdc-tab--' ~ variant|lower|replace({_: '-'})) %}
components/top_app_bar/top_app_bar.twig:  {% set attributes = attributes.addClass('mdc-top-app-bar--' ~ variant|lower|replace({_: '-'})) %}

But those components doesn't have "_" (single underscore) in variant ID:

  • button
  • card
  • chip
  • chip_set
  • drawer
  • fab
  • list
  • slider
  • snackbar
  • tab
  • top_app_bar

Remove replace filter

📌 Task
Status

Active

Version

2.0

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