Hi,
Following
🐛
SDC components: Fix JSON schema usage
Fixed
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:
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:
📌
Remove usage of spaceless tag in Twig templates
Closed: outdated
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.