GrafanaUI: Update FilterPill active state and ToolbarButton active state (#70396)

packages/grafana-data/src/themes/createColors.ts

@@ -50,6 +50,11 @@ export interface ThemeColorsBase<TColor> {
   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<Partial<ThemeRichColor>> {
   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<Partial<ThemeRichColor>> {
   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)`,

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};

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx

@@ -130,10 +130,10 @@ export const Examples: StoryFn<typeof ToolbarButton> = (args) => {
         <br />
         Wrapped in noSpacing ButtonGroup
         <ButtonGroup>
-          <ToolbarButton variant="canvas" icon="clock-nine" tooltip="Time picker">
+          <ToolbarButton variant="active" icon="clock-nine" tooltip="Time picker">
             2020-10-02
           </ToolbarButton>
-          <ToolbarButton variant="canvas" icon="search-minus" />
+          <ToolbarButton variant="active" icon="search-minus" />
         </ButtonGroup>
         <br />
         <ButtonGroup>

packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx

@@ -195,16 +195,22 @@ const getStyles = (theme: GrafanaTheme2) => {
       }
     `,
     canvas: defaultOld,
-    active: css`
+    active: cx(
-      color: ${theme.v1.palette.orangeDark};
+      defaultOld,
-      border-color: ${theme.v1.palette.orangeDark};
+      css(`
-      background-color: transparent;
+    &::before {
-
+      display: block;
-      &:hover {
+      content: ' ';
-        color: ${theme.colors.text.primary};
+      position: absolute;
-        background: ${theme.colors.emphasize(theme.colors.background.canvas, 0.03)};
+      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`

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) {
     <div className={styles.containerMargin}>
       <HorizontalGroup>
         {!props.addQueryRowButtonHidden && (
-          <Button
+          <ToolbarButton
-            variant="secondary"
+            variant="canvas"
             aria-label="Add row button"
             onClick={props.onClickAddQueryRowButton}
             disabled={props.addQueryRowButtonDisabled}
             icon="plus"
           >
             Add query
-          </Button>
+          </ToolbarButton>
         )}
         {!props.richHistoryRowButtonHidden && (
-          <Button
+          <ToolbarButton
-            variant="secondary"
+            variant={props.richHistoryButtonActive ? 'active' : 'canvas'}
             aria-label="Rich history button"
-            className={cx({ ['explore-active-button']: props.richHistoryButtonActive })}
             onClick={props.onClickRichHistoryButton}
             icon="history"
           >
             Query history
-          </Button>
+          </ToolbarButton>
         )}
-        <Button
+        <ToolbarButton
-          variant="secondary"
+          variant={props.queryInspectorButtonActive ? 'active' : 'canvas'}
           aria-label="Query inspector button"
-          className={cx({ ['explore-active-button']: props.queryInspectorButtonActive })}
           onClick={props.onClickQueryInspectorButton}
           icon="info-circle"
         >
           Inspector
-        </Button>
+        </ToolbarButton>
       </HorizontalGroup>
     </div>
   );

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;