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

02f8a139 · Torkel Ödegaard · GitHub · aad7d495 · 02f8a139 · 02f8a139
Commit 02f8a139 authored Jan 27, 2021 by Torkel Ödegaard Committed by GitHub Jan 27, 2021
10 changed files
--- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
+++ b/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;

--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/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;

--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/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};

--- a/public/app/features/dashboard/components/DashNav/DashNav.tsx
+++ b/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,

--- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
@@ -2,37 +2,23 @@
 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 && (
@@ -48,26 +34,6 @@ export const DashNavButton: FunctionComponent<Props> = ({
      {children}
    </div>
  );
-  }
-  return (
-    <Tooltip content={tooltip} placement="bottom">
-      {onClick ? (
-        <button
-          className={`btn navbar-button navbar-button--${classSuffix}`}
-          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>
-  );
 };
 const getStyles = stylesFactory((theme: GrafanaTheme) => ({

--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneContent.tsx
+++ b/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>
    </>
  );

--- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
+++ b/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>

--- a/public/sass/_variables.dark.generated.scss
+++ b/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;

--- a/public/sass/_variables.light.generated.scss
+++ b/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;

--- a/public/sass/components/_navbar.scss
+++ b/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;
-    }
-  }
-}