Switch: Deprecate checked prop in favor of value (#25862)

packages/grafana-ui/src/components/Switch/Switch.mdx

-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

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 = () => {

packages/grafana-ui/src/components/Switch/Switch.tsx

 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-'));