public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
(cherry picked from commit 8afb15296a)

Co-authored-by: Giordano Ricci <me@giordanoricci.com>
This commit is contained in:
Grot (@grafanabot)
2021-06-04 16:06:24 +02:00
committed by GitHub
co-authored by Giordano Ricci
parent 7eda7945d3
commit 7f6f9fbce9
2 changed files with 66 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/Card/Card.test.tsx
+64
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();
});
});
});
packages/grafana-ui/src/components/Card/Card.tsx
+2 -2
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>
);
};