PanelChrome: Slight design improvements to menu button (#61399)

* PanelChrome: Slight design improvements to menu button

* Switch to narrow ToolbarButton

* Updated test

* removed unused import

packages/grafana-ui/src/components/PanelChrome/PanelChrome.test.tsx

@@ -89,8 +89,8 @@ it('renders panel with a header if prop menu', () => {
 it('renders panel with a show-on-hover menu icon if prop menu', () => {
   setup({ menu: <div> Menu </div> });
 
-  expect(screen.getByTestId('menu-icon')).toBeInTheDocument();
-  expect(screen.getByTestId('menu-icon')).not.toBeVisible();
+  expect(screen.getByTestId('panel-menu-button')).toBeInTheDocument();
+  expect(screen.getByTestId('panel-menu-button')).not.toBeVisible();
 });
 
 it.skip('renders states in the panel header if any given', () => {});

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

@@ -10,6 +10,7 @@ import { Dropdown } from '../Dropdown/Dropdown';
 import { Icon } from '../Icon/Icon';
 import { IconButton, IconButtonVariant } from '../IconButton/IconButton';
 import { LoadingBar } from '../LoadingBar/LoadingBar';
+import { ToolbarButton } from '../ToolbarButton';
 import { PopoverContent, Tooltip } from '../Tooltip';
 
 import { PanelStatus } from './PanelStatus';
@@ -89,10 +90,12 @@ export function PanelChrome({
   const headerStyles: CSSProperties = {
     height: headerHeight,
   };
+
   const itemStyles: CSSProperties = {
     minHeight: headerHeight,
     minWidth: headerHeight,
   };
+
   const containerStyles: CSSProperties = { width, height };
 
   const isUsingDeprecatedLeftItems = isEmpty(status) && !loadingState;
@@ -153,14 +156,14 @@ export function PanelChrome({
         <div className={styles.rightAligned}>
           {menu && (
             <Dropdown overlay={menu} placement="bottom">
-              <div className={cx(styles.item, styles.menuItem, 'menu-icon')} data-testid="menu-icon" style={itemStyles}>
-                <IconButton
-                  ariaLabel={`Menu for panel with ${title ? `title ${title}` : 'no title'}`}
-                  tooltip="Menu"
-                  name="ellipsis-v"
-                  size="sm"
-                />
-              </div>
+              <ToolbarButton
+                aria-label={`Menu for panel with ${title ? `title ${title}` : 'no title'}`}
+                title="Menu"
+                icon="ellipsis-v"
+                narrow
+                data-testid="panel-menu-button"
+                className={cx(styles.menuItem, 'menu-icon')}
+              />
             </Dropdown>
           )}
 
@@ -212,7 +215,7 @@ const getContentStyle = (
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const { padding, background, borderColor } = theme.components.panel;
+  const { background, borderColor } = theme.components.panel;
 
   return {
     container: css({
@@ -252,7 +255,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: 'panel-header',
       display: 'flex',
       alignItems: 'center',
-      padding: `0 ${theme.spacing(padding)}`,
+      padding: theme.spacing(0, 0, 0, 1),
     }),
     streaming: css({
       marginRight: 0,
@@ -280,6 +283,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     menuItem: css({
       visibility: 'hidden',
+      border: 'none',
     }),
     errorContainer: css({
       label: 'error-container',