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
-    class="spectrum-Form"
-    class:spectrum-Form--labelsAbove={labelPosition === 'above'}>
   {#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,6 +24,7 @@
 {:else if !formContext}
   <Placeholder>Form components need to be wrapped in a Form</Placeholder>
 {:else}
+  <FieldGroupFallback>
     <div class="spectrum-Form-item" use:styleable={$component.styles}>
       {#if label}
         <label
@@ -36,6 +40,7 @@
         {/if}
       </div>
     </div>
+  </FieldGroupFallback>
 {/if}
 
 <style>

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

@@ -20,7 +20,6 @@
 </script>
 
 <SpectrumField {label} {field}>
-  <div>
   <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
     {#if !$fieldState.valid}
       <svg
@@ -38,5 +37,4 @@
       {type}
       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"