Replace Icons for IconButtons when used as buttons (#23554)

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

@@ -43,6 +43,8 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
   }
 );
 
+IconButton.displayName = 'IconButton';
+
 function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
   switch (surface) {
     case 'body':

packages/grafana-ui/src/components/Logs/getLogRowStyles.ts

@@ -149,7 +149,7 @@ export const getLogRowStyles = stylesFactory((theme: GrafanaTheme, logLevel?: Lo
     `,
     logDetailsTable: css`
       label: logs-row-details-table;
-      line-height: 1.7;
+      line-height: 18px;
       width: 100%;
       td:last-child {
         width: 100%;

public/app/features/api-keys/ApiKeysPage.tsx

@@ -13,7 +13,7 @@ import ApiKeysAddedModal from './ApiKeysAddedModal';
 import config from 'app/core/config';
 import appEvents from 'app/core/app_events';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-import { DeleteButton, EventsWithValidation, FormLabel, LegacyForms, ValidationEvents, Icon } from '@grafana/ui';
+import { DeleteButton, EventsWithValidation, FormLabel, LegacyForms, ValidationEvents, IconButton } from '@grafana/ui';
 const { Input, Switch } = LegacyForms;
 import { dateTime, isDateTime, NavModel } from '@grafana/data';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
@@ -181,7 +181,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
       <SlideDown in={isAdding}>
         <div className="cta-form">
           <button className="cta-form__close btn btn-transparent" onClick={this.onToggleAdding}>
-            <Icon name="times" />
+            <IconButton name="times" />
           </button>
           <h5>Add API Key</h5>
           <form className="gf-form-group" onSubmit={this.onAddApiKey}>

public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap

@@ -53,7 +53,7 @@ exports[`Render should render CTA if there are no API keys 1`] = `
           className="cta-form__close btn btn-transparent"
           onClick={[Function]}
         >
-          <Icon
+          <IconButton
             name="times"
           />
         </button>

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

@@ -2,7 +2,7 @@
 import React from 'react';
 import _ from 'lodash';
 import { LocationUpdate } from '@grafana/runtime';
-import { Icon, IconName } from '@grafana/ui';
+import { Icon, IconName, IconButton } from '@grafana/ui';
 import { e2e } from '@grafana/e2e';
 import { connect, MapDispatchToProps } from 'react-redux';
 // Utils
@@ -165,7 +165,7 @@ export class AddPanelWidgetUnconnected extends React.Component<Props, State> {
             <Icon name="panel-add" type="mono" size="xl" style={{ margin: '4px', marginRight: '8px' }} />
             <span className="add-panel-widget__title">New Panel</span>
             <button className="add-panel-widget__close" onClick={this.handleCloseAddPanel}>
-              <Icon name="times" />
+              <IconButton name="times" />
             </button>
           </div>
           <div className="add-panel-widget__btn-container">

public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss

@@ -55,11 +55,10 @@
 }
 
 .add-panel-widget__close {
-  margin-left: auto;
+  margin: 7px -10px 0 auto;
   background-color: transparent;
   border: 0;
   font-size: 16px;
-  margin-right: -10px;
 }
 
 .add-panel-widget__create {

public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`Render should render component 1`] = `
         className="add-panel-widget__close"
         onClick={[Function]}
       >
-        <Icon
+        <IconButton
           name="times"
         />
       </button>

public/app/features/explore/ExploreToolbar.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import { css } from 'emotion';
 
 import { ExploreId, ExploreItemState } from 'app/types/explore';
-import { ToggleButtonGroup, ToggleButton, Tooltip, LegacyForms, SetInterval, Icon } from '@grafana/ui';
+import { ToggleButtonGroup, ToggleButton, Tooltip, LegacyForms, SetInterval, Icon, IconButton } from '@grafana/ui';
 const { ButtonSelect } = LegacyForms;
 import { RawTimeRange, TimeZone, TimeRange, DataQuery, ExploreMode } from '@grafana/data';
 import { DataSourcePicker } from 'app/core/components/Select/DataSourcePicker';
@@ -211,9 +211,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props> {
               )}
             </div>
             {splitted && (
-              <a className="explore-toolbar-header-close" onClick={() => closeSplit(exploreId)}>
-                <Icon name="times" />
-              </a>
+              <IconButton className="explore-toolbar-header-close" onClick={() => closeSplit(exploreId)} name="times" />
             )}
           </div>
         </div>

public/app/features/explore/RichHistory/RichHistory.tsx

@@ -10,7 +10,7 @@ import { stylesFactory, withTheme } from '@grafana/ui';
 //Types
 import { RichHistoryQuery, ExploreId } from 'app/types/explore';
 import { SelectableValue, GrafanaTheme } from '@grafana/data';
-import { TabsBar, Tab, TabContent, Themeable, CustomScrollbar, IconName, Icon } from '@grafana/ui';
+import { TabsBar, Tab, TabContent, Themeable, CustomScrollbar, IconName, IconButton } from '@grafana/ui';
 
 //Components
 import { RichHistorySettings } from './RichHistorySettings';
@@ -219,9 +219,7 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps, RichHistorySta
               icon={t.icon as IconName}
             />
           ))}
-          <div className={styles.close} onClick={onClose}>
-            <Icon name="times" title="Close query history" />
-          </div>
+          <IconButton className={styles.close} onClick={onClose} name="times" title="Close query history" />
         </TabsBar>
         <CustomScrollbar
           className={css`

public/app/features/search/components/DashboardSearch.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useReducer, useState } from 'react';
 import { useDebounce } from 'react-use';
 import { css } from 'emotion';
-import { Icon, useTheme, CustomScrollbar, stylesFactory } from '@grafana/ui';
+import { Icon, IconButton, useTheme, CustomScrollbar, stylesFactory } from '@grafana/ui';
 import { getLocationSrv } from '@grafana/runtime';
 import { GrafanaTheme } from '@grafana/data';
 import { SearchSrv } from 'app/core/services/search_srv';
@@ -178,7 +178,7 @@ export const DashboardSearch: FC<Props> = ({ onCloseSearch, payload = {} }) => {
             </div>
           )}
         </div>
-        <Icon onClick={onCloseSearch} className={styles.closeBtn} name="times" />
+        <IconButton onClick={onCloseSearch} className={styles.closeBtn} name="times" />
       </div>
     </div>
   );
@@ -187,14 +187,9 @@ export const DashboardSearch: FC<Props> = ({ onCloseSearch, payload = {} }) => {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     closeBtn: css`
-      font-size: 22px;
-      margin-top: 14px;
-      margin-right: 6px;
-
-      &:hover {
-        cursor: pointer;
-        color: ${theme.palette.white};
-      }
+      top: 21px;
+      right: 8px;
+      position: absolute;
 
       @media only screen and (max-width: ${theme.breakpoints.md}) {
         position: absolute;

public/app/features/search/components/SearchResults.tsx

@@ -1,7 +1,7 @@
 import React, { FC, Dispatch } from 'react';
 import { css, cx } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
-import { Icon, stylesFactory, useTheme, IconName } from '@grafana/ui';
+import { Icon, stylesFactory, useTheme, IconName, IconButton } from '@grafana/ui';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import appEvents from 'app/core/app_events';
 import { CoreEvents } from 'app/types';
@@ -125,7 +125,7 @@ const SectionHeader: FC<SectionHeaderProps> = ({
           className={styles.link}
           onClick={() => appEvents.emit(CoreEvents.hideDashSearch, { target: 'search-item' })}
         >
-          <Icon name="cog" />
+          <IconButton name="cog" className={styles.button} />
         </a>
       )}
       <Icon name={section.expanded ? 'angle-down' : 'angle-right'} />
@@ -173,5 +173,8 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa
       opacity: 0;
       transition: opacity 150ms ease-in-out;
     `,
+    button: css`
+      margin-top: 3px;
+    `,
   };
 });