Problem/Motivation

As discussed in #3336654: [2.0.x] Update ui_patterns_library and rethink patterns previews we'd like to allow themers to define as many previews as they like for their patterns.

Proposed resolution

  • Declare previews in a separate section of the pattern.yml file OR even in a separate file.
  • Each preview has a machine name
  • Each preview can have a label (fallback to machine name either way)
  • Each preview can define the variant it uses (if empty, loop on each variants)
  • Each preview can set slots and props (if empty, let it be)

Issue fork ui_patterns-3360373

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

DuaelFr created an issue. See original summary.

pdureau’s picture

pdureau commented
Status: Active » Needs work

Done according to the specifications: https://docs.google.com/document/d/1-GaMK1Qk-h0hmB7GtAcnqPTuCOGMaxeRguop...

The separate section in the file is called "stories".

Each preview can have a label (fallback to machine name either way)

I am not sure the fallback to machine name was implemented.

Each preview can define the variant it uses (if empty, loop on each variants)

Not implemented yet.

pdureau’s picture

pdureau commented
Assigned: Unassigned » duaelfr
pdureau’s picture

pdureau commented
Title: [2.0.x] Allow multiple previews for each pattern » [2.0.x-alpha2] Allow multiple previews for each pattern
pdureau’s picture

pdureau commented
Title: [2.0.x-alpha2] Allow multiple previews for each pattern » [2.0.0-alpha2] Allow multiple previews for each pattern
sharique’s picture

sharique commented

For creating multiple previews of pattern, I think best approach is to create examples page using https://www.drupal.org/project/ui_examples or create story using storybooks.

pdureau’s picture

pdureau commented
Title: [2.0.0-alpha2] Allow multiple previews for each pattern » [2.0.0-alpha3] Allow multiple previews for each pattern
grimreaper’s picture

grimreaper
Primary language French
Location France 🇫🇷
commented

Hi,

Not sure if this is the correct issue to post that.

I think it would be nice to have a mechanism which allows a module or theme to add stories to an existing component without having to redeclare the component.

pdureau’s picture

pdureau commented
Assigned: duaelfr » pdureau
pdureau’s picture

pdureau commented
Each preview can have a label (fallback to machine name either way)

TODO, but wr may need the plugin manage expected for #3414774: JSON schema examples property

Each preview can define the variant it uses (if empty, loop on each variants)

already done.

I think it would be nice to have a mechanism which allows a module or theme to add stories to an existing component without having to redeclare the component.

Moved to dedicated issue: #3455354: [2.0.0-beta4] Add a stories specific discovery

pdureau’s picture

pdureau commented
Title: [2.0.0-alpha3] Allow multiple previews for each pattern » [2.0.0-beta1] Allow multiple previews for each pattern
Assigned: pdureau » Unassigned
Status: Needs work » Postponed

Moved to beta1 because of all the current work on #3438360: Use Drupal entities & plugins for the Library pages which is totally reorganizing the codebase.

Once #3438360: Use Drupal entities & plugins for the Library pages is done, let's recheck everything expected by this ticket.

pdureau’s picture

pdureau commented
Assigned: Unassigned » pdureau
greenskin’s picture

greenskin commented

It would be fantastic to work with UI Patterns Settings so settings can be exposed on previews and users can preview them in real-time.

g4mbini’s picture

g4mbini
Primary language French
Location Ruvo di Puglia (BA)
commented

+1 regarding #13 , like in Storybook @pdureau 😅

pdureau’s picture

pdureau commented
Assigned: pdureau » Unassigned
Status: Postponed » Fixed

We already have a ticket for that: #3347990: [2.2.0] UI Patterns Library: add some interactions

pdureau’s picture

pdureau commented
Status: Fixed » Postponed
pdureau’s picture

pdureau commented
Assigned: Unassigned » pdureau
pdureau’s picture

pdureau commented
Title: [2.0.0-beta1] Allow multiple previews for each pattern » [2.0.0-beta2] Allow multiple previews for each pattern
pdureau’s picture

pdureau commented

Following #3444822: [2.0.0-alpha3] Add allow_variant_expose source plugin, "variant" is now visible in the prop list. Remove it.

pdureau’s picture

pdureau commented
Assigned: pdureau » Unassigned
Status: Postponed » Fixed

"variant" removed in an other ticket

pdureau’s picture

pdureau commented
Status: Fixed » Closed (fixed)