mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Danny WhiteandGildas Garcia
09fa2b8fc1
## What kind of change does this PR introduce? Docs update and design-system component taxonomy cleanup ## What is the current behavior? The design-system docs conflate low-level shadcn primitives with product-level alert patterns. Collapsible documentation previews the alert-specific wrapper, and the alert/collapsible relationship is unclear ## What is the new behavior? - Documents Alert and Collapsible as low-level atom components - Moves the alert-styled expandable wrapper into `ui-patterns/expandable-alert` as `ExpandableAlert` - Documents Expandable Alert as a Fragment Component next to Admonition - Updates the Session Timeout modal to import `ExpandableAlert` from `ui-patterns/expandable-alert` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * `CollapsibleAlert` component is now available for alert-styled expandable content. * **Documentation** * Updated component documentation to clarify when to use `Alert`, `Collapsible`, `Admonition`, and `CollapsibleAlert`. * Added comprehensive documentation for `CollapsibleAlert` with usage examples and variant options. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45863) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
52 lines
1.4 KiB
Plaintext
52 lines
1.4 KiB
Plaintext
---
|
|
title: Collapsible
|
|
description: An expandable content region using the shadcn Collapsible primitive.
|
|
component: true
|
|
---
|
|
|
|
Collapsible is a low-level primitive for revealing and hiding related content. Use it when a component needs custom trigger or content composition.
|
|
|
|
Use Collapsible for generic disclosure behaviour: rows, sections, menus, tool details, and custom layouts. Use [Collapsible Alert](../fragments/collapsible-alert) instead when the disclosure is an alert-styled callout that should keep standard alert padding, variants, trigger styling, and toggle treatment.
|
|
|
|
<ComponentPreview name="collapsible-demo" peekCode wide />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from 'ui/src/components/shadcn/ui/collapsible'
|
|
```
|
|
|
|
```tsx
|
|
<Collapsible>
|
|
<CollapsibleTrigger>Toggle</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<p>Content revealed when expanded.</p>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
```
|
|
|
|
### Default open
|
|
|
|
```tsx
|
|
<Collapsible defaultOpen>
|
|
<CollapsibleTrigger>Details</CollapsibleTrigger>
|
|
<CollapsibleContent>
|
|
<p>This section is expanded by default.</p>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
```
|
|
|
|
### Animation
|
|
|
|
Add animation classes to `CollapsibleContent` when animated open and close transitions are needed.
|
|
|
|
```tsx
|
|
<CollapsibleContent className="data-closed:animate-collapsible-up data-open:animate-collapsible-down">
|
|
<p>Content revealed when expanded.</p>
|
|
</CollapsibleContent>
|
|
```
|