wip component infoword

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

@@ -72,17 +72,12 @@
 
   <div class="line topLine">
     <span class="bullet">•</span>
-    <a
-      target="_blank" rel="noopener noreferrer"
+    <InfoWord
       on:mouseenter={() => handleMouseenter("column")}
       on:mouseleave={() => handleMouseleave("column")}
       href={tableHref}
-      class="chip columnName"
-    >
-      <span>
-      {columnName}
-      </span>
-    </a>
+      text={columnName}
+    />
     <span class="space" />
     <span class="text"> is a </span>
     <span class="space" />
@@ -264,6 +259,10 @@
 {/if}
 
 <style>
+  .text {
+    flex-shrink: 0;
+  }
+
   .sidecarContent {
     max-width: 300px;
     padding: 16px 12px 18px;

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

@@ -1,25 +1,52 @@
 <script>
   import { Icon } from "@budibase/bbui"
-  export let icon = ""
-  export let color = "initial"
+  export let icon = null
+  export let color = null
   export let text = ""
+  export let href = null
 </script>
 
-<div
-  role="tooltip"
-  class="chip"
-  style:color={color}
-  style:border-color={color}
-  on:mouseenter
-  on:mouseleave
+
+{#if href !== null}
+  <a
+    tabindex="0"
+    {href}
+    rel="noopener noreferrer"
+    target="_blank"
+    class="chip"
+    style:color={color}
+    style:border-color={color}
+    on:mouseenter
+    on:mouseleave
   >
-  <Icon size="S" name={icon} />
-  <span class="text">
-    <slot>
-      {text}
-    </slot>
-  </span>
-</div>
+    {#if icon}
+      <Icon size="S" name={icon} />
+    {/if}
+    <span class="text">
+      <slot>
+        {text}
+      </slot>
+    </span>
+  </a>
+{:else}
+  <div
+    role="tooltip"
+    class="chip"
+    style:color={color}
+    style:border-color={color}
+    on:mouseenter
+    on:mouseleave
+  >
+    {#if icon}
+      <Icon size="S" name={icon} />
+    {/if}
+    <span class="text">
+      <slot>
+        {text}
+      </slot>
+    </span>
+  </div>
+{/if}
 
 <style>
   .chip {
@@ -31,6 +58,7 @@
     filter: brightness(100%);
     background-color: var(--grey-3);
     border: 1px solid var(--grey-3);
+    overflow: hidden;
   }
 
   .chip:hover {
@@ -45,6 +73,8 @@
 
   .text {
     color: var(--ink);
-    flex-shrink: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 </style>