From 9b77ac6f99a23c9a8fd37fb9abf53d2d069897a8 Mon Sep 17 00:00:00 2001
From: Sergei Maertens <sergei@maykinmedia.nl>
Date: Thu, 19 Oct 2023 12:30:39 +0200
Subject: [PATCH] :recycle: [#454] Refactor edit grid formio template to use
 utrecht button group CSS components

---
 src/formio/templates/editGrid.ejs      | 26 ++++++++++++++++----------
 src/formio/templates/editGridRow.ejs   | 18 ++++++++----------
 src/scss/components/_button-group.scss |  5 +++++
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/formio/templates/editGrid.ejs b/src/formio/templates/editGrid.ejs
index 12a770e2d..b82160a76 100644
--- a/src/formio/templates/editGrid.ejs
+++ b/src/formio/templates/editGrid.ejs
@@ -8,18 +8,24 @@
           {{row}}
 
           {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
-          <div class="{{ctx.ofPrefix}}editgrid__group-actions {{ctx.ofPrefix}}toolbar {{ctx.ofPrefix}}toolbar--reverse">
-              <ul class="{{ctx.ofPrefix}}toolbar__list">
-              <li class="{{ctx.ofPrefix}}toolbar__list-item">
-                <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action" ref="{{ctx.ref.saveRow}}">{{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}</button>
-              </li>
+            <p class="utrecht-button-group utrecht-button-group--openforms-editgrid" role="group">
+
+              <button
+                class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action"
+                ref="{{ctx.ref.saveRow}}"
+              >
+                {{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}
+              </button>
+
               {% if (ctx.component.removeRow) { %}
-                  <li class="{{ctx.ofPrefix}}toolbar__list-item">
-              <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--danger utrecht-button utrecht-button--html-button utrecht-button--secondary-action utrecht-button--danger" ref="{{ctx.ref.cancelRow}}">{{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}</button>
-                  </li>
+                <button
+                  class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--danger utrecht-button utrecht-button--html-button utrecht-button--secondary-action utrecht-button--danger"
+                  ref="{{ctx.ref.cancelRow}}"
+                >
+                  {{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}
+                </button>
               {% } %}
-              </ul>
-          </div>
+            </p>
           {% } %}
 
           <!-- Formio needs a div with class="has-error" with inside a div with class="editgrid-row-error" -->
diff --git a/src/formio/templates/editGridRow.ejs b/src/formio/templates/editGridRow.ejs
index f2ff77e34..a52e453f4 100644
--- a/src/formio/templates/editGridRow.ejs
+++ b/src/formio/templates/editGridRow.ejs
@@ -6,15 +6,13 @@
     {% } %}
 
   {% if (!ctx.self.options.readOnly) { %}
-    <div class="{{ctx.ofPrefix}}toolbar {{ctx.ofPrefix}}toolbar--reverse">
-        <ul class="{{ctx.ofPrefix}}toolbar__list">
-            <li class="{{ctx.ofPrefix}}toolbar__list-item">
-                <button class="{{ctx.ofPrefix}}button editRow"><i class="{{ ctx.iconClass('edit') }}"></i></button>
-            </li>
-            <li class="{{ctx.ofPrefix}}toolbar__list-item">
-                <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--danger removeRow"><i class="{{ ctx.iconClass('trash-can') }}"></i></button>
-            </li>
-        </ul>
-    </div>
+    <p class="utrecht-button-group utrecht-button-group--openforms-editgrid" role="group">
+      <button class="{{ctx.ofPrefix}}button editRow">
+        <i class="{{ ctx.iconClass('edit') }}"></i>
+      </button>
+      <button class="{{ctx.ofPrefix}}button {{ctx.ofPrefix}}button--danger removeRow">
+        <i class="{{ ctx.iconClass('trash-can') }}"></i>
+      </button>
+    </p>
   {% } %}
 </div>
diff --git a/src/scss/components/_button-group.scss b/src/scss/components/_button-group.scss
index bcc15b13f..da3064028 100644
--- a/src/scss/components/_button-group.scss
+++ b/src/scss/components/_button-group.scss
@@ -8,6 +8,11 @@
 .utrecht-button-group {
   // A button group used in an edit grid item
   @include bem.modifier('openforms-editgrid') {
+    // TODO: move to design tokens
+    --utrecht-button-group-margin-block-start: 12px;
+    // there needs to be some vertical spacing between the body and button row
+    --utrecht-space-around: 1;
+
     // there currently does not exist a design token in the upstream component, and
     // the alignment is also contextual, so we opt for an open-forms extension that
     // can be tweaked with proprietary design tokens.