From d29f9cfd3cb78661b8056afba6315a0e063aa777 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Thu, 4 Jan 2024 15:07:22 +0100
Subject: [PATCH] Fix: Switch component not being styled as disabled when is
 checked (#80012)

* Fix Switch component not being styled as disabled when checked

* Remove unnecessary code
---
 .../src/components/Switch/Switch.tsx          | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 95c401201c2..70e5167e63c 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -85,11 +85,6 @@ const getSwitchStyles = (theme: GrafanaTheme2, transparent?: boolean) => ({
       zIndex: -1000,
       position: 'absolute',
 
-      '&:disabled + label': {
-        background: theme.colors.action.disabledBackground,
-        cursor: 'not-allowed',
-      },
-
       '&:checked + label': {
         background: theme.colors.primary.main,
         borderColor: theme.colors.primary.main,
@@ -104,6 +99,22 @@ const getSwitchStyles = (theme: GrafanaTheme2, transparent?: boolean) => ({
         },
       },
 
+      '&:disabled + label': {
+        background: theme.colors.action.disabledBackground,
+        borderColor: theme.colors.border.weak,
+        cursor: 'not-allowed',
+
+        '&:hover': {
+          background: theme.colors.action.disabledBackground,
+        },
+      },
+
+      '&:disabled:checked + label': {
+        '&::after': {
+          background: theme.colors.text.disabled,
+        },
+      },
+
       '&:focus + label, &:focus-visible + label': getFocusStyles(theme),
 
       '&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme),