IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-10 23:55:47 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Change quick add styling (#58854)

Browse Source 
Change quick add styling + allow for returning isOpen state to dropdown children
This commit is contained in:
Ashley Harrison 2022-11-17 09:03:12 +00:00 committed by GitHub
parent 27b6b3b3bd
commit b398e8640d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
View File

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

20
public/app/core/components/AppChrome/QuickAdd/QuickAdd.test.tsx
View File

@ -44,26 +44,6 @@ describe('QuickAdd', () => {
expect(screen.getByRole('button', { name: 'New' })).toBeInTheDocument(); 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 () => { it('shows isCreateAction options when clicked', async () => {
setup(); setup();
await userEvent.click(screen.getByRole('button', { name: 'New' })); await userEvent.click(screen.getByRole('button', { name: 'New' }));

22
public/app/core/components/AppChrome/QuickAdd/QuickAdd.tsx
View File

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