Problem/Motivation

It would be great to follow SDC in Core and have a group property which can simplify organizing patterns into groups.

Proposed resolution

  • Add new group property in UI Example definition
  • Ensure that inside ui-examples-overview-page.html.twig the group property can be accessed to allow the template to show grouping
Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

yannickoo created an issue. See original summary.

yannickoo’s picture

Status: Active » Needs review
yannickoo’s picture

MR is ready 🎉 I am using the following code in the ui-examples-overview-page.html.twig template.

{# Build grouped array #}
{% set grouped_examples = {} %}

{% for example in examples %}
  {% set group_name = example.group|default('Other') %}

  {% set current_group = grouped_examples[group_name]|default([]) %}

  {% set grouped_examples = grouped_examples|merge({
    (group_name): current_group|merge([example])
  }) %}
{% endfor %}


{# Sort keys alphabetically #}
{% set group_names = grouped_examples|keys|sort %}

{# Rebuild sorted array, skipping "Other" for now #}
{% set sorted_groups = {} %}

{% for name in group_names %}
  {% if name != 'Other' %}
    {% set sorted_groups = sorted_groups|merge({
      (name): grouped_examples[name]
    }) %}
  {% endif %}
{% endfor %}

{# Append "Other" at the end if it exists #}
{% if grouped_examples['Other'] is defined %}
  {% set sorted_groups = sorted_groups|merge({
    'Other': grouped_examples['Other']
  }) %}
{% endif %}

{% set grouped_examples = sorted_groups %}

{% for group_name, examples in grouped_examples %}
  <h2>{{ group_name }}</h2>

  {% for example in examples %}
    {{ example.label }}
    {{ example.description }}
  {% endfor %}
{% endfor %}
grimreaper’s picture

Assigned: Unassigned » grimreaper
grimreaper’s picture

Title: Implement "group" property to organize UI Examples better » Implement "category" property to organize UI Examples better
Assigned: grimreaper » Unassigned
Status: Needs review » Needs work
Issue tags: +Needs tests
Parent issue: » #3574277: Order UI examples with the same logic as the other UI Suite modules

Adding #3574277: Order UI examples with the same logic as the other UI Suite modules as parent issue. Let's sort then add categories.

Let's use category instead of group to have same behavior as the other UI suite modules and core/lib/Drupal/Core/Plugin/CategorizingPluginManagerTrait.php

Also please see https://git.drupalcode.org/project/ui_skins/-/blob/1.1.x/src/CssVariable...

Default controller and template from the module should be updated to reflect this new category property.

yannickoo’s picture

Assigned: Unassigned » yannickoo
yannickoo’s picture

Assigned: yannickoo » Unassigned
Status: Needs work » Needs review

This is ready for review again 🎉 In order to test this properly the requested ordering from #3574277: Order UI examples with the same logic as the other UI Suite modules lives in this MR as well now.

grimreaper’s picture

Assigned: Unassigned » grimreaper

Thanks!

grimreaper’s picture

Version: 1.x-dev » 2.x-dev
grimreaper’s picture

New major branch because of breaking change for themes overriding the ui examples page twig template.

grimreaper’s picture

Issue tags: -Needs tests

grimreaper’s picture

Assigned: grimreaper » Unassigned
Status: Needs review » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

grimreaper’s picture

Issue tags: +DevDaysAthens2026

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.