♻️ [#454] Remove custom hardcoded styles for add-button

Instead, style the edit grid to be display flex (column) and make gap customizable.
open-formulieren · Oct 23, 2023 · 9d260fc · 9d260fc
1 parent cd6eeae
commit 9d260fc
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 55 deletions.
diff --git a/src/components/EditGrid/EditGrid.js b/src/components/EditGrid/EditGrid.js
@@ -1,10 +1,10 @@
+import {ButtonGroup} from '@utrecht/component-library-react';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import Button from 'components/Button';
 import FAIcon from 'components/FAIcon';
-import {getBEMClassName} from 'utils';
 
 const DefaultAddButtonLabel = () => (
   <>
@@ -17,14 +17,15 @@ const DefaultAddButtonLabel = () => (
 );
 
 const EditGrid = ({children, onAddItem, addButtonLabel}) => (
-  <div className={getBEMClassName('editgrid')}>
-    {children}
+  <div className="openforms-editgrid">
+    <div>{children}</div>
+
     {onAddItem && (
-      <div className={getBEMClassName('editgrid__add-button')}>
+      <ButtonGroup role="group">
         <Button type="button" variant="primary" onClick={onAddItem}>
           {addButtonLabel || <DefaultAddButtonLabel />}
         </Button>
-      </div>
+      </ButtonGroup>
     )}
   </div>
 );

diff --git a/src/formio/templates/editGrid.ejs b/src/formio/templates/editGrid.ejs
@@ -1,55 +1,57 @@
 <div class="openforms-editgrid">
-  {% ctx.rows.forEach(function(row, rowIndex) { %}
-    <div class="utrecht-form-fieldset openforms-editgrid__item" ref="{{ctx.ref.row}}">
-      <fieldset class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset">
-        {% if (!!ctx.component.groupLabel) { %}
-          <legend class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend openforms-editgrid__item-heading">
-            {{ ctx.t(ctx.component.groupLabel, { _userInput: true }) }} {{ rowIndex + 1 }}
-          </legend>
-        {% } %}
-
-        <div>{{row}}</div>
-
-        {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
-          <p class="utrecht-button-group utrecht-button-group--openforms-editgrid" role="group">
-
-            <button
-              class="openforms-button openforms-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) { %}
+  <div>
+    {% ctx.rows.forEach(function(row, rowIndex) { %}
+      <div class="utrecht-form-fieldset openforms-editgrid__item" ref="{{ctx.ref.row}}">
+        <fieldset class="utrecht-form-fieldset__fieldset utrecht-form-fieldset--html-fieldset">
+          {% if (!!ctx.component.groupLabel) { %}
+            <legend class="utrecht-form-fieldset__legend utrecht-form-fieldset__legend--html-legend openforms-editgrid__item-heading">
+              {{ ctx.t(ctx.component.groupLabel, { _userInput: true }) }} {{ rowIndex + 1 }}
+            </legend>
+          {% } %}
+
+          <div>{{row}}</div>
+
+          {% if (ctx.openRows[rowIndex] && !ctx.readOnly) { %}
+            <p class="utrecht-button-group utrecht-button-group--openforms-editgrid" role="group">
+
               <button
-                class="openforms-button openforms-button--danger utrecht-button utrecht-button--html-button utrecht-button--secondary-action utrecht-button--danger"
-                ref="{{ctx.ref.cancelRow}}"
+                class="openforms-button openforms-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action"
+                ref="{{ctx.ref.saveRow}}"
               >
-                {{ctx.t(ctx.component.removeRow || 'Cancel', { _userInput: true })}}
+                {{ctx.t(ctx.component.saveRow || 'Save', { _userInput: true })}}
               </button>
-            {% } %}
-          </p>
-        {% } %}
 
-        <!-- Formio needs a div with class="has-error" with inside a div with class="editgrid-row-error" -->
-        <div class="openforms-errors has-error">
-          <div class="editgrid-row-error">{{ctx.errors[rowIndex]}}</div>
-        </div>
+              {% if (ctx.component.removeRow) { %}
+                <button
+                  class="openforms-button openforms-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>
+              {% } %}
+            </p>
+          {% } %}
+
+          <!-- Formio needs a div with class="has-error" with inside a div with class="editgrid-row-error" -->
+          <div class="openforms-errors has-error">
+            <div class="editgrid-row-error">{{ctx.errors[rowIndex]}}</div>
+          </div>
 
-      </fieldset>
-    </div>
+        </fieldset>
+      </div>
 
-  {% }) %}
+    {% }) %}
+  </div>
 
   {% if (!ctx.readOnly && ctx.hasAddButton) { %}
-    <div class="openforms-editgrid__add-button">
+    <p class="utrecht-button-group">
       <button
         class="openforms-button openforms-button--primary utrecht-button utrecht-button--html-button utrecht-button--primary-action"
         ref="{{ctx.ref.addRow}}"
       >
         <i class="{{ctx.iconClass('plus')}}"></i>
         {{ctx.t(ctx.component.addAnother || 'Add Another', { _userInput: true })}}
       </button>
-    </div>
+    </p>
   {% } %}
 </div>
diff --git a/src/scss/components/_editgrid.scss b/src/scss/components/_editgrid.scss
@@ -4,14 +4,10 @@
  */
 @use 'microscope-sass/lib/bem';
 
-@import '~microscope-sass/lib/color';
-@import '~microscope-sass/lib/typography';
-
-@import '../mixins/prefix';
-
 // TODO: move design tokens into own repo
 .openforms-theme {
   --of-editgrid-line-height: 1.5;
+  --of-editgrid-gap: 12px;
 
   --of-editgrid-item-gap: 12px;
   --of-editgrid-item-border: solid 1px var(--of-color-border);
@@ -29,6 +25,10 @@
 .openforms-editgrid {
   line-height: var(--of-editgrid-line-height, var(--utrecht-document-line-height));
 
+  display: flex;
+  flex-direction: column;
+  gap: var(--of-editgrid-gap);
+
   @include bem.element('item') {
     // NL DS markup uses a field with nested fieldset element inside
     .utrecht-form-fieldset__fieldset {
@@ -70,11 +70,3 @@
     margin-block-end: var(--of-editgrid-item-heading-margin-block-end, var(--of-editgrid-item-gap));
   }
 }
-
-.#{prefix(editgrid)} {
-  &__add-button {
-    display: flex;
-    width: 100%;
-    padding: $grid-margin-2 0;
-  }
-}