Feedbackks about SDC implementation

Created on 25 September 2024, 4 months ago

Here is a few feedbacks I got using the component validator of UI Patterns 2.

I hope it would be useful.

Missing attribute variable

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...)

It is missing from:

Other missing variables (from definition or from template)

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...)

Declared in definition or in template but not used:

  • alert component: display
  • navs component: key
  • toasts component: content, image, meta, prefix, title

Used but not declared:

  • alert component: title_ids
  • menu component: alignment
  • modal component: modal, title
  • breadcrumb component: breadcrumb_divider
  • pills component: alignment, classes, id
  • tabs component: classes, id
  • figure component: caption_alignment

Unexpected raw Twig filter

Twig templates escape special characters to prevent potential hacking. Twig raw puts out the data without escaping it, meaning that if it is user-supplied data, it's insecure and could be used for hacking.

With Drupal Render API, there is no reason to use this filter.

It may be the signal some props must be slots instead.

  • pills component: it seems a pill component is missing to replace items
  • tabs component: it seems a tab component is missing to replace items
  • accordion component: it seems a accordion_item component is missing to replace items

Incorrect JSON schema

In pills, dropdown and many others components, item must be items:

      type: array
      title: Items
      item: >> items
        type: object

https://json-schema.org/understanding-json-schema/reference/array#items

Avoid PHP namespaces in JSON schema

Using Drupal\Core\Menu\MenuLinkInterface is "tolerated" by SDC because the validation is skipped, but its is not a good practice because invalid in JSON schema. It is better to avoid this Drupalism and replace this by a proper schema definition:

📌 Task
Status

Active

Version

5.0

Component

Code

Created by

🇫🇷France pdureau Paris

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

Comments & Activities

  • Issue created by @pdureau
  • 🇫🇷France pdureau Paris

    Another issue.

    Overlaping between slots & props

    For example, card:

    props:
      type: object
      properties:
        card_img_top:
          type: string
        card_header:
          type: string
        card_body:
          type: string
        card_footer:
          type: string
    slots:
      card_img_top_block:
        title: Image
      card_header_block:
        title: Card Header
      card_body_block:
        title: Card Body
      card_footer_block:
        title: Card Footer
    

    In the template, we have this weird structure:

      {% if card_header or block('card_header_block') %}
        <div class="card-header">
          {% block card_header_block %}
            {{ card_header }}
          {% endblock %}
        </div>
      {% endif %}
    

    Where something like that must be enough:

      {% if card_header %}
        <div class="card-header">
            {{ card_header }}
        </div>
      {% endif %}
    

    There is a global feeling of lack of confidence with the slot management, because of the duplication between props & slots, but also because of the naming: why prefixing props and slots by the component name, and suffixing the slots by "_block"?

Production build 0.71.5 2024