ui_patterns_settings

Introduction

UI Patterns Settings extends the functionality of UI Patterns.

For UI Patterns Settings 2.x for UI Patterns 1.x, the module provided additional support for managing props. This integration remains unchanged and continues to work as before.

For UI Patterns Settings 3.x for UI Patterns 2.x, the scope of UI Patterns Settings has been completely redefined. Prop management is now a core part of UI Patterns itself. Instead, this module introduces new sources and UI addons to extend flexibility and design options for the drupal eco system. In UI Patterns only sources which are relating to drupal core are included. Sources for the contrib space will land in UI Pattern Settings.

UI Patterns Settings 3.x for UI Patterns 2.x

New sources:

• Media and Media background
• Color
• Coloris
• UI Styles (experimental)

UI Patterns UI addons:

• Modify your Enums
• Icon support for Enums
• Fieldgroup support for UI Patterns UI

UI Patterns 1

Define settings inside your ui_patterns.yml to make your pattern configurable.
A setting can be a modifier, additional classes or attributes. You can also define a token setting, which makes it easy to configure a pattern with a Drupal field or pass a link URL to the pattern. No more hook_preprocess!

Layout Builder

Settings are useful in combination with UI Patterns Layout Builder. Each pattern can used as section and settings are very helpful to make the section more configurable

Sample Video:

https://www.youtube.com/watch?v=aDbZRgY7Xm8
Sample:

card:
  label: Card
  description: A card component.
  allow_variant_token: true
  allow_variant_expose: true
  settings:
    modifier:
      type: textfield
      label: Modifier
      description: Add modifier here
      allow_token: true
    url:
      type: token
      label: Url
      default_value: "[node:url]"
      expose_as_field: true
    select:
      type: select
      label: Select
      allow_expose: true
      options:
         key_1: Value 1
         key_2: Value 2
    attributes:
      type: attributes
      label: Attributes
    tabs:
      type: group
      label: Tabs
      group_type: horizontal_tabs
    tab:
      type: group
      label: Tab
      group_type: details
      group: tabs
    tab_element:
      type: textfield
      label: Textfield
      group: tab
    state_setting:
      states:
        visible:
         # Either a variant
          -
            variant: blue
        # Or another setting 
         -
            setting: select_config
            value: key2
    colorwidget:
      type: colorwidget
      label: Colorwidget  
      options:
         black:Black/#000000
        white:White/#ffffff
    coloriswidget:
      type: coloriswidget
      label: Coloriswidget  
      options:
         black:Black/#000000
        white:White/#ffffff
    media_library:
      type: media_library
      label: Media
      allowed_bundles:
        - image
      view_mode: teaser
      show_edit_button: true
      # OR
      # image_style: medium
      # OR 
      # responsive_image_style: resp_image
variants:
    product:
      label: Artwork
      settings:
        modifier: artwork
        attributes: "class=\"shadow-bottom\""
        media_library:
          definition:
            image_style: large
  fields:
    image:
      type: image
  configuration:
    config:
      config_key: config_value

.........

Let’s break this down:

States: (V2.1)

With states you can provide Form API states to Settings. As condition you can either provide a value of another setting or the variant name.

   my_setting:
      states:
        visible:
          -
            variant: blue
          -
            setting: select_config
            value: key2

ComplexSettingTypes: (V2.1)

TBD.

allow_token: true (V2)

With allow_token, you can allow token for any existing settings.

allow_expose: true (V2)

With allow_expose enabled you can expose this setting directly to a field storage.
The same works allow_variant_expose for variants.
After enabling, a drop-down with allowed settings appears during field generation if the field type matches to the settings type.

group (V2)

New setting type group. You can define every form element as container, fieldset, container as group_type. This works also with field_group form elements like horizontal_tabs. With the group key you can define your parent group.

checkbox => checkboxes

The checkbox setting type is renamed to checkboxes.

radios

New setting type radios.

colorwidget (V2)

New setting type colorwidget. Install colorwidget

coloriswidget (V2)

New setting type coloriswidget. Install coloriswidget

media library (V2)

New setting type media library. Install first: media_library_form_element

allow_variant_token

If you set allow_variant_token to true, a "Variant token" field appears under the variant select dropdown. You can specify a token (e.g. [node:field_variant:value]) to bind the variant selection to an entity field.

List of setting types

Each setting type is a plugin, so you can easily add your own settings type.
The following setting types are supported right now:

• textfield
• number
• attributes
• token
• checkbox
• checkboxes
• radio
• select
• url
• group
• media_library
• colorwidget
• coloriswidget

This module works with ui_patterns:1.1

Assign setting values to variants:

You can assign setting values to variants. So a variant is a configuration bundle. All settings with no value can still be configured under manage display or with Layout Builder.

You can also overwrite the setting configuration for each variant. Use `definition` key to adjust the setting definition.

Compatibilty

This works with all UI Patterns submodules and with ui_patterns_layout_builder

Great modules:

• Storybook for UI Patterns: Wingsuit
• Assign pattern to field: UI Patterns Field Formatters
• Use pattern as a block: Component blocks, version 1.2.0 or higher for UI Patterns Settings support
• UI Pattern layout builder