Add new tag component to client apps

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -74,6 +74,7 @@
       "heading",
       "text",
       "button",
+      "tag",
       "divider",
       "image",
       "backgroundimage",

packages/client/manifest.json

@@ -819,6 +819,57 @@
       }
     ]
   },
+  "tag": {
+    "name": "Tag",
+    "icon": "TextParagraph",
+    "showSettingsBar": true,
+    "settings": [
+      {
+        "type": "text",
+        "label": "Text",
+        "key": "text"
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "M",
+        "showInBar": true,
+        "barStyle": "picker",
+        "options": [{
+          "label": "Small",
+          "value": "S"
+        }, {
+          "label": "Medium",
+          "value": "M"
+        }, {
+          "label": "Large",
+          "value": "L"
+        }]
+      },
+      {
+        "type": "color",
+        "label": "Color",
+        "key": "color",
+        "showInBar": true,
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Show delete icon",
+        "key": "closable",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Show delete icon"
+      },
+      {
+        "type": "event",
+        "label": "On click delete icon",
+        "key": "onClick",
+        "dependsOn": "closable"
+      }
+    ]
+  },
   "image": {
     "name": "Image",
     "description": "A basic component for displaying images",

packages/client/package.json

@@ -35,6 +35,7 @@
     "@spectrum-css/divider": "^1.0.3",
     "@spectrum-css/link": "^3.1.3",
     "@spectrum-css/page": "^3.0.1",
+    "@spectrum-css/tag": "^3.1.4",
     "@spectrum-css/typography": "^3.0.2",
     "@spectrum-css/vars": "^3.0.1",
     "apexcharts": "^3.22.1",

packages/client/src/components/app/Tag.svelte

@@ -0,0 +1,59 @@
+<script>
+  import "@spectrum-css/tag/dist/index-vars.css"
+  import { ClearButton } from "@budibase/bbui"
+  import { getContext } from "svelte"
+
+  export let onClick
+  export let text = ""
+  export let color
+  export let closable = false
+  export let size = "M"
+
+  const component = getContext("component")
+  const { styleable, builderStore } = getContext("sdk")
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = enrichStyles($component.styles, color)
+  $: componentText = getComponentText(text, $builderStore, $component)
+
+  const getComponentText = (text, builderState, componentState) => {
+    if (!builderState.inBuilder || componentState.editing) {
+      return text || " "
+    }
+    return text || componentState.name || "Placeholder text"
+  }
+
+  const enrichStyles = (styles, color) => {
+    if (!color) {
+      return styles
+    }
+    return {
+      ...styles,
+      normal: {
+        ...styles?.normal,
+        "background-color": color,
+        "border-color": color,
+        color: "white",
+        "--spectrum-clearbutton-medium-icon-color": "white",
+      },
+    }
+  }
+</script>
+
+<div class="spectrum-Tag spectrum-Tag--size{size}" use:styleable={styles}>
+  <span class="spectrum-Tag-label">{componentText}</span>
+  {#if closable}
+    <ClearButton on:click={onClick} />
+  {/if}
+</div>
+
+<style>
+  .spectrum-Tag--sizeS,
+  .spectrum-Tag--sizeM {
+    padding: 0 var(--spectrum-global-dimension-size-100);
+  }
+  .spectrum-Tag--sizeL {
+    padding: 0 var(--spectrum-global-dimension-size-150);
+  }
+</style>

packages/client/src/components/app/index.js

@@ -29,6 +29,7 @@ export { default as backgroundimage } from "./BackgroundImage.svelte"
 export { default as daterangepicker } from "./DateRangePicker.svelte"
 export { default as cardstat } from "./CardStat.svelte"
 export { default as spectrumcard } from "./SpectrumCard.svelte"
+export { default as tag } from "./Tag.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"