UI Suite Monthly #02 - Progress Updates and New Module Introduction

The UI Suite Initiative held its second monthly meeting on November 8, 2022, bringing together contributors to discuss ongoing developments, introduce new modules, and address key technical challenges facing the Drupal component ecosystem.

Overall Summary

This meeting served as a comprehensive update on the UI Suite ecosystem's evolution, covering everything from administrative changes to new module introductions. The team addressed the migration from GitHub to Drupal.org's issue queue, discussed code consolidation strategies, and introduced important terminology clarifications around "slots" and "props" borrowed from Vue.js concepts.

A significant portion of the meeting focused on introducing UI Skins, the fifth module in the UI Suite family, designed to handle global CSS variables and theme settings. The session concluded with a practical demonstration of the Material Design implementation using the new UI Skins module, showcasing real-time color and layout adjustments through a configuration interface.

Key Topics Discussed

Issue Queue Migration and GitHub Status

The team confirmed the successful migration to Drupal.org's issue queue while noting that GitHub issue creation remains technically possible. The last GitHub issue was created on September 15, before the UI Patterns 1.3 release. Contributors are working to find ways to disable GitHub issue creation without deleting existing issues.

Code Consolidation Strategy

The ongoing discussion about consolidating the five UI Pattern modules continues. Current modules include the core library plus two modules related to Core API and two for contributed APIs. The team is considering whether to move contributed modules out of UI Patterns or bring certain contributed modules into the main project, with input needed from Antonio and Fabian.

Slots vs Props Terminology

The team formalized vocabulary borrowed from Vue.js to distinguish between two types of component data:

• Slots: Free renderable content (strings, elements, or renderable objects) that can be thrown into templates
• Props: Rigid types with specific value requirements (booleans, URLs, specific values)

This distinction helps clarify component architecture and data constraints, with the proposal to use "fields" for slots and "settings" for props in UI Patterns.

UI Styles Type Options Module Discovery

The team discovered a competing module called "Type Options" that shares similarities with UI Styles. Created around the same time, it follows UI Styles philosophy by declaring everything in YAML files and generating plugins. The module offers two integrations: one with Layered Plugin and another with Paragraph types. The team plans to contact the maintainers to explore potential collaboration or merging.

Introduction of UI Skins Module

The meeting's major announcement was UI Skins, the fifth module in the UI Suite ecosystem. This module implements three key features:

• Global CSS Variables: CSS properties that enable theme-wide customization
• Theme Settings Integration: Allows front-end developers to edit YAML files instead of custom PHP code
• Design System Support: Enables features like dark mode, light mode, and other theme variations

Documentation Migration Discussion

The team debated moving documentation from GitHub Pages to Drupal.org's documentation system. This would allow broader community participation in documentation maintenance and ensure consistency across the ecosystem. The current documentation consists of approximately eight pages that would need to be converted from RST format.

Library Sorting Standards

A discussion arose about standardizing how patterns and styles are sorted in libraries. The team decided to sort by labels (visible to users) rather than machine names, making the interface more user-friendly for site builders and clients who interact with the pattern libraries.

Key Action Points

1. Scope Lock for UI Patterns 1.4: Finalize the scope and stop adding new features to ensure release progression
2. GitHub Issue Migration: Contributors wanting specific GitHub issues addressed must create corresponding Drupal.org issues and migrate their merge requests
3. UI Skins Testing: Expand testing beyond Material Design to include additional themes, with Bootstrap 5 presenting particular challenges due to CSS variable complexity
4. Documentation Migration: Convert eight pages of documentation from GitHub to Drupal.org format
5. Type Options Module Outreach: Contact the Type Options module maintainers to explore collaboration opportunities
6. Monthly Meeting Structure: Implement a formal issue queue for meeting preparation and reporting
7. Terminology Standardization: Begin implementing the slots/props (fields/settings) terminology across UI Bootstrap and other implementations

Upcoming Deadlines / Releases

The meeting demonstrated the UI Suite Initiative's continued momentum, with active development across multiple modules and a clear roadmap for upcoming releases. The introduction of UI Skins represents a significant step forward in providing comprehensive theming capabilities for Drupal component-based architectures.