diff --git a/packages/grafana-ui/src/components/Card/Card.test.tsx b/packages/grafana-ui/src/components/Card/Card.test.tsx index 16325de6c28..1ceca474bce 100644 --- a/packages/grafana-ui/src/components/Card/Card.test.tsx +++ b/packages/grafana-ui/src/components/Card/Card.test.tsx @@ -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( + + + + + + + + + ); + + expect(screen.getByRole('button', { name: 'Click Me' })).not.toBeDisabled(); + expect(screen.getByRole('button', { name: 'Delete' })).not.toBeDisabled(); + + rerender( + + + + + + + + + ); + + 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( + + + + + + + + + ); + + expect(screen.getByRole('button', { name: 'Click Me' })).toBeDisabled(); + expect(screen.getByRole('button', { name: 'Delete' })).toBeDisabled(); + + rerender( + + + + + + + + + ); + + expect(screen.getByRole('button', { name: 'Click Me' })).not.toBeDisabled(); + expect(screen.getByRole('button', { name: 'Delete' })).not.toBeDisabled(); + }); + }); }); diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx index 0ba92fea8be..a147c8559cf 100644 --- a/packages/grafana-ui/src/components/Card/Card.tsx +++ b/packages/grafana-ui/src/components/Card/Card.tsx @@ -252,8 +252,8 @@ const BaseActions: FC = ({ children, styles, disabled, variant }) return (
{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 })}
); };