♻️ [#454] Refactor edit grid formio template to use utrecht button gr…

…oup CSS components
open-formulieren · Oct 19, 2023 · 9b77ac6 · 9b77ac6
1 parent aa6fe70
commit 9b77ac6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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.