[pull] master from supabase:master

apps/design-system/README.md

@@ -55,7 +55,7 @@ The design system _references_ components rather than housing them. That’s an
 - [`packages/ui`](https://github.com/supabase/supabase/tree/master/packages/ui): basic UI components
 - [`packages/ui-patterns`](https://github.com/supabase/supabase/tree/master/packages/ui-patterns): components which are built using NPM libraries or amalgamations of components from `patterns/ui`
 
-With that out of the way, there are several parts of this design system that need to be manually updated after components have been added or removed (from documentation). These include:
+There are several parts of this design system that need to be manually updated after components have been added or removed (from documentation). These include:
 
 - `config/docs.ts`: list of components in the sidebar
 - `content/docs`: the actual component documentation
@@ -64,7 +64,7 @@ With that out of the way, there are several parts of this design system that nee
 - `registry/charts.ts`: list of chart components
 - `registry/default/example/*`: the actual example components
 
-You will probably need to rebuild the design system’s registry after making new additions. You can do that via:
+You will need to rebuild the design system’s registry after making new additions:
 
 ```bash
 cd apps/design-system

apps/design-system/__registry__/default/block/chart-bar-interactive.tsx

@@ -2,9 +2,17 @@
 
 import * as React from 'react'
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'ui'
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from 'ui'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from 'ui'
 
 export const description = 'An interactive bar chart'
 

apps/design-system/__registry__/default/block/chart-composed-actions.tsx

@@ -1,19 +1,19 @@
 'use client'
 
+import { BarChart2, ExternalLink, LineChart } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
+  ChartHeader,
   ChartLine,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink, LineChart } from 'lucide-react'
-import { useState, useEffect } from 'react'
 
 export default function ChartComposedActions() {
   const [isLoading, setIsLoading] = useState(true)

apps/design-system/__registry__/default/block/chart-composed-basic.tsx

@@ -1,19 +1,19 @@
 'use client'
 
+import { BarChart2, ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
+  ChartHeader,
   ChartLine,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
 
 export default function ComposedChartBasic() {
   const [isLoading, setIsLoading] = useState(true)

apps/design-system/__registry__/default/block/chart-composed-demo.tsx

@@ -1,17 +1,17 @@
 'use client'
 
+import { BarChart2 } from 'lucide-react'
+import { useEffect, useState } from 'react'
 import {
   Chart,
   ChartCard,
   ChartContent,
-  ChartHeader,
   ChartEmptyState,
+  ChartHeader,
   ChartLoadingState,
   ChartMetric,
 } from 'ui-patterns/Chart'
-import { BarChart2 } from 'lucide-react'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
-import { useState, useEffect } from 'react'
 
 export default function ComposedChartDemo() {
   const [isLoading, setIsLoading] = useState(true)

apps/design-system/__registry__/default/block/chart-composed-metrics.tsx

@@ -1,17 +1,17 @@
 'use client'
 
+import { ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Skeleton } from 'ui'
 import {
   Chart,
-  ChartCard,
-  ChartHeader,
   ChartActions,
+  ChartCard,
   ChartContent,
+  ChartHeader,
   ChartMetric,
   ChartSparkline,
 } from 'ui-patterns/Chart'
-import { ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import { Skeleton } from 'ui'
 
 export default function ChartComposedMetrics() {
   const [data, setData] = useState<Array<{ value: number; timestamp: string }>>([])

apps/design-system/__registry__/default/block/chart-composed-states.tsx

@@ -1,18 +1,18 @@
 'use client'
 
 import { BarChart2, ExternalLink } from 'lucide-react'
+import { Badge } from 'ui'
 import {
   Chart,
-  ChartCard,
-  ChartHeader,
-  ChartTitle,
   ChartActions,
+  ChartCard,
   ChartContent,
+  ChartDisabledState,
   ChartEmptyState,
+  ChartHeader,
   ChartLoadingState,
-  ChartDisabledState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { Badge } from 'ui'
 
 export default function ChartComposedStates() {
   const actions = [

apps/design-system/__registry__/default/block/chart-composed-table.tsx

@@ -1,21 +1,21 @@
 'use client'
 
+import { format } from 'date-fns'
+import { BarChart2, ExternalLink } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
 import {
   Chart,
   ChartActions,
+  ChartBar,
   ChartCard,
   ChartContent,
-  ChartHeader,
-  ChartTitle,
   ChartEmptyState,
-  ChartLoadingState,
-  ChartBar,
   ChartFooter,
+  ChartHeader,
+  ChartLoadingState,
+  ChartTitle,
 } from 'ui-patterns/Chart'
-import { BarChart2, ExternalLink } from 'lucide-react'
-import { useState, useEffect } from 'react'
-import { Table, TableHead, TableBody, TableRow, TableCell, TableHeader } from 'ui'
-import { format } from 'date-fns'
 
 export default function ChartComposedTable() {
   const [isLoading, setIsLoading] = useState(true)

apps/design-system/__registry__/index.tsx

@@ -137,6 +137,17 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "admonition-sandwiched": {
+      name: "admonition-sandwiched",
+      type: "components:example",
+      registryDependencies: ["admonition"],
+      component: React.lazy(() => import("@/registry/default/example/admonition-sandwiched")),
+      source: "",
+      files: ["registry/default/example/admonition-sandwiched.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "alert-demo": {
       name: "alert-demo",
       type: "components:example",

apps/design-system/content/docs/copywriting.mdx

@@ -125,7 +125,19 @@ Supabase UI copy is:
 
 ## Navigation and headings
 
-### Use sentence case
+### Use title case for page titles and global navigation
+
+Use title case for page names in the main nav and document titles (e.g. "Database Settings", "Project Settings"). This distinguishes the page as a destination from section labels and in-page headings, which use sentence case.
+
+### Use declarative page descriptions
+
+Use a fragment with no trailing period, and prefer declarative over instructional. Describe what the page covers, not what the user should do.
+
+| Good                                                       | Bad                                                                    |
+| ---------------------------------------------------------- | ---------------------------------------------------------------------- |
+| "General configuration, domains, ownership, and lifecycle" | "Configure general options, domains, transfers, and project lifecycle" |
+
+### Use sentence case for section labels and headings
 
 | Bad                     | Good                    |
 | ----------------------- | ----------------------- |
@@ -216,7 +228,8 @@ Supabase UI copy is:
 
 ## Capitalization
 
-- **Sentence case** for all UI text (buttons, labels, headings)
+- **Sentence case** for all UI text (buttons, labels, section headings)
+- **Title case** for page names in navigation
 - **Product names:** Database, Auth, Storage, Edge Functions, Realtime, Vector
 - **Postgres**, not PostgreSQL
 - **Supabase** (capitalize except in code)

apps/design-system/content/docs/fragments/admonition.mdx

@@ -42,24 +42,20 @@ Only ever use the `primary` (green) button `type` on a `default` Admonition. Eve
 
 ## Examples
 
-### With actions
-
 <ComponentPreview
   name="admonition-demo"
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
 />
 
 ## Responsive
 
-{' '}
+Resize your browser to see the button(s) change `layout` based on the Admonition’s width.
 
 <ComponentPreview
   name="admonition-responsive"
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
 />
 
-Reize your browser to see the button(s) change `layout` based on the Admonition’s width.
-
 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.
 
 ### Warning
@@ -82,3 +78,14 @@ AlertError for example rolls up consistent error handling and support contact me
   name="admonition-destructive"
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
 />
+
+### Sandwiched
+
+Some [Card](../components/card) or [Dialog](../components/dialog) instances may need to include callout information in-between core content. Admonition can be used ‘full-bleed’ in these cases by removing borders and radii.
+
+<ComponentPreview
+  name="admonition-sandwiched"
+  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
+/>
+
+Depending on the context, you may want to reset borders on the Admonition itself rather than the surrounding elements. The above Admonition is `type` `"warning"` with stark yellow borders which we want to emphasize.

apps/design-system/registry/default/example/admonition-sandwiched.tsx

@@ -0,0 +1,29 @@
+import { Button, Card, CardContent, CardHeader, CardTitle } from 'ui'
+import { Admonition } from 'ui-patterns/admonition'
+
+export default function AdmonitionDemo() {
+  return (
+    <Card>
+      <CardHeader className="border-b-0">
+        <CardTitle>Card with Admonition</CardTitle>
+      </CardHeader>
+      <Admonition
+        type="warning"
+        layout="horizontal"
+        title="Sandwiched Admonition"
+        description="This Admonition is sandwiched between other content in a Card component. Note how the top border and all radii are reset."
+        className="mb-0 rounded-none border-x-0"
+      />
+      <CardContent>
+        <p className="text-foreground-light text-sm">
+          This is the subsequent content of this Card.
+        </p>
+      </CardContent>
+      <CardContent>
+        <p className="text-foreground-light text-sm">
+          It might be disabled due some condition that the Admonition above explains.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}

apps/design-system/registry/examples.ts

@@ -37,6 +37,12 @@ export const examples: Registry = [
     registryDependencies: ['admonition'],
     files: ['example/admonition-destructive.tsx'],
   },
+  {
+    name: 'admonition-sandwiched',
+    type: 'components:example',
+    registryDependencies: ['admonition'],
+    files: ['example/admonition-sandwiched.tsx'],
+  },
   {
     name: 'alert-demo',
     type: 'components:example',