stuff

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/Column.svelte

@@ -36,11 +36,11 @@
   {:else if schema.type === "number"}
     <Property
       name="Min Value"
-      value={schema?.constraints?.numericality?.greaterThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
+      value={[null, undefined, ""].includes(schema?.constraints?.numericality?.greaterThanOrEqualTo) ? "None" : schema?.constraints?.numericality?.greaterThanOrEqualTo}
     />
     <Property
       name="Max Value"
-      value={schema?.constraints?.numericality?.lessThanOrEqualTo === "" ? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
+      value={[null, undefined, ""].includes(schema?.constraints?.numericality?.lessThanOrEqualTo)? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
     />
   {:else if schema.type === "json"}
     <Property

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/NotRequired.svelte

@@ -1,9 +1,9 @@
 <script>
-  import { Subject, Section } from './components'
+  import { Block, Subject, Section } from './components'
 </script>
 
-<Subject heading="'Required' Constraint">
+<Subject heading="Required Constraint">
   <Section>
-      A 'required' contraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.
+    A <Block>required</Block> constraint can be applied to columns to ensure a value is always present. If a column doesn't have this constraint, then its value for a particular row could he missing.
   </Section>
 </Subject>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/StringsAsNumbers.svelte

@@ -1,9 +1,25 @@
 <script>
-  import { Subject, Section } from './components'
+  import { Block, Subject, Section } from './components'
 </script>
 
 <Subject heading="Text as Numbers">
   <Section>
-    Text can be used in place of numbers in certain scenarios, but care needs to be taken to ensure that non-numerical values aren't also present, otherwise they may be parsed incorrectly and lead to unexpected behavior.
+    Text can be used in place of numbers in certain scenarios, but care needs to be taken, as text that doesn't contain a strictly base-ten, non-decimal value may lead to unexpected behavior.
+  </Section>
+
+  <Section>
+    Examples:
+    <br />
+    <Block>"100"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"100k"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"100,000"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"100 million"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"100.9"</Block>{" -> "}<Block>100</Block>
+    <br />
+    <Block>"One hundred"</Block>{" -> "}<Block>Error</Block>
   </Section>
 </Subject>

packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte

@@ -5,10 +5,10 @@
 <style>
   .block {
     font-style: italic;
-    padding: 0px 3px;
+    padding: 0px 5px 0px 3px;
     border-radius: 1px;
     background-color: var(--grey-3);
     color: var(--ink);
-    word-break: break-all;
+    word-break: break-word;
   }
 </style>

packages/builder/src/components/design/settings/controls/FieldContext/typography/DocumentationLink.svelte

@@ -13,7 +13,7 @@
   target="_blank"
   class="link"
 >
-  <Icon size="S" name={icon} />
+  <Icon size="XS" name={icon} />
   <span class="text">
     <slot>
       {text}
@@ -32,8 +32,9 @@
   .link {
     display: inline-flex;
     box-sizing: border-box;
-    padding: 1px 0;
+    padding: 1px 0 2px;
     filter: brightness(100%);
+    align-items: center;
 
     overflow: hidden;
     flex-shrink: 0;

packages/builder/src/components/design/settings/controls/FieldContext/typography/InfoWord.svelte

@@ -21,7 +21,7 @@
     on:mouseleave
   >
     {#if icon}
-      <Icon size="S" name={icon} />
+      <Icon size="XS" name={icon} />
     {/if}
     <span class="text">
       <slot>
@@ -39,7 +39,7 @@
     on:mouseleave
   >
     {#if icon}
-      <Icon size="S" name={icon} />
+      <Icon size="XS" name={icon} />
     {/if}
     <span class="text">
       <slot>
@@ -53,7 +53,7 @@
   .infoWord {
     display: inline-flex;
     box-sizing: border-box;
-    padding: 1px 0;
+    padding: 1px 0 2px;
     filter: brightness(100%);
     overflow: hidden;
     transition: filter 300ms;

packages/builder/src/components/design/settings/controls/FieldContext/typography/Text.svelte

@@ -59,6 +59,6 @@
     /* invisible properties to match other inline text elements that do have borders. If we don't match here we run into subpixel issues */
     box-sizing: border-box;
     border-bottom: 1px solid transparent;
-    padding: 1px 0;
+    padding: 1px 0 2px;
   }
 </style>

packages/builder/src/components/design/settings/controls/MultiFieldSelect.svelte

@@ -70,6 +70,10 @@
 
     if (field) {
       return field.name
+    } else if (type === "jsonarray") {
+      // `jsonarray` isn't present in the above FIELDS constant
+
+      return "JSON Array"
     }
 
     return ""
@@ -93,6 +97,8 @@
   const onOptionMouseleave = (e, option) => {
     updateTooltip(e, null);
   }
+
+  $: console.log(schema)
 </script>
 
 <Multiselect