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. +
+ Your CSS will overwrite styles for: + {#if icon} + + + + {componentTitle || ""} + {/if} +
{/key} + +