wip

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

@@ -1,7 +1,7 @@
 <script>
   import ExplanationModal from './ExplanationModal/index.svelte'
   import { messages as messageConstants, getColumnInfoMessagesAndSupport } from "./columnInfo";
-  import { Column, Support, NotRequired, StringNumber } from "./lines"
+  import { Column, Support, NotRequired, StringNumber, JSONPrimitivesOnly } from "./lines"
   import subjects from './subjects';
 
   export let columnInfo
@@ -59,6 +59,11 @@
       {setExplanationSubject}
     />
   {/if}
+  {#if messages.includes(messageConstants.jsonPrimitivesOnly)}
+    <JSONPrimitivesOnly
+      {setExplanationSubject}
+    />
+  {/if}
 </div>
 
 

packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { Line, InfoWord, DocumentationLink, Space, Text, Period, Comma } from "../typography"
+  import subjects from '../subjects'
+
+  export let setExplanationSubject
+</script>
+
+
+<Line wrap>
+  <Text>
+    JSON Objects cannot be used, but scalar child values can be if their types are supported
+  </Text><Period />
+</Line>
+
+<style>
+</style>

packages/builder/src/components/design/settings/controls/FieldContext/lines/index.js

@@ -2,3 +2,4 @@ export { default as Column } from "./Column.svelte"
 export { default as NotRequired } from "./NotRequired.svelte"
 export { default as StringNumber } from "./StringNumber.svelte"
 export { default as Support } from "./Support.svelte"
+export { default as JSONPrimitivesOnly } from "./JSONPrimitivesOnly.svelte"

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

@@ -2,10 +2,11 @@
 
 <style>
   .comma {
-    margin-left: 2px;
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
     margin-right: 5px;
+    line-height: 26px;
+    margin-left: 2px;
   }
 </style>

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

@@ -41,6 +41,7 @@
     border-radius: 0;
     border-bottom: 1px solid var(--blue);
     transition: filter 300ms;
+    margin-right: 0px;
   }
 
   .link:hover {

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

@@ -1,22 +1,38 @@
+<script>
+  export let wrap = false
+</script>
 <div class="line">
   <span class="bullet">•</span>
-  <slot />
+  <div class="content" class:wrap>
+    <slot />
+  </div>
 </div>
 
 <style>
+  .line {
+    background-color: var(--background-alt);
+    color: var(--ink);
+    align-items: flex-start;
+    display: flex;
+
+    margin-bottom: 10px;
+  }
+
   .bullet {
     color: var(--grey-6);
     font-size: 17px;
     display: inline block;
     margin-right: 10px;
+    line-height: 26px;
   }
 
-  .line {
-    background-color: var(--background-alt);
-    color: var(--ink);
-    align-items: center;
+  .content {
     display: flex;
+    min-width: 0;
+    align-items: center;
+  }
 
-    margin-bottom: 10px;
+  .wrap {
+    display: block;
   }
 </style>

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

@@ -5,6 +5,7 @@
     color: var(--grey-6);
     font-size: 20px;
     display: inline block;
-    margin-left: 3px;
+    line-height: 26px;
+    margin-left: 2px;
   }
 </style>

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

@@ -3,5 +3,6 @@
 <style>
   .space {
     margin-right: 5px;
+    line-height: 26px;
   }
 </style>

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

@@ -3,5 +3,6 @@
 <style>
   .text {
     flex-shrink: 0;
+    line-height: 26px;
   }
 </style>