Contrib.social

[1.x] Allow multiple previews for each pattern

Open on Drupal.org →
Created on 27 July 2023, over 1 year ago
Updated 27 February 2024, 9 months ago

Problem/Motivation

But I'm working with current version 1.7 and I have this specific need with a pattern referencing an image, and two variants.
In the first variant, I'm expecting the full image rendered from drupal with theme image.
In the second, I'm just expecting the URI of the image to set as a background.

So I have this need to define a different preview for a variant which I'm working on.

<!--break-->

I'm aware of following existing issues, for incomming 2.x version.

https://www.drupal.org/project/ui_patterns/issues/3336654 🌱 [2.0.x] Update ui_patterns_library and rethink patterns previews Active
https://www.drupal.org/project/ui_patterns/issues/3353289 📌 [2.0.x] Move pattern_preview render element to ui_patterns_library Needs review
https://www.drupal.org/project/ui_patterns/issues/3360373 📌 [2.0.0-alpha2] Allow multiple previews for each pattern Needs work

Proposed resolution

Let's imagine this pattern

header:
  label: Header
  variants:
    rounded:
      label: Rounded
    color-1:
      label: Color 1
    color-2:
      label: Color 2
  fields:
    title:
      type: text
      label: Title
      preview: Hello, world!
    image:
      type: image
      label: Image
      preview: "//placehold.co/600x400"

I want a specific preview for the image field in rounded variant, and for demonstration purpose, I'll change the preview title too.

header:
  label: Header
  variants:
    rounded:
      label: Rounded
      preview:
        title: Hello, rounded!
        image:
            theme: image
            uri: "//placehold.co/200x200"
    color-1:
      label: Color 1
    color-2:
      label: Color 2
  fields:
    title:
      type: text
      label: Title
      preview: Hello, world!
    image:
      type: image
      label: Image
      preview: "//placehold.co/600x400"

Remaining tasks

Review and discuss

Data model changes

I added a preview attributes to PatternDefinitionVariant

  protected $definition = [
    'name' => NULL,
    'label' => NULL,
    'description' => NULL,
    'use' => NULL,
+    'preview' => NULL,
  ];
✨ Feature request
Status

Closed: outdated

Version

1.0

Component

UI Patterns Library

Created by

🇫🇷France Guillaume Aveline

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

Comments & Activities

  • Issue created by @Guillaume Aveline
  • Open in Jenkins → Open on Drupal.org →
    Core: 10.0.7 + Environment: PHP 8.1 & MySQL 5.7
    last update over 1 year ago
    85 pass
  • @guillaume-aveline opened merge request.
  • Comment over 1 year ago →
    🇫🇷France Guillaume Aveline

    I added tests for this issue, but the function public static function processFields(array $element) is not tested.

    And I don't know how to create test for it.

  • Comment over 1 year ago →
    🇫🇷France Guillaume Aveline
  • Status changed to Postponed: needs info about 1 year ago
  • Comment about 1 year ago →
    🇫🇷France pdureau Paris

    Hi Guillaume,

    Thanks for your proposal.

    Currently, previews are at fields and settings level, so:

    • only one preview per component (the merge of each field and setting previews)
    • same preview values for all variants

    As you already know, we have a few issues to move previews out of fields and settings, to the component level, so:

    • many previews per component (we all agree about that)
    • some previews can be specific to some variants, many previews per variant (we are still discussing about that)

    AFAIK your proposal is a bit different, adding previews at the variant level, so:

    • only one preview per component (the merge of each field and setting previews)
    • some variants can have their own previews, only one preview per variant

    Describing the YAML structure with JSON path, you are proposing /variants/0/previews instead of /previews/0/variants, but I am afraid it will be a more restricted solution.

    Is my understanding right?

  • Comment 10 months ago →
    🇫🇷France pdureau Paris
  • Status changed to Closed: outdated 9 months ago
  • Comment 9 months ago →
    🇫🇷France pdureau Paris

    The UI Patterns 2.x solution looks good enough

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024