UI Suite Monthly #03 - December 2022 Progress Update

The UI Suite Initiative represents our ambitious effort to bring comprehensive design system capabilities to Drupal through a collection of interconnected modules. As organizations increasingly adopt design systems to maintain consistency across digital properties, we recognize the critical need for robust tooling within content management systems. Our December 2022 meeting captured a pivotal moment for our project, occurring just as Drupal 10 was launching and as we introduced innovative features like dynamic CSS variable management.

Overall Summary

We held our third monthly meeting on December 13, 2022, discussing progress on our comprehensive set of Drupal modules designed to implement Design Systems. Our UI Suite consists of independent but interconnected modules that provide a unified experience for building design system components in Drupal. The meeting covered our upcoming Drupal 10 compatibility, module releases, new features like our UI Skins module for CSS variable management, and ongoing discussions about module organization and security coverage.

Key Topics Discussed

Drupal 10 Compatibility We announced that Drupal 10 would be released the following day (December 14, 2022), with the 9-to-10 upgrade being easier than the previous 8-to-9 transition. Several of our UI Suite modules are already prepared for compatibility, including some that our team members can update independently (FIFA, matter flag, settings decoupled) and others requiring coordination with external maintainers.

Module Releases and Updates

• We released UI Patterns beta 2 in early November with prefixes and history improvements
• Page Designer version 1.2 was released the previous week
• We have plans for UI Styles 1.3 release with Views integration and minor compatibility breaks in library Twig files
• We discussed moving to more frequent releases with fewer features rather than waiting for comprehensive updates

Security Coverage Initiative We discussed applying for security coverage for our modules as they mature and gain stable releases. This involves specific processes on drupal.org that require particular permissions and roles, with some complexity around maintainer access rights.

New Module: UI Skins A significant portion of our meeting focused on demonstrating UI Skins, our new module that integrates CSS variables (custom properties) with theme management. Our module allows dynamic color and styling changes through a configuration interface, demonstrated with Material Design integration. Our system maintains semantic color meanings while allowing visual customization.

Pattern Sorting Enhancement We reviewed a merge request for sorting our UI Patterns definitions alphabetically by label rather than machine name, improving user experience in pattern selection interfaces.

Layout Builder Integration We discussed ongoing issues with Layout Builder integration, noting that only a minority of our team members actively use Layout Builder, which sometimes delays bug discovery. We mentioned a bug fix for UI Styles in Layout Builder contexts as upcoming.

Key Action Points

1. Release Management: We will proceed with more frequent, incremental releases rather than waiting for complete feature sets
2. Security Coverage: We will apply for security coverage for our mature modules after Drupal 10 release
3. UI Skins Development: We will continue development of our CSS variables integration module with focus on Material Design and Bootstrap compatibility
4. Pattern Sorting: We will merge our alphabetical sorting improvement for pattern definitions
5. Layout Builder Support: We will address remaining Layout Builder integration issues and consider broader adoption patterns
6. Community Engagement: We will respond to inquiries about Single Directory Components and schedule follow-up meetings

Upcoming Deadlines / Releases

Our meeting demonstrated our project's momentum toward Drupal 10 compatibility while introducing innovative features like dynamic theming through CSS variables, positioning our UI Suite as a comprehensive solution for design system implementation in Drupal.