Merge branch 'master' of github.com:Budibase/budibase into component-binding-refactor

packages/client/src/components/Component.svelte

@@ -33,7 +33,7 @@
     $builderStore.previewType === "layout" || screenslotContext
 
   // Update component context
-  $: componentStore.set({ id, styles: { ...styles, id, allowSelection } })
+  $: componentStore.set({ id, children: children.length, styles: { ...styles, id, allowSelection } })
 
   // Updates the component props.
   // Most props are deeply compared so that svelte will only trigger reactive

packages/standard-components/src/Icon.svelte

@@ -1,13 +1,20 @@
 <script>
   import { getContext } from "svelte"
 
-  // Add this back once we can define specific design options to expose
-  // const { styleable } = getContext("sdk")
-  // const component = getContext("component")
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
 
   export let icon = ""
   export let size = "fa-lg"
-  export let color = "#000"
+  export let color = "#f00"
+
+  $: styles = {
+    ...$component.styles,
+    normal: {
+      ...$component.styles.normal,
+      color,
+    },
+  }
 </script>
 
-<i style={`color: ${color};`} class={`${icon} ${size}`} />
+<i use:styleable={styles} class="{icon} {size}" />

packages/standard-components/src/List.svelte

@@ -19,9 +19,27 @@
 </script>
 
 <div use:styleable={$component.styles}>
-  {#each rows as row}
-    <DataProvider {row}>
-      <slot />
-    </DataProvider>
-  {/each}
+  {#if rows.length > 0}
+    {#each rows as row}
+      <DataProvider {row}>
+        {#if $component.children === 0}
+         <p>Add some components too.</p>
+        {:else}
+          <slot />
+        {/if}
+      </DataProvider>
+    {/each}
+  {:else}
+    <p>Feed me some data</p>
+  {/if}
 </div>
+
+<style>
+  p {
+    display: grid;
+    place-items: center;
+    background: #f5f5f5;
+    border: #ccc 1px solid;
+    padding: var(--spacing-m);
+  }
+</style>