Add new typography settings, add new settings bar dropdowns, add settings bar to text components

packages/bbui/src/ColorPicker/ColorPicker.svelte

@@ -8,6 +8,7 @@
   import { capitalise } from "../utils/helpers"
 
   export let value
+  export let size = "M"
 
   let open = false
 
@@ -110,7 +111,7 @@
 
 <div class="container">
   <div
-    class="preview"
+    class="preview size--{size || 'M'}"
     style="background: {color};"
     on:click={() => (open = true)}
   />
@@ -178,6 +179,18 @@
     cursor: pointer;
     box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
   }
+  .size--S {
+    width: 20px;
+    height: 20px;
+  }
+  .size--M {
+    width: 32px;
+    height: 32px;
+  }
+  .size--L {
+    width: 48px;
+    height: 48px;
+  }
   .spectrum-Popover {
     width: 210px;
     z-index: 999;

packages/bbui/src/Form/Core/Picker.svelte

@@ -20,6 +20,7 @@
   export let open = false
   export let readonly = false
   export let quiet = false
+  export let autoWidth = false
 
   const dispatch = createEventDispatcher()
   const onClick = () => {
@@ -41,7 +42,11 @@
   aria-haspopup="listbox"
   on:mousedown={onClick}
 >
-  <span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
+  <span
+    class="spectrum-Picker-label"
+    class:is-placeholder={isPlaceholder}
+    class:auto-width={autoWidth}
+  >
     {fieldText}
   </span>
   {#if error}
@@ -67,11 +72,12 @@
     use:clickOutside={() => (open = false)}
     transition:fly={{ y: -20, duration: 200 }}
     class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+    class:auto-width={autoWidth}
   >
     <ul class="spectrum-Menu" role="listbox">
       {#if placeholderOption}
         <li
-          class="spectrum-Menu-item"
+          class="spectrum-Menu-item placeholder"
           class:is-selected={isPlaceholder}
           role="option"
           aria-selected="true"
@@ -118,17 +124,28 @@
 <style>
   .spectrum-Popover {
     max-height: 240px;
-    width: 100%;
     z-index: 999;
     top: 100%;
   }
+  .spectrum-Popover:not(.auto-width) {
+    width: 100%;
+  }
+  .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
+    white-space: nowrap;
+  }
   .spectrum-Picker {
     width: 100%;
   }
-  .spectrum-Picker-label {
+  .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     width: 0;
   }
+  .placeholder {
+    font-style: italic;
+  }
+  .spectrum-Picker-label.auto-width.is-placeholder {
+    padding-right: 2px;
+  }
 </style>

packages/bbui/src/Form/Core/Select.svelte

@@ -12,6 +12,7 @@
   export let getOptionValue = option => option
   export let readonly = false
   export let quiet = false
+  export let autoWidth = false
 
   const dispatch = createEventDispatcher()
   let open = false
@@ -51,6 +52,7 @@
   {readonly}
   {fieldText}
   {options}
+  {autoWidth}
   {getOptionLabel}
   {getOptionValue}
   isPlaceholder={value == null || value === ""}

packages/bbui/src/Form/Select.svelte

@@ -14,6 +14,7 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let quiet = false
+  export let autoWidth = false
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -37,6 +38,7 @@
     {value}
     {options}
     {placeholder}
+    {autoWidth}
     {getOptionLabel}
     {getOptionValue}
     on:change={onChange}

packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte

@@ -4,10 +4,13 @@
   import iframeTemplate from "./iframeTemplate"
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
   import { FrontendTypes } from "constants"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
 
   let iframe
   let layout
   let screen
+  let confirmDeleteDialog
+  let idToDelete
 
   // Create screen slot placeholder for use when a page is selected rather
   // than a screen
@@ -73,15 +76,26 @@
     // Add listener for events sent by cliebt library in preview
     iframe.contentWindow.addEventListener("bb-event", event => {
       const { type, data } = event.detail
-      if (type === "select-component") {
+      if (type === "select-component" && data.id) {
         store.actions.components.select({ _id: data.id })
       } else if (type === "update-prop") {
         store.actions.components.updateProp(data.prop, data.value)
+      } else if (type === "delete-component" && data.id) {
+        idToDelete = data.id
+        confirmDeleteDialog.show()
       } else {
         console.log(data)
       }
     })
   })
+
+  const deleteComponent = () => {
+    store.actions.components.delete({ _id: idToDelete })
+    idToDelete = null
+  }
+  const cancelDeleteComponent = () => {
+    idToDelete = null
+  }
 </script>
 
 <div class="component-container">
@@ -92,6 +106,14 @@
     srcdoc={template}
   />
 </div>
+<ConfirmDialog
+  bind:this={confirmDeleteDialog}
+  title="Confirm Deletion"
+  body={`Are you sure you want to delete this component?`}
+  okText="Delete component"
+  onOk={deleteComponent}
+  onCancel={cancelDeleteComponent}
+/>
 
 <style>
   .component-container {

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -1,6 +1,12 @@
 <script>
   import { isEmpty } from "lodash/fp"
-  import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
+  import {
+    Checkbox,
+    Input,
+    Select,
+    DetailSummary,
+    ColorPicker,
+  } from "@budibase/bbui"
   import { store } from "builderStore"
   import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
@@ -16,7 +22,6 @@
   import EventsEditor from "./PropertyControls/EventsEditor"
   import FilterEditor from "./PropertyControls/FilterEditor/FilterEditor.svelte"
   import { IconSelect } from "./PropertyControls/IconSelect"
-  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
   import StringFieldSelect from "./PropertyControls/StringFieldSelect.svelte"
   import NumberFieldSelect from "./PropertyControls/NumberFieldSelect.svelte"
   import OptionsFieldSelect from "./PropertyControls/OptionsFieldSelect.svelte"

packages/builder/src/components/design/PropertiesPanel/componentStyles.js

@@ -1,85 +1,5 @@
 import { Input, Select, ColorPicker } from "@budibase/bbui"
 import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
-// import Colorpicker from "./PropertyControls/ColorPicker.svelte"
-
-export const layout = [
-  {
-    label: "Display",
-    key: "display",
-    control: Select,
-    options: [
-      { label: "Block", value: "block" },
-      { label: "Inline Block", value: "inline-block" },
-      { label: "Flex", value: "flex" },
-      { label: "Inline Flex", value: "inline-flex" },
-    ],
-  },
-  {
-    label: "Direction",
-    key: "flex-direction",
-    control: FlatButtonGroup,
-    buttonProps: [
-      { icon: "ri-arrow-right-line", padding: "0px 5px", value: "row" },
-      { icon: "ri-arrow-left-line", padding: "0px 5px", value: "rowReverse" },
-      { icon: "ri-arrow-down-line", padding: "0px 5px", value: "column" },
-      {
-        icon: "ri-arrow-up-line",
-        padding: "0px 5px",
-        value: "columnReverse",
-      },
-      { icon: "ri-close-line", value: "" },
-    ],
-  },
-  {
-    label: "Justify",
-    key: "justify-content",
-    control: Select,
-    options: [
-      { label: "Flex Start", value: "flex-start" },
-      { label: "Flex End", value: "flex-end" },
-      { label: "Center", value: "center" },
-      { label: "Space Between", value: "space-between" },
-      { label: "Space Around", value: "space-around" },
-      { label: "Space Evenly", value: "space-evenly" },
-    ],
-  },
-  {
-    label: "Align",
-    key: "align-items",
-    control: Select,
-    options: [
-      { label: "Flex Start", value: "flex-start" },
-      { label: "Flex End", value: "flex-end" },
-      { label: "Center", value: "center" },
-      { label: "Baseline", value: "baseline" },
-      { label: "Stretch", value: "stretch" },
-    ],
-  },
-  {
-    label: "Wrap",
-    key: "flex-wrap",
-    control: Select,
-    options: [
-      { label: "Wrap", value: "wrap" },
-      { label: "No wrap", value: "nowrap" },
-    ],
-  },
-  {
-    label: "Gap",
-    key: "gap",
-    control: Select,
-    options: [
-      { label: "None", value: "0px" },
-      { label: "4px", value: "4px" },
-      { label: "8px", value: "8px" },
-      { label: "16px", value: "16px" },
-      { label: "20px", value: "20px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "64px", value: "64px" },
-    ],
-  },
-]
 
 export const margin = {
   label: "Margin",
@@ -274,116 +194,6 @@ export const size = {
   ],
 }
 
-export const typography = [
-  {
-    label: "Font",
-    key: "font-family",
-    control: Select,
-    options: [
-      { label: "Arial", value: "Arial" },
-      { label: "Arial Black", value: "Arial Black" },
-      { label: "Cursive", value: "Cursive" },
-      { label: "Courier", value: "Courier" },
-      { label: "Comic Sans MS", value: "Comic Sans MS" },
-      { label: "Helvetica", value: "Helvetica" },
-      { label: "Helvetica Neue", value: "Helvetica Neue" },
-      { label: "Impact", value: "Impact" },
-      { label: "Inter", value: "Inter" },
-      { label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" },
-      { label: "Source Sans Pro", value: "Source Sans Pro" },
-      { label: "Times New Roman", value: "Times New Roman" },
-      { label: "Verdana", value: "Verdana" },
-    ],
-    styleBindingProperty: "font-family",
-  },
-  {
-    label: "Weight",
-    key: "font-weight",
-    control: Select,
-    options: [
-      { label: "200", value: "200" },
-      { label: "300", value: "300" },
-      { label: "400", value: "400" },
-      { label: "500", value: "500" },
-      { label: "600", value: "600" },
-      { label: "700", value: "700" },
-      { label: "800", value: "800" },
-      { label: "900", value: "900" },
-    ],
-  },
-  {
-    label: "size",
-    key: "font-size",
-    control: Select,
-    options: [
-      { label: "8px", value: "8px" },
-      { label: "10px", value: "10px" },
-      { label: "12px", value: "12px" },
-      { label: "14px", value: "14px" },
-      { label: "16px", value: "16px" },
-      { label: "18px", value: "18px" },
-      { label: "20px", value: "20px" },
-      { label: "24px", value: "24px" },
-      { label: "32px", value: "32px" },
-      { label: "48px", value: "48px" },
-      { label: "60px", value: "60px" },
-      { label: "72px", value: "72px" },
-    ],
-  },
-  {
-    label: "Line H",
-    key: "line-height",
-    control: Select,
-    options: [
-      { label: "1", value: "1" },
-      { label: "1.25", value: "1.25" },
-      { label: "1.5", value: "1.5" },
-      { label: "1.75", value: "1.75" },
-      { label: "2", value: "2" },
-      { label: "4", value: "4" },
-    ],
-  },
-  {
-    label: "Color",
-    key: "color",
-    control: ColorPicker,
-  },
-  {
-    label: "align",
-    key: "text-align",
-    control: FlatButtonGroup,
-    buttonProps: [
-      { icon: "ri-align-left", padding: "0px 5px", value: "left" },
-      { icon: "ri-align-center", padding: "0px 5px", value: "center" },
-      { icon: "ri-align-right", padding: "0px 5px", value: "right" },
-      { icon: "ri-align-justify", padding: "0px 5px", value: "justify" },
-      { icon: "ri-close-line", value: "" },
-    ],
-  },
-  {
-    label: "transform",
-    key: "text-transform",
-    control: FlatButtonGroup,
-    buttonProps: [
-      { text: "BB", value: "uppercase" },
-      { text: "Bb", value: "capitalize" },
-      { text: "bb", value: "lowercase" },
-      { icon: "ri-close-line", value: "" },
-    ],
-  },
-  {
-    label: "Decoration",
-    key: "text-decoration-line",
-    control: Select,
-    options: [
-      { label: "Underline", value: "underline" },
-      { label: "Overline", value: "overline" },
-      { label: "Line-through", value: "line-through" },
-      { label: "Under Over", value: "underline overline" },
-    ],
-  },
-]
-
 export const background = {
   label: "Background",
   inline: true,
@@ -531,53 +341,4 @@ export const border = {
   ],
 }
 
-export const transitions = [
-  {
-    label: "Property",
-    key: "transition-property",
-    control: Select,
-    options: [
-      { label: "None", value: "none" },
-      { label: "All", value: "all" },
-      { label: "Background Color", value: "background color" },
-      { label: "Color", value: "color" },
-      { label: "Font Size", value: "font size" },
-      { label: "Font Weight", value: "font weight" },
-      { label: "Height", value: "height" },
-      { label: "Margin", value: "margin" },
-      { label: "Opacity", value: "opacity" },
-      { label: "Padding", value: "padding" },
-      { label: "Rotate", value: "rotate" },
-      { label: "Shadow", value: "shadow" },
-      { label: "Width", value: "width" },
-    ],
-  },
-  {
-    label: "Duration",
-    key: "transition-duration",
-    control: Select,
-    placeholder: "sec",
-    options: [
-      { label: "0.4s", value: "0.4s" },
-      { label: "0.6s", value: "0.6s" },
-      { label: "0.8s", value: "0.8s" },
-      { label: "1s", value: "1s" },
-      { label: "2s", value: "2s" },
-      { label: "4s", value: "4s" },
-    ],
-  },
-  {
-    label: "Ease",
-    key: "transition-timing-function",
-    control: Select,
-    options: [
-      { label: "Linear", value: "linear" },
-      { label: "Ease", value: "ease" },
-      { label: "Ease in", value: "ease-in" },
-      { label: "Ease out", value: "ease-out" },
-      { label: "Ease in out", value: "ease-in-out" },
-    ],
-  },
-]
-
 export const all = [margin]

packages/client/src/components/preview/SettingsBar.svelte

@@ -1,6 +1,8 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import SettingsButton from "./SettingsButton.svelte"
+  import SettingsColorPicker from "./SettingsColorPicker.svelte"
+  import SettingsPicker from "./SettingsPicker.svelte"
   import { builderStore } from "../../store"
   import { domDebounce } from "../../utils/domDebounce"
 
@@ -87,19 +89,44 @@
   >
     {#each settings as setting, idx}
       {#if setting.type === "select"}
-        {#each setting.options as option}
-          <SettingsButton
+        {#if setting.barStyle === "buttons"}
+          {#each setting.options as option}
+            <SettingsButton
+              prop={setting.key}
+              value={option.value}
+              icon={option.barIcon}
+              title={option.barTitle}
+            />
+          {/each}
+        {:else}
+          <SettingsPicker
             prop={setting.key}
-            value={option.value}
-            icon={option.barIcon}
-            title={option.barTitle}
+            options={setting.options}
+            label={setting.label}
           />
-        {/each}
+        {/if}
+      {:else if setting.type === "boolean"}
+        <SettingsButton
+          prop={setting.key}
+          icon={setting.barIcon}
+          title={setting.barTitle}
+          bool
+        />
+      {:else if setting.type === "color"}
+        <SettingsColorPicker prop={setting.key} />
       {/if}
-      {#if idx < settings.length - 1}
+      {#if setting.barSeparator !== false}
         <div class="divider" />
       {/if}
     {/each}
+    <SettingsButton
+      icon="Delete"
+      on:click={() => {
+        builderStore.actions.deleteComponent(
+          $builderStore.selectedComponent._id
+        )
+      }}
+    />
   </div>
 {/if}
 

packages/client/src/components/preview/SettingsButton.svelte

@@ -1,6 +1,7 @@
 <script>
   import { Icon } from "@budibase/bbui"
   import { builderStore } from "../../store"
+  import { createEventDispatcher } from "svelte"
 
   export let prop
   export let value
@@ -9,6 +10,7 @@
   export let rotate = false
   export let bool = false
 
+  const dispatch = createEventDispatcher()
   $: currentValue = $builderStore.selectedComponent?.[prop]
   $: active = prop && (bool ? !!currentValue : currentValue === value)
 </script>
@@ -22,6 +24,7 @@
       const newValue = bool ? !currentValue : value
       builderStore.actions.updateProp(prop, newValue)
     }
+    dispatch("click")
   }}
 >
   <Icon name={icon} size="S" />

packages/client/src/components/preview/SettingsColorPicker.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { ColorPicker } from "@budibase/bbui"
+  import { builderStore } from "../../store"
+
+  export let prop
+
+  $: currentValue = $builderStore.selectedComponent?.[prop]
+</script>
+
+<div>
+  <ColorPicker
+    size="S"
+    value={currentValue}
+    on:change={e => {
+      if (prop) {
+        builderStore.actions.updateProp(prop, e.detail)
+      }
+    }}
+  />
+</div>
+
+<style>
+  div {
+    padding: 0 4px;
+  }
+</style>

packages/client/src/components/preview/SettingsPicker.svelte

@@ -0,0 +1,31 @@
+<script>
+  import { Select } from "@budibase/bbui"
+  import { builderStore } from "../../store"
+
+  export let prop
+  export let options
+  export let label
+
+  $: currentValue = $builderStore.selectedComponent?.[prop]
+</script>
+
+<div>
+  <Select
+    quiet
+    autoWidth
+    placeholder={label}
+    {options}
+    value={currentValue}
+    on:change={e => {
+      if (prop) {
+        builderStore.actions.updateProp(prop, e.detail)
+      }
+    }}
+  />
+</div>
+
+<style>
+  div {
+    padding: 0 4px;
+  }
+</style>

packages/client/src/store/builder.js

@@ -56,13 +56,14 @@ const createBuilderStore = () => {
 
   const actions = {
     selectComponent: id => {
-      if (id) {
-        dispatchEvent("select-component", { id })
-      }
+      dispatchEvent("select-component", { id })
     },
     updateProp: (prop, value) => {
       dispatchEvent("update-prop", { prop, value })
     },
+    deleteComponent: id => {
+      dispatchEvent("delete-component", { id })
+    },
   }
   return {
     ...writableStore,

packages/standard-components/manifest.json

@@ -4,7 +4,6 @@
     "description": "This component is specific only to layouts",
     "icon": "Sandbox",
     "hasChildren": true,
-    "styleable": true,
     "styles": ["padding", "background"],
     "settings": [
       {
@@ -69,6 +68,7 @@
         "label": "Direction",
         "key": "direction",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Column",
@@ -90,6 +90,7 @@
         "label": "Horiz. Align",
         "key": "hAlign",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Left",
@@ -123,6 +124,7 @@
         "label": "Vert. Align",
         "key": "vAlign",
         "showInBar": "true",
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Top",
@@ -156,6 +158,7 @@
         "label": "Size",
         "key": "size",
         "showInBar": true,
+        "barStyle": "buttons",
         "options": [
           {
             "label": "Shrink",
@@ -179,7 +182,6 @@
     "description": "Add a section to your application",
     "icon": "ColumnTwoB",
     "hasChildren": true,
-    "styleable": true,
     "illegalChildren": ["section"],
     "showEmptyState": false,
     "settings": [
@@ -194,15 +196,13 @@
   "screenslot": {
     "name": "Screenslot",
     "icon": "WebPage",
-    "description": "Contains your app screens",
-    "styleable": true
+    "description": "Contains your app screens"
   },
   "button": {
     "name": "Button",
     "description": "A basic html button that is ready for styling",
     "icon": "Button",
     "illegalChildren": ["section"],
-    "styleable": true,
     "settings": [
       {
         "type": "text",
@@ -239,7 +239,6 @@
     "name": "Repeater",
     "description": "A configurable data list that attaches to your backend tables.",
     "icon": "ViewList",
-    "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "settings": [
@@ -268,7 +267,6 @@
     "name": "Stacked List",
     "icon": "TaskList",
     "description": "A basic card component that can contain content and actions.",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -298,7 +296,6 @@
     "name": "Vertical Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewColumn",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -359,13 +356,93 @@
     "name": "Paragraph",
     "description": "A component for displaying paragraph text.",
     "icon": "TextParagraph",
-    "styleable": true,
     "illegalChildren": ["section"],
+    "showSettingsBar": true,
     "settings": [
       {
         "type": "text",
         "label": "Text",
         "key": "text"
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "Medium",
+        "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": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
       }
     ]
   },
@@ -373,8 +450,8 @@
     "name": "Headline",
     "icon": "TextBold",
     "description": "A component for displaying heading text",
-    "styleable": true,
     "illegalChildren": ["section"],
+    "showSettingsBar": true,
     "settings": [
       {
         "type": "text",
@@ -383,10 +460,83 @@
       },
       {
         "type": "select",
-        "key": "type",
-        "label": "Type",
-        "options": ["h1", "h2", "h3", "h4", "h5", "h6"],
-        "defaultValue": "h1"
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "Medium",
+        "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": "Bold",
+        "key": "bold",
+        "showInBar": true,
+        "barIcon": "TagBold",
+        "barTitle": "Bold text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Italic",
+        "key": "italic",
+        "showInBar": true,
+        "barIcon": "TagItalic",
+        "barTitle": "Italic text",
+        "barSeparator": false
+      },
+      {
+        "type": "boolean",
+        "label": "Underline",
+        "key": "underline",
+        "showInBar": true,
+        "barIcon": "TagUnderline",
+        "barTitle": "Underline text"
+      },
+      {
+        "type": "select",
+        "label": "Alignment",
+        "key": "align",
+        "defaultValue": "left",
+        "showInBar": true,
+        "barStyle": "buttons",
+        "options": [{
+          "label": "Left",
+          "value": "left",
+          "barIcon": "TextAlignLeft",
+          "barTitle": "Align left"
+        }, {
+          "label": "Center",
+          "value": "center",
+          "barIcon": "TextAlignCenter",
+          "barTitle": "Align center"
+        }, {
+          "label": "Right",
+          "value": "right",
+          "barIcon": "TextAlignRight",
+          "barTitle": "Align right"
+        }, {
+          "label": "Justify",
+          "value": "justify",
+          "barIcon": "TextAlignJustify",
+          "barTitle": "Justify text"
+        }]
       }
     ]
   },
@@ -394,7 +544,6 @@
     "name": "Image",
     "description": "A basic component for displaying images",
     "icon": "Image",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -408,7 +557,6 @@
     "name": "Background Image",
     "description": "A background image",
     "icon": "Images",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -466,7 +614,6 @@
     "name": "Icon",
     "description": "A basic component for displaying icons",
     "icon": "Bell",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -514,7 +661,6 @@
     "name": "Nav Bar",
     "description": "A component for handling the navigation within your app.",
     "icon": "BreadcrumbNavigation",
-    "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "settings": [
@@ -535,7 +681,6 @@
     "name": "Link",
     "description": "A basic link component for internal and external links",
     "icon": "Link",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -565,7 +710,6 @@
     "name": "Horizontal Card",
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewRow",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -638,7 +782,6 @@
     "name": "Stat Card",
     "description": "A card component for displaying numbers.",
     "icon": "Card",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -665,7 +808,6 @@
     "name": "Embed",
     "icon": "Code",
     "description": "Embed content from 3rd party sources",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1228,7 +1370,6 @@
   "form": {
     "name": "Form",
     "icon": "Form",
-    "styleable": true,
     "hasChildren": true,
     "illegalChildren": ["section"],
     "actions": [
@@ -1301,7 +1442,6 @@
   "fieldgroup": {
     "name": "Field Group",
     "icon": "Group",
-    "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "settings": [
@@ -1330,7 +1470,6 @@
   "stringfield": {
     "name": "Text Field",
     "icon": "Text",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1359,7 +1498,6 @@
   "numberfield": {
     "name": "Number Field",
     "icon": "123",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1388,7 +1526,6 @@
   "passwordfield": {
     "name": "Password Field",
     "icon": "LockClosed",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1417,7 +1554,6 @@
   "optionsfield": {
     "name": "Options Picker",
     "icon": "ViewList",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1447,7 +1583,6 @@
   "booleanfield": {
     "name": "Checkbox",
     "icon": "Checkmark",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1476,7 +1611,6 @@
   "longformfield": {
     "name": "Rich Text",
     "icon": "TextParagraph",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1506,7 +1640,6 @@
   "datetimefield": {
     "name": "Date Picker",
     "icon": "DateInput",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1541,7 +1674,6 @@
   "attachmentfield": {
     "name": "Attachment",
     "icon": "Attach",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1565,7 +1697,6 @@
   "relationshipfield": {
     "name": "Relationship Picker",
     "icon": "TaskList",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1595,7 +1726,6 @@
     "name": "Data Provider",
     "info": "Pagination is only available for data stored in internal tables.",
     "icon": "Data",
-    "styleable": false,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "settings": [
@@ -1740,7 +1870,6 @@
   "daterangepicker": {
     "name": "Date Range",
     "icon": "Date",
-    "styleable": true,
     "hasChildren": false,
     "info": "Your data provider will be automatically filtered to the given date range.",
     "settings": [

packages/standard-components/src/Heading.svelte

@@ -4,41 +4,83 @@
   const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let type
   export let text
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size
 
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = $builderStore.inBuilder
     ? text || "Placeholder text"
     : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>
 
-{#if type === "h1"}
-  <h1 class:placeholder use:styleable={$component.styles}>{componentText}</h1>
-{:else if type === "h2"}
-  <h2 class:placeholder use:styleable={$component.styles}>{componentText}</h2>
-{:else if type === "h3"}
-  <h3 class:placeholder use:styleable={$component.styles}>{componentText}</h3>
-{:else if type === "h4"}
-  <h4 class:placeholder use:styleable={$component.styles}>{componentText}</h4>
-{:else if type === "h5"}
-  <h5 class:placeholder use:styleable={$component.styles}>{componentText}</h5>
-{:else if type === "h6"}
-  <h6 class:placeholder use:styleable={$component.styles}>{componentText}</h6>
-{/if}
+<h1
+  use:styleable={styles}
+  class:placeholder
+  class:bold
+  class:italic
+  class:underline
+  class="align--{align || 'left'} size--{size || 'M'}"
+>
+  {#if bold}
+    <strong>{componentText}</strong>
+  {:else}
+    {componentText}
+  {/if}
+</h1>
 
 <style>
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
+  h1 {
+    display: inline-block;
     white-space: pre-wrap;
+    font-weight: 600;
   }
-
   .placeholder {
     font-style: italic;
     color: var(--grey-6);
   }
+  .bold {
+    font-weight: 700;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 18px;
+  }
+  .size--M {
+    font-size: 22px;
+  }
+  .size--L {
+    font-size: 28px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
+  }
 </style>

packages/standard-components/src/Text.svelte

@@ -5,14 +5,37 @@
   const component = getContext("component")
 
   export let text
+  export let color
+  export let align
+  export let bold
+  export let italic
+  export let underline
+  export let size
 
   $: placeholder = $builderStore.inBuilder && !text
   $: componentText = $builderStore.inBuilder
     ? text || "Placeholder text"
     : text || ""
+
+  // Add color styles to main styles object, otherwise the styleable helper
+  // overrides the color when it's passed as inline style.
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles?.normal,
+      color,
+    },
+  }
 </script>
 
-<p use:styleable={$component.styles} class:placeholder>
+<p
+  use:styleable={styles}
+  class:placeholder
+  class:bold
+  class:italic
+  class:underline
+  class="align--{align || 'left'} size--{size || 'M'}"
+>
   {componentText}
 </p>
 
@@ -21,9 +44,38 @@
     display: inline-block;
     white-space: pre-wrap;
   }
-
   .placeholder {
     font-style: italic;
     color: var(--grey-6);
   }
+  .bold {
+    font-weight: 600;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .underline {
+    text-decoration: underline;
+  }
+  .size--S {
+    font-size: 14px;
+  }
+  .size--M {
+    font-size: 16px;
+  }
+  .size--L {
+    font-size: 18px;
+  }
+  .align--left {
+    text-align: left;
+  }
+  .align--center {
+    text-align: center;
+  }
+  .align--right {
+    text-align: right;
+  }
+  .align-justify {
+    text-align: justify;
+  }
 </style>