From afff7f24fc8eec22930f3414c21efb1eae2cab01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 11 Jul 2021 17:18:37 +0200 Subject: [PATCH] Select: Minor style and usability improvements (#36628) * Select: Minor style & hover improvements * added testid * change to aria label --- .../src/components/Select/InputControl.tsx | 1 + .../grafana-ui/src/components/Select/SelectBase.tsx | 3 +++ .../src/components/Select/getSelectStyles.ts | 13 +++++++++++++ 3 files changed, 17 insertions(+) diff --git a/packages/grafana-ui/src/components/Select/InputControl.tsx b/packages/grafana-ui/src/components/Select/InputControl.tsx index 1d2e52f8c02..4b6531248e1 100644 --- a/packages/grafana-ui/src/components/Select/InputControl.tsx +++ b/packages/grafana-ui/src/components/Select/InputControl.tsx @@ -42,6 +42,7 @@ const getInputControlStyles = stylesFactory( justify-content: space-between; position: relative; box-sizing: border-box; + cursor: ${disabled ? 'not-allowed' : 'pointer'}; `, withPrefix && css` diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index b4ca80442fc..43304e5ba89 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx @@ -293,6 +293,9 @@ export function SelectBase({ return ( { e.preventDefault(); e.stopPropagation(); diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index aa738bf35ca..bc60888cc3f 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts @@ -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}; + } `, }; });