wip working looking okayish

packages/bbui/src/Tooltip/Context.svelte

@@ -159,6 +159,7 @@
     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/Chart.svelte

@@ -40,22 +40,36 @@
 <div
   class={`tooltipContents ${supportLevelClass}`}
 >
-  <div class={`supportLevel ${supportLevelClass}`}>
+  <div class="columnName">
-    <Icon tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
-    <p>{supportLevelText}</p>
-  </div>
-  <div class="contextTooltipContent">
-    <div class="contextTooltipHeader">
-      <span class="columnName">
     {columnName}
-      </span><span> is a </span>
-      <a target=”_blank” href={docLink} class="link">
-        <Icon name={columnIcon} />
-        <span>{columnType}</span>
-      </a>
-      <span>column.</span>
   </div>
+  <div class="divider"></div>
+  <div class="line">
+    <a target=”_blank” href={docLink} class="chip link">
+      <Icon size="S" name={columnIcon} />
+      <span>{columnType} Column</span>
+    </a>
+  </div>
+  <div class={`line ${supportLevelClass}`}>
+    <div class={`chip supportChip ${supportLevelClass}`}>
+      <Icon size="S" tooltip={supportLevelIconTooltip} name={supportLevelIcon} />
+      <span>{supportLevelText}</span>
+    </div>
+    <span>with</span>
+    <div class="chip link">
+      <Icon size="S" name={"GraphPie"} />
+      <span>Chart Components</span>
+    </div>
+  </div>
+      {#if warnings.includes("string number warning")}
+  <div class={`line ${supportLevelClass}`}>
+    <span>
+        Non-numeric values will not be displayed
+    </span>
+  </div>
+      {/if}
 
+  <!--
   {#if errors.length > 0}
     {#each errors as datum}
       <p>{datum}</p>
@@ -67,89 +81,58 @@
   {:else}
       <p>{supportLevelIconTooltip}</p>
   {/if}
-  </div>
+  -->
 </div>
 
 <style>
+  .columnName {
+    font-style: italic;
+    padding: 3px 6px;
+    border-radius: 5px;
+    background-color: var(--grey-2);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: inline-block;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  .divider {
+    border-bottom: 1px solid var(--grey-4);
+    margin: 6px 0 16px;
+  }
+
   .tooltipContents {
     max-width: 400px;
-    background-color: var(--spectrum-global-color-gray-200);
+    background-color: var(--background-alt);
     display: block;
-    padding: 0 0 12px 0 ;
+    padding: 12px;
     border-radius: 5px;
     box-sizing: border-box;
   }
 
-  .tooltipContents.supportLevelUnsupported {
+  .line {
-    background-color: var(--red);
-    color: var(--ink)
-  }
-
-  .tooltipContents.supportLevelPartialSupport {
-    background-color: var(--yellow);
-    color: var(--ink)
-  }
-
-  .tooltipContents.supportLevelSupported {
-    background-color: var(--green);
-    color: var(--ink)
-  }
-
-  .contextTooltipHeader {
-    row-gap: 6px;
-    column-gap: 8px;
     background-color: var(--background-alt);
     color: var(--ink);
-    display: flex;
-    flex-wrap: wrap;
     align-items: center;
-    padding: 6px 8px;
+    margin-bottom: 10px;
-    border-width: var(--spectrum-actionbutton-border-size);
-    border-radius: var(--spectrum-alias-border-radius-regular);
-    border: 1px solid
-      var(
-        --spectrum-actionbutton-m-border-color,
-        var(--spectrum-alias-border-color)
-      );
   }
 
-  .contextTooltipContent {
+  .line > span {
-    color: var(--ink);
+    display: inline;
-    margin: 0px 12px;
+    margin-right: 5px;
-    color: black;
   }
 
-  .contextTooltipContent > p {
+  .chip {
-    row-gap: 6px;
-    column-gap: 8px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 6px 8px;
-    border-width: var(--spectrum-actionbutton-border-size);
-    border-radius: var(--spectrum-alias-border-radius-regular);
-    border: 1px solid
-      var(
-        --spectrum-actionbutton-m-border-color,
-        var(--spectrum-alias-border-color)
-      );
-  }
-
-  .columnName {
-
-    font-style: italic;
-    padding: 3px 6px;
-    border-radius: 5px;
-    background-color: var(--grey-3);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .link {
     display: inline-flex;
     padding: 3px 6px;
     border-radius: 5px;
+    vertical-align: sub;
+    margin-right: 5px;
+  }
+
+  .link {
     background-color: var(--spectrum-global-color-blue-500);
     color: white;
     transition: background-color 300ms
@@ -164,33 +147,23 @@
     margin-right: 3px;
   }
 
-  .link :global(span) {
+  .supportChip {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .supportLevel {
-    display: flex;
-    align-items: center;
-    height: var(--spectrum-alias-item-height-m);
-    padding: 0px var(--spectrum-alias-item-padding-m);
-    margin-bottom: 12px;
     color: black;
   }
-  .supportLevel :global(svg) {
+
+  .supportChip :global(svg) {
     margin-right: 5px;
   }
 
-  .supportLevel.supportLevelUnsupported {
+  .supportChip.supportLevelUnsupported {
-    background-color: var(--red-light)
+    background-color: var(--red)
   }
 
-  .supportLevel.supportLevelPartialSupport {
+  .supportChip.supportLevelPartialSupport {
-    background-color: var(--yellow-light)
+    background-color: var(--yellow)
   }
 
-  .supportLevel.supportLevelSupported {
+  .supportChip.supportLevelSupported {
-    background-color: var(--green-light)
+    background-color: var(--green)
   }
 </style>

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

@@ -128,7 +128,7 @@
         class: "supportLevelUnsupported",
         icon: "Alert",
         iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Unsupported"
+        text: "Not Compatible"
       }
     }
 
@@ -137,7 +137,7 @@
         class: "supportLevelPartialSupport",
         icon: "AlertCheck",
         iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Partial Support"
+        text: "Partially Compatible"
       }
     }
 
@@ -146,7 +146,7 @@
         class: "supportLevelSupported",
         icon: "CheckmarkCircle",
         iconTooltip: fieldSupport[optionKey]?.message,
-        text: "Supported"
+        text: "Compatible"
       }
     }
 
@@ -154,7 +154,7 @@
       class: "supportLevelUnsupported",
       icon: "Alert",
       iconTooltip: "",
-      text: "Unsupported"
+      text: "No Support"
     }
   }
 
@@ -203,6 +203,7 @@
   offset={20}
 >
   <ChartFieldContext
+    support={fieldSupport[previousOption]}
     supportLevelClass={currentOptionSupport.class}
     supportLevelIcon={currentOptionSupport.icon}
     supportLevelIconTooltip={currentOptionSupport.iconTooltip}
@@ -215,6 +216,7 @@
   />
   <ChartFieldContext
     slot="previous"
+    support={fieldSupport[previousOption]}
     supportLevelClass={previousOptionSupport.class}
     supportLevelIcon={previousOptionSupport.icon}
     supportLevelIconTooltip={previousOptionSupport.iconTooltip}

packages/builder/src/components/design/settings/fieldValidator.js

@@ -10,7 +10,6 @@ export const constants = {
 
 export const validators = {
   chart: (fieldSchema) => {
-    console.log(fieldSchema);
     try {
       const response = {
         level: null,
@@ -28,8 +27,9 @@ export const validators = {
       }
 
       if (fieldSchema.type === "string") {
+
         response.warnings.push(
-          "This column can be used as an input for a chart, but non-numeric values may cause unexpected behavior.")
+          "string number warning")
       }
       if (fieldSchema.type === "datetime") {
         response.warnings.push(