Problem/Motivation

Single directory components (SDC) is a new way to theme Drupal. Instead of scattering related files around your theme, they're contained to one directory. The primary issue for SDC is at #3313520: Single directory components in core.

The Demo Umami team has decided that their theme can depend on an experimental module like SDC. This allows us to have the work in this ticket merged even when #3352256: [META] Move code from the experimental SDC module to core is not committed.

List component

As part of SDC's roadmap (see #3345922: Single Directory Components module roadmap: the path to beta and stable), we want to convert Umami components to use SDC. For this task I'm choosing the Name component, which includes markup, CSS, and JS.

This component is a good fit because we have at 2 lists and may have more.

This component involves the following Twig templates, CSS, JS, assets, and libraries:

  1. list.component.yml
  2. list.css
  3. list.twig

Testing instructions

  1. Check lists in bottom of recipe page

List component

Issue fork drupal-3390344

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

finnsky created an issue. See original summary.

finnsky’s picture

Status: Active » Needs review
finnsky’s picture

Issue summary: View changes
smustgrave’s picture

Status: Needs review » Needs work

Same deal could this be an array vs needing a new template?

Gauravvvv made their first commit to this issue’s fork.

finnsky’s picture

Status: Needs work » Needs review

Rebased. Please review

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Rebase seems fine.

smustgrave’s picture

For reviewing in MR.

lauriii’s picture

Status: Reviewed & tested by the community » Needs review
Issue tags: +Needs frontend framework manager review
finnsky’s picture

The main question here is:

Do we consider components exclusively as part of Drupal or are they just front components that implement SDC technology?
There can be many such implementations and SDC is just one of them, it seems to me.
The most important thing is that the component is simple and repeatable in this case with SDC and a simple css class.

Front components should be as flexible as possible in implementation technologies. In addition, we are still collecting best practices for using components in Drupal.
So it seems shortsighted to me to limit components to just SDC

smustgrave’s picture

Status: Needs review » Needs work

Is there an alternative we can use in that one thread? Issue seems to have stalled

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

finnsky’s picture

Status: Needs work » Needs review
finnsky’s picture

Rebased, please review!

smustgrave’s picture

Left 1 comment on the MR.

finnsky’s picture

I removed the function.
But by the way, it still exists in several other places in Umami code :)
Maybe we should create another ticket and remove them.

smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Probably would be a good follow up. Definitely not here.

Believe feedback has been addressed

smustgrave’s picture

Also acknowledging the frontend manager tag and I’m not one of them. But been 2 years so still marking

godotislate’s picture

Status: Reviewed & tested by the community » Needs work

There are conflicts for the performance tests, but perhaps resolving those can be put aside for a bit while frontend framework manager review is outstanding. But there's also a conflct in umami.theme, so NW for that.

finnsky’s picture

Rebased, please review

finnsky’s picture

Status: Needs work » Needs review
smustgrave’s picture

Left 1 comment on the MR. I'm going to mark and hope someone can get a frontend manager (I've posted a few times but everyone is busy).

needs-review-queue-bot’s picture

Status: Needs review » Needs work
StatusFileSize
new90 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

finnsky’s picture

Status: Needs work » Needs review
finnsky’s picture

smustgrave’s picture

Status: Needs review » Needs work

For the meta:enums based on other components in umami, then I think we are good to go here @finnsky

finnsky’s picture

Status: Needs work » Needs review
smustgrave’s picture

Status: Needs review » Reviewed & tested by the community

Believe this one is good to go.

pdureau’s picture

Status: Reviewed & tested by the community » Needs work

Hello,

Sorry to share this feedback that late 🙇‍♂️ items property definition seems incomplete. What is inside the array?

items:
  type: array

Looking in the MR, the answer is: the data structure of items in field.html.twig:

 * - items: List of all the field items. Each item contains:
 *   - attributes: List of HTML attributes for each item.
 *   - content: The field item's content.

It was already the case in #3365389: Convert tags to use single directory components, but we were OK because the component was not exposed to visual builders (like Canvas or Display Builder), so no expectation for schema "shape" matching related to UI forms and data retrieval from Drupal API.

So, 2 proposals for this MR:

  • the quick-win: just add a noUi: true: true property at the root of the definition to hide and forget the component
  • the "real" fix: I believe we don't need attributes here because classes like field__item don't belong to the markup of an UI component, so we can remove it and items become a list of renderable (because they are, they come from a field formatter) in a slot (where renderables belongs

In field--node--field-ingredients--recipe--full.html.twig:

  {% include "umami:list" with {
    items: items|map(item => item.content),
  } only %}

In list.component.yml:

slots:
 items:
   title: Item

In list.twig:

 {% set items = items and items is not sequence ? [items] : items %}
    {% for item in items %}
      <li class="'umami-list__item'">
        {{ item }}
      </li>
    {% endfor %}
finnsky’s picture

This review may be a bit late.
But better late than never.

Thanks!
Let's try again!

finnsky’s picture

Status: Needs work » Needs review
pdureau’s picture

Status: Needs review » Reviewed & tested by the community

Oh! You follow the the "real" fix instead of the quick-win 🥰

I didn't test the MR locally to check if it works technically ('but I guess you did it while doing the change) but the SDC part of the MR is OK for me now. Thanks a lot for your quick action.

needs-review-queue-bot’s picture

Status: Reviewed & tested by the community » Needs work
StatusFileSize
new90 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.