From e1ec9bddbd01f9b4335d6ca5cbf7f148af5d4bdc Mon Sep 17 00:00:00 2001
From: Ezequiel Victorero <ezequiel.victorero@grafana.com>
Date: Mon, 7 Apr 2025 12:43:59 +0100
Subject: [PATCH] Grafana-UI: Support theme color in TagsInput (#102293)

* Grafana-UI: Support theme color in TagsInput

* improve variable names

* rename prop + rejigger styles

* reword comment

---------

Co-authored-by: joshhunt <josh.hunt@grafana.com>
---
 .../src/components/TagsInput/TagItem.tsx      | 27 +++++++++++++++----
 .../src/components/TagsInput/TagsInput.tsx    |  5 +++-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
index c4ec9254845..8d6bde058bc 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -12,18 +12,30 @@ interface Props {
   name: string;
   disabled?: boolean;
   onRemove: (tag: string) => void;
+
+  /** Colours the tags 'randomly' based on the name. Defaults to true */
+  autoColors?: boolean;
 }
 
 /**
  * @internal
  * Only used internally by TagsInput
  * */
-export const TagItem = ({ name, disabled, onRemove }: Props) => {
-  const { color, borderColor } = useMemo(() => getTagColorsFromName(name), [name]);
+export const TagItem = ({ name, disabled, onRemove, autoColors = true }: Props) => {
   const styles = useStyles2(getStyles);
 
+  // If configured, use random colors based on name.
+  // Otherwise, a default class name will be applied to the tag.
+  const tagStyle = useMemo(() => {
+    if (autoColors) {
+      const { color, borderColor } = getTagColorsFromName(name);
+      return { backgroundColor: color, borderColor };
+    }
+    return undefined;
+  }, [name, autoColors]);
+
   return (
-    <li className={styles.itemStyle} style={{ backgroundColor: color, borderColor }}>
+    <li className={cx(styles.itemStyle, !tagStyle && styles.defaultTagColor)} style={tagStyle}>
       <span className={styles.nameStyle}>{name}</span>
       <IconButton
         name="times"
@@ -47,7 +59,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       alignItems: 'center',
       height: `${height}px`,
       lineHeight: `${height - 2}px`,
-      color: '#fff',
       borderWidth: '1px',
       borderStyle: 'solid',
       borderRadius: theme.shape.radius.default,
@@ -56,6 +67,12 @@ const getStyles = (theme: GrafanaTheme2) => {
       textShadow: 'none',
       fontWeight: 500,
       fontSize: theme.typography.size.sm,
+      color: '#fff',
+    }),
+    defaultTagColor: css({
+      backgroundColor: theme.colors.background.secondary,
+      borderColor: theme.components.input.borderColor,
+      color: theme.colors.text.primary,
     }),
     nameStyle: css({
       maxWidth: '25ch',
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
index 163af886ba7..d0d72febaf0 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -25,6 +25,8 @@ export interface Props {
   addOnBlur?: boolean;
   /** Toggle invalid state */
   invalid?: boolean;
+  /** Colours the tags 'randomly' based on the name. Defaults to true */
+  autoColors?: boolean;
 }
 
 export const TagsInput = ({
@@ -37,6 +39,7 @@ export const TagsInput = ({
   addOnBlur,
   invalid,
   id,
+  autoColors = true,
 }: Props) => {
   const [newTagName, setNewTagName] = useState('');
   const styles = useStyles2(getStyles);
@@ -96,7 +99,7 @@ export const TagsInput = ({
       {tags?.length > 0 && (
         <ul className={styles.tags}>
           {tags.map((tag) => (
-            <TagItem key={tag} name={tag} onRemove={onRemove} disabled={disabled} />
+            <TagItem key={tag} name={tag} onRemove={onRemove} disabled={disabled} autoColors={autoColors} />
           ))}
         </ul>
       )}