Fix component empty state and invalid state styling

This commit is contained in:
Andrew Kingston 2022-09-12 08:50:22 +01:00
parent ecb0bad923
commit abe1dd6683
3 changed files with 17 additions and 22 deletions

View File

@ -127,7 +127,9 @@
// Empty components are those which accept children but do not have any.
// Empty states can be shown for these components, but can be disabled
// in the component manifest.
$: empty = interactive && !children.length && hasChildren
$: empty =
(interactive && !children.length && hasChildren) ||
hasMissingRequiredSettings
$: emptyState = empty && showEmptyState
// Enrich component settings

View File

@ -2,28 +2,25 @@
import { getContext } from "svelte"
import { builderStore } from "stores"
const { styleable } = getContext("sdk")
const component = getContext("component")
$: requiredSetting = $component.missingRequiredSettings?.[0]
</script>
{#if $builderStore.inBuilder && requiredSetting}
<div use:styleable={$component.styles}>
<div class="component-placeholder">
<span>
Add the <mark>{requiredSetting.label}</mark> setting to start using your
component -
</span>
<span
class="spectrum-Link"
on:click={() => {
builderStore.actions.highlightSetting(requiredSetting.key)
}}
>
Show me
</span>
</div>
<div class="component-placeholder">
<span>
Add the <mark>{requiredSetting.label}</mark> setting to start using your component
-
</span>
<span
class="spectrum-Link"
on:click={() => {
builderStore.actions.highlightSetting(requiredSetting.key)
}}
>
Show me
</span>
</div>
{/if}

View File

@ -133,11 +133,7 @@
<ProgressCircle />
</div>
{:else}
{#if $component.emptyState}
<Placeholder />
{:else}
<slot />
{/if}
<slot />
{#if paginate && $fetch.supportsPagination}
<div class="pagination">
<Pagination