Contrib.social

Umami Demo: review of the already merged SDC components

Open on Drupal.org →
Created on 16 January 2024, 8 months ago
Updated 28 March 2024, 5 months ago

Problem/Motivation

We are building UI Patterns → 2.x, based on SDC API, and we are using Umami Demo for testing our site building and contribution features (usage of SDC components in blocks, views, layouts, field formatters...).

Thanks to those tests, we have some feedbacks to share.

Proposed resolution

Add missing attributes objects in templates

Default attributes object is always injected in template and expected for alteration (adding contextual accessibility attributes, adding data for site building tools, style overrides of the component...)

Add missing slots or props

Every slot or prop from the component definition must be used in templates. Every slot or prop used in the template must be present in the component definition (except the mandatory default ones: attributes, componentMetadata...)

  • extra_classes is not defined in read-more . I would suggest to use the default attributes object instead.
  • label is defined but not used in footer-block.twig
  • label is not defined in title

Replace some string props by slots

When injected markup as value is not breaking the display, use a slot instead of a string prop. This will allow to inject render arrays and renderable objects, which can render plain strings or markups.

Avoid undefined object as prop

This is valid, but it is not possible to understand the expected data: {"type":"object"}

title_prefix & title_suffix in title

Proposal: they are slots, because they look like slots in the template:

{{ title_prefix }}
<{{ html_tag|default('h2') }}{{ attributes.addClass('umami-title') }}>
  {{ label }}
</{{ html_tag|default('h2') }}>
{{ title_suffix }}

Some other suggestions

Avoid path() function

path function (found in branding.twig ) must be avoided in components because it execute Drupal urlGenerator service. UI Components receive data, they don't request data. I would recommend to resolve the route before sending the URL to the component.

URL props instead of string

Some strings would be better defined as URL (relative or absolute, internationalized): 

{
  "type": "string",
  "format": "iri-reference"
}
  • site_logo in branding
  • url in read-more

API changes

Most suggestions are "safe", but some may break current usage of those components:

  • Removal of extra_classes in read-more
  • Removal of path() function in branding

Also bug presented in related recipes.

Field templated override label. So badge appear in related recipes. Fixed also here

📌 Task
Status

Fixed

Version

10.3 ✨

Component
Umami  →

Last updated 4 days ago

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024