- Issue created by @pdureau
- 🇺🇸United States Kristen Pol Santa Cruz, CA, USA
Thanks! I'll see if someone can do this cleanup asap
Hello Kristen and demo_design_system team,
I am very happy to see you are working on this theme again, and I am excited to see your talk in Atlanta.
As a follow-up of 📌 Test UI Suite SDC validator for SDDS project Fixed , here are some feedbacks done with https://www.drupal.org/project/sdc_devel → which is still providing a drush command and a report page to audit SDC components.
Every slot or prop from the component definition must be used in templates.
$ vendor/bin/drush sdcv starshot_demo | grep "Unused variables:"
starshot_demo:starshot-cta Unused variables: attributes -
starshot_demo:starshot-case-study Unused variables: attributes -
starshot_demo:starshot-hero Unused variables: attributes -
starshot_demo:starshot-columns Unused variables: attributes -
starshot_demo:starshot-two-col Unused variables: attributes -
starshot_demo:starshot-grid Unused variables: attributes -
starshot_demo:starshot-four-col Unused variables: attributes -
starshot_demo:starshot-one-col Unused variables: attributes -
starshot_demo:starshot-three-col Unused variables: attributes -
starshot_demo:temp-contributors Unused variables: attributes -
starshot_demo:starshot-testimonial Unused variables: attributes -
starshot_demo:starshot-statistic-card Unused variables: attributes -
starshot_demo:starshot-slide-card Unused variables: attributes -
starshot_demo:starshot-slider Unused variables: attributes -
starshot_demo:starshot-testimonial-card Unused variables: attributes -
starshot_demo:starshot-icon-card Unused variables: attributes -
starshot_demo:starshot-image Unused variables: attributes -
starshot_demo:starshot-button Unused variables: attributes -
starshot_demo:starshot-header-panel Unused variables: attributes -
$ vendor/bin/drush sdcv civictheme | grep "Unused variables:"
civictheme:footer Unused variables: attributes
civictheme:skip-link Unused variables: attributes
civictheme:mobile-navigation Unused variables: attributes
civictheme:mobile-navigation-menu Unused variables: parent_key, key
civictheme:mobile-navigation-trigger Unused variables: attributes
civictheme:header Unused variables: attributes
civictheme:video-player Unused variables: url, oembed
civictheme:back-to-top Unused variables: attributes
civictheme:subject-card Unused variables: is_external
civictheme:tooltip Unused variables: symbol, text
Most of them are attributes. I know there are currently some philosophical talks about this, but the technical/operational relaity is clear: default attributes object is not always defined in the YAML, but always injected in template and expected because:
aria-*, role, alt...) through itlang attribute when needed|add_class() and |set_attribute() Twig filters rely on itThere is currently no replacement for this in Drupal, neither in the ThemeManager, not in the SDC API.
Every slot or prop used in the template must be found in the component definition (except the ones automatically injected: attributes, componentMetadata...)
$ vendor/bin/drush sdcv starshot_demo | grep "Unknown variable:"
starshot_demo:starshot-hero Unknown variable: `summary`.
starshot_demo:starshot-hero Unknown variable: `summary`.
starshot_demo:old-starshot-case-study Unknown variable: `content`.
starshot_demo:old-starshot-case-study Unknown variable: `data_panel`.
starshot_demo:old-starshot-case-study Unknown variable: `data_panel`.
starshot_demo:old-starshot-case-study Unknown variable: `data_panel`.
starshot_demo:old-starshot-case-study Unknown variable: `data_panel`.
starshot_demo:old-starshot-case-study Unknown variable: `data_panel`.
starshot_demo:starshot-columns Unknown variable: `gap`.
starshot_demo:starshot-columns Unknown variable: `gap`.
starshot_demo:starshot-columns Unknown variable: `vertical`.
starshot_demo:starshot-columns Unknown variable: `vertical`.
starshot_demo:starshot-columns Unknown variable: `horizontal`.
starshot_demo:starshot-columns Unknown variable: `horizontal`.
starshot_demo:starshot-columns Unknown variable: `direction`.
starshot_demo:starshot-columns Unknown variable: `direction`.
starshot_demo:starshot-columns Unknown variable: `wrap`.
starshot_demo:starshot-columns Unknown variable: `wrap`.
starshot_demo:starshot-grid Unknown variable: `col`.
starshot_demo:starshot-grid Unknown variable: `col`.
starshot_demo:starshot-grid Unknown variable: `col`.
starshot_demo:starshot-container Unknown variable: `gap`.
starshot_demo:starshot-container Unknown variable: `gap`.
starshot_demo:starshot-container Unknown variable: `gap`.
starshot_demo:starshot-container Unknown variable: `constrain`.
starshot_demo:old-starshot-data-panel Unknown variable: `panels`.
starshot_demo:old-starshot-data-panel Unknown variable: `link`.
starshot_demo:old-starshot-data-panel Unknown variable: `link`.
starshot_demo:old-starshot-data-panel Unknown variable: `link_theme`.
starshot_demo:old-starshot-data-panel Unknown variable: `link`.
starshot_demo:old-starshot-data-panel Unknown variable: `link`.
starshot_demo:old-starshot-data-panel Unknown variable: `display`.
starshot_demo:starshot-statistic-card Unknown variable: `align`.
starshot_demo:starshot-statistic-card Unknown variable: `align`.
starshot_demo:old-starshot-card Unknown variable: `tags`.
starshot_demo:old-starshot-card Unknown variable: `tags`.
starshot_demo:old-starshot-card Unknown variable: `link`.
starshot_demo:old-starshot-card Unknown variable: `link`.
starshot_demo:old-starshot-card Unknown variable: `link`.
starshot_demo:old-starshot-card Unknown variable: `link`.
starshot_demo:old-starshot-card Unknown variable: `link`.
starshot_demo:old-starshot-card Unknown variable: `link`.
starshot_demo:old-starshot-card Unknown variable: `link`.
starshot_demo:starshot-testimonial-card Error Unknown variable: `theme`.
starshot_demo:starshot-testimonial-card Error Unknown variable: `theme`.
starshot_demo:button Unknown variable: `is_dismissable`.
starshot_demo:starshot-button Unknown variable: `theme`.
starshot_demo:starshot-button Unknown variable: `theme`.
starshot_demo:starshot-button Unknown variable: `color_class`.
And 49 unknown variables in civitheme.
Empty objects or array are not enough to be understood by components users and processed by display builders ( UI Patterns 2 → , the upcoming Experience Builder...):
In starshot_demo, there is no such case 👍, but this logos prop in civictheme:logo may look loosely defined;
{"properties":{"breakpoint":{"type":"object"}},"type":"object"}
json-schema-definitions://experience_builder.module referencesThere is nothing wrong in using JSON Schema references to definitions belonging to experience_builder module. I am sure most of them will be useful for components authors.
But the two references currently used by starshot_demo are problematic:
image: already lengthy discussed in August,
here
📌
Introduce an example set of representative SDC components; transition from "component list" to "component tree"
Fixed
and
there
📌
Update XB's `image` SDC to comply with best practices, and document those best practices
Needs review
textarea: having a data structure which is named as a form widget instead of describing the expected data. In UI Suite world, we did the same mistake in 2019, naming our component prop types "textfield", "checkboxes"... it was looking like a "smart" idea at this time, but it was limiting and painful to overcome.experience_builder module is still in an early shape, many months away of being released, so maybe it is only for the upcoming Atlanta demo and those references will be removed/updated later.
|raw() Twig filterThis filter is used 32 times in starshot_demo and 199 time in civictheme
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 something else is must be fixed, maybe slots instead, maybe the component is not called properly.
Active
1.0
Feedback
Thanks! I'll see if someone can do this cleanup asap