diff --git a/packages/ui-patterns/src/Admonition/Admonition.test.tsx b/packages/ui-patterns/src/Admonition/Admonition.test.tsx index a86b6e67339..0f00a092e3c 100644 --- a/packages/ui-patterns/src/Admonition/Admonition.test.tsx +++ b/packages/ui-patterns/src/Admonition/Admonition.test.tsx @@ -135,7 +135,11 @@ describe('Admonition', () => { render() const note = screen.getByRole('alert', { name: 'Note' }) - expect(within(note).getByText('Body copy.').tagName).toBe('P') + const description = within(note).getByText('Body copy.') + + expect(description.tagName).toBe('P') + expect(description.parentElement).toHaveClass('!mb-0') + expect(description.parentElement?.parentElement).toHaveClass('my-0.5') }) it('wraps MDX children in AlertDescription', () => { @@ -149,7 +153,26 @@ describe('Admonition', () => { const paragraph = within(note).getByText('Children body copy.') expect(paragraph.tagName).toBe('P') - expect(paragraph.parentElement).toHaveClass('text-sm') + expect(paragraph.parentElement).toHaveClass('text-sm', '!mb-0') expect(paragraph.parentElement).toHaveAttribute('data-slot', 'alert-description') + expect(paragraph.parentElement?.parentElement).not.toHaveClass('my-0.5') + }) + + it('does not offset titled content', () => { + render() + + const note = screen.getByRole('alert', { name: 'Note' }) + const title = within(note).getByText('Manual approval required') + + expect(title.parentElement).not.toHaveClass('my-0.5') + }) + + it('does not offset titleless content when the icon is hidden', () => { + render() + + const note = screen.getByRole('alert', { name: 'Note' }) + const description = within(note).getByText('Body copy.') + + expect(description.parentElement?.parentElement).not.toHaveClass('my-0.5') }) }) diff --git a/packages/ui-patterns/src/Admonition/Admonition.tsx b/packages/ui-patterns/src/Admonition/Admonition.tsx index 93d8d1fa33f..b6632212b8c 100644 --- a/packages/ui-patterns/src/Admonition/Admonition.tsx +++ b/packages/ui-patterns/src/Admonition/Admonition.tsx @@ -8,7 +8,7 @@ import { AdmonitionTypeIcon } from './AdmonitionIcons' export type { AdmonitionLayout, AdmonitionProps, AdmonitionType } const admonitionBodyClassName = - '[&_p]:!mt-0 [&_p]:!mb-1.5 [&_p:last-child]:!mb-0 [&_ul]:!my-1.5 [&_ol]:!my-1.5 [&_li]:!my-0.5' + '!mb-0 [&_p]:!mt-0 [&_p]:!mb-1.5 [&_p:last-child]:!mb-0 [&_ul]:!my-1.5 [&_ol]:!my-1.5 [&_li]:!my-0.5' export const Admonition = forwardRef< React.ComponentRef, @@ -69,7 +69,7 @@ export const Admonition = forwardRef< ] )} > -
+
{title && (