Add FieldGroup component to allow easy mixing of fields and other content in forms

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -8,6 +8,7 @@
     "icon": "ri-file-edit-line",
     "children": [
       "form",
+      "fieldgroup",
       "stringfield",
       "numberfield",
       "optionsfield",

packages/standard-components/manifest.json

@@ -1118,12 +1118,21 @@
             "value": "spectrum--large"
           }
         ]
-      },
+      }
+    ]
+  },
+  "fieldgroup": {
+    "name": "Field Group",
+    "description": "A group of fields in a form.",
+    "icon": "ri-edit-box-line",
+    "styleable": true,
+    "hasChildren": true,
+    "settings": [
       {
         "type": "select",
         "label": "Labels",
         "key": "labelPosition",
-        "defaultValue": "left",
+        "defaultValue": "above",
         "options": [
           {
             "label": "Left",

packages/standard-components/src/forms/FieldGroup.svelte

@@ -0,0 +1,17 @@
+<script>
+  import { getContext, setContext } from "svelte"
+
+  export let labelPosition = "above"
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+  setContext("fieldGroup", { labelPosition })
+</script>
+
+<div use:styleable={$component.styles}>
+  <form
+    class="spectrum-Form"
+    class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
+    <slot />
+  </form>
+</div>

packages/standard-components/src/forms/FieldGroupFallback.svelte

@@ -0,0 +1,14 @@
+<script>
+  import { getContext } from "svelte"
+
+  const fieldGroupContext = getContext("fieldGroup")
+  const labelPosition = fieldGroupContext?.labelPosition || "above"
+</script>
+
+{#if fieldGroupContext}
+  <slot />
+{:else}
+  <div class="spectrum-Form--labelsAbove">
+    <slot />
+  </div>
+{/if}

packages/standard-components/src/forms/Form.svelte

@@ -7,7 +7,6 @@
   export let datasource
   export let theme
   export let size
-  export let labelPosition = "left"
 
   const { styleable, API } = getContext("sdk")
   const component = getContext("component")
@@ -51,7 +50,7 @@
   }
 
   // Provide both form API and state to children
-  setContext("form", { formApi, formState, labelPosition })
+  setContext("form", { formApi, formState })
 
   // Creates an API for a specific field
   const makeFieldApi = (field, validate) => {
@@ -122,11 +121,7 @@
   dir="ltr"
   use:styleable={$component.styles}
   class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
-  <form
+  {#if loaded}
-    class="spectrum-Form"
+    <slot />
-    class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
+  {/if}
-    {#if loaded}
-      <slot />
-    {/if}
-  </form>
 </div>

packages/standard-components/src/forms/OptionsField.svelte

@@ -18,7 +18,7 @@
   let open = false
   $: options = fieldSchema?.constraints?.inclusion ?? []
   $: placeholderText = placeholder || "Choose an option"
-  $: isNull = $fieldState.value == null || $fieldState.value === ""
+  $: isNull = $fieldState?.value == null || $fieldState?.value === ""
 
   // Update value on blur only
   const selectOption = value => {

packages/standard-components/src/forms/SpectrumField.svelte

@@ -1,19 +1,22 @@
 <script>
   import Placeholder from "./Placeholder.svelte"
+  import FieldGroupFallback from "./FieldGroupFallback.svelte"
   import { getContext } from "svelte"
 
   export let label
   export let field
 
   const formContext = getContext("form")
+  const fieldGroupContext = getContext("fieldGroup")
   const { styleable } = getContext("sdk")
   const component = getContext("component")
-  const { labelPosition, formApi } = formContext || {}
+  const { formApi } = formContext || {}
+  const labelPosition = fieldGroupContext?.labelPosition || "above"
   const formField = formApi?.registerField(field) ?? {}
   const { fieldId, fieldState } = formField
 
   $: labelPositionClass =
-    labelPosition === "top" ? "" : `spectrum-FieldLabel--${labelPosition}`
+    labelPosition === "above" ? "" : `spectrum-FieldLabel--${labelPosition}`
 </script>
 
 {#if !fieldId}
@@ -21,21 +24,23 @@
 {:else if !formContext}
   <Placeholder>Form components need to be wrapped in a Form</Placeholder>
 {:else}
-  <div class="spectrum-Form-item" use:styleable={$component.styles}>
+  <FieldGroupFallback>
-    {#if label}
+    <div class="spectrum-Form-item" use:styleable={$component.styles}>
-      <label
+      {#if label}
-        for={fieldId}
+        <label
-        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
+          for={fieldId}
-        {label}
+          class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
-      </label>
+          {label}
-    {/if}
+        </label>
-    <div class="spectrum-Form-itemField">
-      <slot />
-      {#if $fieldState.error}
-        <div class="error">{$fieldState.error}</div>
       {/if}
+      <div class="spectrum-Form-itemField">
+        <slot />
+        {#if $fieldState.error}
+          <div class="error">{$fieldState.error}</div>
+        {/if}
+      </div>
     </div>
-  </div>
+  </FieldGroupFallback>
 {/if}
 
 <style>

packages/standard-components/src/forms/StringField.svelte

@@ -20,23 +20,21 @@
 </script>
 
 <SpectrumField {label} {field}>
-  <div>
+  <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
-    <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
+    {#if !$fieldState.valid}
-      {#if !$fieldState.valid}
+      <svg
-        <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+        focusable="false"
-          focusable="false"
+        aria-hidden="true">
-          aria-hidden="true">
+        <use xlink:href="#spectrum-icon-18-Alert" />
-          <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
-        </svg>
+    {/if}
-      {/if}
+    <input
-      <input
+      id={$fieldState.fieldId}
-        id={$fieldState.fieldId}
+      value={$fieldState.value || ''}
-        value={$fieldState.value || ''}
+      placeholder={placeholder || ''}
-        placeholder={placeholder || ''}
+      on:blur={onBlur}
-        on:blur={onBlur}
+      {type}
-        {type}
+      class="spectrum-Textfield-input" />
-        class="spectrum-Textfield-input" />
-    </div>
   </div>
 </SpectrumField>

packages/standard-components/src/forms/index.js

@@ -1,4 +1,5 @@
 export { default as form } from "./Form.svelte"
+export { default as fieldgroup } from "./FieldGroup.svelte"
 export { default as stringfield } from "./StringField.svelte"
 export { default as numberfield } from "./NumberField.svelte"
 export { default as optionsfield } from "./OptionsField.svelte"