[Docs] Anonymous twig components #1058

mariecharles · 2023-08-18T11:40:55Z

Q	A
Bug fix?	no
New feature?	no
Tickets	none
License	MIT

Add documentation for the recently added support of anonymous twig components #802

WebMamba

Well done Marie 🎉😁

WebMamba · 2023-08-18T12:49:15Z

src/TwigComponent/doc/index.rst

+       <twig:Button label="Click Me!" />
+    </div>
+
+You can also define your component to allow overwriting attributes:


Since this PR #1041, this is not true anymore. Now if you defined props in your component {% props label %} the label is not available by the attributes object but only with {{ label }}. The attributes object contains only passed to the object without a defined props

But won't the code below still work after #1041?

primary is in {% props so it will NOT be inside attributes but we WILL have a primary varaible

Then, we use that primary variable (boolean) to set the class to the string primary or secondary.

It was more about the sentence do you think overwritting is the right word to use here, or should we have more detail ?

weaverryan

Look great - I had just noticed this was missing moments ago when I looked for the docs :)

weaverryan · 2023-08-18T16:43:16Z

src/TwigComponent/doc/index.rst

+       <twig:Button label="Click Me!" />
+    </div>
+
+You can also define your component to allow overwriting attributes:


But won't the code below still work after #1041?

primary is in {% props so it will NOT be inside attributes but we WILL have a primary varaible

Then, we use that primary variable (boolean) to set the class to the string primary or secondary.

weaverryan · 2023-08-18T16:45:31Z

src/TwigComponent/doc/index.rst

+-----------------------
+
+Sometimes, reusable elements do not require complex logic or injected service to render what it could be processed
+from one template itself. (e.g. retrieving a customized primary button that could take a different label).


How about:

Sometimes a component is simple enough that it doesn't have any complex logic or injected services. In this case, you can skip the class and only create the template. The component name is determined by the location of the template (see `Twig Template Namespaces`_):

weaverryan · 2023-08-18T16:46:44Z

src/TwigComponent/doc/index.rst

+        {% endblock %}
+    </button>
+
+Then use your component with ``:`` to navigate through the directories:


Suggested change

Then use your component with ``:`` to navigate through the directories:

Then use your component with ``:`` to navigate through sub-directories (if there are any):

weaverryan · 2023-08-18T16:48:49Z

src/TwigComponent/doc/index.rst

+       </twig:primary>
+    </div>
+
+Now let's pass props to your button by defining a ``{% props %}`` tag in its view.


I think we should first show passing a normal "attribute" and show how that works very normally (show the {{ attributes }} being printed in the template). Maybe a role attribute, for example.

Then we can show how you can, in addition to an attribute, pass a prop using {% props}.

weaverryan · 2023-08-23T15:36:08Z

Related PR is merged - the final tweaks on this are ready to be done :)

seb-jean · 2023-08-28T16:57:16Z

The closing tag is not good:

</twig:primary>

You should put:

</twig:Button:Primary>

weaverryan · 2023-08-29T13:52:39Z

src/TwigComponent/doc/index.rst

@@ -1046,6 +1046,108 @@ And in your component template you can access your embedded block
        {% block footer %}{% endblock %}
     </div>

+Anonymous TwigComponent


Anonymous Components

weaverryan · 2023-08-29T13:54:39Z

src/TwigComponent/doc/index.rst

+.. code-block:: html+twig
+
+    {# templates/components/Button/Primary.html.twig #}
+    <button class="primary">


It would be more flexible to immediately how attributes being used:

<button {{ attributes.defaults({ class: 'primary' }) }}>

We don't need to introduce the concept of attributes here, since it's not unique to anonymous components :)

weaverryan · 2023-08-29T13:55:22Z

src/TwigComponent/doc/index.rst

+        {% endblock %}
+    </button>
+
+Then pass any further data to your reusable "button" like so:


Like normal, you can pass extra attributes that will be rendered on the element:

weaverryan · 2023-08-29T14:02:47Z

src/TwigComponent/doc/index.rst

+    {# renders as: #}
+    <button role="button" class="foo">Click Me!</button>
+
+Now let's pass props to your "button" by defining a ``{% props %}`` tag in its view.


Let's reverse this section: show the usage first, then show the {% props syntax. Something like:

You can also pass a variable (prop) into your template:

<twig:Button role="button" icon="fa-plus" type="primary">Buy now!</twig:Button>

To tell the system that icon and type are props and not attributes, use the {% props tag at the top of your template:

{% props icon, type = 'primary' %} <button {{ attributes.defaults({ class: 'btn btn-'~type } }}> {% block content %}{% endblock %} {% if icon %} <span class="fa-solid fa-{{ icon }}"></span> {% endif %} </button>

I don't love the attributes.defaults() syntax, but it does make the components more flexible.

mariecharles · 2023-09-06T17:44:52Z

Thank you @weaverryan for your help

weaverryan · 2023-09-07T14:51:56Z

Gorgeous 😍 - great work Marie!

WebMamba approved these changes Aug 18, 2023

View reviewed changes

weaverryan reviewed Aug 18, 2023

View reviewed changes

mariecharles force-pushed the doc/anonymous_twig_component branch from b96bc03 to 255def9 Compare August 29, 2023 07:16

weaverryan reviewed Aug 29, 2023

View reviewed changes

mariecharles force-pushed the doc/anonymous_twig_component branch from 255def9 to 2e1ea5a Compare September 6, 2023 17:43

[Docs] Anonymous twig components

41f59f1

weaverryan force-pushed the doc/anonymous_twig_component branch from 2e1ea5a to 41f59f1 Compare September 7, 2023 14:51

weaverryan merged commit cc09617 into symfony:2.x Sep 7, 2023

	Then use your component with ``:`` to navigate through the directories:
	Then use your component with ``:`` to navigate through sub-directories (if there are any):

Uh oh!

[Docs] Anonymous twig components #1058

[Docs] Anonymous twig components #1058

Uh oh!

Conversation

mariecharles commented Aug 18, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

WebMamba left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weaverryan left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weaverryan commented Aug 23, 2023

Uh oh!

seb-jean commented Aug 28, 2023

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mariecharles commented Sep 6, 2023

Uh oh!

weaverryan commented Sep 7, 2023

Uh oh!

Uh oh!

mariecharles commented Aug 18, 2023 •

edited

Loading