PanelEdit: Get rid of last remaining usage of navbar-button (#30682)

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

@@ -118,9 +118,12 @@ const getStyles = (theme: GrafanaTheme) => {
       line-height: ${theme.height.md - 2}px;
       font-weight: ${theme.typography.weight.semibold};
       border: 1px solid ${theme.colors.border2};
+      white-space: nowrap;
+
       &:focus {
         outline: none;
       }
+
       &[disabled],
       &:disabled {
         cursor: not-allowed;

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -240,9 +240,6 @@ $horizontalComponentOffset: 180px;
 $navbarHeight: 55px;
 $navbarBorder: 1px solid $dark-6;
 
-$navbarButtonBackground: $panel-bg;
-$navbar-button-border: #2f2f32;
-
 // Sidemenu
 // -------------------------
 $side-menu-bg: $panel-bg;

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -234,9 +234,6 @@ $horizontalComponentOffset: 180px;
 $navbarHeight: 52px;
 $navbarBorder: 1px solid $gray-5;
 
-$navbarButtonBackground: $panel-bg;
-$navbar-button-border: $gray-4;
-
 // Sidemenu
 // -------------------------
 $side-menu-bg: ${theme.palette.gray15};

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -145,11 +145,9 @@ class DashNav extends PureComponent<Props> {
       buttons.push(
         <DashNavButton
           tooltip="Mark as favorite"
-          classSuffix="star"
           icon={isStarred ? 'favorite' : 'star'}
           iconType={isStarred ? 'mono' : 'default'}
           iconSize="lg"
-          noBorder={true}
           onClick={this.onStarDashboard}
           key="button-star"
         />
@@ -162,10 +160,8 @@ class DashNav extends PureComponent<Props> {
           {({ showModal, hideModal }) => (
             <DashNavButton
               tooltip="Share dashboard"
-              classSuffix="share"
               icon="share-alt"
               iconSize="lg"
-              noBorder={true}
               onClick={() => {
                 showModal(ShareModal, {
                   dashboard,

public/app/features/dashboard/components/DashNav/DashNavButton.tsx

@@ -2,71 +2,37 @@
 import React, { FunctionComponent } from 'react';
 import { css } from 'emotion';
 // Components
-import { Tooltip, Icon, IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
+import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
-import { selectors } from '@grafana/e2e-selectors';
 import { GrafanaTheme } from '@grafana/data';
 
 interface Props {
   icon?: IconName;
   tooltip: string;
-  classSuffix?: string;
   onClick?: () => void;
   href?: string;
   children?: React.ReactNode;
   iconType?: IconType;
   iconSize?: IconSize;
-  noBorder?: boolean;
 }
 
-export const DashNavButton: FunctionComponent<Props> = ({
+export const DashNavButton: FunctionComponent<Props> = ({ icon, iconType, iconSize, tooltip, onClick, children }) => {
-  icon,
-  iconType,
-  iconSize,
-  tooltip,
-  classSuffix,
-  onClick,
-  href,
-  children,
-  noBorder,
-}) => {
   const theme = useTheme();
   const styles = getStyles(theme);
 
-  if (noBorder) {
-    return (
-      <div className={styles.noBorderContainer}>
-        {icon && (
-          <IconButton
-            name={icon}
-            size={iconSize}
-            iconType={iconType}
-            tooltip={tooltip}
-            tooltipPlacement="bottom"
-            onClick={onClick}
-          />
-        )}
-        {children}
-      </div>
-    );
-  }
   return (
-    <Tooltip content={tooltip} placement="bottom">
+    <div className={styles.noBorderContainer}>
-      {onClick ? (
+      {icon && (
-        <button
+        <IconButton
-          className={`btn navbar-button navbar-button--${classSuffix}`}
+          name={icon}
+          size={iconSize}
+          iconType={iconType}
+          tooltip={tooltip}
+          tooltipPlacement="bottom"
           onClick={onClick}
-          aria-label={selectors.components.PageToolbar.item(tooltip)}
+        />
-        >
-          {icon && <Icon name={icon} type={iconType} size={iconSize || 'lg'} />}
-          {children}
-        </button>
-      ) : (
-        <a className={`btn navbar-button navbar-button--${classSuffix}`} href={href}>
-          {icon && <Icon name={icon} type={iconType} size="lg" />}
-          {children}
-        </a>
       )}
-    </Tooltip>
+      {children}
+    </div>
   );
 };
 

public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx

@@ -2,12 +2,22 @@ import React, { CSSProperties, useCallback, useState } from 'react';
 import Transition from 'react-transition-group/Transition';
 import { FieldConfigSource, GrafanaTheme, PanelPlugin, SelectableValue } from '@grafana/data';
 import { DashboardModel, PanelModel } from '../../state';
-import { CustomScrollbar, Icon, Input, Select, stylesFactory, Tab, TabContent, TabsBar, useTheme } from '@grafana/ui';
+import {
+  CustomScrollbar,
+  Icon,
+  Input,
+  Select,
+  stylesFactory,
+  Tab,
+  TabContent,
+  TabsBar,
+  ToolbarButton,
+  useTheme,
+} from '@grafana/ui';
 import { OverrideFieldConfigEditor } from './OverrideFieldConfigEditor';
 import { DefaultFieldConfigEditor } from './DefaultFieldConfigEditor';
 import { css } from 'emotion';
 import { PanelOptionsTab } from './PanelOptionsTab';
-import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
 import { usePanelLatestData } from './usePanelLatestData';
 import { selectors } from '@grafana/e2e-selectors';
 
@@ -213,13 +223,7 @@ export const TabsBarContent: React.FC<{
         </>
       )}
       <div className={styles.tabsButton}>
-        <DashNavButton
+        <ToolbarButton icon="angle-right" tooltip="Close options pane" onClick={onClose} />
-          icon="angle-right"
-          tooltip="Close options pane"
-          classSuffix="close-options"
-          onClick={onClose}
-          iconSize="lg"
-        />
       </div>
     </>
   );

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs';
 
 import { FieldConfigSource, GrafanaTheme } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { HorizontalGroup, Icon, PageToolbar, RadioButtonGroup, stylesFactory, ToolbarButton } from '@grafana/ui';
+import { HorizontalGroup, PageToolbar, RadioButtonGroup, stylesFactory, ToolbarButton } from '@grafana/ui';
 
 import config from 'app/core/config';
 import { appEvents } from 'app/core/core';
@@ -15,7 +15,6 @@ import { calculatePanelSize } from './utils';
 import { PanelEditorTabs } from './PanelEditorTabs';
 import { DashNavTimeControls } from '../DashNav/DashNavTimeControls';
 import { OptionsPaneContent } from './OptionsPaneContent';
-import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';
 import { SubMenuItems } from 'app/features/dashboard/components/SubMenu/SubMenuItems';
 import { SplitPaneWrapper } from 'app/core/components/SplitPaneWrapper/SplitPaneWrapper';
 import { SaveDashboardModalProxy } from '../SaveDashboard/SaveDashboardModalProxy';
@@ -235,13 +234,9 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
               onChangeTimeZone={updateTimeZoneForSession}
             />
             {!uiState.isPanelOptionsVisible && (
-              <DashNavButton
+              <ToolbarButton onClick={this.onTogglePanelOptions} tooltip="Open options pane" icon="angle-left">
-                onClick={this.onTogglePanelOptions}
+                Show options
-                tooltip="Open options pane"
+              </ToolbarButton>
-                classSuffix="close-options"
-              >
-                <Icon name="angle-left" /> <span style={{ paddingLeft: '6px' }}>Show options</span>
-              </DashNavButton>
             )}
           </HorizontalGroup>
         </HorizontalGroup>

public/sass/_variables.dark.generated.scss

@@ -242,9 +242,6 @@ $horizontalComponentOffset: 180px;
 $navbarHeight: 55px;
 $navbarBorder: 1px solid $dark-6;
 
-$navbarButtonBackground: $panel-bg;
-$navbar-button-border: #2f2f32;
-
 // Sidemenu
 // -------------------------
 $side-menu-bg: $panel-bg;

public/sass/_variables.light.generated.scss

@@ -236,9 +236,6 @@ $horizontalComponentOffset: 180px;
 $navbarHeight: 52px;
 $navbarBorder: 1px solid $gray-5;
 
-$navbarButtonBackground: $panel-bg;
-$navbar-button-border: $gray-4;
-
 // Sidemenu
 // -------------------------
 $side-menu-bg: #202226;

public/sass/components/_navbar.scss

@@ -30,94 +30,3 @@
     }
   }
 }
-
-.navbar-button {
-  background-color: $panel-bg;
-
-  display: flex;
-  align-items: center;
-  font-weight: $btn-font-weight;
-  padding: 0 $space-sm;
-  height: 32px;
-  // 2px less then border
-  line-height: 30px;
-  color: $text-muted;
-  border: 1px solid $navbar-button-border;
-  margin-left: $space-xs;
-  white-space: nowrap;
-
-  .gicon {
-    font-size: 16px;
-  }
-
-  .fa {
-    font-size: 16px;
-  }
-
-  &--add-panel {
-    padding: 2px 10px;
-
-    .gicon {
-      font-size: 22px;
-    }
-  }
-
-  &--refresh {
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
-  &--attached {
-    margin-left: 0;
-    border-radius: 0 2px 2px 0;
-  }
-
-  &--settings {
-    .gicon {
-      filter: $navbar-btn-gicon-brightness;
-    }
-
-    &:hover {
-      .gicon {
-        filter: brightness(0.8);
-      }
-    }
-  }
-
-  &--danger {
-    @include buttonBackground($red-base, $red-shade);
-  }
-
-  &--tight {
-    padding: 0px 4px;
-
-    .fa {
-      font-size: 14px;
-    }
-  }
-
-  &--primary {
-    @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl);
-  }
-
-  &--danger {
-    @include buttonBackground($red-base, $red-shade);
-  }
-
-  &:hover {
-    svg {
-      color: $text-color;
-    }
-  }
-
-  &--danger {
-    @include buttonBackground($red-base, $red-shade);
-  }
-
-  @include media-breakpoint-down(lg) {
-    .btn-title {
-      margin-left: $space-xs;
-      display: none;
-    }
-  }
-}