From 750d00a95a6fe339a5a672bddaa6416fabdedb3e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:17:51 +0000
Subject: [PATCH] Update colorpicker to work with nullish values by always
 providing a fallback default value

---
 .../builder/src/builderStore/store/frontend.js   |  7 +------
 .../userInterface/PropertyGroup.svelte           |  9 +++++++--
 .../userInterface/assetParsing/createProps.js    | 13 ++-----------
 .../userInterface/propertyCategories.js          | 16 +++-------------
 4 files changed, 13 insertions(+), 32 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index bce663325b..acb5929b3c 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/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) => {
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 939672cf18..e1d90f0158 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/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] !== ""
   }
diff --git a/packages/builder/src/components/userInterface/assetParsing/createProps.js b/packages/builder/src/components/userInterface/assetParsing/createProps.js
index 5068243e3b..0bd2a4aa15 100644
--- a/packages/builder/src/components/userInterface/assetParsing/createProps.js
+++ b/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
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 71514fb209..ab92cad7b6 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/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