From 075611b2fa3f4a50562bdaa132f8bcd308228404 Mon Sep 17 00:00:00 2001 From: Mel O'Hagan Date: Mon, 22 Aug 2022 16:45:59 +0100 Subject: [PATCH] Update CSS conditional UI --- .../_components/settings/ConditionalUIDrawer.svelte | 6 +++++- packages/client/src/components/Component.svelte | 3 +++ 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte index c386a52cb7..9f4dbbbde5 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte @@ -56,7 +56,11 @@ ] let dragDisabled = true - $: settings = getComponentSettings($selectedComponent?._component) + $: settings = getComponentSettings($selectedComponent?._component)?.concat({ + label: "CSS", + key: "css", + type: "text", + }) $: settingOptions = settings.map(setting => ({ label: setting.label, value: setting.key, diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte index a7f506a387..f72f989920 100644 --- a/packages/client/src/components/Component.svelte +++ b/packages/client/src/components/Component.svelte @@ -379,6 +379,9 @@ // initial props are up to date. By setting it this way rather than // setting it on initialSettings directly, we avoid a double render. cachedSettings[key] = allSettings[key] + if (key === "css") { + instance._styles.custom = cachedSettings[key] + } if (ref?.$$set) { // Programmatically set the prop to avoid svelte reactive statements