From 8df4de0ddbaacf7af8518541f96293e72e4a0bbe Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 27 Jan 2021 18:25:57 +0000
Subject: [PATCH] Add FieldGroup component to allow easy mixing of fields and
 other content in forms

---
 .../design/AppPreview/componentStructure.json |  1 +
 packages/standard-components/manifest.json    | 13 +++++--
 .../src/forms/FieldGroup.svelte               | 17 +++++++++
 .../src/forms/FieldGroupFallback.svelte       | 14 ++++++++
 .../standard-components/src/forms/Form.svelte | 13 +++----
 .../src/forms/OptionsField.svelte             |  2 +-
 .../src/forms/SpectrumField.svelte            | 35 +++++++++++--------
 .../src/forms/StringField.svelte              | 34 +++++++++---------
 .../standard-components/src/forms/index.js    |  1 +
 9 files changed, 85 insertions(+), 45 deletions(-)
 create mode 100644 packages/standard-components/src/forms/FieldGroup.svelte
 create mode 100644 packages/standard-components/src/forms/FieldGroupFallback.svelte

diff --git a/packages/builder/src/components/design/AppPreview/componentStructure.json b/packages/builder/src/components/design/AppPreview/componentStructure.json
index dcf29b2534..98f2ca1aa0 100644
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@@ -8,6 +8,7 @@
     "icon": "ri-file-edit-line",
     "children": [
       "form",
+      "fieldgroup",
       "stringfield",
       "numberfield",
       "optionsfield",
diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json
index 1cf887bbf2..ce628ee775 100644
--- a/packages/standard-components/manifest.json
+++ b/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",
diff --git a/packages/standard-components/src/forms/FieldGroup.svelte b/packages/standard-components/src/forms/FieldGroup.svelte
new file mode 100644
index 0000000000..ec5979ed30
--- /dev/null
+++ b/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>
diff --git a/packages/standard-components/src/forms/FieldGroupFallback.svelte b/packages/standard-components/src/forms/FieldGroupFallback.svelte
new file mode 100644
index 0000000000..8fc22c9cc4
--- /dev/null
+++ b/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}
diff --git a/packages/standard-components/src/forms/Form.svelte b/packages/standard-components/src/forms/Form.svelte
index 86568f18d5..21e2ece4df 100644
--- a/packages/standard-components/src/forms/Form.svelte
+++ b/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>
+  {#if loaded}
+    <slot />
+  {/if}
 </div>
diff --git a/packages/standard-components/src/forms/OptionsField.svelte b/packages/standard-components/src/forms/OptionsField.svelte
index 77d48867f6..4c7f29f046 100644
--- a/packages/standard-components/src/forms/OptionsField.svelte
+++ b/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 => {
diff --git a/packages/standard-components/src/forms/SpectrumField.svelte b/packages/standard-components/src/forms/SpectrumField.svelte
index 4acda6e921..418b04371c 100644
--- a/packages/standard-components/src/forms/SpectrumField.svelte
+++ b/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}>
-    {#if label}
-      <label
-        for={fieldId}
-        class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
-        {label}
-      </label>
-    {/if}
-    <div class="spectrum-Form-itemField">
-      <slot />
-      {#if $fieldState.error}
-        <div class="error">{$fieldState.error}</div>
+  <FieldGroupFallback>
+    <div class="spectrum-Form-item" use:styleable={$component.styles}>
+      {#if label}
+        <label
+          for={fieldId}
+          class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}>
+          {label}
+        </label>
       {/if}
+      <div class="spectrum-Form-itemField">
+        <slot />
+        {#if $fieldState.error}
+          <div class="error">{$fieldState.error}</div>
+        {/if}
+      </div>
     </div>
-  </div>
+  </FieldGroupFallback>
 {/if}
 
 <style>
diff --git a/packages/standard-components/src/forms/StringField.svelte b/packages/standard-components/src/forms/StringField.svelte
index 43ae0c1c13..14ead3b367 100644
--- a/packages/standard-components/src/forms/StringField.svelte
+++ b/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}>
-      {#if !$fieldState.valid}
-        <svg
-          class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
-          focusable="false"
-          aria-hidden="true">
-          <use xlink:href="#spectrum-icon-18-Alert" />
-        </svg>
-      {/if}
-      <input
-        id={$fieldState.fieldId}
-        value={$fieldState.value || ''}
-        placeholder={placeholder || ''}
-        on:blur={onBlur}
-        {type}
-        class="spectrum-Textfield-input" />
-    </div>
+  <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
+    {#if !$fieldState.valid}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+        focusable="false"
+        aria-hidden="true">
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+    <input
+      id={$fieldState.fieldId}
+      value={$fieldState.value || ''}
+      placeholder={placeholder || ''}
+      on:blur={onBlur}
+      {type}
+      class="spectrum-Textfield-input" />
   </div>
 </SpectrumField>
diff --git a/packages/standard-components/src/forms/index.js b/packages/standard-components/src/forms/index.js
index 5f83601526..166bd6cd72 100644
--- a/packages/standard-components/src/forms/index.js
+++ b/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"