From 10f930d5271164b630cd8378ad61046aa7471c87 Mon Sep 17 00:00:00 2001 From: Danny White <3104761+dnywh@users.noreply.github.com> Date: Fri, 22 May 2026 13:07:46 +1000 Subject: [PATCH] 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. ## 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 Change Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46054?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack) --------- Co-authored-by: Claude Sonnet 4.6 --- .../content/docs/fragments/admonition.mdx | 2 -- apps/docs/lib/mdx/plugins/remarkAdmonition.ts | 2 +- .../_blog/2023-08-08-supabase-local-dev.mdx | 2 +- .../_blog/2023-12-13-supabase-branching.mdx | 2 +- ...4-supabase-auth-identity-linking-hooks.mdx | 2 +- .../_blog/2023-12-15-client-libraries-v2.mdx | 2 +- .../2023-12-15-introducing-read-replicas.mdx | 2 +- .../www/_blog/2024-01-22-laravel-postgres.mdx | 2 +- .../2024-01-29-ruby-on-rails-postgres.mdx | 2 +- .../_blog/2024-01-30-pgvector-fast-builds.mdx | 2 +- .../_blog/2024-04-15-supabase-bootstrap.mdx | 6 +++--- apps/www/_blog/2024-04-19-ga-week-summary.mdx | 2 +- ...17-building-chatgpt-apps-with-supabase.mdx | 2 +- packages/ui-patterns/src/admonition.test.tsx | 21 +++++++------------ packages/ui-patterns/src/admonition.tsx | 8 ++----- 15 files changed, 23 insertions(+), 36 deletions(-) diff --git a/apps/design-system/content/docs/fragments/admonition.mdx b/apps/design-system/content/docs/fragments/admonition.mdx index afbb2230391..8c903e50ab8 100644 --- a/apps/design-system/content/docs/fragments/admonition.mdx +++ b/apps/design-system/content/docs/fragments/admonition.mdx @@ -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 diff --git a/apps/docs/lib/mdx/plugins/remarkAdmonition.ts b/apps/docs/lib/mdx/plugins/remarkAdmonition.ts index 88ba32889b2..931dc64c075 100644 --- a/apps/docs/lib/mdx/plugins/remarkAdmonition.ts +++ b/apps/docs/lib/mdx/plugins/remarkAdmonition.ts @@ -54,7 +54,7 @@ const remarkMkDocsAdmonition = function () { if (title) { admonitionElement.attributes.push({ type: 'mdxJsxAttribute', - name: 'label', + name: 'title', value: title, }) } diff --git a/apps/www/_blog/2023-08-08-supabase-local-dev.mdx b/apps/www/_blog/2023-08-08-supabase-local-dev.mdx index 3ffe9d23de8..0239eea3c11 100644 --- a/apps/www/_blog/2023-08-08-supabase-local-dev.mdx +++ b/apps/www/_blog/2023-08-08-supabase-local-dev.mdx @@ -321,7 +321,7 @@ Either way, we want to support _both_ seed data and anonymized production data, ### Is it available yet? - + 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). diff --git a/apps/www/_blog/2023-12-13-supabase-branching.mdx b/apps/www/_blog/2023-12-13-supabase-branching.mdx index f2cf22faea7..754cf0618d6 100644 --- a/apps/www/_blog/2023-12-13-supabase-branching.mdx +++ b/apps/www/_blog/2023-12-13-supabase-branching.mdx @@ -116,7 +116,7 @@ Optionally, you can reset the database by running `supabase db reset --db-url + 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. diff --git a/apps/www/_blog/2023-12-14-supabase-auth-identity-linking-hooks.mdx b/apps/www/_blog/2023-12-14-supabase-auth-identity-linking-hooks.mdx index dd4f8f06814..96d3ec59520 100644 --- a/apps/www/_blog/2023-12-14-supabase-auth-identity-linking-hooks.mdx +++ b/apps/www/_blog/2023-12-14-supabase-auth-identity-linking-hooks.mdx @@ -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. - + ℹ️ 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! diff --git a/apps/www/_blog/2023-12-15-client-libraries-v2.mdx b/apps/www/_blog/2023-12-15-client-libraries-v2.mdx index e330e1772ef..56d53b47110 100644 --- a/apps/www/_blog/2023-12-15-client-libraries-v2.mdx +++ b/apps/www/_blog/2023-12-15-client-libraries-v2.mdx @@ -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) - + 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)! diff --git a/apps/www/_blog/2023-12-15-introducing-read-replicas.mdx b/apps/www/_blog/2023-12-15-introducing-read-replicas.mdx index a2f131858f6..797bed6bccb 100644 --- a/apps/www/_blog/2023-12-15-introducing-read-replicas.mdx +++ b/apps/www/_blog/2023-12-15-introducing-read-replicas.mdx @@ -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. - + Our read replicas will inherit the compute size of its primary. They will eventually scale independently. diff --git a/apps/www/_blog/2024-01-22-laravel-postgres.mdx b/apps/www/_blog/2024-01-22-laravel-postgres.mdx index cb29130b4e3..36fd2e25e66 100644 --- a/apps/www/_blog/2024-01-22-laravel-postgres.mdx +++ b/apps/www/_blog/2024-01-22-laravel-postgres.mdx @@ -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. - + 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. diff --git a/apps/www/_blog/2024-01-29-ruby-on-rails-postgres.mdx b/apps/www/_blog/2024-01-29-ruby-on-rails-postgres.mdx index d09f6a895b7..968671f6b88 100644 --- a/apps/www/_blog/2024-01-29-ruby-on-rails-postgres.mdx +++ b/apps/www/_blog/2024-01-29-ruby-on-rails-postgres.mdx @@ -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. - + 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. diff --git a/apps/www/_blog/2024-01-30-pgvector-fast-builds.mdx b/apps/www/_blog/2024-01-30-pgvector-fast-builds.mdx index 163907322ae..678f563a460 100644 --- a/apps/www/_blog/2024-01-30-pgvector-fast-builds.mdx +++ b/apps/www/_blog/2024-01-30-pgvector-fast-builds.mdx @@ -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`. - + 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. diff --git a/apps/www/_blog/2024-04-15-supabase-bootstrap.mdx b/apps/www/_blog/2024-04-15-supabase-bootstrap.mdx index a2e2879256c..c651b62541b 100644 --- a/apps/www/_blog/2024-04-15-supabase-bootstrap.mdx +++ b/apps/www/_blog/2024-04-15-supabase-bootstrap.mdx @@ -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. - + 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 ![Bootstrap getting started](/images/blog/ga-week/bootstrap/deploying-to-production.jpg) - + 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. - + It is important to store these credentials securely as anyone can connect to your remote database using the `POSTGRES_URL`. diff --git a/apps/www/_blog/2024-04-19-ga-week-summary.mdx b/apps/www/_blog/2024-04-19-ga-week-summary.mdx index db760efabd9..7b2564bc026 100644 --- a/apps/www/_blog/2024-04-19-ga-week-summary.mdx +++ b/apps/www/_blog/2024-04-19-ga-week-summary.mdx @@ -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. - + The service is in public alpha. We don't recommend using it for production. diff --git a/apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx b/apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx index ea52e1789c3..56e2f606597 100644 --- a/apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx +++ b/apps/www/_blog/2025-12-17-building-chatgpt-apps-with-supabase.mdx @@ -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. - + 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. diff --git a/packages/ui-patterns/src/admonition.test.tsx b/packages/ui-patterns/src/admonition.test.tsx index 7ac09e4c196..f81775a2085 100644 --- a/packages/ui-patterns/src/admonition.test.tsx +++ b/packages/ui-patterns/src/admonition.test.tsx @@ -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( - - ) - - expect(screen.getByText('Preferred heading')).toBeVisible() - expect(screen.queryByText('Legacy heading')).not.toBeInTheDocument() - }) }) diff --git a/packages/ui-patterns/src/admonition.tsx b/packages/ui-patterns/src/admonition.tsx index 00bdfe238d5..8319c872c8a 100644 --- a/packages/ui-patterns/src/admonition.tsx +++ b/packages/ui-patterns/src/admonition.tsx @@ -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 (