Navigation: Change quick add styling (#58854)

Change quick add styling + allow for returning isOpen state to dropdown children

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

@@ -11,7 +11,7 @@ import { TooltipPlacement } from '../Tooltip/types';
 export interface Props {
   overlay: React.ReactElement | (() => React.ReactElement);
   placement?: TooltipPlacement;
-  children: React.ReactElement;
+  children: React.ReactElement | ((isOpen: boolean) => React.ReactElement);
 }
 
 export const Dropdown = React.memo(({ children, overlay, placement }: Props) => {
@@ -38,7 +38,7 @@ export const Dropdown = React.memo(({ children, overlay, placement }: Props) =>
 
   return (
     <>
-      {React.cloneElement(children, {
+      {React.cloneElement(typeof children === 'function' ? children(visible) : children, {
         ref: setTriggerRef,
       })}
       {visible && (

public/app/core/components/AppChrome/QuickAdd/QuickAdd.test.tsx

@@ -44,26 +44,6 @@ describe('QuickAdd', () => {
     expect(screen.getByRole('button', { name: 'New' })).toBeInTheDocument();
   });
 
-  it('renders the `New` text on a larger viewport', () => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      matches: () => false,
-    }));
-    setup();
-    expect(screen.getByText('New')).toBeInTheDocument();
-  });
-
-  it('does not render the text on a smaller viewport', () => {
-    (window.matchMedia as jest.Mock).mockImplementation(() => ({
-      addEventListener: jest.fn(),
-      removeEventListener: jest.fn(),
-      matches: () => true,
-    }));
-    setup();
-    expect(screen.queryByText('New')).not.toBeInTheDocument();
-  });
-
   it('shows isCreateAction options when clicked', async () => {
     setup();
     await userEvent.click(screen.getByRole('button', { name: 'New' }));

public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { useMemo, useState } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Menu, Dropdown, Button, Icon, useStyles2, useTheme2, ToolbarButton } from '@grafana/ui';
+import { Menu, Dropdown, useStyles2, useTheme2, ToolbarButton } from '@grafana/ui';
 import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
 import { useSelector } from 'app/types';
 
@@ -41,16 +41,13 @@ export const QuickAdd = ({}: Props) => {
   return createActions.length > 0 ? (
     <>
       <Dropdown overlay={MenuActions} placement="bottom-end">
-        {isSmallScreen ? (
+        {(isOpen) =>
+          isSmallScreen ? (
             <ToolbarButton iconOnly icon="plus-circle" aria-label="New" />
           ) : (
-          <Button variant="primary" size="sm" icon="plus">
-            <div className={styles.buttonContent}>
-              <span className={styles.buttonText}>New</span>
-              <Icon name="angle-down" />
-            </div>
-          </Button>
-        )}
+            <ToolbarButton iconOnly icon="plus" isOpen={isOpen} aria-label="New" />
+          )
+        }
       </Dropdown>
       <NavToolbarSeparator className={styles.separator} />
     </>
@@ -68,8 +65,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     },
   }),
   separator: css({
-    marginLeft: theme.spacing(1),
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       display: 'none',
     },
   }),