Skip to content

Commit

Permalink
fix: tooltip renders when the label is missing
Browse files Browse the repository at this point in the history
  • Loading branch information
mazzucchelli committed Dec 12, 2024
1 parent 240c73e commit 14b295a
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/three-eels-clap.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@strapi/design-system': patch
---

Prevent tooltip from rendering when the label property is not passed
46 changes: 46 additions & 0 deletions packages/design-system/src/components/Tooltip/Tooltip.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import { render as renderHarness } from '@test/utils';

import { Button } from '../Button';

import { Tooltip, type TooltipProps } from './Tooltip';

const render = (props: Partial<TooltipProps> = {}) =>
renderHarness(
<Tooltip {...props}>
<Button>My button</Button>
</Tooltip>,
);

describe('Tooltip', () => {
it('should render and be accessible with a label', async () => {
const { user, getByRole, findByRole } = render({
label: 'My tooltip',
});

await user.hover(getByRole('button'));

expect(await findByRole('tooltip', { name: 'My tooltip' })).toBeInTheDocument();
});

it('should render the label and not the description if both are provided', async () => {
const { user, getByRole, findByRole, queryByRole } = render({
label: 'My tooltip label',
description: 'My tooltip description',
});

await user.hover(getByRole('button'));

expect(await findByRole('tooltip', { name: 'My tooltip label' })).toBeInTheDocument();
expect(queryByRole('tooltip', { name: 'My tooltip description' })).not.toBeInTheDocument();
});

it('should not render when the label is empty', async () => {
const { user, getByRole, queryByRole } = render({
label: '',
});

await user.hover(getByRole('button'));

expect(queryByRole('tooltip', { name: 'My tooltip' })).not.toBeInTheDocument();
});
});
2 changes: 2 additions & 0 deletions packages/design-system/src/components/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ const TooltipImpl = React.forwardRef<TooltipElement, TooltipProps>(
},
forwardedRef,
) => {
if (!label && !description) return children;

return (
<Tooltip.Root
defaultOpen={defaultOpen}
Expand Down

0 comments on commit 14b295a

Please sign in to comment.