IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Tobias Skarhed 2020-06-29 15:48:34 +02:00 committed by GitHub
parent 75d8853aac
commit 1378cadb68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
packages/grafana-ui/src/components/Switch/Switch.mdx
View File

@ -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

2
packages/grafana-ui/src/components/Switch/Switch.story.tsx
View File

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

6
packages/grafana-ui/src/components/Switch/Switch.tsx
View File

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