From aa0389e8bdbef8d88ae14082d860363eb3c68350 Mon Sep 17 00:00:00 2001 From: Conor Webb <126772285+ConorWebb96@users.noreply.github.com> Date: Fri, 8 Mar 2024 08:58:03 +0000 Subject: [PATCH] Added text colour option to tag component via manifest (#13215) * Added new colour select textColor to tag component manifest * Intergrated textColor into tag component * Reverted default text colour to white, avoids issues with the internal use * Updated conditional colour set --- packages/client/manifest.json | 6 ++++++ packages/client/src/components/app/Tag.svelte | 7 ++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 10f9c5f412..531e2c968a 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1137,6 +1137,12 @@ "key": "color", "showInBar": true }, + { + "type": "color", + "label": "Text Color", + "key": "textColor", + "showInBar": true + }, { "type": "boolean", "label": "Allow delete", diff --git a/packages/client/src/components/app/Tag.svelte b/packages/client/src/components/app/Tag.svelte index 2d0a26ac71..4644161506 100644 --- a/packages/client/src/components/app/Tag.svelte +++ b/packages/client/src/components/app/Tag.svelte @@ -6,6 +6,7 @@ export let onClick export let text = "" export let color + export let textColor export let closable = false export let size = "M" @@ -14,7 +15,7 @@ // 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) + $: styles = enrichStyles($component.styles, color, textColor) $: componentText = getComponentText(text, $builderStore, $component) const getComponentText = (text, builderState, componentState) => { @@ -24,7 +25,7 @@ return text || componentState.name || "Placeholder text" } - const enrichStyles = (styles, color) => { + const enrichStyles = (styles, color, textColor) => { if (!color) { return styles } @@ -34,7 +35,7 @@ ...styles?.normal, "background-color": color, "border-color": color, - color: "white", + color: textColor || "white", "--spectrum-clearbutton-medium-icon-color": "white", }, }