From 1cb701c304c1f8c8bb121e84806fb63502bae9db Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 4 Jun 2024 09:34:38 +0100
Subject: [PATCH] Chore: Move `Switch` SCSS to emotion/angular (#88553)

move switch scss to emotion/angular
---
 .betterer.results                             |   5 -
 .../components/Forms/Legacy/Switch/Switch.tsx |  87 ++++++++++-
 public/sass/_angular.scss                     | 130 ++++++++++++++++
 public/sass/_grafana.scss                     |   1 -
 public/sass/components/_switch.scss           | 139 ------------------
 5 files changed, 211 insertions(+), 151 deletions(-)
 delete mode 100644 public/sass/components/_switch.scss

diff --git a/.betterer.results b/.betterer.results
index 669d6e84e79..e86565d5cf4 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -7732,11 +7732,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
     "packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx
index e5d21915180..c3476f1a560 100644
--- a/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.tsx
@@ -1,11 +1,16 @@
+import { css, cx } from '@emotion/css';
 import { Placement } from '@popperjs/core';
 import { uniqueId } from 'lodash';
 import React, { PureComponent } from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { withTheme2 } from '../../../../themes';
+import { Themeable2 } from '../../../../types';
 import { Icon } from '../../../Icon/Icon';
 import { Tooltip } from '../../../Tooltip/Tooltip';
 
-export interface Props {
+export interface Props extends Themeable2 {
   label: string;
   checked: boolean;
   disabled?: boolean;
@@ -23,7 +28,7 @@ export interface State {
 }
 
 /** @deprecated Please use the `Switch` component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-switch--controlled as seen in Storybook} */
-export class Switch extends PureComponent<Props, State> {
+class UnthemedSwitch extends PureComponent<Props, State> {
   state = {
     id: uniqueId(),
   };
@@ -42,17 +47,21 @@ export class Switch extends PureComponent<Props, State> {
       disabled,
       transparent,
       className,
+      theme,
       tooltip,
       tooltipPlacement,
     } = this.props;
+    const styles = getStyles(theme);
 
     const labelId = this.state.id;
     const labelClassName = `gf-form-label ${labelClass} ${transparent ? 'gf-form-label--transparent' : ''} pointer`;
-    const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
+    const switchClassName = cx(styles.switch, switchClass, {
+      [styles.switchTransparent]: transparent,
+    });
 
     return (
-      <div className="gf-form-switch-container-react">
-        <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className || ''}`}>
+      <div className={styles.container}>
+        <label htmlFor={labelId} className={cx('gf-form', styles.labelContainer, className)}>
           {label && (
             <div className={labelClassName}>
               {label}
@@ -71,10 +80,76 @@ export class Switch extends PureComponent<Props, State> {
               checked={checked}
               onChange={this.internalOnChange}
             />
-            <span className="gf-form-switch__slider" />
+            <span className={styles.slider} />
           </div>
         </label>
       </div>
     );
   }
 }
+
+export const Switch = withTheme2(UnthemedSwitch);
+
+const getStyles = (theme: GrafanaTheme2) => {
+  const slider = css({
+    background: theme.v1.palette.gray1,
+    borderRadius: theme.shape.radius.pill,
+    height: '16px',
+    width: '32px',
+    display: 'block',
+    position: 'relative',
+
+    '&::before': {
+      position: 'absolute',
+      content: "''",
+      height: '12px',
+      width: '12px',
+      left: '2px',
+      top: '2px',
+      background: theme.components.input.background,
+      transition: '0.4s',
+      borderRadius: theme.shape.radius.circle,
+      boxShadow: theme.shadows.z1,
+    },
+  });
+  return {
+    container: css({
+      display: 'flex',
+      flexShrink: 0,
+    }),
+    labelContainer: css({
+      display: 'flex',
+      cursor: 'pointer',
+      marginRight: theme.spacing(0.5),
+    }),
+    switch: css({
+      display: 'flex',
+      position: 'relative',
+      width: '56px',
+      height: theme.spacing(4),
+      background: theme.components.input.background,
+      border: `1px solid ${theme.components.input.borderColor}`,
+      borderRadius: theme.shape.radius.default,
+      alignItems: 'center',
+      justifyContent: 'center',
+      input: {
+        opacity: 0,
+        width: 0,
+        height: 0,
+      },
+      [`input:checked + .${slider}`]: {
+        background: theme.colors.primary.main,
+      },
+
+      [`input:checked + .${slider}::before`]: {
+        transform: 'translateX(16px)',
+      },
+    }),
+    switchTransparent: css({
+      background: 'transparent',
+      border: 0,
+      width: '40px',
+    }),
+    slider,
+  };
+};
diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss
index ef72d796223..fc03228bf6d 100644
--- a/public/sass/_angular.scss
+++ b/public/sass/_angular.scss
@@ -1268,3 +1268,133 @@ div.editor-option label {
   border-radius: 5px;
   counter-reset: flag;
 }
+
+gf-form-switch[disabled] {
+  .gf-form-switch,
+  .gf-form-switch-container {
+    cursor: default;
+    pointer-events: none !important;
+    .gf-form-label {
+      color: $text-color-weak;
+    }
+  }
+}
+
+.gf-form-switch-container {
+  display: flex;
+  cursor: pointer;
+  margin-right: $space-xs;
+}
+
+.gf-form-switch {
+  display: flex;
+  position: relative;
+  width: 56px;
+  height: $input-height;
+  background: $switch-bg;
+  border: 1px solid $input-border-color;
+  border-radius: $input-border-radius;
+  align-items: center;
+  justify-content: center;
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &--transparent {
+    background: transparent;
+    border: 0;
+    width: 40px;
+  }
+}
+
+.gf-form-switch__slider {
+  background: $switch-slider-off-bg;
+  border-radius: 8px;
+  height: 16px;
+  width: 32px;
+  display: block;
+  position: relative;
+
+  &::before {
+    position: absolute;
+    content: '';
+    height: 12px;
+    width: 12px;
+    left: 2px;
+    top: 2px;
+    background: $switch-slider-color;
+    transition: 0.4s;
+    border-radius: 50%;
+    box-shadow: $switch-slider-shadow;
+  }
+}
+
+input:checked + .gf-form-switch__slider {
+  background: $switch-slider-on-bg;
+}
+
+input:checked + .gf-form-switch__slider::before {
+  transform: translateX(16px);
+}
+
+.gf-form-checkbox {
+  position: relative;
+  display: flex;
+  width: 50px;
+  height: $input-height;
+  background: $switch-bg;
+  border: 1px solid $input-border-color;
+  border-left: none;
+  border-radius: $input-border-radius;
+  align-items: center;
+  justify-content: center;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+    appearance: none;
+  }
+
+  &--transparent {
+    background: transparent;
+    border: none;
+    width: 23px;
+    height: auto;
+    position: relative;
+    padding-left: 8px;
+  }
+
+  &--table-cell {
+    width: 20px;
+    background: transparent;
+    height: auto;
+    border: none;
+    position: relative;
+    top: -5px;
+  }
+}
+
+.gf-form-switch__checkbox {
+  height: 16px;
+  width: 16px;
+  border-radius: 3px;
+  border: $checkbox-border;
+  background: $checkbox-bg;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+input:checked + .gf-form-switch__checkbox::before {
+  font-family: 'FontAwesome';
+  content: '\f00c';
+  color: $checkbox-color;
+}
+
+input:checked + .gf-form-switch__checkbox {
+  background: $checkbox-checked-bg;
+  border: none;
+}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index da24198ee45..820c531beba 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -27,7 +27,6 @@
 @import 'components/scrollbar';
 @import 'components/buttons';
 @import 'components/alerts';
-@import 'components/switch';
 @import 'components/tags';
 @import 'components/submenu';
 @import 'components/gf-form';
diff --git a/public/sass/components/_switch.scss b/public/sass/components/_switch.scss
deleted file mode 100644
index c2bc4fd14c3..00000000000
--- a/public/sass/components/_switch.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-/* ============================================================
-  SWITCH 3 - YES NO
-============================================================ */
-
-gf-form-switch[disabled] {
-  .gf-form-switch,
-  .gf-form-switch-container {
-    cursor: default;
-    pointer-events: none !important;
-    .gf-form-label {
-      color: $text-color-weak;
-    }
-  }
-}
-
-.gf-form-switch-container-react {
-  display: flex;
-  flex-shrink: 0;
-}
-
-.gf-form-switch-container {
-  display: flex;
-  cursor: pointer;
-  margin-right: $space-xs;
-}
-
-.gf-form-switch {
-  display: flex;
-  position: relative;
-  width: 56px;
-  height: $input-height;
-  background: $switch-bg;
-  border: 1px solid $input-border-color;
-  border-radius: $input-border-radius;
-  align-items: center;
-  justify-content: center;
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-  }
-
-  &--transparent {
-    background: transparent;
-    border: 0;
-    width: 40px;
-  }
-}
-
-/* The slider */
-.gf-form-switch__slider {
-  background: $switch-slider-off-bg;
-  border-radius: 8px;
-  height: 16px;
-  width: 32px;
-  display: block;
-  position: relative;
-
-  &::before {
-    position: absolute;
-    content: '';
-    height: 12px;
-    width: 12px;
-    left: 2px;
-    top: 2px;
-    background: $switch-slider-color;
-    transition: 0.4s;
-    border-radius: 50%;
-    box-shadow: $switch-slider-shadow;
-  }
-}
-
-input:checked + .gf-form-switch__slider {
-  background: $switch-slider-on-bg;
-}
-
-input:checked + .gf-form-switch__slider::before {
-  transform: translateX(16px);
-}
-
-.gf-form-checkbox {
-  position: relative;
-  display: flex;
-  width: 50px;
-  height: $input-height;
-  background: $switch-bg;
-  border: 1px solid $input-border-color;
-  border-left: none;
-  border-radius: $input-border-radius;
-  align-items: center;
-  justify-content: center;
-
-  input {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    appearance: none;
-  }
-
-  &--transparent {
-    background: transparent;
-    border: none;
-    width: 23px;
-    height: auto;
-    position: relative;
-    padding-left: 8px;
-  }
-
-  &--table-cell {
-    width: 20px;
-    background: transparent;
-    height: auto;
-    border: none;
-    position: relative;
-    top: -5px;
-  }
-}
-
-.gf-form-switch__checkbox {
-  height: 16px;
-  width: 16px;
-  border-radius: 3px;
-  border: $checkbox-border;
-  background: $checkbox-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-input:checked + .gf-form-switch__checkbox::before {
-  font-family: 'FontAwesome';
-  content: '\f00c';
-  color: $checkbox-color;
-}
-
-input:checked + .gf-form-switch__checkbox {
-  background: $checkbox-checked-bg;
-  border: none;
-}