From 1d2b306574d1af0b1e897d3e7f2bb36b8d5b6568 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 1 Jul 2021 00:40:16 +0100 Subject: [PATCH 1/4] Add border style as an explicit option to prevent issues with dynamically adding it via the styleable helper --- .../design/PropertiesPanel/componentStyles.js | 20 ++++++++++++++++--- packages/client/src/utils/styleable.js | 5 ----- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js index 95ca1e52d5..4b30b65fc5 100644 --- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js +++ b/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", diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js index 62688e5c07..3f02b36600 100644 --- a/packages/client/src/utils/styleable.js +++ b/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 } From 26ed9da4de377753f2edc63536671a14b54a28e6 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 1 Jul 2021 00:47:38 +0100 Subject: [PATCH 2/4] Only override existing color style if a color setting exists for Headings --- .../standard-components/src/Heading.svelte | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte index 7cb7ed79d8..96df7ce407 100644 --- a/packages/standard-components/src/Heading.svelte +++ b/packages/standard-components/src/Heading.svelte @@ -19,12 +19,19 @@ // Add color styles to main styles object, otherwise the styleable helper // overrides the color when it's passed as inline style. - $: styles = { - ...$component.styles, - normal: { - ...$component.styles?.normal, - color, - }, + $: styles = enrichStyles($component.styles, color) + + const enrichStyles = (styles, color) => { + if (!color) { + return styles + } + return { + ...styles, + normal: { + ...styles?.normal, + color, + }, + } } From 7e8bdae875c68d90a0431581786558676e43a768 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 1 Jul 2021 00:48:05 +0100 Subject: [PATCH 3/4] Only override color style on paragraphs if a color setting exists --- packages/standard-components/src/Text.svelte | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte index 2e3b2954fc..cc962b572b 100644 --- a/packages/standard-components/src/Text.svelte +++ b/packages/standard-components/src/Text.svelte @@ -19,12 +19,19 @@ // Add color styles to main styles object, otherwise the styleable helper // overrides the color when it's passed as inline style. - $: styles = { - ...$component.styles, - normal: { - ...$component.styles?.normal, - color, - }, + $: styles = enrichStyles($component.styles, color) + + const enrichStyles = (styles, color) => { + if (!color) { + return styles + } + return { + ...styles, + normal: { + ...styles?.normal, + color, + }, + } } From 96d803fd93163c402ed380c7b556bf4013dd8077 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 1 Jul 2021 00:48:40 +0100 Subject: [PATCH 4/4] Only override color style on links if a color setting exists --- packages/standard-components/src/Link.svelte | 21 ++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte index 93cac2e309..d58d75f5c5 100644 --- a/packages/standard-components/src/Link.svelte +++ b/packages/standard-components/src/Link.svelte @@ -23,12 +23,21 @@ // Add color styles to main styles object, otherwise the styleable helper // overrides the color when it's passed as inline style. - $: styles = { - ...$component.styles, - normal: { - ...$component.styles?.normal, - color, - }, + // Add color styles to main styles object, otherwise the styleable helper + // 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: { + ...styles?.normal, + color, + }, + } }