wip

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

@@ -5,6 +5,7 @@
   import { createEventDispatcher } from "svelte"
   import Property from './Property.svelte'
   import InfoWord from './InfoWord.svelte'
+  import DocumentationLink from './DocumentationLink.svelte'
 
   export let supportLevelClass = ''
   export let supportLevelIconColor = ""
@@ -82,10 +83,11 @@
     <span class="space" />
     <span class="text"> is a </span>
     <span class="space" />
-    <a target="_blank" rel="noopener noreferrer" href={docLink} class="chip link topLink">
+    <DocumentationLink
-      <Icon size="S" name={columnIcon} />
+      href={docLink}
-      <span class="text">{columnType} column</span>
+      icon={columnIcon}
-    </a>
+      text={`${columnType} column`}
+    />
     <span class="period">.</span>
   </div>
   <div class={`line ${supportLevelClass}`}>
@@ -100,10 +102,11 @@
     <span class="space" />
     <span class="text">with</span>
     <span class="space" />
-    <a target="_blank" rel="noopener noreferrer" href={"https://docs.budibase.com/docs/chart"} class="chip link topLink">
+    <DocumentationLink
-      <Icon size="S" name={"GraphPie"} />
+      href="https://docs.budibase.com/docs/chart"
-      <span class="text">Chart components</span>
+      icon="GraphPie"
-    </a>
+      text="Chart components"
+    />
     <span class="period">.</span>
   </div>
   {#if warnings.includes("string number warning")}
@@ -318,6 +321,7 @@
     color: var(--grey-5);
     font-size: 20px;
     display: inline block;
+    margin-left: 3px;
   }
 
   .comma {

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

@@ -0,0 +1,77 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+
+  export let icon
+  export let text
+  export let href
+</script>
+
+<a
+  tabindex="0"
+  {href}
+  rel="noopener noreferrer"
+  target="_blank"
+  class="chip link"
+>
+  <Icon size="S" name={icon} />
+  <span class="text">
+    <slot>
+      {text}
+    </slot>
+  </span>
+</a>
+
+<style>
+  .chip {
+    display: inline-flex;
+    box-sizing: border-box;
+    padding: 3px 6px;
+    border-radius: 5px;
+    vertical-align: sub;
+    filter: brightness(100%);
+    background-color: var(--grey-3);
+    border: 1px solid var(--grey-3);
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+
+  .chip:hover {
+    filter: brightness(120%);
+    transition: filter 300ms
+  }
+
+  .chip :global(svg) {
+    color: inherit;
+    margin-right: 5px;
+  }
+
+  .text {
+    color: var(--ink);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .link {
+    border-radius: 0;
+    background-color: transparent;
+    border: 1px solid red;
+    border-width: 0 0 1px 0;
+    box-sizing: border-box;
+    border-color: var(--blue);
+    color: white;
+    padding-left: 0px;
+    padding-right: 0px;
+    transition: background-color 200ms;
+  }
+
+  .link:hover {
+    cursor: pointer;
+    background-color: #ffffff0a;
+  }
+
+  .link :global(svg) {
+    margin-right: 3px;
+    color: var(--blue);
+  }
+</style>

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

@@ -1,8 +1,9 @@
 <script>
   import { Icon } from "@budibase/bbui"
+
   export let icon = null
   export let color = null
-  export let text = ""
+  export let text
   export let href = null
 </script>