Explore: Fix button sizes used in AppChrome toolbar (#103496)

public/app/features/explore/ExploreToolbar.tsx

@@ -14,6 +14,7 @@ import {
   ToolbarButton,
   ButtonGroup,
   useStyles2,
+  Button,
 } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { t, Trans } from 'app/core/internationalization';
@@ -204,16 +205,17 @@ export function ExploreToolbar({ exploreId, onChangeTime, onContentOutlineToogle
   };
 
   const navBarActions = [
-    <ToolbarButton
+    <Button
       key="query-history"
-      variant={drawerOpened ? 'active' : 'canvas'}
+      size="sm"
+      variant={'secondary'}
       aria-label={t('explore.secondary-actions.query-history-button-aria-label', 'Query history')}
       onClick={() => setDrawerOpened(!drawerOpened)}
       data-testid={Components.QueryTab.queryHistoryButton}
       icon="history"
     >
       <Trans i18nKey="explore.secondary-actions.query-history-button">Query history</Trans>
-    </ToolbarButton>,
+    </Button>,
     <ShortLinkButtonMenu key="share" />,
   ];
 

public/app/features/explore/ShortLinkButtonMenu.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { IconName } from '@grafana/data';
 import { reportInteraction, config } from '@grafana/runtime';
-import { ToolbarButton, Dropdown, Menu, MenuGroup, ButtonGroup } from '@grafana/ui';
+import { Dropdown, Menu, MenuGroup, ButtonGroup, Button } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 import { copyStringToClipboard } from 'app/core/utils/explore';
 import { createAndCopyShortLink } from 'app/core/utils/shortLinks';
@@ -132,11 +132,11 @@ export function ShortLinkButtonMenu() {
   // we need the Toolbar button click to be an action separate from opening/closing the menu
   return (
     <ButtonGroup>
-      <ToolbarButton
+      <Button
         tooltip={lastSelected.label}
         icon={lastSelected.icon}
-        variant={'canvas'}
-        narrow={true}
+        size="sm"
+        variant="secondary"
         onClick={() => {
           const url = lastSelected.getUrl();
           onCopyLink(lastSelected.shorten, lastSelected.absTime, url);
@@ -144,12 +144,12 @@ export function ShortLinkButtonMenu() {
         aria-label={t('explore.toolbar.copy-shortened-link', 'Copy shortened URL')}
       >
         <Trans i18nKey="explore.toolbar.copy-shortened-link-label">Share</Trans>
-      </ToolbarButton>
+      </Button>
       <Dropdown overlay={MenuActions} placement="bottom-end" onVisibleChange={setIsOpen}>
-        <ToolbarButton
-          narrow={true}
-          variant={'canvas'}
-          isOpen={isOpen}
+        <Button
+          variant={'secondary'}
+          size="sm"
+          icon={isOpen ? 'angle-up' : 'angle-down'}
           aria-label={t('explore.toolbar.copy-shortened-link-menu', 'Open copy link options')}
         />
       </Dropdown>