From 8d227336662004ce1a3f643aef27a753de383c84 Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Tue, 9 Nov 2021 17:00:08 +0200
Subject: [PATCH] grafana-ui: Style disabled option for Select (#41464)

---
 packages/grafana-ui/src/components/Select/SelectMenu.tsx   | 7 ++++++-
 .../grafana-ui/src/components/Select/getSelectStyles.ts    | 6 ++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index 8032180e566..8dbe5df52a4 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -47,7 +47,12 @@ export const SelectMenuOptions = React.forwardRef<HTMLDivElement, React.PropsWit
     return (
       <div
         ref={ref}
-        className={cx(styles.option, isFocused && styles.optionFocused, isSelected && styles.optionSelected)}
+        className={cx(
+          styles.option,
+          isFocused && styles.optionFocused,
+          isSelected && styles.optionSelected,
+          data.isDisabled && styles.optionDisabled
+        )}
         {...innerProps}
         aria-label="Select option"
       >
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 8821b1cc74e..9d025aaad83 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
@@ -57,6 +57,12 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
     optionSelected: css`
       background: ${theme.colors.action.selected};
     `,
+    optionDisabled: css`
+      label: grafana-select-option-disabled;
+      background-color: ${theme.colors.action.disabledBackground};
+      color: ${theme.colors.action.disabledText};
+      cursor: not-allowed;
+    `,
     singleValue: css`
       label: grafana-select-single-value;
       color: ${theme.components.input.text};