From 7b52811f102d1573051e3b3447d15a64a85e4d5a Mon Sep 17 00:00:00 2001
From: Gerard Burns <gjburns9@hotmail.com>
Date: Tue, 16 Apr 2024 11:00:23 +0100
Subject: [PATCH] wip

---
 packages/bbui/src/Tooltip/Context.svelte      |  2 -
 .../subjects/ScalarJsonOnly.svelte            | 40 ++++++++++---------
 .../subjects/components/Block.svelte          | 16 +++++++-
 .../subjects/components/Section.svelte        |  4 ++
 .../lines/JSONPrimitivesOnly.svelte           |  1 -
 .../FieldContext/typography/Line.svelte       |  2 +-
 6 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/packages/bbui/src/Tooltip/Context.svelte b/packages/bbui/src/Tooltip/Context.svelte
index 10f050c7b6..d5afad9fa2 100644
--- a/packages/bbui/src/Tooltip/Context.svelte
+++ b/packages/bbui/src/Tooltip/Context.svelte
@@ -157,8 +157,6 @@
 
     border-radius: 5px;
     box-sizing: border-box;
-    opacity: 0;
-    overflow: hidden;
     border: 1px solid var(--grey-4);
 
     transition: width 300ms ease-in, height 300ms ease-in, top 300ms ease-in, left 300ms ease-in;
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
index c6e3b5aabf..2690607cf3 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/ScalarJsonOnly.svelte
@@ -16,7 +16,7 @@
       }
 
       if (["string", "number", "boolean"].includes(schema.type)) {
-        newScalarDescendants.push(path.join("."))
+        newScalarDescendants.push({ name: path.join("."), type: schema.type })
       } else if (schema.type === "json") {
         Object.entries(schema.schema ?? {}).forEach(([childName, childSchema]) => 
         getScalarDescendantFromSchema([...path, childName], childSchema))
@@ -39,24 +39,26 @@
 
   {#if scalarDescendants.length > 0}
     <Section>
-      Examples of scalar descendants of this object are:
-      {#if scalarDescendants[0]}
-        <Block>{scalarDescendants[0]}</Block>
-      {/if}
-      {#if scalarDescendants.length === 2}
-        {" and "}
-      {:else if scalarDescendants.length === 3}
-        {", "}
-      {/if}
-      {#if scalarDescendants[1]}
-        <Block>{scalarDescendants[1]}</Block>
-      {/if}
-      {#if scalarDescendants.length === 3}
-        {" and "}
-      {/if}
-      {#if scalarDescendants[2]}
-        <Block>{scalarDescendants[2]}</Block>
-      {/if}
+      Examples scalar descendants of this object:
+      <br />
+
+      {#each scalarDescendants as descendant}
+        <div class="example">
+          <Block truncate>{descendant.name}</Block><span class="separator">-</span><Block truncate noShrink>{descendant.type}</Block>
+          </div>
+      {/each}
     </Section>
   {/if}
 </Subject>
+
+<style>
+  .example {
+    display: flex;
+    margin-bottom: 2px;
+  }
+
+  .separator {
+    margin: 0 4px;
+    flex-shrink: 0;
+  }
+</style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
index b2e2d8330c..761abfbdc8 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Block.svelte
@@ -1,4 +1,8 @@
-<span class="block">
+<script>
+  export let truncate = false
+  export let noShrink = false
+</script>
+<span class:truncate class:noShrink class="block">
   <slot />
 </span>
 
@@ -11,4 +15,14 @@
     color: var(--ink);
     word-break: break-word;
   }
+
+  .truncate {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .noShrink {
+    flex-shrink: 0;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
index 486e111725..3bc3ec945d 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/ExplanationModal/subjects/components/Section.svelte
@@ -8,4 +8,8 @@
     margin-bottom: 13px;
     overflow: hidden;
   }
+
+  .section :global(ul) {
+    padding-left: 24px;
+  }
 </style>
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
index ee4b258b80..5b27a3142a 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/lines/JSONPrimitivesOnly.svelte
@@ -9,7 +9,6 @@
 <Line>
   <InfoWord
   on:mouseenter={() => setExplanationSubject(subjects.scalarJsonOnly)}
-  on:mouseleave={() => setExplanationSubject(subjects.none)}
 >Scalar JSON values</InfoWord>
   <Text
     value=" can be used with this component if their individual types are supported"
diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
index 5a98f8026c..31e1cc3c87 100644
--- a/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
+++ b/packages/builder/src/components/design/settings/controls/FieldContext/typography/Line.svelte
@@ -31,7 +31,7 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    row-gap: 4px;
+    row-gap: 3px;
   }
 
   .noWrap {