Pre demo changes

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -29,7 +29,7 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
-  $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component
+  $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components.find(
     c => c.name === componentInstance._component
   )
@@ -39,8 +39,7 @@
     c => c._component === componentInstance._component
   )
 
-  // OLD PROPS =============================================
+  // SCREEN PROPS =============================================
-
   $: screen_props =
     $store.currentFrontEndType === "page"
       ? getProps($store.currentPreviewItem, ["name", "favicon"])

packages/builder/src/components/userInterface/PropertyGroup.svelte

@@ -1,6 +1,7 @@
 <script>
   import { excludeProps } from "./propertyCategories.js"
   import PropertyControl from "./PropertyControl.svelte"
+
   export let name = ""
   export let properties = {}
   export let componentInstance = {}
@@ -8,6 +9,7 @@
   export let onPropChanged = () => {}
 
   export let show = false
+  let showComponentGroup = false
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
@@ -16,10 +18,22 @@
     !!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
   }
 
+  $: {
+    let res = false
+    let componentProps = Object.keys(componentDefinition.props)
+    for (let prop in properties) {
+      if (componentProps.includes(prop)) {
+        showComponentGroup = true
+      }
+      if (showComponentGroup) break
+    }
+  }
+
   $: propertyDefinition = Object.entries(properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
+<!-- {#if showComponentGroup} -->
 <div class="property-group-container">
   <div class="property-group-name" on:click={() => (show = !show)}>
     <div class="icon">
@@ -41,6 +55,7 @@
     {/each}
   </div>
 </div>
+<!-- {/if} -->
 
 <style>
   .property-group-container {

packages/builder/src/components/userInterface/propertyCategories.js

@@ -96,7 +96,13 @@ export const typography = {
   lineHeight: { label: "Line H", control: Input },
   color: {
     control: OptionSelect,
-    options: [{ label: "red" }, { label: "blue" }, { label: "green" }],
+    options: [
+      { label: "black" },
+      { label: "red" },
+      { label: "white" },
+      { label: "blue" },
+      { label: "green" },
+    ],
   },
   textAlign: {
     label: "align",
@@ -114,7 +120,17 @@ export const typography = {
 }
 
 export const background = {
-  backgroundColor: { label: "Background Color", control: Input },
+  backgroundColor: {
+    label: "Background Color",
+    control: OptionSelect,
+    options: [
+      { label: "white" },
+      { label: "red" },
+      { label: "blue" },
+      { label: "green" },
+      { label: "black" },
+    ],
+  },
   image: { control: Input }, //custom
 }
 

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -1,4 +1,12 @@
-import { general, layout, typography, background, all } from "./propertyCategories.js"
+import {
+  general,
+  layout,
+  typography,
+  border,
+  size,
+  background,
+  all,
+} from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -13,7 +21,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          properties: { ...all },
+          properties: { background, size },
         },
         {
           name: 'Text',
@@ -27,9 +35,7 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               properties: {
-                general,
+               ...all
-                layout,
-                typography,
               },
             },
             {
@@ -37,7 +43,7 @@ export default {
               name: 'Paragraph',
               description: "A component for displaying paragraph text.",
               icon: 'ri-paragraph',
-              properties: {}
+              properties: { general, typography },
             }
           ]
         },
@@ -83,7 +89,7 @@ export default {
           description: 'A basic html button that is ready for styling',
           icon: 'ri-radio-button-fill',
           children: [],
-          properties: {},
+          properties: { background, typography, border, size },
         },
         {
           _component: "@budibase/standard-components/icon",
@@ -112,8 +118,8 @@ export default {
           name: 'Card',
           description: 'A basic card component that can contain content and actions.',
           icon: 'ri-layout-bottom-line',
-          properties: {},
+          children: [],
-          children: []
+          properties: { size, background, border },
         },
         {
           name: 'Login',

packages/standard-components/components.json

@@ -326,6 +326,8 @@
 			},
 			"backgroundColor": "string",
 			"color": "string",
+			"height": "string",
+			"width": "string",
 			"borderWidth": "string",
 			"borderColor": "string",
 			"borderStyle": {

packages/standard-components/src/Button.svelte

@@ -3,7 +3,7 @@
   import { buildStyle } from "./buildStyle"
   export let className = "default"
   export let disabled = false
-  export let contentText
+  export let text
   export let onClick
   export let background
   export let color
@@ -66,9 +66,7 @@
   disabled={disabled || false}
   on:click={clickHandler}
   style={buttonStyles}>
-  {#if !_bb.props._children || _bb.props._children.length === 0}
+  {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
-    {contentText}
-  {/if}
 </button>
 
 <style>

packages/standard-components/src/Container.svelte

@@ -6,6 +6,8 @@
   export let type = "div"
   export let backgroundColor
   export let color
+  export let width
+  export let height
   export let borderWidth
   export let borderColor
   export let borderStyle
@@ -18,6 +20,8 @@
   $: cssVariables = {
     backgroundColor,
     color,
+    height,
+    width,
     borderWidth,
     borderColor,
     borderStyle,
@@ -108,6 +112,14 @@
     color: var(--color);
   }
 
+  .height {
+    height: var(--height);
+  }
+
+  .width {
+    width: var(--width);
+  }
+
   .borderColor {
     border-color: var(--borderColor);
   }