Add a new Twig component to create Action Menus

[javiereguiluz]

This is the first anonymous Twig Component that we added to the project. It's modeled after GitHub's ActionMenu component (https://primer.style/components/action-menu) and allows to create dropdowns.

Sadly, using this component means that we lost the {% block user_menu %}...{% endblock %} TWig block in the template. This is because I can't make it work with the new Twig component. If anybody knows how to keep that block, please tell me. Thanks!

---

Again, this was possible thanks to the excellent article written by @yceruto in https://dev.to/yceruto/bundling-your-symfony-ux-twig-components-4997

Just a quick comment for @yceruto. In this section: https://dev.to/yceruto/bundling-your-symfony-ux-twig-components-4997#bundling-uionly-components you propose to use this:

        $builder->prependExtensionConfig('twig', [
            'paths' => [
                'templates/bundles/AcmeBundle/' => null,
                dirname(__DIR__).'/templates/' => null,
            ],
        ]);

This didn't work for me because the application that installs the bundle might not have defined the templates/bundles/AcmeBundle/ dir. Maybe I'm doing something wrong ... but in any case, I updated it as follows:

        $bundleTemplatesOverrideDir = $builder->getParameter('kernel.project_dir').'/templates/bundles/EasyAdminBundle/';
        $builder->prependExtensionConfig('twig', [
            'paths' => is_dir($bundleTemplatesOverrideDir)
                ? [
                    'templates/bundles/EasyAdminBundle/' => null,
                    dirname(__DIR__).'/../templates/' => 'ea',
                ]
                : [
                    dirname(__DIR__).'/../templates/' => 'ea',
                ],
        ]);

[yceruto]

Hey Javier! just a heads-up: after symfony/ux#2019, anonymous components now have native bundle support. This might make the workaround mentioned in the article unnecessary. Let me know if there's anything else I can help with.

[javiereguiluz]

@yceruto thanks for your tip. I tried removing the config in prepend() but I see this error:

An exception has been thrown during the rendering of a template ("Unknown component 
"ea:ActionMenu:ActionList". And no matching anonymous component template was found.").

I think it's related to having defined ea as the prefix of EA components. Maybe it would work if I create the components in templates/components/ea/... instead of just templates/components/... I don't know if that would be a better practice. It might make overriding easier in apps, because right now you hae to use that ea/ dir when you override EA's components. MAybe having the ea/ dir explicitly in templates/components/ would be better 🤔

[yceruto]

Well, the default convention uses the Twig EasyAdmin namespace for EasyAdminBundle to discover any template. In this case, it should be <twig:EasyAdmin:ActionMenu:ActionList>, which should look into EasyAdminBundle/templates/components/ActionMenu/ActionList.html.twig directory.

Could you elaborate a bit more on why you want to create a new ea namespace?

[yceruto]

On the application side, if you want to override that component, you can create a new template at the following path:
<project_dir>/templates/components/EasyAdmin/ActionMenu/ActionList.html.twig

[javiereguiluz]

Could you elaborate a bit more on why you want to create a new ea namespace?

Becuase EasyAdmin is too long ... and error-prone because of the uppercase and lowercase mixing. We use ea in many places of the bundle, so using the components as <twig:ea:... /> feels natural. I'll explain in the docs that you have to create templates/components/ea/... dir and I thin kit will be fine 🙏

[yceruto]

In that case, adding an extra Twig namespace ea for EasyAdminBundle/templates/ dir during the prepending phase would be okay 👍

[yceruto]

By the way, in the description, you set 'templates/bundles/EasyAdminBundle/' => null, if you want it to be the overridden path, it should instead be 'templates/bundles/EasyAdminBundle/' => 'ea', right?