1 of 45

UI Suite monthly meeting

Tuesday 14 Mar. 2023

2 of 45

What the heck is UI Suite?

A cohesive but independent set of modules to implement full Design Systems while preserving and improving the Drupal site building experience.

3 of 45

Agenda

  1. UI Suite: shared subjects
  2. Modules:
    1. UI Patterns & its ecosystem
    2. UI Styles
    3. Layout Options
    4. UI Skins
    5. UI Examples
  3. Themes
  4. Community

4 of 45

UI Suite�(shared subjects)

5 of 45

💡 Add links to plugin definitions

#3336495 Like Categories, a shared subject.

It is already common to put URL in plugins descriptions:

blockquote:� label: "Blockquote"� description: "For quoting blocks of content from another source within your document. https://getbootstrap.com/docs/4.6/content/typography/#blockquotes"� fields: {}

How can we make this more useful? 2 proposals (which can be mixed):

  • Add a links property
  • Allow Markdown in description

Pending

6 of 45

💡 Move admin toolbar links

Issue: #3339666

In admin toolbar, do we move Patterns, Styles & Examples libraries links from “Reports” to “Appearance”?

Pending

7 of 45

UI Patterns

8 of 45

Welcome Sharique

/u/sharique

New maintainer of Display Suite sub module. Still waiting its access :)

2 missions:

  • Keeping the module afloat, fixing the incoming issues
  • Preparing its extraction from ui_patterns

9 of 45

Released since last meeting

XXXX

PIERRE

10 of 45

💡 Rethink patterns previews

Issue: #3336654

Proposal 1: previews variations�Add a new section in the YML definition called previews which would allow to set as many previews as we need.

Proposal 2: previews declarationsUse the unused types of the fields to provide them provide them an easy way to declare the preview values.

Proposal 3: previews usage�Add preview fields override & selecting a specific preview in pattern_preview() Twig function

Share your thoughts

11 of 45

Reviews & merge

https://www.drupal.org/project/ui_patterns/issues/3335833

12 of 45

Ecosystem consolidation

#3342949 Merge ui_patterns_views_style into ui_patterns_views

We need help for the hook_update and the unit test.

13 of 45

Do you know patterns have tags?

14 of 45

💡 UI Patterns 2.0

Issue: #3344518

Just brainstorming for now. We are not planning a compatibility break yet.

Don’t be afraid of proposing crazy stuff.

15 of 45

UI Patterns ecosystem

16 of 45

Released since last meeting

UI Patterns Entity Links 8.x-1.2 released 18 February 2023 �Better ui_patterns_settings compatibility

17 of 45

Security coverage

UI Patterns Blocks > No stable release yet

UI Patterns Pattern Block > No stable release yet

UI Patterns Entity Links > Not covered (pdureau)

UI Patterns Field Formatters > Covered

UI Patterns Flag > No stable release yet

UI Patterns Layout Builder > Covered

UI Patterns Views Style > Covered

UI Patterns Settings > Covered

UI Patterns Decoupled > No stable release yet

Component blocks > Covered

Component Schema > No stable release yet

Pending

18 of 45

D10 compatibility of the ecosystem

UI Patterns Blocks > Not compatible yet (nedjo)

UI Patterns Pattern Block > Not compatible yet (Christian.wiedemann)�UI Patterns Entity Links > CompatibleUI Patterns Field Formatters > Compatible

UI Patterns Flag > Not compatible yet (pdureau)

UI Patterns Layout Builder> Compatible

UI Patterns Views Style > Compatible

UI Patterns Decoupled > No release yet

UI Patterns Settings > Compatible

Component blocks > Compatible

Component Schema > Not compatible yet (nedjo

Pending

19 of 45

UI Styles

20 of 45

Released since last meeting

8.x-1.5 released 28 February 2023

Changes:

  • #3273646 by Grimreaper, pdureau, Sharique: CKEditor 5 integration

21 of 45

ui_styles_paragraphs

The first UI Styles ecosystem module :)

Generate Paragraph Behaviour plugin(s).

1.0.0-alpha1 released 13 March 2023

Demo next month?

22 of 45

UI Styles Views demo

By Florent

23 of 45

UI Styles Ckeditor5 demo

By Florent

24 of 45

Style options module

https://www.drupal.org/project/style_options

Created after UI Styles, inspired by Layout Options :) Plugins declared in YML file. So, follows the “UI Suite” philosophy. No library page.

Declaration: more complex so maybe more powerful (with context & plugin class override)�Integration with layouts plugin: a bit rigid�“Your layouts will need to reference the provided layout plugin, or a custom class that inherits from the provided layout plugin.”�Integration with paragraph types.

Maintainers not contacted yet. May be an inspiration for next UI Styles releases.

Pending

25 of 45

Centralized styles in theme

Layout builder

Views

Ckeditor5

Paragraphs

26 of 45

Layout Options

27 of 45

Next steps

#3335426 : Remove the use of layout.getRegionNames() method in templates�That may mean: One template per layout.

Layout Options is already very similar to UI Patterns:

  • Patterns Fields = Layout Regions
  • Patterns Settings = Layout Options

It will be even closer with this change. We didn’t merge it with UI Patterns until now because of [#3075939] Allow layouts to provide dynamic regions

Pending

28 of 45

UI Skins

29 of 45

The new module

Global CSS Variables

Themes

Page layout

WIP

TODO

TODO

30 of 45

Released since last meeting

31 of 45

Still in alpha and already rising 🚀

32 of 45

Next steps

#3335428 : Themes/Modes: plugin declaration proposal�Complicated subject :)

Pending

33 of 45

UI Examples

34 of 45

Released since last meeting

35 of 45

Next steps

We need to find a way to make those declaration simpler while still using the render API:

  • Shortcuts?
  • Optional “#” (like in ui_patterns previews?)

Pending

36 of 45

Next steps

We need to find a way to provide form examples:

  • PHP Plugins?

Currently in UI Suite Bootstrap: https://git.drupalcode.org/project/ui_suite_bootstrap/-/blob/5.0.x/doc/Forms.md

This will be better to have live examples.

Pending

37 of 45

Themes(Public implementations)

38 of 45

DSFR (French Gov)

1.0.0-beta1 released on 10 March:

  • Drupal 10 & PHP 8.1 compatibility
  • Remove hardcoded dependencies from pattern to pattern
  • Remove hardcoded markup from consent_banner pattern
  • Remove outdated "import _self as" tags
  • Remove useless dependencies to modules
  • Replace calls to /themes/contrib/ui_suite_dsfr/ by data URI in previews
  • Restore broken color management
  • Safe styles improvements
  • Update patterns & styles libraries templates
  • Fix compatibility with layout builder
  • Avoid manually injected HTML in footer component

Official announcement and call to contributors soon

39 of 45

Community

40 of 45

Drupal And Design Systems

diffy.website/blog/drupal-design-systems

Published on 7 March 2023

From Yuriy Gerasimov, which has an issue credit on UI Suite Bootstrap

41 of 45

Migration to d.o: Disable github issue

It is still possible to create issues: https://github.com/nuvoleweb/ui_patterns/issues �2 issues since the migration:

Thanks Michael which took care of it:

Is it possible to disable (read-only) without deleting? Currently checking with Antonio.

Pending

42 of 45

UI Suite as a community initiative?

The ones not driven by Dries.

/community-initiatives/proposing-initiatives :

  • 1. Inquire
  • 2. Research
  • 3. Propose
  • 4. Refine
  • 5a. Be patient
  • 5b. Be willing to do-it-yourself

Current community initiatives:

Past successful community initiative:

  • Workflow in Core
  • Views in Core
  • Layouts (SCOTCH)
  • Web Services Initiative (WSCCI)
  • WYSIWYG

Pending

43 of 45

We are looking for help

ui_styles:

  • Contact Florent (Grimreaper)

ui_patterns:

  • unit tests and hook update for ui_patterns_views. Contact Pierre (pdureau)

44 of 45

Slack channel

https://app.slack.com/client/T06GX3JTS/C03MFN4D40J

From 89 to 99 people! Still growing.

45 of 45

Report will be available here