From 4ea1e598a454bc4c2082400774b3ca1302fbd7b0 Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Wed, 10 Jan 2024 12:22:42 +0000
Subject: [PATCH] Add component icon to custom css (#12741)
* Add component icon to custom css
* Remove span
* Refactor
---
.../Component/ComponentSettingsPanel.svelte | 2 ++
.../Component/CustomStylesSection.svelte | 32 ++++++++++++++++++-
2 files changed, 33 insertions(+), 1 deletion(-)
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
index 1d2a1b9617..9928f19a7f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsPanel.svelte
@@ -108,6 +108,8 @@
{componentInstance}
{componentDefinition}
{bindings}
+ iconTooltip={componentName}
+ componentTitle={title}
/>
{/if}
{#if section == "conditions"}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
index 59c1b5c620..d8508619f3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/CustomStylesSection.svelte
@@ -5,6 +5,9 @@
Drawer,
Button,
notifications,
+ AbsTooltip,
+ Icon,
+ Body,
} from "@budibase/bbui"
import { selectedScreen, store } from "builderStore"
import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
@@ -15,6 +18,9 @@
} from "builderStore/dataBinding"
export let componentInstance
+ export let componentDefinition
+ export let iconTooltip
+ export let componentTitle
let tempValue
let drawer
@@ -24,6 +30,8 @@
$store.selectedComponentId
)
+ $: icon = componentDefinition?.icon
+
const openDrawer = () => {
tempValue = runtimeToReadableBinding(
bindings,
@@ -54,7 +62,19 @@
{#key componentInstance?._id}
- Custom CSS overrides all other component styles.
+
{/key}
+
+