improve spacing around fieldset legend + description

SFDigitalServices · Oct 16, 2020 · fd3d172 · fd3d172
1 parent 2c173d7
commit fd3d172
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 15 deletions.
diff --git a/src/templates/address/form.ejs b/src/templates/address/form.ejs
@@ -1,12 +1,12 @@
-<div class="formio-component formio-component-address formio-nested round-1 bg-blue-1 p-2">
-  <fieldset>
-    <legend>
+<div class="formio-component formio-component-address round-1 bg-blue-1 p-2">
+  <fieldset class="formio-nested">
+    {% const desc = ctx.t([`${ctx.component.key}_description`, ctx.component.description]) %}
+    <legend class="{{ desc ? '' : 'mb-1' }}">
       {{ ctx.t([`${ctx.component.key}_label`, ctx.component.label]) }}
     </legend>
 
-    {% const desc = ctx.t([`${ctx.component.key}_description`, ctx.component.description]) %}
     {% if (desc) { %}
-      <div class="mb-1">{{ desc }}</div>
+      <div class="mb-2">{{ desc }}</div>
     {% } %}
 
     <div ref="{{ ctx.nestedKey }}">

diff --git a/src/templates/fieldset/form.ejs b/src/templates/fieldset/form.ejs
@@ -1,12 +1,14 @@
-<fieldset>
-  {% if (ctx.component.legend) { %}
-    <legend ref="header" class="{{ctx.component.collapsible ? 'formio-clickable' : ''}}">
-      {{ ctx.t(ctx.component.legend) }}
-    </legend>
-  {% } %}
-  {% if (!ctx.collapsed) { %}
-    <div ref="{{ ctx.nestedKey }}">
-      {{ ctx.children }}
-    </div>
+<fieldset class="formio-nested">
+  {% const desc = ctx.t([`${ctx.component.key}_description`, ctx.component.description]) %}
+  <legend ref="header" class="{{ desc ? '' : 'mb-2' }}">
+    {{ ctx.t([`${ctx.component.key}_legend`, ctx.component.legend]) }}
+  </legend>
+
+  {% if (desc) { %}
+    <div class="mb-2">{{ desc }}</div>
   {% } %}
+
+  <div ref="{{ ctx.nestedKey }}">
+    {{ ctx.children }}
+  </div>
 </fieldset>