From 0107754da8b9334d16703d8eee20e410ad9dcb05 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Mon, 17 Jun 2024 10:39:28 +0200
Subject: [PATCH] Select: Add orange indicator to selected item (#88695)

* Initial experiment

* Add pill and underline

* Text decoration for hover

* Only set underline on the title

* Remove underline from hover

* Remove underline alltogether
---
 .../src/components/Select/getSelectStyles.ts         | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 0d89a3fa519..a75b79417a3 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
@@ -17,6 +17,7 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
     option: css({
       label: 'grafana-select-option',
       padding: '8px',
+      position: 'relative',
       display: 'flex',
       alignItems: 'center',
       flexDirection: 'row',
@@ -64,6 +65,17 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
     }),
     optionSelected: css({
       background: theme.colors.action.selected,
+      '&::before': {
+        backgroundImage: theme.colors.gradients.brandVertical,
+        borderRadius: theme.shape.radius.default,
+        content: '" "',
+        display: 'block',
+        height: '100%',
+        position: 'absolute',
+        transform: 'translateX(-50%)',
+        width: theme.spacing(0.5),
+        left: 0,
+      },
     }),
     optionDisabled: css({
       label: 'grafana-select-option-disabled',