UI Suite Monthly #26 - Building the Future of Drupal Design Systems

Author
G4MBINI
Tags
drupal-planet
Monthly meeting
Reading time
3min
Comments

Overall Summary

Our latest monthly meeting showcased the incredible momentum we're building across the UI Suite ecosystem. With 18-20 participants from both sides of the Atlantic, we celebrated Jean's promotion to core maintainer for SDC and Icon APIs while diving deep into groundbreaking developments that are reshaping how we approach design systems in Drupal.

The session highlighted two years and a half of consistent progress, featuring live demonstrations of revolutionary tools like UI Patterns UI for simplified component management, UI Patterns Field for content entity integration, and our ambitious new Display Builder that promises to transform how we create layouts. From experimental form API integrations to major theme releases reaching beta status, we're seeing our vision of a unified design system approach becoming reality.

Most significantly, we're witnessing the convergence of multiple initiatives—UI Patterns 2, core API integration, and innovative display building tools—creating a comprehensive ecosystem that bridges the gap between powerful developer tools and intuitive content editor experiences.

Key Topics Discussed

UI Patterns 2 Evolution and New Modules

Our core module continues advancing with two major experimental submodules making waves. UI Patterns UI emerged as a game-changer for component form management, allowing site builders to create simplified, customized interfaces for content contributors. Christian's live demo showed how we can transform complex component configurations into streamlined forms with field groups, custom widgets, and precisely controlled property exposure.

The second breakthrough comes through UI Patterns Field, which unlocks entirely new use cases by storing UI Patterns data directly in content entities. This innovation eliminates the traditional need for separate paragraph types or block types that merely mirror component structures—instead, we can embed component functionality directly into content through field storage, widgets, and formatters. The implications are profound: no more maintaining dual models, no more complex mapping between content types and components.

Core Integration Progress and Form API Innovation

Our relationship with Drupal core continues strengthening as we work to move pattern overrides back into core implementation. During the Atlanta conclusion day, we advanced two critical issues: component variants for SDC and attribute property processing. The shared references issue also gained new momentum through expert builder needs, creating mutual benefits for both projects.

Perhaps most exciting is Florent's experimental work on Form API integration, presented at Drupal Dev Days. We're exploring ways to integrate components directly into form systems, potentially allowing components to serve as form elements themselves. This could revolutionize form building by enabling front-end developers to create and manage form elements through SDC APIs while maintaining form state through special component variables.

Display Builder: Our Vision Realized

Jean's demonstration of our new Display Builder represents a paradigm shift in how we approach layout building. Unlike traditional tools that convert design system plugins to display builder plugins, our approach leverages design system plugins directly, eliminating conversion steps and maintaining system integrity.

The builder features a minimalist JavaScript architecture using Drupal core libraries and web components for isolation. Key capabilities include drag-and-drop functionality, component libraries with live previews, preset sharing across different builders, and integration with both UI Icons and UI Styles. The tree-based interface provides clear visualization of nested structures while supporting unlimited nesting complexity—a significant advancement over current layout building limitations.

Theme Ecosystem Achievements

Our theme ecosystem continues flourishing with multiple projects reaching significant milestones. Bootstrap 5 achieved beta status (1.1.0 beta 5) and expects release candidates soon, while DES (French government design system) approaches its 1.1.0 release after addressing form-related issues. The UI Suite Bootstrap project expanded its team and developed a comprehensive starter kit featuring npm build processes and custom icon sets, positioning it as both a production tool and experimental playground.

Key Action Points

Documentation and Community Engagement

We must prioritize comprehensive documentation for UI Patterns developers—our team members, not end users. While user documentation exists and SDC documentation nears completion, developer resources remain gaps we'll address within weeks. Our recent presentations at DrupalCon Atlanta, Drupal Dev Days, and various interviews are generating community interest, but we need sustained educational content to support adoption.

Release Planning and Timeline Management

Our spring 2.1 release approaches with UI Patterns UI submodule, UI Patterns Field submodule, configuration migration from Patterns 1. The late summer 2.2 release will bring library improvements, new data sources for Drupal API integration, and potentially our build widget functionality. Each theme project maintains its own release schedule, but we're coordinating major announcements and compatibility updates.

Technical Integration Challenges

Several critical integrations require immediate attention. The Form API work demands careful coordination with core development timelines—we cannot merge experimental features until core foundations stabilize. Our Display Builder needs continued usability testing and interface refinement before public alpha release. The UI Styles and UI Skins potential merger discussions continue, focusing on better end-to-end style and CSS variable support.

Community Building and Recognition

We're addressing the disconnect between our ecosystem's impact and traditional metrics like drupal.org download numbers. Many projects don't activate update modules, skewing statistics, while our influence appears more clearly through presentations, interviews, and community discussions. We're investing in events like Dev Days, DrupalCon France, and Vienna Drupal to build awareness and gather feedback from broader audiences.

Upcoming Deadlines / Releases

ProjectVersionTimelineKey Features
UI Patterns2.1Spring 2025UI Patterns UI submodule, UI Patterns Field module, Pattern 1 config migration
UI Patterns2.2Late Summer 2025Library improvements, new data sources, build widget
UI Suite Bootstrap 51.1.0 RCComing weeksLayout builder reorder support, bug fixes
UI Suite DSFR (French Gov)1.1.0June 2025Design system v1.13 support, CKEditor integration
UI Suite BootstrapAlpha 2SoonNew starter kit, npm build process, experimental features
UI Suite BootstrapBeta 1When form components readyForm API integration support
Display BuilderPublic AlphaSummer 2025Multi-target support, preset system, full-screen editing

Event Schedule

  • Dev Days (Next week): Flor presenting Form API integration
  • Drupal Camp France (June): Bar camp format, French and Catalan sessions
  • Vienna Drupal (October): Submission deadline April 28th, full UI Suite team attendance planned