From 1378cadb685fe439c4f5523df27d4dcc30831a13 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Mon, 29 Jun 2020 15:48:34 +0200
Subject: [PATCH] Switch: Deprecate checked prop in favor of value (#25862)

---
 packages/grafana-ui/src/components/Switch/Switch.mdx       | 7 +++----
 packages/grafana-ui/src/components/Switch/Switch.story.tsx | 2 +-
 packages/grafana-ui/src/components/Switch/Switch.tsx       | 6 +++++-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Switch/Switch.mdx b/packages/grafana-ui/src/components/Switch/Switch.mdx
index 1e1936a26cc..129f3669362 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.mdx
+++ b/packages/grafana-ui/src/components/Switch/Switch.mdx
@@ -1,5 +1,5 @@
-import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
-import { Switch } from "./Switch";
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Switch } from './Switch';
 
 <Meta title="MDX|Switch" component={Switch} />
 
@@ -11,13 +11,12 @@ import { Switch } from "./Switch";
 
 Switches trigger changes immediately. If your component should trigger a change only after sending a form, it's better to use either `RadioButtonGroup` or `Checkbox` instead. Furthermore, switches cannot be grouped – each `Switch` triggers an independent state. If you want multiple mutually exclusive choices, the `RadioButtonGroup` is the better option. To offer multiple choices within the same group or context which are not mutually exclusive, use `Checkbox` instead.
 
-
 ### Usage
 
 ```jsx
 import { Switch } from '@grafana/ui';
 
-<Switch disabled={...} checked={...} onChange={...} />
+<Switch disabled={...} value={...} onChange={...} />
 ```
 
 ### Props
diff --git a/packages/grafana-ui/src/components/Switch/Switch.story.tsx b/packages/grafana-ui/src/components/Switch/Switch.story.tsx
index e66b9328f98..da0aa0ac53b 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.story.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.story.tsx
@@ -20,7 +20,7 @@ export const controlled = () => {
   const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
   const BEHAVIOUR_GROUP = 'Behaviour props';
   const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
-  return <Switch checked={checked} disabled={disabled} onChange={onChange} />;
+  return <Switch value={checked} disabled={disabled} onChange={onChange} />;
 };
 
 export const uncontrolled = () => {
diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 5ea11edbdac..bd59ad02cbd 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -1,7 +1,7 @@
 import React, { HTMLProps, useRef } from 'react';
 import { css, cx } from 'emotion';
 import uniqueId from 'lodash/uniqueId';
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme, deprecationWarning } from '@grafana/data';
 import { stylesFactory, useTheme } from '../../themes';
 import { focusCss } from '../../themes/mixins';
 
@@ -77,6 +77,10 @@ export const getSwitchStyles = stylesFactory((theme: GrafanaTheme) => {
 
 export const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(
   ({ value, checked, disabled = false, onChange, ...inputProps }, ref) => {
+    if (checked) {
+      deprecationWarning('Switch', 'checked prop', 'value');
+    }
+
     const theme = useTheme();
     const styles = getSwitchStyles(theme);
     const switchIdRef = useRef(uniqueId('switch-'));