mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Select: Minor style and usability improvements (#36628)
* Select: Minor style & hover improvements * added testid * change to aria label
This commit is contained in:
parent
c7d2d70799
commit
afff7f24fc
@ -42,6 +42,7 @@ const getInputControlStyles = stylesFactory(
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
cursor: ${disabled ? 'not-allowed' : 'pointer'};
|
||||
`,
|
||||
withPrefix &&
|
||||
css`
|
||||
|
@ -293,6 +293,9 @@ export function SelectBase<T>({
|
||||
return (
|
||||
<Icon
|
||||
name="times"
|
||||
role="button"
|
||||
aria-label="select-clear-value"
|
||||
className={styles.singleValueRemove}
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
@ -94,11 +94,24 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
|
||||
padding: ${theme.spacing(0.25, 0, 0.25, 1)};
|
||||
color: ${theme.colors.text.primary};
|
||||
font-size: ${theme.typography.size.sm};
|
||||
|
||||
&:hover {
|
||||
background: ${theme.colors.emphasize(theme.colors.background.secondary)};
|
||||
}
|
||||
`,
|
||||
multiValueRemove: css`
|
||||
label: grafana-select-multi-value-remove;
|
||||
margin: ${theme.spacing(0, 0.5)};
|
||||
cursor: pointer;
|
||||
svg {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
`,
|
||||
singleValueRemove: css`
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: ${theme.colors.text.primary};
|
||||
}
|
||||
`,
|
||||
};
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user