Merge pull request #1891 from Budibase/legacy-styles-compat

Legacy styles compatibility

packages/builder/src/components/design/PropertiesPanel/componentStyles.js

@@ -284,7 +284,7 @@ export const background = {
 
 export const border = {
   label: "Border",
-  columns: "auto 1fr",
+  columns: "1fr 1fr",
   settings: [
     {
       label: "Color",
@@ -295,17 +295,31 @@ export const border = {
       label: "Width",
       key: "border-width",
       control: Select,
+      column: "1 / 2",
+      placeholder: "None",
       options: [
         { label: "Small", value: "1px" },
         { label: "Medium", value: "2px" },
         { label: "Large", value: "4px" },
       ],
     },
+    {
+      label: "Style",
+      key: "border-style",
+      control: Select,
+      column: "2 / 3",
+      placeholder: "None",
+      options: [
+        { label: "Solid", value: "solid" },
+        { label: "Dotted", value: "dotted" },
+        { label: "Dashed", value: "dashed" },
+      ],
+    },
     {
       label: "Radius",
       key: "border-radius",
       control: Select,
-      column: "1 / 3",
+      placeholder: "None",
       options: [
         { label: "Small", value: "0.25rem" },
         { label: "Medium", value: "0.5rem" },
@@ -317,7 +331,7 @@ export const border = {
       label: "Shadow",
       key: "box-shadow",
       control: Select,
-      column: "1 / 3",
+      placeholder: "None",
       options: [
         {
           label: "Small",

packages/client/src/utils/styleable.js

@@ -34,11 +34,6 @@ export const styleable = (node, styles = {}) => {
       baseStyles.overflow = "hidden"
     }
 
-    // Append border-style css if border-width is specified
-    if (newStyles.normal?.["border-width"]) {
-      baseStyles["border-style"] = "solid"
-    }
-
     const componentId = newStyles.id
     const customStyles = newStyles.custom || ""
     const normalStyles = { ...baseStyles, ...newStyles.normal }

packages/standard-components/src/Heading.svelte

@@ -19,13 +19,20 @@
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
-  $: styles = {
+  $: styles = enrichStyles($component.styles, color)
-    ...$component.styles,
+
+  const enrichStyles = (styles, color) => {
+    if (!color) {
+      return styles
+    }
+    return {
+      ...styles,
       normal: {
-      ...$component.styles?.normal,
+        ...styles?.normal,
         color,
       },
     }
+  }
 </script>
 
 <h1

packages/standard-components/src/Link.svelte

@@ -23,13 +23,22 @@
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
-  $: styles = {
+  // Add color styles to main styles object, otherwise the styleable helper
-    ...$component.styles,
+  // overrides the color when it's passed as inline style.
+  $: styles = enrichStyles($component.styles, color)
+
+  const enrichStyles = (styles, color) => {
+    if (!color) {
+      return styles
+    }
+    return {
+      ...styles,
       normal: {
-      ...$component.styles?.normal,
+        ...styles?.normal,
         color,
       },
     }
+  }
 </script>
 
 {#if $builderStore.inBuilder || componentText}

packages/standard-components/src/Text.svelte

@@ -19,13 +19,20 @@
 
   // Add color styles to main styles object, otherwise the styleable helper
   // overrides the color when it's passed as inline style.
-  $: styles = {
+  $: styles = enrichStyles($component.styles, color)
-    ...$component.styles,
+
+  const enrichStyles = (styles, color) => {
+    if (!color) {
+      return styles
+    }
+    return {
+      ...styles,
       normal: {
-      ...$component.styles?.normal,
+        ...styles?.normal,
         color,
       },
     }
+  }
 </script>
 
 <p