Feedbacks about SDC components

Hi,

Following #3413215: SDC components: Fix JSON schema usage and our chat in DrupalCon Barcelona, here are some feedbacks about 6.0.0-rc6 release.

Unused variables: attributes

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 the templates of the following components:

• local-tasks
• page-navigation
• heading
• offcanvas
• page-footer
• page-title
• button
• region
• badge
• button-group
• page-content
• alert
• progress
• modal
• nav-item
• dropdown
• collapse
• views-view--unformatted
• list-group
• accordion
• navbar-brand
• spinner
• navbar
• carousel
• form-element
• close-button

Other unused variables

Every slot or prop from the component definition must be used in templates.

It is missing from the templates of the following components:

• page-navigation: branding, left, right
• html: doc_lang
• node: metadata
• taxonomy: content_attributes
• card: card_link_attributes
• dropdown-menu: nav_utility_classes, nav_link_utility_classes, alignment, style, fill
• nav: menus
• button-group: content
• page-content: page_content
• input: type, value
• textarea: table_utility_classes
• media: media_type, is_published
• breadcrumb: classes
• views-view: content
• views-view--table: accessibility_description, accessibility_summary
• views-view--grid: content
• nav-item: container, color, placement, navbar_expand
• views-view--unformatted: content
• carousel: show_carousel_indicator
• form-element: required

Unknown variables

Every slot or prop used in the template must be found in the component definition (except the ones automatically injected: attributes, componentMetadata...)

246 unknown variables are found in component templates. Examples:

• table component: striped, no_striping, empty, header_columns, table_utility_classes
• page-title component: title
• nav component: items
• ...

Overlaping between slots & props

For example, table:

props:
  type: object
  properties:
    caption:
      type: [string, 'null']
      title: Caption
    colgroups:
      type: array
      title: Column Group
    header:
      type: array
      title: Header
    rows:
      type: array
      title: Body Rows
    footer:
      type: [array, string, 'null']
      title: Footer
slots:
  table_caption:
    title: Table caption
  table_colgroup:
    title: Table title
  table_header:
    title: Table header
  table_body:
    title: Table body
  table_footer:
    title: Table footer

There is a global feeling of lack of confidence with the slot management, especially in the naming. For example, in card component, the "fake" props are prefixed by the component name, and the slots by "slot_" and the component name:

props:
  type: object
  properties:
    card_body:
      type: string
      title: Card Body
    card_footer:
      type: string
      title: Card Footer
slots:
  slot_card_body:
    title: Card Body
  slot_card_footer:
    title: Card Footer

What is the expected way of using slots & props? Why so much complexity?

Avoid link Twig function

In nav component:

{{ link(item.title, item.url, { 'class': nav_link_classes }) }}

There is a risk of a manipulation of Drupal\Core\Url object and/or routing resolution.

Any mechanism that may execute business logic, and/or stateful applicative API, and/or DB queries may be harmful. UI Components receive data, they don't request data.

Avoid render Twig function

Used in those components:

• taxonomy
• card
• page-title
• badge
• carousel

The more we can avoid "early rendering" render arrays into strings, regardless of the exact function doing the rendering, the better.

"Early rendering" introduces a few issues:

• Code is harder to read and write because you have to be mindful of and mentally track how arrays and render calls are interleaved
• It's harder for alters and other functions that want to process structured data to do their work on already-rendered strings than organized associative arrays. This is especially damaging for the efforts to make variables in Twig templates "drillable".
• Rendering elements can have "side effects" like introducing new javascript or CSS files into the page and this may not be appropriate if the early-rendered element ends up not being displayed in the page
• Early rendering elements also "flattens" their children too, meaning that we lose the structure of this element's children that may have been useful/important inside Twig templates that are the parent of this element

spaceless tag is obsolete

There are 55 occurrences of this remove twig tag in the components.

Related Core issue: #3094850: Remove usage of spaceless tag in Twig templates

Array of undefined values

{"type":"array"} is not enough to be understood and processed.

They are 23 of them in the component definitions.

Example, table component:

props:
  type: object
  properties:
    colgroups:
      type: array
      title: Column Group
    header:
      type: array
      title: Header
    rows:
      type: array
      title: Body Rows
    footer:
      type: [array, string, 'null']
      title: Footer

It may be related to the slots / props confusion.