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<
]
)}
>
-