Add ability to show component info above the settings panel and add info to side panels

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -19,13 +19,19 @@
 </script>
 
 <div class="property-group-container">
+  {#if name}
     <div class="property-group-name" on:click={onHeaderClick}>
       <div class="name">{name}</div>
       {#if collapsible}
         <Icon size="S" name={show ? "Remove" : "Add"} />
       {/if}
     </div>
-  <div class="property-panel" class:show={show || !collapsible}>
+  {/if}
+  <div
+    class="property-panel"
+    class:show={show || !collapsible}
+    class:no-title={!name}
+  >
     <slot />
   </div>
 </div>
@@ -72,6 +78,9 @@
     padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl)
       var(--spacing-xl);
   }
+  .property-panel.no-title {
+    padding: var(--spacing-xl);
+  }
 
   .show {
     display: flex;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentInfoSection.svelte

@@ -0,0 +1,36 @@
+<script>
+  import { DetailSummary, Icon } from "@budibase/bbui"
+
+  export let componentDefinition
+</script>
+
+<DetailSummary collapsible={false}>
+  <div class="info">
+    <div class="title">
+      <Icon name="HelpOutline" />
+      {componentDefinition.name}
+    </div>
+    {componentDefinition.info}
+  </div>
+</DetailSummary>
+
+<style>
+  .title {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    margin-bottom: var(--spacing-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-s);
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .info {
+    padding: var(--spacing-m) var(--spacing-l) var(--spacing-l) var(--spacing-l);
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-s);
+    font-size: 13px;
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsPanel.svelte

@@ -5,6 +5,7 @@
   import DesignSection from "./DesignSection.svelte"
   import CustomStylesSection from "./CustomStylesSection.svelte"
   import ConditionalUISection from "./ConditionalUISection.svelte"
+  import ComponentInfoSection from "./ComponentInfoSection.svelte"
   import {
     getBindableProperties,
     getComponentBindableProperties,
@@ -29,6 +30,9 @@
 {#if $selectedComponent}
   {#key $selectedComponent._id}
     <Panel {title} icon={componentDefinition?.icon} borderLeft>
+      {#if componentDefinition.info}
+        <ComponentInfoSection {componentDefinition} />
+      {/if}
       <ComponentSettingsSection
         {componentInstance}
         {componentDefinition}

packages/client/manifest.json

@@ -5207,7 +5207,8 @@
       "section"
     ],
     "showEmptyState": false,
-    "draggable": false
+    "draggable": false,
+    "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action."
   },
   "rowexplorer": {
     "block": true,