grafana/ui: Do not wrap words inside RadioButton (#35654)

pull/35760/head
Alex Khomenko 4 years ago committed by GitHub
parent 6b786e7f68
commit e5e93134cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 8
      packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx

@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { useTheme2, stylesFactory } from '../../../themes'; import { useTheme2, stylesFactory } from '../../../themes';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { css, cx } from '@emotion/css'; import { css } from '@emotion/css';
import { getPropertiesForButtonSize } from '../commonStyles'; import { getPropertiesForButtonSize } from '../commonStyles';
import { getFocusStyles, getMouseFocusStyles } from '../../../themes/mixins'; import { getFocusStyles, getMouseFocusStyles } from '../../../themes/mixins';
@ -36,14 +36,14 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
<> <>
<input <input
type="radio" type="radio"
className={cx(styles.radio)} className={styles.radio}
onChange={onChange} onChange={onChange}
disabled={disabled} disabled={disabled}
id={id} id={id}
checked={active} checked={active}
name={name} name={name}
/> />
<label className={cx(styles.radioLabel)} htmlFor={id} title={description}> <label className={styles.radioLabel} htmlFor={id} title={description}>
{children} {children}
</label> </label>
</> </>
@ -83,7 +83,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut
} }
&:disabled + label { &:disabled + label {
cursor: default;
color: ${theme.colors.text.disabled}; color: ${theme.colors.text.disabled};
cursor: not-allowed; cursor: not-allowed;
} }
@ -104,6 +103,7 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioBut
flex: ${fullWidth ? `1 0 0` : 'none'}; flex: ${fullWidth ? `1 0 0` : 'none'};
text-align: center; text-align: center;
user-select: none; user-select: none;
white-space: nowrap;
&:hover { &:hover {
color: ${textColorHover}; color: ${textColorHover};

Loading…
Cancel
Save