mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
chore(design-system): remove Admonition label alias (#46054)
## What kind of change does this PR introduce? Chore / docs update. Related to DEPR-551. Stacked on #46053. ## What is the current behavior? `Admonition` still accepts `label` as a backwards-compatible alias for `title`, and a few www blog posts plus the Docs MkDocs admonition transform still use or emit that alias. ## What is the new behavior? Removes the `label` prop from `AdmonitionProps`, migrates the remaining www blog Admonitions to `title`, and updates the Docs MkDocs transform to emit `title` directly. This leaves `title`, `description`, and `children` as the supported Admonition content API. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Admonition now uses a single required title prop for headings; the legacy label prop is removed and no longer used. * **Documentation** * Updated docs and blog posts to pass admonition heading via title and removed notes about label support. * **Tests** * Component tests adjusted to validate the new title-only behavior and to ensure legacy label usage is rejected. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46054?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 --> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Danny WhiteandClaude Sonnet 4.6 authored and GitHub committed
1 parent
a27487fe58
commit
10f930d527
15 files changed
+23
-36
No files matched your search
@@ -21,8 +21,6 @@ Use `title` for the heading slot when the callout needs its own heading. `title`
|
||||
|
||||
Avoid title-only Admonitions in new code. A callout with `title` should also include `description` or `children` so it does not read like an incomplete heading.
|
||||
|
||||
`label` is still supported for older Docs content, but new code should use `title`.
|
||||
|
||||
## Usage
|
||||
|
||||
```tsx
|
||||
|
||||
@@ -54,7 +54,7 @@ const remarkMkDocsAdmonition = function () {
|
||||
if (title) {
|
||||
admonitionElement.attributes.push({
|
||||
type: 'mdxJsxAttribute',
|
||||
name: 'label',
|
||||
name: 'title',
|
||||
value: title,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -321,7 +321,7 @@ Either way, we want to support _both_ seed data and anonymized production data,
|
||||
|
||||
### Is it available yet?
|
||||
|
||||
<Admonition type="note" label="Branching update 12/13/2023">
|
||||
<Admonition type="note" title="Branching update 12/13/2023">
|
||||
|
||||
We are [rolling out access](https://supabase.com/blog/supabase-branching) and we'll be onboarding organizations in batches over the next few weeks. You can still [sign up for access](https://forms.supabase.com/branching-request).
|
||||
|
||||
|
||||
@@ -116,7 +116,7 @@ Optionally, you can reset the database by running `supabase db reset --db-url <b
|
||||
|
||||
We're investigating data masking techniques with a copy-on-write system so that you can emulate a production workload inside your Preview Branches. We plan for this to work with File Storage too.
|
||||
|
||||
<Admonition type="note" label="Testing with product workloads today?">
|
||||
<Admonition type="note" title="Testing with product workloads today?">
|
||||
|
||||
If you need to test with production workloads today, check out [Snaplet](https://www.snaplet.dev/) and [Postgres.ai](http://Postgres.ai). Both are great partners of Supabase.
|
||||
|
||||
|
||||
@@ -118,7 +118,7 @@ Passwords can be inherently insecure due to common user behaviors like choosing
|
||||
|
||||
Even though OAuth and magiclinks are more secure, we recognize passwords are here to stay. We want to make the potential pitfalls less user-prone. To accomplish that, we have integrated the [HaveIBeenPwned.org](https://haveibeenpwned.com/) _Pwned Passwords API_ in Supabase Auth to prevent users from using leaked passwords.
|
||||
|
||||
<Admonition type="note" label="Go library">
|
||||
<Admonition type="note" title="Go library">
|
||||
|
||||
ℹ️ We have open-sourced a Go library for interacting with the [HaveIBeenPwned.org](http://HaveIBeenPwned.org) Pwned Passwords API that we use in our Auth server. Check out the [repository](https://github.com/supabase/hibp) and feel free to contribute!
|
||||
|
||||
|
||||
@@ -33,7 +33,7 @@ Check out the [docs](https://supabase.com/docs/reference/python/introduction), a
|
||||
- [Python data loading with Supabase](https://supabase.com/blog/loading-data-supabase-python)
|
||||
- [GitHub OAuth in your Python Flask app](https://supabase.com/blog/oauth2-login-python-flask-apps)
|
||||
|
||||
<Admonition type="note" label="Python library for vectors and embeddings">
|
||||
<Admonition type="note" title="Python library for vectors and embeddings">
|
||||
|
||||
Don’t forget that we also have Vecs, a Python client for managing and querying vector stores in Postgres with the pgvector extension. [Get started](https://supabase.com/docs/guides/ai/python/api)!
|
||||
|
||||
|
||||
@@ -54,7 +54,7 @@ However, certain workloads may push against the CPU and memory limits of a singl
|
||||
|
||||
This is where horizontal scaling is useful. You can add read replicas to scale more easily. Instead of a single database handling all of your traffic, you can split the traffic across multiple databases.
|
||||
|
||||
<Admonition type="note" label="Compute Size">
|
||||
<Admonition type="note" title="Compute Size">
|
||||
|
||||
Our read replicas will inherit the compute size of its primary. They will eventually scale independently.
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ Postgres is an ideal choice for your Laravel PHP applications as Laravel ships w
|
||||
|
||||
In this post we'll start from scratch, creating a new Laravel application, setting up the Laravel Breeze starter kit for user authentication, and connecting it to our Supabase Postgres database.
|
||||
|
||||
<Admonition type="note" label="Need help migrating?">
|
||||
<Admonition type="note" title="Need help migrating?">
|
||||
|
||||
Supabase is one of the best [free alternatives to Heroku Postgres](/alternatives/supabase-vs-heroku-postgres). See [this guide](/docs/guides/resources/migrating-to-supabase/heroku) to learn how to migrate from Heroku to Supabase.
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ Postgres is an ideal choice for your Ruby on Rails applications as Rails ships w
|
||||
|
||||
In this post we'll start from scratch, creating a new Rails project, connecting it to our Supabase Postgres database, and interacting with the database using the Rails Console.
|
||||
|
||||
<Admonition type="note" label="Need help migrating?">
|
||||
<Admonition type="note" title="Need help migrating?">
|
||||
|
||||
Supabase is one of the best [free alternatives to Heroku Postgres](/alternatives/supabase-vs-heroku-postgres). See [this guide](/docs/guides/resources/migrating-to-supabase/heroku) to learn how to migrate from Heroku to Supabase.
|
||||
|
||||
|
||||
@@ -134,7 +134,7 @@ You can further improve index build performance using a more powerful instance (
|
||||
|
||||
The index build time is not linearly proportional to the number of cores used. A sensible default for `max_parallel_maintenance_workers` is `CPU count / 2` , the default we set on the Supabase platform. Accuracy and QPS are not affected by `max_parallel_maintenance_workers`.
|
||||
|
||||
<Admonition type="note" label="Pro tip: optimizing your bills">
|
||||
<Admonition type="note" title="Pro tip: optimizing your bills">
|
||||
|
||||
The trick is to use a large database while you build the index and then switch back to a cheaper instance after the index is built.
|
||||
|
||||
|
||||
@@ -45,7 +45,7 @@ The template repository typically includes the full frontend code, following the
|
||||
|
||||
After selecting a starter, the Supabase CLI downloads all files from the template repository to your chosen local directory.
|
||||
|
||||
<Admonition type="note" label="GitHub rate limits">
|
||||
<Admonition type="note" title="GitHub rate limits">
|
||||
|
||||
You may run into GitHub rate limit when downloading too frequently from template repository. This can be avoided by setting `GITHUB_TOKEN` environment variable locally to your GitHub personal access token.
|
||||
|
||||
@@ -59,7 +59,7 @@ During the `supabase bootstrap` process, a new project will be created on the Su
|
||||
|
||||
|
||||
|
||||
<Admonition type="note" label="Some patience required">
|
||||
<Admonition type="note" title="Some patience required">
|
||||
|
||||
Linking to your new hosted project may take a short while as it needs to spin up a new database in the cloud.
|
||||
|
||||
@@ -78,7 +78,7 @@ After pushing the migrations, your project credentials will be exported to a `.e
|
||||
|
||||
Other custom variables from `.env.example` file defined by your chosen template will also be merged to your local `.env` file.
|
||||
|
||||
<Admonition type="caution" label="Store credentials securely">
|
||||
<Admonition type="caution" title="Store credentials securely">
|
||||
|
||||
It is important to store these credentials securely as anyone can connect to your remote database using the `POSTGRES_URL`.
|
||||
|
||||
|
||||
@@ -85,7 +85,7 @@ In the previous Launch Week we started working on [Fly Postgres, a managed offer
|
||||
|
||||
Today we're opening up access to everyone **for testing**. Testers can also try [Branching](/docs/guides/platform/branching), an opt-in feature which creates an ephemeral test environment for your git branches. These instances automatically pause when you aren't using them.
|
||||
|
||||
<Admonition type="note" label="Testing only">
|
||||
<Admonition type="note" title="Testing only">
|
||||
|
||||
The service is in public alpha. We don't recommend using it for production.
|
||||
|
||||
|
||||
@@ -19,7 +19,7 @@ ChatGPT is no longer just a chat app. OpenAI recently launched the [Apps SDK](ht
|
||||
|
||||
In this guide, you will learn how to build a ChatGPT app that connects to your Supabase database. You will use [mcp-use](https://mcp-use.com), an open source SDK that makes it easy to deploy MCP servers on Supabase Edge Functions. By the end, you will have an app that lets ChatGPT users explore your database schema, view table data, and run SQL queries, all through interactive widgets.
|
||||
|
||||
<Admonition type="note" label="ChatGPT Apps Marketplace Now Open">
|
||||
<Admonition type="note" title="ChatGPT Apps Marketplace Now Open">
|
||||
|
||||
OpenAI has launched the [ChatGPT Apps Marketplace](https://chatgpt.com/apps), where users can discover and use apps built by developers. If you build an app following this guide, you can submit it to the marketplace. Check out the [App Submission Guidelines](https://developers.openai.com/apps-sdk/app-submission-guidelines) to learn how to get your app listed.
|
||||
|
||||
|
||||
@@ -7,7 +7,14 @@ const stringDescriptionProps = {
|
||||
description: 'Description-only copy.',
|
||||
} satisfies AdmonitionProps
|
||||
|
||||
const invalidLabelProps = {
|
||||
// @ts-expect-error label was removed; use title instead.
|
||||
label: 'Legacy heading',
|
||||
description: 'Body copy.',
|
||||
} satisfies AdmonitionProps
|
||||
|
||||
void stringDescriptionProps
|
||||
void invalidLabelProps
|
||||
|
||||
describe('Admonition', () => {
|
||||
it('renders description-only content', () => {
|
||||
@@ -94,18 +101,4 @@ describe('Admonition', () => {
|
||||
expect(alert).toHaveTextContent('Deletion blocked')
|
||||
expect(alert.querySelector('svg')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('prefers title over legacy label when both are provided', () => {
|
||||
render(
|
||||
<Admonition
|
||||
type="note"
|
||||
label="Legacy heading"
|
||||
title="Preferred heading"
|
||||
description="Body copy."
|
||||
/>
|
||||
)
|
||||
|
||||
expect(screen.getByText('Preferred heading')).toBeVisible()
|
||||
expect(screen.queryByText('Legacy heading')).not.toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
@@ -16,8 +16,6 @@ export type AdmonitionType =
|
||||
export interface AdmonitionProps {
|
||||
type?: AdmonitionType
|
||||
title?: string
|
||||
/** @deprecated Prefer title for new usage. label remains supported for existing MDX content. */
|
||||
label?: string
|
||||
description?: ReactNode
|
||||
children?: ReactNode
|
||||
showIcon?: boolean
|
||||
@@ -112,7 +110,6 @@ export const Admonition = forwardRef<
|
||||
type = 'note',
|
||||
variant,
|
||||
showIcon = true,
|
||||
label,
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
@@ -126,7 +123,7 @@ export const Admonition = forwardRef<
|
||||
) => {
|
||||
const typeMapped = variant ? admonitionToAlertMapping[variant] : admonitionToAlertMapping[type]
|
||||
const typeStyle = type === 'success' ? 'success' : typeMapped
|
||||
const heading = title ?? label
|
||||
const heading = title
|
||||
|
||||
return (
|
||||
<Alert
|
||||
@@ -166,8 +163,7 @@ export const Admonition = forwardRef<
|
||||
<AlertTitle
|
||||
{...childProps.title}
|
||||
className={cn(
|
||||
'text mt-0.5 flex gap-3 text-sm',
|
||||
!label && 'flex-col',
|
||||
'text mt-0.5 flex flex-col gap-3 text-sm',
|
||||
childProps.title?.className
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in new issue
Block a user