IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 18:30:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana-UI: Allow Card consumers to override disabled prop for action (#34664)

Browse Source
This commit is contained in:
Giordano Ricci 2021-06-02 08:20:35 +01:00 committed by GitHub
parent 9ebe585ec8
commit 8afb15296a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/grafana-ui/src/components/Card/Card.test.tsx
View File

@ -1,6 +1,8 @@
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { Card } from './Card';
import { Button } from '../Button';
import { IconButton } from '../IconButton/IconButton';
describe('Card', () => {
it('should execute callback when clicked', () => {
@ -9,4 +11,66 @@ describe('Card', () => {
fireEvent.click(screen.getByText('Test Heading'));
expect(callback).toBeCalledTimes(1);
});
describe('Card Actions', () => {
it('Children should be disabled or enabled according to Card disabled prop', () => {
const { rerender } = render(
<Card heading="Test Heading">
<Card.Actions>
<Button>Click Me</Button>
</Card.Actions>
<Card.SecondaryActions>
<IconButton name="trash-alt" aria-label="Delete" />
</Card.SecondaryActions>
</Card>
);
expect(screen.getByRole('button', { name: 'Click Me' })).not.toBeDisabled();
expect(screen.getByRole('button', { name: 'Delete' })).not.toBeDisabled();
rerender(
<Card heading="Test Heading" disabled>
<Card.Actions>
<Button>Click Me</Button>
</Card.Actions>
<Card.SecondaryActions>
<IconButton name="trash-alt" aria-label="Delete" />
</Card.SecondaryActions>
</Card>
);
expect(screen.getByRole('button', { name: 'Click Me' })).toBeDisabled();
expect(screen.getByRole('button', { name: 'Delete' })).toBeDisabled();
});
it('Children should be independently enabled or disabled if explicitly set', () => {
const { rerender } = render(
<Card heading="Test Heading">
<Card.Actions>
<Button disabled>Click Me</Button>
</Card.Actions>
<Card.SecondaryActions>
<IconButton name="trash-alt" aria-label="Delete" disabled />
</Card.SecondaryActions>
</Card>
);
expect(screen.getByRole('button', { name: 'Click Me' })).toBeDisabled();
expect(screen.getByRole('button', { name: 'Delete' })).toBeDisabled();
rerender(
<Card heading="Test Heading" disabled>
<Card.Actions>
<Button disabled={false}>Click Me</Button>
</Card.Actions>
<Card.SecondaryActions>
<IconButton name="trash-alt" aria-label="Delete" disabled={false} />
</Card.SecondaryActions>
</Card>
);
expect(screen.getByRole('button', { name: 'Click Me' })).not.toBeDisabled();
expect(screen.getByRole('button', { name: 'Delete' })).not.toBeDisabled();
});
});
});

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

@ -252,8 +252,8 @@ const BaseActions: FC<ActionsProps> = ({ children, styles, disabled, variant })
return (
<div className={css}>
{Array.isArray(children)
? React.Children.map(children, (child) => cloneElement(child, { disabled }))
: cloneElement(children, { disabled })}
? React.Children.map(children, (child) => cloneElement(child, { disabled, ...child.props }))
: cloneElement(children, { disabled, ...children.props })}
</div>
);
};