Adding in static/dynamic select, as well as the ability to set a tooltip on a select.

packages/bbui/src/Form/Field.svelte

@@ -6,11 +6,12 @@
   export let label = null
   export let labelPosition = "above"
   export let error = null
+  export let tooltip = ""
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>
   {#if label}
-    <FieldLabel forId={id} {label} position={labelPosition} />
+    <FieldLabel forId={id} {label} position={labelPosition} {tooltip} />
   {/if}
   <div class="spectrum-Form-itemField">
     <slot />

packages/bbui/src/Form/FieldLabel.svelte

@@ -1,19 +1,24 @@
 <script>
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
+
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
 
   export let forId
   export let label
   export let position = "above"
+  export let tooltip = ""
 
   $: className = position === "above" ? "" : `spectrum-FieldLabel--${position}`
 </script>
 
-<label
+<TooltipWrapper {tooltip} size="S">
-  for={forId}
+  <label
-  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
+    for={forId}
->
+    class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
-  {label || ""}
+  >
-</label>
+    {label || ""}
+  </label>
+</TooltipWrapper>
 
 <style>
   label {

packages/bbui/src/Form/Select.svelte

@@ -17,6 +17,7 @@
   export let quiet = false
   export let autoWidth = false
   export let sort = false
+  export let tooltip = ""
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -32,7 +33,7 @@
   }
 </script>
 
-<Field {label} {labelPosition} {error}>
+<Field {label} {labelPosition} {error} {tooltip}>
   <Select
     {quiet}
     {error}

packages/bbui/src/Label/Label.svelte

@@ -1,73 +1,20 @@
 <script>
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
-  import Icon from "../Icon/Icon.svelte"
 
   export let size = "M"
   export let tooltip = ""
-  export let showTooltip = false
 </script>
 
-{#if tooltip}
+<TooltipWrapper {tooltip} {size}>
-  <div class="container">
-    <label
-      for=""
-      class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
-    >
-      <slot />
-    </label>
-    <div class="icon-container">
-      <div
-        class="icon"
-        class:icon-small={size === "M" || size === "S"}
-        on:mouseover={() => (showTooltip = true)}
-        on:mouseleave={() => (showTooltip = false)}
-      >
-        <Icon name="InfoOutline" size="S" disabled={true} />
-      </div>
-      {#if showTooltip}
-        <div class="tooltip">
-          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
-        </div>
-      {/if}
-    </div>
-  </div>
-{:else}
   <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
     <slot />
   </label>
-{/if}
+</TooltipWrapper>
 
 <style>
   label {
     padding: 0;
     white-space: nowrap;
   }
-  .container {
-    display: flex;
-    align-items: center;
-  }
-  .icon-container {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    margin-top: 1px;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-  .tooltip {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    top: 15px;
-    z-index: 1;
-    width: 160px;
-  }
-  .icon {
-    transform: scale(0.75);
-  }
-  .icon-small {
-    margin-top: -2px;
-    margin-bottom: -5px;
-  }
 </style>

packages/bbui/src/Tooltip/TooltipWrapper.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Tooltip from "./Tooltip.svelte"
+  import Icon from "../Icon/Icon.svelte"
+
+  export let tooltip = ""
+  export let size = "M"
+
+  let showTooltip = false
+</script>
+
+<div class:container={!!tooltip}>
+  <slot />
+  {#if tooltip}
+    <div class="icon-container">
+      <div
+        class="icon"
+        class:icon-small={size === "M" || size === "S"}
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}
+      >
+        <Icon name="InfoOutline" size="S" disabled={true} />
+      </div>
+      {#if showTooltip}
+        <div class="tooltip">
+          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+  }
+  .icon-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: 1px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    top: 15px;
+    z-index: 1;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
+  .icon-small {
+    margin-top: -2px;
+    margin-bottom: -5px;
+  }
+</style>

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -150,6 +150,7 @@
     delete field.subtype
     delete field.tableId
     delete field.relationshipType
+    delete field.formulaType
 
     // Add in defaults and initial definition
     const definition = fieldDefinitions[event.detail?.toUpperCase()]
@@ -161,6 +162,9 @@
     if (field.type === LINK_TYPE) {
       field.relationshipType = RelationshipTypes.MANY_TO_MANY
     }
+    if (field.type === FORMULA_TYPE) {
+      field.formulaType = "dynamic"
+    }
   }
 
   function onChangeRequired(e) {
@@ -431,8 +435,20 @@
       error={errors.relatedName}
     />
   {:else if field.type === FORMULA_TYPE}
+    <Select
+      label="Formula type"
+      value={field.formulaType}
+      options={[
+        { label: "Dynamic", value: "dynamic" },
+        { label: "Static", value: "static" },
+      ]}
+      getOptionLabel={option => option.label}
+      getOptionValue={option => option.value}
+      tooltip="Dynamic formula are calculated when retrieved, but cannot be filtered,
+       while static formula are calculated when the row is saved."
+    />
     <ModalBindableInput
-      title="Handlebars Formula"
+      title="Formula"
       label="Formula"
       value={field.formula}
       on:change={e => (field.formula = e.detail)}
@@ -441,7 +457,7 @@
     />
   {:else if field.type === AUTO_TYPE}
     <Select
-      label="Auto Column Type"
+      label="Auto column type"
       value={field.subtype}
       on:change={e => (field.subtype = e.detail)}
       options={Object.entries(getAutoColumnInformation())}