Improve empty states and placeholders

packages/standard-components/manifest.json

@@ -31,7 +31,7 @@
       },
       {
         "type": "select",
-        "label": "Horizontal",
+        "label": "Horiz. Align",
         "key": "hAlign",
         "showInBar": true,
         "options": [
@@ -64,7 +64,7 @@
       },
       {
         "type": "select",
-        "label": "Vertical",
+        "label": "Vert. Align",
         "key": "vAlign",
         "showInBar": "true",
         "options": [

packages/standard-components/src/Heading.svelte

@@ -1,25 +1,30 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
   export let type
-  export let text = ""
+  export let text
+
+  $: placeholder = $builderStore.inBuilder && !text
+  $: componentText = $builderStore.inBuilder
+    ? text || "Placeholder text"
+    : text || ""
 </script>
 
 {#if type === "h1"}
-  <h1 use:styleable={$component.styles}>{text}</h1>
+  <h1 class:placeholder use:styleable={$component.styles}>{componentText}</h1>
 {:else if type === "h2"}
-  <h2 use:styleable={$component.styles}>{text}</h2>
+  <h2 class:placeholder use:styleable={$component.styles}>{componentText}</h2>
 {:else if type === "h3"}
-  <h3 use:styleable={$component.styles}>{text}</h3>
+  <h3 class:placeholder use:styleable={$component.styles}>{componentText}</h3>
 {:else if type === "h4"}
-  <h4 use:styleable={$component.styles}>{text}</h4>
+  <h4 class:placeholder use:styleable={$component.styles}>{componentText}</h4>
 {:else if type === "h5"}
-  <h5 use:styleable={$component.styles}>{text}</h5>
+  <h5 class:placeholder use:styleable={$component.styles}>{componentText}</h5>
 {:else if type === "h6"}
-  <h6 use:styleable={$component.styles}>{text}</h6>
+  <h6 class:placeholder use:styleable={$component.styles}>{componentText}</h6>
 {/if}
 
 <style>
@@ -31,4 +36,9 @@
   h6 {
     white-space: pre-wrap;
   }
+
+  .placeholder {
+    font-style: italic;
+    color: var(--grey-6);
+  }
 </style>

packages/standard-components/src/Repeater.svelte

@@ -10,7 +10,7 @@
   const context = getContext("context")
 
   $: rows = dataProvider?.rows ?? []
-  $: loaded = dataProvider?.loaded ?? false
+  $: loaded = dataProvider?.loaded ?? true
 </script>
 
 <div use:styleable={$component.styles}>

packages/standard-components/src/Text.svelte

@@ -1,25 +1,19 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable } = getContext("sdk")
+  const { styleable, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let text = ""
+  export let text
-  export let bold = false
-  export let italic = false
-  export let underline = false
 
-  let element
+  $: placeholder = $builderStore.inBuilder && !text
+  $: componentText = $builderStore.inBuilder
+    ? text || "Placeholder text"
+    : text || ""
 </script>
 
-<p
+<p use:styleable={$component.styles} class:placeholder>
-  bind:this={element}
+  {componentText}
-  use:styleable={$component.styles}
-  class:bold
-  class:italic
-  class:underline
->
-  {text}
 </p>
 
 <style>
@@ -27,13 +21,9 @@
     display: inline-block;
     white-space: pre-wrap;
   }
-  .bold {
+
-    font-weight: bold;
+  .placeholder {
-  }
-  .italic {
     font-style: italic;
-  }
+    color: var(--grey-6);
-  .underline {
-    text-decoration: underline;
   }
 </style>

packages/standard-components/src/charts/ApexChart.svelte

@@ -12,7 +12,7 @@
 {#if options}
   <div use:chart={options} use:styleable={$component.styles} />
 {:else if $builderStore.inBuilder}
-  <div use:styleable={{ ...$component.styles, empty: true }}>
+  <div use:styleable={$component.styles}>
     <Placeholder text="Use the settings panel to build your chart" />
   </div>
 {/if}

packages/standard-components/src/forms/Field.svelte

@@ -1,5 +1,5 @@
 <script>
-  import Placeholder from "./Placeholder.svelte"
+  import Placeholder from "../Placeholder.svelte"
   import FieldGroupFallback from "./FieldGroupFallback.svelte"
   import { getContext } from "svelte"
 
@@ -36,6 +36,7 @@
 <FieldGroupFallback>
   <div class="spectrum-Form-item" use:styleable={$component.styles}>
     <label
+      class:hidden={!label}
       for={$fieldState?.fieldId}
       class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${labelPositionClass}`}
     >
@@ -43,15 +44,15 @@
     </label>
     <div class="spectrum-Form-itemField">
       {#if !formContext}
-        <Placeholder>Form components need to be wrapped in a Form</Placeholder>
+        <Placeholder text="Form components need to be wrapped in a form" />
       {:else if !fieldState}
-        <Placeholder>
+        <Placeholder
-          Add the Field setting to start using your component
+          text="Add the Field setting to start using your component"
-        </Placeholder>
+        />
       {:else if fieldSchema?.type && fieldSchema?.type !== type}
-        <Placeholder>
+        <Placeholder
-          This Field setting is the wrong data type for this component
+          text="This Field setting is the wrong data type for this component"
-        </Placeholder>
+        />
       {:else}
         <slot />
         {#if $fieldState.error}
@@ -66,6 +67,9 @@
   label {
     white-space: nowrap;
   }
+  label.hidden {
+    padding: 0;
+  }
 
   .spectrum-Form-itemField {
     position: relative;

packages/standard-components/src/forms/Placeholder.svelte

@@ -1,30 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-  const { builderStore } = getContext("sdk")
-</script>
-
-{#if $builderStore.inBuilder}
-  <div>
-    <slot />
-  </div>
-{/if}
-
-<style>
-  div {
-    height: var(
-      --spectrum-alias-item-height-m,
-      var(--spectrum-global-dimension-size-400)
-    );
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    color: var(--spectrum-global-color-gray-600);
-    font-size: var(
-      --spectrum-alias-item-text-size-m,
-      var(--spectrum-global-dimension-font-size-100)
-    );
-    font-style: var(--spectrum-global-font-style-italic, italic);
-    font-weight: var(--spectrum-global-font-weight-regular, 400);
-  }
-</style>