wip component infoword

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

@@ -4,6 +4,7 @@
   import { selectedScreen } from "stores/builder"
   import { createEventDispatcher } from "svelte"
   import Property from './Property.svelte'
+  import InfoWord from './InfoWord.svelte'
 
   export let supportLevelClass = ''
   export let supportLevelIcon = ""
@@ -220,30 +221,27 @@
         <span class="heading">Data/Component Compatibility</span>
         <div class="divider" />
         <div class="section">
-          <div
-            class={`chip supportChip supportLevelSupported`}
-            >
-            <Icon size="S" name={"CheckmarkCircle"} />
-            <span class="text">Compatible</span>
-          </div>
+          <InfoWord
+            icon="CheckmarkCircle"
+            color="var(--green)"
+            text="Compatible"
+          />
           <span class="body">Fully compatible with the component as long as the data is present.</span>
         </div>
         <div class="section">
-          <div
-            class={`chip supportChip supportLevelPartialSupport`}
-            >
-            <Icon size="S" name={"AlertCheck"} />
-            <span class="text">Partially compatible</span>
-          </div>
-          <span class="body">Potentionally compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
+          <InfoWord
+            icon="AlertCheck"
+            color="var(--yellow)"
+            text="Possibly compatible"
+          />
+          <span class="body">Possibly compatible with the component, but beware of other caveats mentioned in the context tooltip.</span>
         </div>
         <div class="section">
-          <div
-            class={`chip supportChip supportLevelUnsupported`}
-            >
-            <Icon size="S" name={"Alert"} />
-            <span class="text">Not compatible</span>
-          </div>
+          <InfoWord
+            icon="Alert"
+            color="var(--red)"
+            text="Not compatible"
+          />
           <span class="body">Imcompatible with the component.</span>
         </div>
 
@@ -303,24 +301,6 @@
     box-sizing: border-box;
   }
 
-  .chip {
-    box-sizing: border-box;
-    display: inline-flex;
-    padding: 3px 6px;
-    border-radius: 5px;
-    vertical-align: sub;
-    filter: brightness(100%);
-  }
-
-  .chip:hover {
-    filter: brightness(120%);
-    transition: filter 300ms
-  }
-
-  .chip :global(svg) {
-    color:  var(--grey-6);
-  }
-
   .columnName {
     vertical-align: baseline;
     background-color: var(--grey-3);
@@ -380,8 +360,22 @@
   .topLine .space {
   }
 
-  .topLine .text {
-    flex-shrink: 0;
+  .chip {
+    box-sizing: border-box;
+    display: inline-flex;
+    padding: 3px 6px;
+    border-radius: 5px;
+    vertical-align: sub;
+    filter: brightness(100%);
+  }
+
+  .chip:hover {
+    filter: brightness(120%);
+    transition: filter 300ms
+  }
+
+  .chip :global(svg) {
+    color:  var(--grey-6);
   }
 
   .topLine .period {
@@ -410,10 +404,6 @@
     margin-bottom: 0px;
   }
 
-  .line > .text {
-    display: inline;
-  }
-
   .link {
     border-radius: 0;
     background-color: transparent;

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

@@ -0,0 +1,50 @@
+<script>
+  import { Icon } from "@budibase/bbui"
+  export let icon = ""
+  export let color = "initial"
+  export let text = ""
+</script>
+
+<div
+  role="tooltip"
+  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>
+
+<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);
+  }
+
+  .chip:hover {
+    filter: brightness(120%);
+    transition: filter 300ms
+  }
+
+  .chip :global(svg) {
+    color: inherit;
+    margin-right: 5px;
+  }
+
+  .text {
+    color: var(--ink);
+    flex-shrink: 0;
+  }
+</style>