[Site] Updating LiveComponents on site for 2.16 BC breaks

weaverryan · Feb 29, 2024 · 264c442 · 264c442
1 parent f5a2ae3
commit 264c442
Show file tree

Hide file tree

Showing 11 changed files with 44 additions and 23 deletions.
diff --git a/ux.symfony.com/templates/components/FoodVote.html.twig b/ux.symfony.com/templates/components/FoodVote.html.twig
@@ -13,15 +13,17 @@
                 type="button"
                 class="btn btn-secondary"
                 data-action="live#action"
-                data-action-name="vote(direction=up)"
+                data-live-action-param="vote"
+                data-live-direction-param="up"
             >
                 <twig:Icon name="arrow-up" />
             </button>
             <button
                 type="button"
                 class="btn btn-secondary"
                 data-action="live#action"
-                data-action-name="vote(direction=down)"
+                data-live-action-param="vote"
+                data-live-direction-param="down"
             >
                 <twig:Icon name="arrow-down" />
             </button>

diff --git a/ux.symfony.com/templates/components/InlineEditFood.html.twig b/ux.symfony.com/templates/components/InlineEditFood.html.twig
@@ -22,8 +22,8 @@
                     </div>
 
                     <button
-                        data-action="live#action"
-                        data-action-name="prevent|save"
+                        data-action="live#action:prevent"
+                        data-live-action-param="save"
                         class="btn btn-outline btn-outline-{{ error ? 'danger' : 'secondary' }}"
                     >Save</button>
 
@@ -37,7 +37,7 @@
             <h2>{{ food.name }}</h2>
             <button
                 data-action="live#action"
-                data-action-name="activateEditing"
+                data-live-action-param="activateEditing"
                 class="btn btn-link"
                 title="Click to edit!"
             >

diff --git a/ux.symfony.com/templates/components/InvoiceCreator.html.twig b/ux.symfony.com/templates/components/InvoiceCreator.html.twig
@@ -1,5 +1,5 @@
 <div {{ attributes }}>
-    <form data-action="live#action" data-action-name="prevent|saveInvoice">
+    <form data-action="live#action:prevent" data-live-action-param="saveInvoice">
         <div class="mb-3">
             <label for="customer-name">Customer name:</label>
             <input
@@ -56,7 +56,7 @@
 
                 <button
                     data-action="live#action"
-                    data-action-name="addLineItem"
+                    data-live-action-param="addLineItem"
                     class="btn btn-sm btn-secondary"
                     type="button"
                 ><twig:Icon name="plus" /> Add Item</button>

diff --git a/ux.symfony.com/templates/components/InvoiceCreatorLineItem.html.twig b/ux.symfony.com/templates/components/InvoiceCreatorLineItem.html.twig
@@ -50,26 +50,27 @@
             {{ quantity }}
         {% endif %}
     </td>
-    <td class="text-end">
+    <td class="text-end text-nowrap">
         {% if isEditing %}
             <button
                 data-action="live#action"
-                data-action-name="save"
+                data-live-action-param="save"
                 class="btn btn-success btn-sm"
                 type="button"
             >Save</button>
         {% else %}
             <button
                 data-action="live#action"
-                data-action-name="edit"
+                data-live-action-param="edit"
                 class="btn btn-primary btn-sm"
                 type="button"
             >Edit</button>
         {% endif %}
 
         <button
             data-action="live#emitUp"
-            data-event="removeLineItem(key={{ key }})"
+            data-live-event-param="removeLineItem"
+            data-live-key-param="{{ key }}"
             class="btn btn-link text-danger btn-sm ml-2"
             type="button"
         ><twig:Icon name="cross" /></button>

diff --git a/ux.symfony.com/templates/components/LiveMemory/Board.html.twig b/ux.symfony.com/templates/components/LiveMemory/Board.html.twig
@@ -40,7 +40,12 @@
     {% if app.debug %}
         <div class="LiveMemory-Debug">
             {% for i in 1..4 %}
-                <button type="button" data-action="live#action" data-action-name="play(level={{ i }})">
+                <button
+                    type="button"
+                    data-action="live#action"
+                    data-live-action-param="play"
+                    data-live-level-param="{{ i }}"
+                >
                     {{ max(i+2, 4) }}x{{ min(i+2, 4) }}
                 </button>
             {% endfor %}

diff --git a/ux.symfony.com/templates/components/LiveMemory/Card.html.twig b/ux.symfony.com/templates/components/LiveMemory/Card.html.twig
@@ -11,7 +11,12 @@
 
     {# We keep the back / button to flip until the card is matched #}
     {% if not matched|default %}
-        <button class="LiveMemory-Card__back" data-action="live#action" data-action-name="flip(key={{ key }})">
+        <button
+            class="LiveMemory-Card__back"
+            data-action="live#action"
+            data-live-action-param="flip"
+            data-live-key-param="{{ key }}"
+        >
             <img class="LiveMemory-Card__back_img LiveMemory-Card__img"
                  alt="LiveMemory Card Back - {{ back|upper }}"
                  src="{{ asset('images/demos/live-memory/back/%s.webp'|format(back)) }}"

diff --git a/ux.symfony.com/templates/components/LiveMemory/Score.html.twig b/ux.symfony.com/templates/components/LiveMemory/Score.html.twig
@@ -13,7 +13,11 @@
 
         <div class="title">GAME OVER!</div>
         <div class="text">TIME ELAPSED</div>
-        <button data-action="live#action" data-action-name="play(level={{ game.level }})">INSERT COIN</button>
+        <button
+            data-action="live#action"
+            data-live-action-param="play"
+            data-live-level-param="{{ game.level }}"
+        >INSERT COIN</button>
 
     {% else %}
 
@@ -25,9 +29,13 @@
             <twig:LiveMemory:ScoreRow wait="6" label="TOTAL" value="{{ game.totalScore }}" class="total"/>
         </div>
         {% if game.level != 4 %}
-            <button data-action="live#action" data-action-name="play(level={{ game.level + 1 }})">NEXT LEVEL</button>
+            <button
+                data-action="live#action"
+                data-live-action-param="play"
+                data-live-level-param="{{ game.level + 1 }}"
+            >NEXT LEVEL</button>
         {% else %}
-            <button data-action="live#action" data-action-name="play">NEW GAME</button>
+            <button data-action="live#action" data-live-action-param="play">NEW GAME</button>
         {% endif %}
 
     {% endif %}

diff --git a/ux.symfony.com/templates/components/NewCategoryForm.html.twig b/ux.symfony.com/templates/components/NewCategoryForm.html.twig
@@ -1,7 +1,7 @@
 <div {{ attributes }}>
     <form
-        data-action="live#action"
-        data-action-name="prevent|saveCategory"
+        data-action="live#action:prevent"
+        data-live-action-param="saveCategory"
     >
 
         <div class="mb-3">

diff --git a/ux.symfony.com/templates/components/NewProductForm.html.twig b/ux.symfony.com/templates/components/NewProductForm.html.twig
@@ -1,7 +1,7 @@
 <div {{ attributes }}>
     <form
-        data-action="live#action"
-        data-action-name="prevent|saveProduct"
+        data-action="live#action:prevent"
+        data-live-action-param="saveProduct"
     >
         <div class="row align-items-center">
             <div class="col-2">

diff --git a/ux.symfony.com/templates/components/RegistrationForm.html.twig b/ux.symfony.com/templates/components/RegistrationForm.html.twig
@@ -7,8 +7,8 @@
         {{ form_start(form, {
             attr: {
                 'novalidate': true,
-                'data-action': 'live#action',
-                'data-action-name': 'prevent|saveRegistration',
+                'data-action': 'live#action:prevent',
+                'data-live-action-param': 'saveRegistration',
             }
         }) }}
             {{ form_row(form.email) }}

diff --git a/ux.symfony.com/templates/components/UploadFiles.html.twig b/ux.symfony.com/templates/components/UploadFiles.html.twig
@@ -37,7 +37,7 @@
     </div>
     <button
         data-action="live#action"
-        data-action-name="files|uploadFiles"
+        data-live-action-param="files|uploadFiles"
         class="btn btn-primary"
     >Upload files!</button>
 </div>