Integrating Design Systems in Drupal

Today we are talking about The UI Suite Module, It's module eco-system, and what's new in the 2.0 release with guest Pierre Dureau. We'll also cover Field Formatter Range as our module of the week.

For show notes visit: https://www.talkingDrupal.com/511

• What is UI Suite?
• UI Suite 2.0: Major Updates and Features
• Introduction to UI Suite Recipes
• Challenges with Drupal Themes
• Site Templates and UI Suite
• Component Compatibility and Community Education
• Design System Modules and Best Practices
• Experience Builder and UI Suite Integration
• Modernizing Display Tools
• Introducing the Distributor Tool
• Future of UI Suite and Core Integration
• Getting Involved with UI Suite

• UI Suite
• [Meta] Make Drupal the first "design-system native" CMS + Unify & simplify render & theme systems
• sdc_devel
• Do's Don'ts For SDC
  • use all the props & slots in templates
  • use the automatically defined attributes property
  • do not define any props or slots that are unused
  • define in the YAML all the props & slots you use in templates
  • props schema must be understandable by the display builder: no empty objects, empty arrays, arrays of empty objects, bag of props…
  • Example Fix
• Display Builder
• Adopt UI Patterns 2 to prepare developers and users for Experience Builder
• Getting started

Pierre Dureau - drupal.org/project/ui_suite pdureau

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi JD Leonard - jdleonard

Martin Anderson-Clutz - mandclu.com mandclu

• Brief description:
  • Have you ever wanted to show only a subset of field values on your Drupal entity displays? There's a module for that.
• Module name/project name:
  • Field Formatter Range
• Brief history
  • How old: created in Jan 2024 by Florent Torregrosa (Grimreaper), but today's guest Pierre is also a maintainer
  • Versions available: 8.x-1.6
• Maintainership
  • Minimally maintained & Maintenance fixes only
  • Security coverage
  • NO open issues
• Usage stats:
  • 1,362 sites
• Module features and usage
  • Unlike some competing solutions, this module uses third party settings to work on virtually any formatter for a multivalued field
  • As part of the configuration, a site builder can specify the offset (where to start), the number of field values to show, and the order in which to show them.
  • The order can be standard or reverse, or it can list them in a random order
  • The module page gives the example of an entity with 15 images attached, and being able to show only the first 5. Or maybe only the 5 most recent?
  • I think if you combined this module with the Custom Field module module we talked about in episode #505, you could achieve some interesting things with simple configuration. For example, you could have an FAQ page and have the teaser for it show three random answers for it.