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

Select: Minor style and usability improvements (#36628)

Browse Source 
* Select: Minor style & hover improvements

* added testid

* change to aria label
This commit is contained in:
Torkel Ödegaard 2021-07-11 17:18:37 +02:00 committed by GitHub
parent c7d2d70799
commit afff7f24fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/Select/InputControl.tsx
View File

@ -42,6 +42,7 @@ const getInputControlStyles = stylesFactory(
justify-content: space-between; justify-content: space-between;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
cursor: ${disabled ? 'not-allowed' : 'pointer'};
`, `,
withPrefix && withPrefix &&
css` css`

3
packages/grafana-ui/src/components/Select/SelectBase.tsx
View File

@ -293,6 +293,9 @@ export function SelectBase<T>({
return ( return (
<Icon <Icon
name="times" name="times"
role="button"
aria-label="select-clear-value"
className={styles.singleValueRemove}
onMouseDown={(e) => { onMouseDown={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

13
packages/grafana-ui/src/components/Select/getSelectStyles.ts
View File

@ -94,11 +94,24 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
padding: ${theme.spacing(0.25, 0, 0.25, 1)}; padding: ${theme.spacing(0.25, 0, 0.25, 1)};
color: ${theme.colors.text.primary}; color: ${theme.colors.text.primary};
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
&:hover {
background: ${theme.colors.emphasize(theme.colors.background.secondary)};
}
`, `,
multiValueRemove: css` multiValueRemove: css`
label: grafana-select-multi-value-remove; label: grafana-select-multi-value-remove;
margin: ${theme.spacing(0, 0.5)}; margin: ${theme.spacing(0, 0.5)};
cursor: pointer; cursor: pointer;
svg {
margin-bottom: 0;
}
`,
singleValueRemove: css`
cursor: pointer;
&:hover {
color: ${theme.colors.text.primary};
}
`, `,
}; };
}); });