Update colorpicker to work with nullish values by always providing a fallback default value

packages/builder/src/builderStore/store/frontend.js

@@ -23,7 +23,6 @@ import {
   getComponentDefinition,
   findParent,
 } from "../storeUtils"
-import { defaults } from "../../components/userInterface/propertyCategories"
 
 const INITIAL_FRONTEND_STATE = {
   apps: [],
@@ -382,11 +381,7 @@ export const getFrontendStore = () => {
       },
       resetStyles: async () => {
         const selected = get(selectedComponent)
-        selected._styles = {
-          normal: defaults,
-          hover: defaults,
-          active: defaults,
-        }
+        selected._styles = { normal: {}, hover: {}, active: {} }
         await store.actions.preview.saveSelected()
       },
       updateProp: (name, value) => {

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

@@ -11,8 +11,13 @@
   export let open = false
 
   const hasPropChanged = prop => {
-    if (prop.initialValue !== undefined) {
-      return style[prop.key] !== prop.initialValue
+    // TODO: replace color picker with one that works better.
+    // Currently it cannot support null values, so this is a hack which
+    // prevents the color fields from always being marked as changed
+    if (!["color", "background", "border-color"].includes(prop.key)) {
+      if (prop.initialValue !== undefined) {
+        return style[prop.key] !== prop.initialValue
+      }
     }
     return style[prop.key] != null && style[prop.key] !== ""
   }

packages/builder/src/components/userInterface/assetParsing/createProps.js

@@ -2,7 +2,6 @@ import { isString, isUndefined, cloneDeep } from "lodash/fp"
 import { TYPE_MAP } from "./types"
 import { assign } from "lodash"
 import { uuid } from "builderStore/uuid"
-import { defaults } from "../propertyCategories"
 
 export const getBuiltin = _component => {
   const { props } = createProps({ _component })
@@ -25,11 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
   const props = {
     _id: uuid(),
     _component: componentDefinition._component,
-    _styles: {
-      normal: defaults,
-      hover: defaults,
-      active: defaults,
-    },
+    _styles: { normal: {}, hover: {}, active: {} },
   }
 
   const errors = []
@@ -80,11 +75,7 @@ export const makePropsSafe = (componentDefinition, props) => {
   }
 
   if (!props._styles) {
-    props._styles = {
-      normal: defaults,
-      hover: defaults,
-      active: defaults,
-    }
+    props._styles = { normal: {}, hover: {}, active: {} }
   }
 
   return props

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

@@ -2,9 +2,6 @@ import Input from "./PropertyPanelControls/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
 import FlatButtonGroup from "./FlatButtonGroup.svelte"
 import Colorpicker from "@budibase/colorpicker"
-/*
-  TODO: Allow for default values for all properties
-*/
 
 export const layout = [
   {
@@ -481,6 +478,7 @@ export const typography = [
     label: "Color",
     key: "color",
     control: Colorpicker,
+    initialValue: "#000",
   },
   {
     label: "align",
@@ -524,6 +522,7 @@ export const background = [
     label: "Color",
     key: "background",
     control: Colorpicker,
+    initialValue: "#000",
   },
   {
     label: "Gradient",
@@ -646,6 +645,7 @@ export const border = [
     label: "Color",
     key: "border-color",
     control: Colorpicker,
+    initialValue: "#000",
   },
   {
     label: "Style",
@@ -807,13 +807,3 @@ export function excludeProps(props, propsToExclude) {
   }
   return modifiedProps
 }
-
-let defaultStyles = {}
-Object.values(all).forEach(category => {
-  category.forEach(prop => {
-    if (prop.initialValue) {
-      defaultStyles[prop.key] = prop.initialValue
-    }
-  })
-})
-export const defaults = defaultStyles