From 01e984c394d522280da3fbe7602765c048abd3f2 Mon Sep 17 00:00:00 2001
From: nikki-kiga <42276368+nikki-kiga@users.noreply.github.com>
Date: Mon, 26 Jul 2021 15:54:13 -0700
Subject: [PATCH] ColorPicker: display colors as rgba in input (#37231)

* SpectrumPalette: change input to display rgba string

* fieldOverrides: remove extra hex string check
---
 packages/grafana-data/src/field/fieldOverrides.ts               | 2 +-
 .../grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-data/src/field/fieldOverrides.ts b/packages/grafana-data/src/field/fieldOverrides.ts
index 70ba87247bd..202a2c164c2 100644
--- a/packages/grafana-data/src/field/fieldOverrides.ts
+++ b/packages/grafana-data/src/field/fieldOverrides.ts
@@ -226,7 +226,7 @@ function cachingDisplayProcessor(disp: DisplayProcessor, maxCacheSize = 2500): D
 
       // convert to hex6 or hex8 so downstream we can cheaply test for alpha (and set new alpha)
       // via a simple length check (in colorManipulator) rather using slow parsing via tinycolor
-      if (v.color && v.color[0] !== '#') {
+      if (v.color) {
         v.color = asHexString(v.color);
       }
 
diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
index ed0ce74a470..3b6a7ca51fd 100644
--- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx
@@ -36,7 +36,7 @@ const SpectrumPalette: React.FunctionComponent<SpectrumPaletteProps> = ({ color,
   return (
     <div className={styles.wrapper}>
       <RgbaStringColorPicker className={cx(styles.root)} color={rgbaString} onChange={setColor} />
-      <ColorInput theme={theme} color={currentColor} onChange={setColor} className={styles.colorInput} />
+      <ColorInput theme={theme} color={rgbaString} onChange={setColor} className={styles.colorInput} />
     </div>
   );
 };