UI Suite Monthly #01 - Progress Update and Future Roadmap

The UI Suite Initiative held its first monthly meeting on October 11, 2022, bringing together developers and contributors to discuss the current state of the project and plan for future developments. This comprehensive session covered recent achievements, upcoming releases, and important architectural decisions that will shape the future of UI component development in Drupal.

Overall Summary

The UI Suite Initiative aims to implement full Design Systems in Drupal, expanding beyond the current offerings of components, solutions, layouts, and examples. The project's dual mission focuses on preserving and improving the developer building experience while creating implementation value without requiring PHP expertise.

The meeting highlighted significant progress made in September, including the anticipated UI Patterns release and improved compatibility with PHP 8.1 and Drupal 10. A major milestone was the development move to drupal.org, centralizing repository management, CI processes, and issue tracking. The team also discussed two complex technical subjects: the proposed UI Theme module for CSS variable management and the ongoing debate around type validation and field filtering in UI Patterns.

Key Topics Discussed

Recent Achievements and Releases

UI Patterns Updates: The team delivered the expected UI Patterns release in late September, featuring enhanced PHP 8.1 and Drupal 10 compatibility. Development has officially moved to drupal.org, streamlining the contribution process and issue management.

UI Patterns Settings Evolution: Version 2.0 beta was released with substantial new features, creating a significant gap between branch 1.x and 2.x. The module has become particularly valuable for Layout Builder configurations, offering numerous widgets for sidebar customization.

Design System Implementation: Two new themes were released in alpha - Protocol and Material - serving as crucial testing grounds for UI Suite modules. These implementations help validate use cases when working with existing design systems rather than custom client projects.

Proposed UI Theme Module

The team discussed creating a new module (tentatively called "UI Theme") to handle CSS variable management and theming capabilities. This module would address the need for runtime-changeable design tokens, similar to how Bootstrap allows primary color customization or Material Design supports theme variations.

Key features would include:

• YAML-based configuration for design tokens
• Runtime CSS variable modification
• Integration with existing design systems
• Support for accessibility themes (light/dark modes)
• UI for site builders to define theme settings

Type Validation and Field Architecture

A significant portion of the meeting focused on improving UI Patterns' data handling and validation. The team identified four distinct use cases:

1. Open Content Fields: Where any data type can be injected (markup, strings, integers, arrays)
2. Sequence/List Fields: For looping operations requiring array structures
3. Non-Markup Values: Strictly typed fields for attributes that cannot contain markup
4. Structured Data: Specific data structures like Drupal menu items

The discussion explored adopting React-like concepts of "props" and "slots" to better organize component data:

• Slots: Content areas that can accept various data types (equivalent to current fields)
• Props: Typed properties for configuration and structured data (similar to UI Patterns Settings)

Key Action Points

Immediate Tasks

1. Repository Management: Contact Antonio regarding GitHub repository access to implement read-only status and redirect users to drupal.org
2. Issue Migration: Move remaining GitHub issues to Drupal's issue queue for centralized tracking
3. Release Planning: Finalize UI Patterns 1.4 scope using the issue created by Michael that combines community wish lists
4. Documentation: Share presentation slides and video recording publicly

Development Priorities

1. UI Styles Integration: Expand compatibility beyond Layout Builder to include:
   • CKEditor 5 integration
   • Views integration (currently in testing)
   • General form integration for broader applicability
2. UI Theme Module Development: Begin specification and development of the CSS variable management system with YAML configuration support
3. Architecture Review: Consider props/slots implementation for better type safety and developer experience

Community Engagement

1. LinkedIn Group: Continue building the 55-member community for sharing updates and discussions
2. DrupalCon Planning: Prepare for the next summer event in France (first French DrupalCon since 2009)
3. Issue Discussion: Engage with community feedback on component definition formats and typing requirements

Upcoming Deadlines / Releases

The UI Suite Initiative continues to evolve as a comprehensive solution for design system implementation in Drupal. The team's focus on developer experience, community feedback, and architectural improvements positions the project well for broader adoption and continued innovation in the Drupal ecosystem.