Fix Switch component not being styled as disabled when checked

grafana · Jan 4, 2024 · 1b224f2 · 1b224f2
1 parent e924627
commit 1b224f2
Showing 1 changed file with 8 additions and 5 deletions.
diff --git 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,14 @@ const getSwitchStyles = (theme: GrafanaTheme2, transparent?: boolean) => ({
         },
       },
 
+      '&:disabled + label': {
+        background: theme.colors.action.disabledBackground,
+        cursor: 'not-allowed',
+        '&:hover': {
+          background: theme.colors.action.disabledBackground,
+        },
+      },
+
       '&:focus + label, &:focus-visible + label': getFocusStyles(theme),
 
       '&:focus:not(:focus-visible) + label': getMouseFocusStyles(theme),