mirror of
https://github.com/supabase/supabase.git
synced 2026-06-05 20:32:43 +08:00
f0afc5948b
Adjusts layout / page patterns including design system documentation and page components. <img width="937" height="643" alt="image" src="https://github.com/user-attachments/assets/5f7864a3-04ae-4ccf-b2b8-d9fe5e29554e" /> **To test** - Ensure all existing page types in Studio are un-effected. They shouldn't be since existing components aren't touched. - Run design-system and have a read through layout and page header documentation. Make sure you understand when and where to use the various combinations of page components and their variants. **Next** Once we are happy with these patterns we can gradually start to update Studio pages that make use of breadcrumbs and/or sub navigation. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added PageBreadcrumbs and PageNav page chrome * Several new interactive layout examples (Auth Emails, Edge Functions, Full‑Width, Logs) and demo pages * **Documentation** * New docs for PageBreadcrumbs and PageNav * Reworked layout guidance and patterns; updated fragment/example docs and usage notes * **Improvements** * Component preview now supports explicit padding control * Simplified page header demo and updated previews <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46126?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
61 lines
1.8 KiB
Plaintext
61 lines
1.8 KiB
Plaintext
---
|
|
title: Page Section
|
|
description: A compound component for organizing page content into distinct sections.
|
|
fragment: true
|
|
---
|
|
|
|
<ComponentPreview
|
|
name="page-section-demo"
|
|
description="Basic page section with title, description, and content"
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
## Sub-components
|
|
|
|
- `PageSection` - Root container with orientation variants (`horizontal` or `vertical`)
|
|
- `PageSectionMeta` - Meta wrapper for `PageSectionSummary` and optional `PageSectionAside`
|
|
- `PageSectionSummary` - Container for section title and description (should be inside `PageSectionMeta`, has `flex-1`)
|
|
- `PageSectionTitle` - Section heading (h2)
|
|
- `PageSectionDescription` - Supporting text below section title
|
|
- `PageSectionAside` - Container for section-level actions (should be inside `PageSectionMeta`, has `shrink-0`)
|
|
- `PageSectionContent` - Container for the main section content
|
|
|
|
## Orientation Variants
|
|
|
|
- `vertical` - Content stacks vertically (default)
|
|
- `horizontal` - Summary and content arranged horizontally on larger screens
|
|
|
|
## Layout Guidance
|
|
|
|
Use `PageSectionTitle` and `PageSectionDescription` when a page has multiple sections and no `PageHeader` title—each section gets its own heading. Header titles describe the page; section titles describe a distinct block of content on that page.
|
|
|
|
## Examples
|
|
|
|
### Horizontal Orientation
|
|
|
|
<ComponentPreview
|
|
name="page-section-horizontal"
|
|
description="PageSection with horizontal layout - summary on left, content on right"
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
### With Aside Actions
|
|
|
|
<ComponentPreview
|
|
name="page-section-with-aside"
|
|
description="PageSection with multiple action buttons in the Aside component"
|
|
peekCode
|
|
wide
|
|
/>
|
|
|
|
### Without Aside
|
|
|
|
<ComponentPreview
|
|
name="page-section-title-only"
|
|
description="PageSection with title only"
|
|
peekCode
|
|
wide
|
|
/>
|