From cfc529cb035d66f89a0482ae847dce6aff29aa50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 12 Feb 2025 17:22:56 +0100 Subject: [PATCH] Design/Theme: Change dropdown background in dark themes (#100415) * Dropdowns: Change background for Selects/Comboboxs * Update * Update * Review fixes * Update --- .../src/themes/createComponents.ts | 2 +- .../shared/OperationInfoButton.tsx | 4 +-- .../src/components/Cascader/styles.ts | 7 +++--- .../src/components/Combobox/Combobox.tsx | 2 +- .../src/components/Combobox/MultiCombobox.tsx | 2 +- .../components/Combobox/getComboboxStyles.ts | 1 + .../src/components/Select/SelectMenu.tsx | 2 +- .../src/components/Select/getSelectStyles.ts | 1 + .../core/components/TagFilter/TagOption.tsx | 7 +++--- .../components/picker/DataSourceCard.tsx | 25 +++++++++++++------ .../components/picker/DataSourceList.tsx | 1 + .../components/picker/DataSourcePicker.tsx | 4 ++- 12 files changed, 38 insertions(+), 20 deletions(-) diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts index 70dbcd67cf5..e810a94b86e 100644 --- a/packages/grafana-data/src/themes/createComponents.ts +++ b/packages/grafana-data/src/themes/createComponents.ts @@ -80,7 +80,7 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th input, panel, dropdown: { - background: input.background, + background: colors.background.elevated, }, tooltip: { background: colors.background.elevated, diff --git a/packages/grafana-prometheus/src/querybuilder/shared/OperationInfoButton.tsx b/packages/grafana-prometheus/src/querybuilder/shared/OperationInfoButton.tsx index 69f26d84865..b576188a581 100644 --- a/packages/grafana-prometheus/src/querybuilder/shared/OperationInfoButton.tsx +++ b/packages/grafana-prometheus/src/querybuilder/shared/OperationInfoButton.tsx @@ -94,8 +94,8 @@ const getStyles = (theme: GrafanaTheme2) => { return { docBox: css({ overflow: 'hidden', - background: theme.colors.background.primary, - border: `1px solid ${theme.colors.border.strong}`, + background: theme.colors.background.elevated, + border: `1px solid ${theme.colors.border.weak}`, boxShadow: theme.shadows.z3, maxWidth: '600px', padding: theme.spacing(1), diff --git a/packages/grafana-ui/src/components/Cascader/styles.ts b/packages/grafana-ui/src/components/Cascader/styles.ts index 537bb8c4a7e..cef38b62dcc 100644 --- a/packages/grafana-ui/src/components/Cascader/styles.ts +++ b/packages/grafana-ui/src/components/Cascader/styles.ts @@ -72,8 +72,8 @@ export const getCascaderStyles = (theme: GrafanaTheme2) => ({ '.rc-cascader': { '&-menus': { overflow: 'hidden', - background: theme.colors.background.canvas, - border: `1px solid ${theme.colors.border.weak}`, + background: theme.colors.background.elevated, + border: `none`, borderRadius: theme.shape.radius.default, boxShadow: theme.shadows.z3, whiteSpace: 'nowrap', @@ -128,7 +128,7 @@ export const getCascaderStyles = (theme: GrafanaTheme2) => ({ height: '192px', listStyle: 'none', margin: 0, - padding: 0, + padding: theme.spacing(0.5), borderRight: `1px solid ${theme.colors.border.weak}`, overflow: 'auto', @@ -140,6 +140,7 @@ export const getCascaderStyles = (theme: GrafanaTheme2) => ({ height: theme.spacing(4), lineHeight: theme.spacing(4), padding: theme.spacing(0, 4, 0, 2), + borderRadius: theme.shape.radius.default, cursor: 'pointer', whiteSpace: 'nowrap', overflow: 'hidden', diff --git a/packages/grafana-ui/src/components/Combobox/Combobox.tsx b/packages/grafana-ui/src/components/Combobox/Combobox.tsx index 471bb22fe5d..5d6c5320402 100644 --- a/packages/grafana-ui/src/components/Combobox/Combobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/Combobox.tsx @@ -407,7 +407,7 @@ export const Combobox = (props: ComboboxProps) => })} > {isOpen && ( - + {!asyncError && (
    {rowVirtualizer.getVirtualItems().map((virtualRow) => { diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx index 7b41ca2ee53..9a90dfd4588 100644 --- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx +++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx @@ -344,7 +344,7 @@ export const MultiCombobox = (props: MultiComboboxPro {...getMenuProps({ ref: floatingRef })} > {isOpen && ( - +
      {rowVirtualizer.getVirtualItems().map((virtualRow) => { const startingNewGroup = isNewGroup(options[virtualRow.index], options[virtualRow.index - 1]); diff --git a/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts b/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts index f0ea95cacb2..6c788b15cbd 100644 --- a/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts +++ b/packages/grafana-ui/src/components/Combobox/getComboboxStyles.ts @@ -46,6 +46,7 @@ export const getComboboxStyles = (theme: GrafanaTheme2) => { option: css({ padding: MENU_ITEM_PADDING, cursor: 'pointer', + borderRadius: theme.shape.radius.default, width: '100%', '&:hover': { background: theme.colors.action.hover, diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx index b557b2e9a65..e19c8d87546 100644 --- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx +++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx @@ -54,7 +54,7 @@ export const SelectMenu = ({ style={{ maxHeight }} aria-label="Select options menu" > - + {toggleAllOptions && ( { whiteSpace: 'nowrap', cursor: 'pointer', borderLeft: '2px solid transparent', + borderRadius: theme.shape.radius.default, '&:hover': { background: theme.colors.action.hover, diff --git a/public/app/core/components/TagFilter/TagOption.tsx b/public/app/core/components/TagFilter/TagOption.tsx index 986d3f9ec7d..57abca0f942 100644 --- a/public/app/core/components/TagFilter/TagOption.tsx +++ b/public/app/core/components/TagFilter/TagOption.tsx @@ -27,16 +27,17 @@ export const TagOption = ({ data, className, label, isFocused, innerProps }: Opt const getStyles = (theme: GrafanaTheme2) => { return { option: css({ - padding: theme.spacing(1), + padding: theme.spacing(0.5), whiteSpace: 'nowrap', cursor: 'pointer', borderLeft: '2px solid transparent', + borderRadius: theme.shape.radius.default, '&:hover': { - background: theme.colors.background.secondary, + background: theme.colors.action.hover, }, }), optionFocused: css({ - background: theme.colors.background.secondary, + background: theme.colors.action.focus, borderStyle: 'solid', borderTop: 0, borderRight: 0, diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx index 7e14837a32c..84403ae4298 100644 --- a/public/app/features/datasources/components/picker/DataSourceCard.tsx +++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx @@ -41,15 +41,14 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) { return { card: css({ cursor: 'pointer', - backgroundColor: theme.colors.background.primary, - borderBottom: `1px solid ${theme.colors.border.weak}`, + backgroundColor: 'transparent', // Move to list component marginBottom: 0, - // set this to 0 to override the default card radius - // also need to disable our eslint rule - // eslint-disable-next-line @grafana/no-border-radius-literal - borderRadius: 0, padding: theme.spacing(1), + + '&:hover': { + backgroundColor: theme.colors.action.hover, + }, }), heading: css({ width: '100%', @@ -98,7 +97,19 @@ function getStyles(theme: GrafanaTheme2, builtIn = false) { color: theme.colors.border.weak, }), selected: css({ - backgroundColor: theme.colors.background.secondary, + background: theme.colors.action.selected, + + '&::before': { + backgroundImage: theme.colors.gradients.brandVertical, + borderRadius: theme.shape.radius.default, + content: '" "', + display: 'block', + height: '100%', + position: 'absolute', + transform: 'translateX(-50%)', + width: theme.spacing(0.5), + left: 0, + }, }), meta: css({ display: 'block', diff --git a/public/app/features/datasources/components/picker/DataSourceList.tsx b/public/app/features/datasources/components/picker/DataSourceList.tsx index 11fc0bc90e0..93d8e15f546 100644 --- a/public/app/features/datasources/components/picker/DataSourceList.tsx +++ b/public/app/features/datasources/components/picker/DataSourceList.tsx @@ -141,6 +141,7 @@ function getStyles(theme: GrafanaTheme2, selectedItemCssSelector: string) { container: css({ display: 'flex', flexDirection: 'column', + padding: theme.spacing(0.5), [`${selectedItemCssSelector}`]: { backgroundColor: theme.colors.background.secondary, }, diff --git a/public/app/features/datasources/components/picker/DataSourcePicker.tsx b/public/app/features/datasources/components/picker/DataSourcePicker.tsx index 47a0366230e..88aebfbafe3 100644 --- a/public/app/features/datasources/components/picker/DataSourcePicker.tsx +++ b/public/app/features/datasources/components/picker/DataSourcePicker.tsx @@ -380,8 +380,10 @@ function getStylesPickerContent(theme: GrafanaTheme2) { container: css({ display: 'flex', flexDirection: 'column', - background: theme.colors.background.primary, + background: theme.colors.background.elevated, + borderRadius: theme.shape.radius.default, boxShadow: theme.shadows.z3, + overflow: 'hidden', }), picker: css({ background: theme.colors.background.secondary,