mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
c57924e332
* refactor: replace uses of checked prop for <Switch> with value prop
* fix: remove spaces from ids
The ID format is stated as follows([source][1]):
> ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]),
hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
Since `QueryHeaderSwitch` is used in two places I created a new variable that replaces spaces with a dash in the label.
[1]: https://www.w3.org/TR/html401/types.html#type-name
* fix: allow Switch in AlertingSettings to be focused by keyboard
* fix: allow Switch in PromSettings to be focused by keyboard
Fixes #46472
Co-authored-by: Elfo404 <me@giordanoricci.com>
41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import { css } from '@emotion/css';
|
|
import { uniqueId } from 'lodash';
|
|
import React, { HTMLProps, useRef } from 'react';
|
|
|
|
import { GrafanaTheme2 } from '@grafana/data';
|
|
import { Stack } from '@grafana/experimental';
|
|
import { Switch, useStyles2 } from '@grafana/ui';
|
|
|
|
export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {
|
|
value?: boolean;
|
|
label: string;
|
|
}
|
|
|
|
export function QueryHeaderSwitch({ label, ...inputProps }: Props) {
|
|
const dashedLabel = label.replace(' ', '-');
|
|
const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));
|
|
const styles = useStyles2(getStyles);
|
|
|
|
return (
|
|
<Stack gap={1}>
|
|
<label htmlFor={switchIdRef.current} className={styles.switchLabel}>
|
|
{label}
|
|
</label>
|
|
<Switch {...inputProps} id={switchIdRef.current} />
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
const getStyles = (theme: GrafanaTheme2) => {
|
|
return {
|
|
switchLabel: css({
|
|
color: theme.colors.text.secondary,
|
|
cursor: 'pointer',
|
|
fontSize: theme.typography.bodySmall.fontSize,
|
|
'&:hover': {
|
|
color: theme.colors.text.primary,
|
|
},
|
|
}),
|
|
};
|
|
};
|