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:
- list.component.yml
- list.css
- list.twig
Testing instructions
- Check lists in bottom of recipe page

| Comment | File | Size | Author |
|---|
Issue fork drupal-3390344
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
Comment #3
finnsky commentedComment #4
finnsky commentedComment #5
smustgrave commentedSame deal could this be an array vs needing a new template?
Comment #7
finnsky commentedRebased. Please review
Comment #8
smustgrave commentedRebase seems fine.
Comment #10
smustgrave commentedFor reviewing in MR.
Comment #11
lauriiihttps://git.drupalcode.org/project/drupal/-/merge_requests/4897#note_223056 needs FEFM review.
Comment #12
finnsky commentedThe 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
Comment #13
smustgrave commentedIs there an alternative we can use in that one thread? Issue seems to have stalled
Comment #15
finnsky commentedComment #16
finnsky commentedRebased, please review!
Comment #17
smustgrave commentedLeft 1 comment on the MR.
Comment #18
finnsky commentedI 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.
Comment #19
smustgrave commentedProbably would be a good follow up. Definitely not here.
Believe feedback has been addressed
Comment #20
smustgrave commentedAlso acknowledging the frontend manager tag and I’m not one of them. But been 2 years so still marking
Comment #21
godotislateThere 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.
Comment #22
finnsky commentedRebased, please review
Comment #23
finnsky commentedComment #24
smustgrave commentedLeft 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).
Comment #25
needs-review-queue-bot commentedThe 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.
Comment #26
finnsky commentedComment #27
finnsky commentedComment #28
smustgrave commentedFor the meta:enums based on other components in umami, then I think we are good to go here @finnsky
Comment #29
finnsky commentedComment #30
smustgrave commentedBelieve this one is good to go.
Comment #31
pdureau commentedHello,
Sorry to share this feedback that late 🙇♂️
itemsproperty definition seems incomplete. What is inside the array?Looking in the MR, the answer is: the data structure of items in
field.html.twig: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:
noUi: true: true property at the root of the definition to hide and forget the componentattributeshere because classes likefield__itemdon'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 belongsIn
field--node--field-ingredients--recipe--full.html.twig:In
list.component.yml:In
list.twig:Comment #32
finnsky commentedThis review may be a bit late.
But better late than never.
Thanks!
Let's try again!
Comment #33
finnsky commentedComment #34
pdureau commentedOh! 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.
Comment #35
needs-review-queue-bot commentedThe 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.