From c944a33b951db1d23e77fbb39b6afb8f25411ceb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 19 May 2021 16:25:04 +0200
Subject: [PATCH] Switch: Add hover effect for inline switch (#34387)

---
 .../grafana-ui/src/components/Switch/Switch.tsx     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 589e548a254..070444eb848 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -54,7 +54,10 @@ export const InlineSwitch = React.forwardRef<HTMLInputElement, InlineSwitchProps
     return (
       <div className={styles.inlineContainer}>
         {showLabel && (
-          <label htmlFor={id} className={cx(styles.inlineLabel, value && styles.inlineLabelEnabled)}>
+          <label
+            htmlFor={id}
+            className={cx(styles.inlineLabel, value && styles.inlineLabelEnabled, 'inline-switch-label')}
+          >
             {label}
           </label>
         )}
@@ -145,6 +148,14 @@ const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boole
       background: ${transparent ? 'transparent' : theme.components.input.background};
       border: 1px solid ${transparent ? 'transparent' : theme.components.input.borderColor};
       border-radius: ${theme.shape.borderRadius()};
+
+      &:hover {
+        border: 1px solid ${transparent ? 'transparent' : theme.components.input.borderHover};
+
+        .inline-switch-label {
+          color: ${theme.colors.text.primary};
+        }
+      }
     `,
     inlineLabel: css`
       cursor: pointer;