Add new style definitions for containers

5 years ago · dd4c7a186e
11 changed files with 495 additions and 1892 deletions
--- a/packages/bbui/src/DetailSummary/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@ -4,9 +4,13 @@

  export let name
  export let show = false
+  export let collapsible = true

  const dispatch = createEventDispatcher()
  const onHeaderClick = () => {
+    if (!collapsible) {
+      return
+    }
    show = !show
    if (show) {
      dispatch("open")
@ -17,9 +21,11 @@
 <div class="property-group-container">
  <div class="property-group-name" on:click={onHeaderClick}>
    <div class="name">{name}</div>
-    <Icon size="S" name={show ? "Remove" : "Add"} />
+    {#if collapsible}
+      <Icon size="S" name={show ? "Remove" : "Add"} />
+    {/if}
  </div>
-  <div class="property-panel" class:show>
+  <div class="property-panel" class:show={show || !collapsible}>
    <slot />
  </div>
 </div>
--- a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
@ -1,11 +1,10 @@
 <script>
-  import { DetailSummary, ActionButton } from "@budibase/bbui"
+  import { ActionButton } from "@budibase/bbui"
  import { currentAsset, store } from "builderStore"
  import { findClosestMatchingComponent } from "builderStore/storeUtils"
  import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
  import ConfirmDialog from "components/common/ConfirmDialog.svelte"

-  export let openSection
  export let componentDefinition
  export let componentInstance

@ -26,20 +25,15 @@
  }
 </script>

-<DetailSummary name="Actions" on:open show={openSection === "actions"}>
-  <ActionButton secondary wide on:click={store.actions.components.resetStyles}>
-    Reset styles
+{#if componentDefinition?.component?.endsWith("/fieldgroup")}
+  <ActionButton
+    secondary
+    wide
+    on:click={() => confirmResetFieldsDialog?.show()}
+  >
+    Update form fields
  </ActionButton>
-  {#if componentDefinition?.component?.endsWith("/fieldgroup")}
-    <ActionButton
-      secondary
-      wide
-      on:click={() => confirmResetFieldsDialog?.show()}
-    >
-      Update form fields
-    </ActionButton>
-  {/if}
-</DetailSummary>
+{/if}

 <ConfirmDialog
  bind:this={confirmResetFieldsDialog}
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@ -1,7 +1,7 @@
 <script>
  import { isEmpty } from "lodash/fp"
  import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
-  import { selectedComponent, store } from "builderStore"
+  import { store } from "builderStore"
  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
  import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
  import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@ -25,12 +25,10 @@
  import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
  import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
  import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
-  import { FrontendTypes } from "constants"

  export let componentDefinition
  export let componentInstance
  export let assetInstance
-  export let openSection

  const layoutDefinition = []
  const screenDefinition = [
@ -88,7 +86,7 @@
  }
 </script>

-<DetailSummary name="Component" on:open show={openSection === "settings"}>
+<DetailSummary name="General" collapsible={false}>
  <PropertyControl
    bindable={false}
    control={Input}
--- a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
@ -1,33 +1,60 @@
 <script>
-  import { TextArea, DetailSummary } from "@budibase/bbui"
+  import {
+    TextArea,
+    DetailSummary,
+    ActionButton,
+    Drawer,
+    DrawerContent,
+    Layout,
+    Body,
+    Button,
+  } from "@budibase/bbui"
  import { store } from "builderStore"

  export let componentInstance
-  export let openSection

-  function onChange(css) {
-    store.actions.components.updateCustomStyle(css)
+  let tempValue
+  let drawer
+
+  const openDrawer = () => {
+    tempValue = componentInstance?._styles?.custom
+    drawer.show()
+  }
+
+  const save = () => {
+    store.actions.components.updateCustomStyle(tempValue)
+    drawer.hide()
  }
 </script>

 <DetailSummary
-  name={`Custom Styles${componentInstance?._styles?.custom ? " *" : ""}`}
-  on:open
-  show={openSection === "custom"}
+  name={`Custom CSS${componentInstance?._styles?.custom ? " *" : ""}`}
+  collapsible={false}
 >
-  <div class="custom-styles">
-    <TextArea
-      value={componentInstance?._styles?.custom}
-      on:change={event => onChange(event.detail)}
-      placeholder="Enter some CSS..."
-    />
+  <div>
+    <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
  </div>
 </DetailSummary>
+<Drawer bind:this={drawer} title="Custom CSS">
+  <Button cta slot="buttons" on:click={save}>Save</Button>
+  <DrawerContent slot="body">
+    <div class="content">
+      <Layout gap="S">
+        <Body size="S">Custom CSS overrides all other component styles.</Body>
+        <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
+      </Layout>
+    </div>
+  </DrawerContent>
+</Drawer>

 <style>
-  .custom-styles :global(textarea) {
+  .content {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .content :global(textarea) {
    font-family: monospace;
-    min-height: 120px;
-    font-size: var(--font-size-xs);
+    min-height: 240px !important;
+    font-size: var(--font-size-s);
  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
@ -1,42 +1,34 @@
 <script>
-  import { DetailSummary } from "@budibase/bbui"
  import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
-  import { allStyles } from "./componentStyles"
-  import { store } from "builderStore"
+  import * as ComponentStyles from "./componentStyles"

  export let componentDefinition
  export let componentInstance
-  export let openSection

-  let selectedCategory = "normal"
-  let currentGroup
+  const getStyles = def => {
+    if (!def?.styles?.length) {
+      return [...ComponentStyles.all]
+    }
+    let styles = [...ComponentStyles.all]
+    def.styles.forEach(style => {
+      if (ComponentStyles[style]) {
+        styles.push(ComponentStyles[style])
+      }
+    })
+    return styles
+  }

-  $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
+  $: styles = getStyles(componentDefinition)
 </script>

-<DetailSummary name="Design" show={openSection === "design"} on:open>
-  {#if groups.length > 0}
-    {#each groups as groupName}
-      <PropertyGroup
-        name={groupName}
-        properties={allStyles[groupName]}
-        styleCategory={selectedCategory}
-        onStyleChanged={store.actions.components.updateStyle}
-        {componentInstance}
-        open={currentGroup === groupName}
-        on:open={() => (currentGroup = groupName)}
-      />
-    {/each}
-  {:else}
-    <div class="no-design">
-      This component doesn't have any design properties.
-    </div>
-  {/if}
-</DetailSummary>
-
-<style>
-  .no-design {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    color: var(--grey-6);
-  }
-</style>
+{#if styles?.length > 0}
+  {#each styles as style}
+    <PropertyGroup
+      {style}
+      name={style.label}
+      inline={style.inline}
+      properties={style.settings}
+      {componentInstance}
+    />
+  {/each}
+{/if}
--- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
@ -7,8 +7,6 @@
  import CustomStylesSection from "./CustomStylesSection.svelte"
  import ActionsSection from "./ActionsSection.svelte"

-  let openSection = "settings"
-
  $: componentInstance = $selectedComponent
  $: componentDefinition = store.actions.components.getDefinition(
    $selectedComponent?._component
@ -17,35 +15,21 @@

 <Tabs selected="Settings" noPadding>
  <Tab title="Settings">
-    <ScreenSettingsSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "settings")}
-    />
-    <ComponentSettingsSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "settings")}
-    />
-    <DesignSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "design")}
-    />
-    <CustomStylesSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "custom")}
-    />
-    <ActionsSection
-      {componentInstance}
-      {componentDefinition}
-      {openSection}
-      on:open={() => (openSection = "actions")}
-    />
+    <div class="container">
+      <ScreenSettingsSection {componentInstance} {componentDefinition} />
+      <ComponentSettingsSection {componentInstance} {componentDefinition} />
+      <DesignSection {componentInstance} {componentDefinition} />
+      <CustomStylesSection {componentInstance} {componentDefinition} />
+      <ActionsSection {componentInstance} {componentDefinition} />
+    </div>
  </Tab>
 </Tabs>
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
@ -1,16 +1,15 @@
 <script>
  import PropertyControl from "./PropertyControl.svelte"
  import { DetailSummary } from "@budibase/bbui"
+  import { store } from "builderStore"

-  export let name = ""
-  export let styleCategory = "normal"
-  export let properties = []
-  export let componentInstance = {}
-  export let onStyleChanged = () => {}
-  export let open = false
+  export let name
+  export let inline = false
+  export let properties
+  export let componentInstance

-  $: style = componentInstance["_styles"][styleCategory] || {}
-  $: changed = properties.some(prop => hasPropChanged(style, prop))
+  $: style = componentInstance._styles.normal || {}
+  $: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false

  const hasPropChanged = (style, prop) => {
    return style[prop.key] != null && style[prop.key] !== ""
@ -25,30 +24,32 @@
  }
 </script>

-<DetailSummary name={`${name}${changed ? " *" : ""}`} on:open show={open} thin>
-  {#if open}
-    <div>
-      {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
-        <PropertyControl
-          bindable={false}
-          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
-          control={prop.control}
-          key={prop.key}
-          value={style[prop.key]}
-          onChange={value => onStyleChanged(styleCategory, prop.key, value)}
-          props={getControlProps(prop)}
-        />
-      {/each}
-    </div>
-  {/if}
+<DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
+  <div class="group-content" class:inline>
+    {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
+      <PropertyControl
+        bindable={false}
+        label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
+        control={prop.control}
+        key={prop.key}
+        value={style[prop.key]}
+        onChange={val => store.actions.components.updateStyle(prop.key, val)}
+        props={getControlProps(prop)}
+      />
+    {/each}
+  </div>
 </DetailSummary>

 <style>
-  div {
+  .group-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
-    gap: var(--spacing-s);
+    gap: var(--spacing-l);
+  }
+  .inline {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
@ -9,7 +9,6 @@
  import { FrontendTypes } from "constants"

  export let componentInstance
-  export let openSection

  function setAssetProps(name, value) {
    const selectedAsset = get(currentAsset)
@ -28,15 +27,15 @@
  }

  const screenSettings = [
-    { key: "description", label: "Description", control: Input },
+    // { key: "description", label: "Description", control: Input },
    { key: "routing.route", label: "Route", control: Input },
    { key: "routing.roleId", label: "Access", control: RoleSelect },
    { key: "layoutId", label: "Layout", control: LayoutSelect },
  ]
 </script>

-{#if $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
-  <DetailSummary name="Screen" on:open show={openSection === "screen"}>
+{#if $store.currentView !== "component" && $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
+  <DetailSummary name="Screen" collapsible={false}>
    {#each screenSettings as def (`${componentInstance._id}-${def.key}`)}
      <PropertyControl
        bindable={false}
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@ -81,239 +81,198 @@ export const layout = [
  },
 ]

-export const margin = [
-  {
-    label: "All sides",
-    key: "margin",
-    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" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Top",
-    key: "margin-top",
-    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" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Right",
-    key: "margin-right",
-    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" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Bottom",
-    key: "margin-bottom",
-    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" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Left",
-    key: "margin-left",
-    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" },
-      { label: "128px", value: "128px" },
-      { label: "256px", value: "256px" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-]
+export const margin = {
+  label: "Margin",
+  inline: true,
+  settings: [
+    {
+      label: "Top",
+      key: "margin-top",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { 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" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Right",
+      key: "margin-right",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { 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" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Bottom",
+      key: "margin-bottom",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { 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" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Left",
+      key: "margin-left",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { 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" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+  ],
+}

-export const padding = [
-  {
-    label: "All sides",
-    key: "padding",
-    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" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Top",
-    key: "padding-top",
-    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" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Right",
-    key: "padding-right",
-    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" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Bottom",
-    key: "padding-bottom",
-    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" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-  {
-    label: "Left",
-    key: "padding-left",
-    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" },
-      { label: "Auto", value: "auto" },
-      { label: "100%", value: "100%" },
-    ],
-  },
-]
+export const padding = {
+  label: "Padding",
+  inline: true,
+  settings: [
+    {
+      label: "Top",
+      key: "padding-top",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { 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" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Right",
+      key: "padding-right",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { 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" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Bottom",
+      key: "padding-bottom",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { 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" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+    {
+      label: "Left",
+      key: "padding-left",
+      control: Select,
+      bindable: false,
+      placeholder: "None",
+      options: [
+        { 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" },
+        { label: "128px", value: "128px" },
+        { label: "256px", value: "256px" },
+        { label: "Auto", value: "auto" },
+        { label: "100%", value: "100%" },
+      ],
+    },
+  ],
+}

-export const size = [
-  {
-    label: "Flex",
-    key: "flex",
-    control: Select,
-    options: [
-      { label: "Shrink", value: "0 1 auto" },
-      { label: "Grow", value: "1 1 auto" },
-    ],
-  },
-  {
-    label: "Width",
-    key: "width",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Height",
-    key: "height",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Min Width",
-    key: "min-width",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Max Width",
-    key: "max-width",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Min Height",
-    key: "min-height",
-    control: Input,
-    placeholder: "px",
-  },
-  {
-    label: "Max Height",
-    key: "max-height",
-    control: Input,
-    placeholder: "px",
-  },
-]
+export const size = {
+  label: "Size",
+  inline: true,
+  settings: [
+    {
+      label: "Width",
+      key: "width",
+      control: Input,
+      placeholder: "px",
+    },
+    {
+      label: "Height",
+      key: "height",
+      control: Input,
+      placeholder: "px",
+    },
+  ],
+}

 export const position = [
  {
@ -480,210 +439,162 @@ export const typography = [
  },
 ]

-export const background = [
-  {
-    label: "Color",
-    key: "background",
-    control: Colorpicker,
-  },
-  {
-    label: "Gradient",
-    key: "background-image",
-    control: Select,
-    options: [
-      { label: "None", value: "none" },
-      {
-        label: "Warm Flame",
-        value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
-      },
-      {
-        label: "Night Fade",
-        value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
-      },
-      {
-        label: "Spring Warmth",
-        value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
-      },
-      {
-        label: "Sunny Morning",
-        value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
-      },
-      {
-        label: "Winter Neva",
-        value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
-      },
-      {
-        label: "Tempting Azure",
-        value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
-      },
-      {
-        label: "Heavy Rain",
-        value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
-      },
-      {
-        label: "Deep Blue",
-        value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
-      },
-      {
-        label: "Near Moon",
-        value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
-      },
-      {
-        label: "Wild Apple",
-        value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
-      },
-      {
-        label: "Plum Plate",
-        value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
-      },
-      {
-        label: "Peach Kiss",
-        value:
-          "radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);",
-      },
-      {
-        label: "Flamingo Sunrise",
-        value:
-          "-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))",
-      },
-      {
-        label: "Budi Mist",
-        value:
-          "radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);",
-      },
-      {
-        label: "Ballet Slipper",
-        value:
-          "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
-      },
-      {
-        label: "Black Noir",
-        value:
-          "linear-gradient(312deg, rgba(60,60,60,1) 0%, rgba(42,42,42,1) 100%);",
-      },
-    ],
-  },
-  {
-    label: "Image",
-    key: "background",
-    control: Input,
-    placeholder: "URL",
-  },
-]
-
-export const border = [
-  {
-    label: "Radius",
-    key: "border-radius",
-    control: Select,
-    options: [
-      { label: "None", value: "0" },
-      { label: "X Small", value: "0.125rem" },
-      { label: "Small", value: "0.25rem" },
-      { label: "Medium", value: "0.5rem" },
-      { label: "Large", value: "1rem" },
-      { label: "X Large", value: "2rem" },
-      { label: "XX Large", value: "4rem" },
-      { label: "Round", value: "5678px" },
-    ],
-  },
-  {
-    label: "Width",
-    key: "border-width",
-    control: Select,
-    options: [
-      { label: "None", value: "0" },
-      { label: "X Small", value: "0.5px" },
-      { label: "Small", value: "1px" },
-      { label: "Medium", value: "2px" },
-      { label: "Large", value: "4px" },
-      { label: "X large", value: "8px" },
-    ],
-  },
-  {
-    label: "Color",
-    key: "border-color",
-    control: Colorpicker,
-  },
-  {
-    label: "Style",
-    key: "border-style",
-    control: Select,
-    options: [
-      { label: "None", value: "none" },
-      { label: "Hidden", value: "hidden" },
-      { label: "Dotted", value: "dotted" },
-      { label: "Dashed", value: "dashed" },
-      { label: "Solid", value: "solid" },
-      { label: "Double", value: "double" },
-      { label: "Groove", value: "groove" },
-      { label: "Ridge", value: "ridge" },
-      { label: "Inset", value: "inset" },
-      { label: "Outset", value: "outset" },
-    ],
-  },
-]
+export const background = {
+  label: "Background",
+  settings: [
+    {
+      label: "Color",
+      key: "background",
+      control: Colorpicker,
+    },
+    {
+      label: "Gradient",
+      key: "background-image",
+      control: Select,
+      options: [
+        { label: "None", value: "none" },
+        {
+          label: "Warm Flame",
+          value:
+            "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
+        },
+        {
+          label: "Night Fade",
+          value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
+        },
+        {
+          label: "Spring Warmth",
+          value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
+        },
+        {
+          label: "Sunny Morning",
+          value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
+        },
+        {
+          label: "Winter Neva",
+          value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
+        },
+        {
+          label: "Tempting Azure",
+          value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
+        },
+        {
+          label: "Heavy Rain",
+          value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
+        },
+        {
+          label: "Deep Blue",
+          value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
+        },
+        {
+          label: "Near Moon",
+          value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
+        },
+        {
+          label: "Wild Apple",
+          value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
+        },
+        {
+          label: "Plum Plate",
+          value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
+        },
+        {
+          label: "Peach Kiss",
+          value:
+            "radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);",
+        },
+        {
+          label: "Flamingo Sunrise",
+          value:
+            "-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))",
+        },
+        {
+          label: "Budi Mist",
+          value:
+            "radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);",
+        },
+        {
+          label: "Ballet Slipper",
+          value:
+            "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
+        },
+        {
+          label: "Black Noir",
+          value:
+            "linear-gradient(312deg, rgba(60,60,60,1) 0%, rgba(42,42,42,1) 100%);",
+        },
+      ],
+    },
+  ],
+}

-export const effects = [
-  {
-    label: "Opacity",
-    key: "opacity",
-    control: Select,
-    options: [
-      { label: "0", value: "0" },
-      { label: "0.2", value: "0.2" },
-      { label: "0.4", value: "0.4" },
-      { label: "0.6", value: "0.6" },
-      { label: "0.8", value: "0.8" },
-      { label: "1", value: "1" },
-    ],
-  },
-  {
-    label: "Rotate",
-    key: "transform",
-    control: Select,
-    options: [
-      { label: "None", value: "0" },
-      { label: "45 deg", value: "rotate(45deg)" },
-      { label: "90 deg", value: "rotate(90deg)" },
-      { label: "135 deg", value: "rotate(135deg)" },
-      { label: "180 deg", value: "rotate(180deg)" },
-      { label: "225 deg", value: "rotate(225deg)" },
-      { label: "270 deg", value: "rotate(270deg)" },
-      { label: "315 deg", value: "rotate(315deg)" },
-      { label: "360 deg", value: "rotate(360deg)" },
-    ],
-  },
-  {
-    label: "Shadow",
-    key: "box-shadow",
-    control: Select,
-    options: [
-      { label: "None", value: "none" },
-      { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
-      {
-        label: "Small",
-        value:
-          "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
-      },
-      {
-        label: "Medium",
-        value:
-          "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-      },
-      {
-        label: "Large",
-        value:
-          "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-      },
-      {
-        label: "X Large",
-        value:
-          "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
-      },
-    ],
-  },
-]
+export const border = {
+  label: "Border",
+  settings: [
+    {
+      label: "Color",
+      key: "border-color",
+      control: Colorpicker,
+    },
+    {
+      label: "Radius",
+      key: "border-radius",
+      control: Select,
+      options: [
+        { label: "None", value: "0" },
+        { label: "X Small", value: "0.125rem" },
+        { label: "Small", value: "0.25rem" },
+        { label: "Medium", value: "0.5rem" },
+        { label: "Large", value: "1rem" },
+        { label: "X Large", value: "2rem" },
+        { label: "XX Large", value: "4rem" },
+        { label: "Round", value: "5678px" },
+      ],
+    },
+    {
+      label: "Width",
+      key: "border-width",
+      control: Select,
+      options: [
+        { label: "None", value: "0" },
+        { label: "X Small", value: "0.5px" },
+        { label: "Small", value: "1px" },
+        { label: "Medium", value: "2px" },
+        { label: "Large", value: "4px" },
+        { label: "X large", value: "8px" },
+      ],
+    },
+    {
+      label: "Shadow",
+      key: "box-shadow",
+      control: Select,
+      options: [
+        { label: "None", value: "none" },
+        { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+        {
+          label: "Small",
+          value:
+            "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+        },
+        {
+          label: "Medium",
+          value:
+            "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+        },
+        {
+          label: "Large",
+          value:
+            "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+        },
+        {
+          label: "X Large",
+          value:
+            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
+        },
+      ],
+    },
+  ],
+}

 export const transitions = [
  {
@ -734,15 +645,4 @@ export const transitions = [
  },
 ]

-export const allStyles = {
-  layout,
-  margin,
-  padding,
-  size,
-  position,
-  typography,
-  background,
-  border,
-  effects,
-  transitions,
-}
+export const all = [margin]
--- a/packages/server/yarn.lock
+++ b/packages/server/yarn.lock
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@ -61,7 +61,6 @@
    "description": "This component contains things within itself",
    "icon": "Sandbox",
    "hasChildren": true,
-    "styleable": true,
    "showSettingsBar": true,
    "settings": [
      {
@ -172,7 +171,8 @@
        ],
        "defaultValue": "shrink"
      }
-    ]
+    ],
+    "styles": ["padding", "size", "background", "border", "shadow"]
  },
  "section": {
    "name": "Section",