Contrib.social

Add prefix / suffix options and refactor CssClass::build

Open on Drupal.org →
Created on 2 June 2024, 26 days ago
Updated 4 June 2024, 24 days ago

Problem/Motivation

Currently the client site uses option list fields with the field formatter class → formatter. We need to add additional styles, and the amount of paragraph fields is starting to get a little hard to manage.

One thing that is good about the field formatter class is that you can add a prefix/suffix per instance. This means you can reuse fields (and their allowed options) across paragraph types but you can make the classes that are applied very specific.

The module.style_options.yml is going to get a little long and hard to read if we can't reuse some of the options list.

Proposed resolution

One thing yaml allows you to do is define an anchor and then reuse it. This could be pretty handy with option lists that are used for different styles. Given the following:

  spacing_bottom:
    plugin: css_class
    label: 'Spacing bottom'
    options: &spacing
      -
        label: None
        class: none
      -
        label: Tight
        class: tight
      -
        label: Normal
        class: normal
      -
        label: Large
        class: large
  spacing_top:
    plugin: css_class
    label: 'Spacing top'
    options: *spacing

This makes the yaml file much simpler, the only catch is that the actual class should be something like u-spacing-top-large, instead of just large.

This could be solved with something like:

  spacing_top:
    plugin: css_class
    label: 'Spacing top'
    options: *spacing
    class_prefix: 'u-spacing-top-'

Remaining tasks

  • The current ::build function in the CssClass is a little tiny bit confusing. We could simplify this so that it's clear that
  • $classes = $value; on the current line 76 is for if this style option is a textfield with user input.
  • Line 90 could then be moved up and only used for that exact case, as it's a little confusing to see if it's a select field with options.
  • This prefix/suffix could be a process that happens at the very end, after all the classes are in an array.

User interface changes

API changes

Additional options for:

  • class_suffix
  • class_prefix
✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇺🇸United States asherry

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

Comments & Activities

  • Issue created by @asherry
  • Comment 26 days ago →
    🇺🇸United States asherry
  • Comment 26 days ago →
    🇺🇸United States asherry
  • Assigned to asherry
  • Comment 25 days ago →
    🇺🇸United States asherry
  • Comment 24 days ago →
    🇦🇹Austria hudri Austria

    Given the popularity of TailwindCSS and other utility class approaches, I think prefix and suffix are not sufficent. Prefix and suffix will cover many use cases, but taking the Tailwind syntax as an example, I would propose using a full regex to cover the following common use-cases:

    Arbitrary values in Tailwind:
    [100px,200px,300px] ==> min-h-[100px] or min-h-[200px] min-h-[300px]
    Max or range breakpoints in Tailwind:
    [sm,md,lg] ==> max-sm:hidden or max-md:hidden or max-lg:hidden

    I've done something similar in my own custom style option plugin. Would love to see something similar in the module itself:

    /**
 * Defines the HTML attribute style option plugin.
 *
 * @code
 * my_example_style_option:
 *   plugin: html_attribute
 *   # Preprocess the value with PHP's preg_place before rendering. E.g. massage an number input field
 *   # to a Tailwind CSS class. In the following example an input "1700" will be rendered as "max-w-[1700px]".
 *   value_preg_replace:
 *     pattern: '/^(\d+)$/'
 *     replacement: 'max-w-[${0}px]'
 * @endcode
 *
 * @StyleOption(
 *   id = "html_attribute",
 *   label = @Translation("Html attribute")
 * )
 */
class HtmlAttribute extends StyleOptionPluginBase {

  /* ... */

  public function build(array $build, string $region_id = NULL) {

    /* ... */

    if ($preg_replace = $this->getConfiguration('value_preg_replace')) {
      $value = preg_replace($preg_replace['pattern'], $preg_replace['replacement'], $value, $preg_replace['limit'] ?? -1);
    }
    if (empty($value)) {
      $value = 'INVALID_PREG_REPLACE_SUBJECT';
    }

    /* ... */

  }
}

    Full code here:
    https://bitbucket.org/webtourismus/designsystem/src/master/src/Plugin/St...

contrib.social Blog FAQ Discussions
Production build 0.69.0 2024