From 17b2240d52539a6d0ea16c11973efcdeda2943ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 10 Jul 2023 11:41:33 +0200 Subject: [PATCH] GrafanaUI: Update FilterPill active state and ToolbarButton active state (#70396) --- .../grafana-data/src/themes/createColors.ts | 7 +++++ .../src/components/FilterPill/FilterPill.tsx | 4 ++- .../ToolbarButton/ToolbarButton.story.tsx | 4 +-- .../ToolbarButton/ToolbarButton.tsx | 26 ++++++++++++------- .../app/features/explore/SecondaryActions.tsx | 25 +++++++++--------- public/sass/pages/_explore.scss | 6 ----- 6 files changed, 40 insertions(+), 32 deletions(-) diff --git a/packages/grafana-data/src/themes/createColors.ts b/packages/grafana-data/src/themes/createColors.ts index cc6eb33c1a1..849a6841077 100644 --- a/packages/grafana-data/src/themes/createColors.ts +++ b/packages/grafana-data/src/themes/createColors.ts @@ -50,6 +50,11 @@ export interface ThemeColorsBase { action: { /** Used for selected menu item / select option */ selected: string; + /** + * @alpha (Do not use from plugins) + * Used for selected items when background only change is not enough (Currently only used for FilterPill) + **/ + selectedBorder: string; /** Used for hovered menu item / select option */ hover: string; /** Used for button/colored background hover opacity */ @@ -143,6 +148,7 @@ class DarkColors implements ThemeColorsBase> { action = { hover: `rgba(${this.whiteBase}, 0.16)`, selected: `rgba(${this.whiteBase}, 0.12)`, + selectedBorder: palette.orangeDarkMain, focus: `rgba(${this.whiteBase}, 0.16)`, hoverOpacity: 0.08, disabledText: this.text.disabled, @@ -224,6 +230,7 @@ class LightColors implements ThemeColorsBase> { action = { hover: `rgba(${this.blackBase}, 0.12)`, selected: `rgba(${this.blackBase}, 0.08)`, + selectedBorder: palette.orangeLightMain, hoverOpacity: 0.08, focus: `rgba(${this.blackBase}, 0.12)`, disabledBackground: `rgba(${this.blackBase}, 0.04)`, diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx index 60f0a013a1f..52f37c7d869 100644 --- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx +++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx @@ -39,6 +39,8 @@ const getStyles = (theme: GrafanaTheme2) => { display: flex; align-items: center; height: 32px; + position: relative; + border: 1px solid ${theme.colors.background.secondary}; &:hover { background: ${theme.colors.action.hover}; @@ -47,7 +49,7 @@ const getStyles = (theme: GrafanaTheme2) => { `, selected: css` color: ${theme.colors.text.primary}; - background: ${theme.colors.action.selected}; + border: 1px solid #ff780a; &:hover { background: ${theme.colors.action.focus}; diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx index 01e76686b2a..7319dec030c 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx @@ -130,10 +130,10 @@ export const Examples: StoryFn = (args) => {
Wrapped in noSpacing ButtonGroup - + 2020-10-02 - +
diff --git a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx index dc27a098336..6f2603fe56c 100644 --- a/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx +++ b/packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx @@ -195,16 +195,22 @@ const getStyles = (theme: GrafanaTheme2) => { } `, canvas: defaultOld, - active: css` - color: ${theme.v1.palette.orangeDark}; - border-color: ${theme.v1.palette.orangeDark}; - background-color: transparent; - - &:hover { - color: ${theme.colors.text.primary}; - background: ${theme.colors.emphasize(theme.colors.background.canvas, 0.03)}; - } - `, + active: cx( + defaultOld, + css(` + &::before { + display: block; + content: ' '; + position: absolute; + left: 0; + right: 0; + height: 2px; + bottom: 0px; + border-radius: ${theme.shape.radius.default}; + background-image: ${theme.colors.gradients.brandHorizontal}; + } + `) + ), primary: css(primaryVariant), destructive: css(destructiveVariant), narrow: css` diff --git a/public/app/features/explore/SecondaryActions.tsx b/public/app/features/explore/SecondaryActions.tsx index 97cf5f21bd4..8a9196800b1 100644 --- a/public/app/features/explore/SecondaryActions.tsx +++ b/public/app/features/explore/SecondaryActions.tsx @@ -1,8 +1,8 @@ -import { css, cx } from '@emotion/css'; +import { css } from '@emotion/css'; import React from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { Button, HorizontalGroup, useTheme2 } from '@grafana/ui'; +import { HorizontalGroup, ToolbarButton, useTheme2 } from '@grafana/ui'; type Props = { addQueryRowButtonDisabled?: boolean; @@ -23,6 +23,7 @@ const getStyles = (theme: GrafanaTheme2) => { `, }; }; + export function SecondaryActions(props: Props) { const theme = useTheme2(); const styles = getStyles(theme); @@ -30,36 +31,34 @@ export function SecondaryActions(props: Props) {
{!props.addQueryRowButtonHidden && ( - + )} {!props.richHistoryRowButtonHidden && ( - + )} - +
); diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 1bfac398de9..7c26ba4e21d 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -1,9 +1,3 @@ -.explore-active-button { - box-shadow: $btn-active-box-shadow; - border: 1px solid $orange-dark !important; - color: $orange-dark !important; -} - // TODO: this is used in Loki & Prometheus, move it .explore-input-margin { margin-right: 4px;