Files
supabase/packages/ui-patterns
Danny White 04c9fb7c3e chore(design-system): redo safer Admonition updates (#45618)
## What kind of change does this PR introduce?

Feature and design-system update. Resolves DEPR-551.

This is a narrower redo of #45302 after the revert in #45535.

## What is the current behaviour?

The reverted implementation made Admonition more flexible, but it also
changed Studio callsites, touched shared Alert styling, renamed the
design-system Tailwind config, and changed Docs-facing content/API
assumptions in a way that broke production docs static generation.

## What is the new behaviour?

Admonition now supports description-only content, children-only content,
optional `title`, legacy `label`, and `type="success"` without touching
`apps/docs/content/**` or shared Alert styling.

`title` wins over `label` when both are provided. The runtime component
props stay backwards-compatible for existing MDX and Studio usage, while
`AdmonitionStrictProps` captures the stricter new-usage contract for
tests and future callsites.

The design-system docs and registry include description-only and success
examples, and the Admonition tests cover the rendering paths that broke
production previously.

| After |
| --- |
| <img width="1668" height="1768" alt="CleanShot 2026-05-06 at 17 35
13@2x"
src="https://github.com/user-attachments/assets/1c00ea7f-e3ca-45eb-8af9-3536b657c341"
/> |

## Additional context

These things that were in #45302 have been left out (unless checked):

- [ ] Studio callsite rewrites from title/label to description
- [ ] Shared Alert text-colour changes
- [ ] Design-system Tailwind config rename
- [ ] Design-system global CSS changes
- [ ] Any docs content migration or label deprecation
- [ ] Any production docs workaround


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Added success admonition variant with dedicated styling and icon.
  * Introduced description-only admonition example.

* **Documentation**
* Expanded admonition guidance on title vs description usage and best
practices.
* Added example sections showcasing description-only and success
variants.

* **Tests**
* Added comprehensive tests covering admonition variants and
rendering/precedence behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-08 07:59:35 +00:00
..

Supabase UI Patterns

This package should be used for components which are built using NPM libraries (react-markdown, reactflow for example), which make no sense to be included in all apps. It should also be used for components which are constructed using various components from the ui package.

This package does not have a barrel file - each component has to be imported from its index (ui-patterns/PrivacySettings, for example). This is intentional so that adding a new component which is used only in 1 or 2 apps doesn't burden the rest of the apps.