mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 12:25:05 +03:00
Danny White
c10d3debb1
## What kind of change does this PR introduce? Component improvement ## What is the current behavior? [Admonition](https://supabase.com/design-system/docs/fragments/admonition) often passes `actions`, often Button(s). These either are stacked via the `layout` prop `horizontal` or `vertical`. That binary choice often means, given layout flex, awkward text wrapping. ## What is the new behavior? Admonition now has a `"responsive"` value for the `layout` prop. When `layout="responsive"`, the Alert root gets `@container` so the Admonition is the container-query context. The Admonition stays `vertical` when it’s narrow and switches to `horizontal` when its own width reaches the `@md` container breakpoint, independent of page width. ## Additional context See the _Disk Management_ section of Database Settings to see the single in-situ example. Video demo: https://github.com/user-attachments/assets/318a4530-5ae4-43f3-99cf-b75967659ed3
15 lines
429 B
TypeScript
15 lines
429 B
TypeScript
import { Button } from 'ui'
|
|
import { Admonition } from 'ui-patterns/admonition'
|
|
|
|
export default function AdmonitionDemo() {
|
|
return (
|
|
<Admonition
|
|
type="default"
|
|
layout="responsive"
|
|
title="Disk management has moved"
|
|
description="Disk management is now handled alongside Project Compute on the Compute and Disk page."
|
|
actions={<Button type="default">Go to Compute and Disk</Button>}
|
|
/>
|
|
)
|
|
}
|