array type info

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;

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

@@ -1,5 +1,5 @@
 <script>
-  import { Block, Subject, Property, Section }  from './components'
+  import { Block, Subject, JSONProperty, Property, Section }  from './components'
 
   export let schema
   export let columnName
@@ -42,9 +42,18 @@
       name="Max Value"
       value={[null, undefined, ""].includes(schema?.constraints?.numericality?.lessThanOrEqualTo)? "None" : schema?.constraints?.numericality?.lessThanOrEqualTo}
     />
+  {:else if schema.type === "array"}
+
+    {#each (schema?.constraints?.inclusion ?? []) as option, index}
+      <Property
+        name={`Option ${index + 1}`}
+        truncate
+      >
+      <span style:background-color={schema?.optionColors?.[option]} class="optionCircle" />{option}
+      </Property>
+    {/each}
   {:else if schema.type === "json"}
-    <Property
+    <JSONProperty
-      pre
       name="Schema"
       value={JSON.stringify(schema?.schema ?? {}, null, 2)}
     />
@@ -71,4 +80,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .optionCircle {
+    display: inline-block;
+    background-color: hsla(0, 1%, 50%, 0.3);
+    border-radius: 100%;
+    width: 10px;
+    height: 10px;
+    vertical-align: middle;
+    margin-right: 5px;
+  }
 </style>

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

@@ -0,0 +1,42 @@
+<script>
+  export let name;
+  export let value;
+</script>
+
+<div class="property">
+  <span class="propertyName">
+    <slot name="name">
+      {name}
+    </slot>
+  </span>
+  <span class="propertyDivider">-</span>
+  <pre class="pre propertyValue">
+    <slot>
+      {value}
+    </slot>
+  </pre>
+</div>
+
+<style>
+  .property {
+    margin-bottom: 12px;
+  }
+
+  .propertyName {
+    font-style: italic;
+  }
+
+  .propertyDivider {
+    padding: 4px;
+  }
+
+  .pre {
+    margin: 0;
+    margin-top: 3px;
+    padding: 4px;
+    border-radius: 3px;
+    width: 250px;
+    box-sizing: border-box;
+    background-color: black;
+  }
+</style>

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

@@ -1,45 +1,49 @@
 <script>
   export let name;
   export let value;
-  export let pre;
+  export let truncate = false;
 </script>
 
-<div class="property">
+<div class:truncate class="property">
-  
-{#if pre}
-<span class="propertyName">
-  {name}
-</span>
-  <span class="propertyDivider">-</span>
-<pre class="pre propertyValue">
-{value}
-</pre>
-{:else}
   <span class="propertyName">
-    {name}
+    <slot name="name">
+      {name}
+    </slot>
   </span>
   <span class="propertyDivider">-</span>
   <span class="propertyValue">
-    {value}
+    <slot>
+      {value}
+    </slot>
   </span>
-{/if}
 </div>
 
 <style>
-  .propertyDivider {
+  .property {
-    padding: 4px;
+    max-width: 100%;
-  }
-  .propertyName {
-    font-style: italic;
   }
 
-  .pre {
+  .truncate {
-    margin: 0;
+    display: flex;
-    margin-top: 3px;
+    align-items: center;
-    padding: 4px;
+    overflow: hidden;
-    border-radius: 3px;
+  }
-    width: 250px;
+
-    box-sizing: border-box;
+  .propertyName {
-    background-color: black;
+    font-style: italic;
+    flex-shrink: 0;
+  }
+
+
+  .propertyDivider {
+    padding: 0 6px;
+    flex-shrink: 0;
+  }
+
+  .propertyValue {
+    word-break: break-word;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 </style>

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

@@ -4,8 +4,8 @@
 
 <style>
   .section {
-    line-height: 22px;
+    line-height: 20px;
-    margin-bottom: 16px;
+    margin-bottom: 13px;
     overflow: hidden;
   }
 </style>

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

@@ -1,4 +1,5 @@
 export { default as Subject } from "./Subject.svelte"
 export { default as Property } from "./Property.svelte"
+export { default as JSONProperty } from "./JSONProperty.svelte"
 export { default as Section } from "./Section.svelte"
 export { default as Block } from "./Block.svelte"

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

@@ -38,7 +38,6 @@
 <Line noWrap>
   <InfoWord
     on:mouseenter={() => setExplanationSubject(subjects.column)}
-    on:mouseleave={() => setExplanationSubject(subjects.none)}
     href={tableHref}
     text={columnName}
   />