Merge pull request #112 from SFDigitalServices/fieldset-example

Add fieldset component example, fix CSS
SFDigitalServices · Sep 30, 2020 · acbddf0 · acbddf0
2 parents 2451b1a + f86fedb
commit acbddf0
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 31 deletions.
diff --git a/__tests__/__snapshots__/snapshots.js.snap b/__tests__/__snapshots__/snapshots.js.snap
@@ -30,7 +30,7 @@ exports[`component snapshots component "address" scenario: basic matches the sna
             </div>
             <div ref="nested-address">
               <div ref="component"
-                   class="form-group has-feedback formio-component formio-component-textfield formio-component-line1 mb-1 required"
+                   class="form-group has-feedback formio-component formio-component-textfield formio-component-line1  required"
                    id="address-basic-3"
               >
                 <label for="input-address-basic-3"
@@ -58,7 +58,7 @@ exports[`component snapshots component "address" scenario: basic matches the sna
                 </div>
               </div>
               <div ref="component"
-                   class="form-group has-feedback formio-component formio-component-textfield formio-component-line2 mb-1"
+                   class="form-group has-feedback formio-component formio-component-textfield formio-component-line2"
                    id="address-basic-4"
               >
                 <label for="input-address-basic-4"
@@ -85,7 +85,7 @@ exports[`component snapshots component "address" scenario: basic matches the sna
                 </div>
               </div>
               <div ref="component"
-                   class="form-group has-feedback formio-component formio-component-textfield formio-component-city mb-1 required"
+                   class="form-group has-feedback formio-component formio-component-textfield formio-component-city  required"
                    id="address-basic-5"
               >
                 <label for="input-address-basic-5"
@@ -113,7 +113,7 @@ exports[`component snapshots component "address" scenario: basic matches the sna
                 </div>
               </div>
               <div ref="component"
-                   class="row formio-component formio-component-columns formio-component-columns mb-0 formio-component-label-hidden"
+                   class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden"
                    id="address-basic-6"
               >
                 <label for="input-address-basic-6"
@@ -234,7 +234,7 @@ exports[`component snapshots component "address" scenario: required matches the
             </div>
             <div ref="nested-address">
               <div ref="component"
-                   class="form-group has-feedback formio-component formio-component-textfield formio-component-line1 mb-1 required"
+                   class="form-group has-feedback formio-component formio-component-textfield formio-component-line1  required"
                    id="address-required-3"
               >
                 <label for="input-address-required-3"
@@ -262,7 +262,7 @@ exports[`component snapshots component "address" scenario: required matches the
                 </div>
               </div>
               <div ref="component"
-                   class="form-group has-feedback formio-component formio-component-textfield formio-component-line2 mb-1"
+                   class="form-group has-feedback formio-component formio-component-textfield formio-component-line2"
                    id="address-required-4"
               >
                 <label for="input-address-required-4"
@@ -289,7 +289,7 @@ exports[`component snapshots component "address" scenario: required matches the
                 </div>
               </div>
               <div ref="component"
-                   class="form-group has-feedback formio-component formio-component-textfield formio-component-city mb-1 required"
+                   class="form-group has-feedback formio-component formio-component-textfield formio-component-city  required"
                    id="address-required-5"
               >
                 <label for="input-address-required-5"
@@ -317,7 +317,7 @@ exports[`component snapshots component "address" scenario: required matches the
                 </div>
               </div>
               <div ref="component"
-                   class="row formio-component formio-component-columns formio-component-columns mb-0 formio-component-label-hidden"
+                   class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden"
                    id="address-required-6"
               >
                 <label for="input-address-required-6"

diff --git a/src/components/address.js b/src/components/address.js
@@ -35,27 +35,23 @@ const defaultSchema = {
       key: 'line1',
       type: 'textfield',
       input: true,
-      validate: { required: true },
-      customClass: 'mb-1'
+      validate: { required: true }
     },
     {
       label: 'Address line 2',
       key: 'line2',
       type: 'textfield',
-      input: true,
-      customClass: 'mb-1'
+      input: true
     },
     {
       label: 'City',
       key: 'city',
       type: 'textfield',
       validate: { required: true },
-      defaultValue: 'San Francisco',
-      customClass: 'mb-1'
+      defaultValue: 'San Francisco'
     },
     {
       type: 'columns',
-      customClass: 'mb-0',
       columns: [
         {
           width: 6,

diff --git a/src/examples.yml b/src/examples.yml
@@ -126,6 +126,53 @@
         description: This is the description
         tooltip: And this is the tooltip
 
+- id: fieldset
+  title: Fieldset
+  form:
+    components:
+      - type: fieldset
+        legend: This is the legend
+        description: This is the description
+        components:
+          - type: textfield
+            key: name
+            label: Your name
+          - type: number
+            key: age
+            label: Your age
+
+- id: well
+  title: Well
+  form:
+    components:
+      - type: well
+        label: This is the well label
+        description: This is the well description
+        components:
+          - type: textfield
+            key: name
+            label: Your name
+          - type: number
+            key: age
+            label: Your age
+
+- id: fieldset-well
+  title: Fieldset in a well
+  form:
+    components:
+      - type: well
+        components:
+          - type: fieldset
+            legend: This is the fieldset legend
+            description: This is the fieldset description
+            components:
+              - type: textfield
+                key: name
+                label: Your name
+              - type: number
+                key: age
+                label: Your age
+
 - id: review
   title: Review (custom component)
   options:

diff --git a/src/scss/forms/_fieldsets.scss b/src/scss/forms/_fieldsets.scss
@@ -8,10 +8,21 @@ fieldset {
     display: table;
     padding: 0;
   }
+}
 
-  label {
+fieldset,
+.well {
+  * label {
     font-size: 16px;
   }
+
+  .formio-component {
+    margin-bottom: spacer(2);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 .formio-component-radio {

diff --git a/src/templates/fieldset/form.ejs b/src/templates/fieldset/form.ejs
@@ -1,16 +1,14 @@
-<fieldset class="bg-blue-1 round-1">
-  <div class="p-2">
-    <legend class="f-3" ref="header">
-      {{ ctx.tk('legend') }}
-    </legend>
+<fieldset>
+  <legend class="f-3" ref="header">
+    {{ ctx.tk('legend') }}
+  </legend>
 
-    {% const desc = ctx.tk('description') %}
-    {% if (desc) { %}
-      <div class="f-2 fg-light-slate mb-1">{{ desc }}</div>
-    {% } %}
+  {% const desc = ctx.tk('description') %}
+  {% if (desc) { %}
+    <div class="f-2 mb-1">{{ desc }}</div>
+  {% } %}
 
-    <div ref="{{ctx.nestedKey}}">
-      {{ctx.children}}
-    </div>
+  <div ref="{{ctx.nestedKey}}">
+    {{ctx.children}}
   </div>
 </fieldset>
diff --git a/src/templates/message/form.ejs b/src/templates/message/form.ejs
@@ -1,4 +1,4 @@
-<div class="message message-{{ ctx.level }} small my-1">
+<div class="message message-{{ ctx.level }} small mt-1">
   <span class="d-inline-block v-align-middle mr-1" data-icon="{{ ctx.level }}" data-height="15"></span>
   {{ ctx.message }}
 </div>
diff --git a/src/templates/well/form.ejs b/src/templates/well/form.ejs
@@ -1,8 +1,16 @@
 {% const visible = ctx.component.properties.visible !== "false" %}
-<div ref="{{ ctx.nestedKey }}" class="{{ visible ? ' bg-blue-1 p-2 round-1' : '' }}">
+<div aria-labelledby="label-{{ ctx.id }}" ref="{{ ctx.nestedKey }}" class="well{{ visible ? ' bg-blue-1 round-1 p-2' : '' }}">
+  {% const label = ctx.tk('label') %}
+  {% if (label) { %}
+    <label class="f-3" id="label-{{ ctx.id }}">
+      {{ label }}
+    </label>
+  {% } %}
+
   {% const desc = ctx.tk('description') %}
   {% if (desc) { %}
-    <p class="description mt-0 mb-1">{{ desc }}</p>
+    <div class="mb-1">{{ desc }}</div>
   {% } %}
+
   {{ ctx.children }}
 </div>