mirror of
https://github.com/supabase/supabase.git
synced 2026-09-07 02:20:52 +08:00
create-pull-request/patch
142 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Danny White
|
24be387cdb |
docs: use sign in terminology across guides and style guides (#49877)
## What kind of change does this PR introduce? Docs update. Aligns documentation and style guides with the **Sign in / Sign out / Sign up** platform standard. Closes DOCS-1328. Related to [#49874](https://github.com/supabase/supabase/pull/49874). ## What is the current behavior? Docs style guides prefer _login_ / _log in_. Guide prose uses mixed login and sign in wording. ## What is the new behavior? - [WORD_LIST.md](apps/docs/WORD_LIST.md) and [copywriting.mdx](apps/design-system/content/docs/copywriting.mdx) document the sign in standard - Design-system auth examples updated - Guide prose and API reference spec descriptions updated ### Terminology **Standard:** Use _sign in_, _sign out_, and _sign up_ as verbs. Use _sign-in_, _sign-out_, and _sign-up_ as nouns and adjectives. Match Studio UI labels (**Sign in**, **Sign out**, **Sign up**). **Preserved intentionally:** | Category | Keep as-is | Example | | -------- | ---------- | ------- | | Feature name | social login | `/social-login`, `features.mdx` heading, OAuth provider section | | URL slugs | `login` in paths | `/phone-login`, `/login-flows`, `choosing-login-flow` | | CLI | `supabase login` / `supabase logout` | Reference ids `supabase-login` / `supabase-logout`; executable commands unchanged | | SDK methods | `logout()` | Kotlin/Swift method names in API reference titles and examples | | Third-party UI | Provider product labels | Facebook Login, Kakao Login, portal **Login** buttons | | Postgres | Database terminology | login privileges, login credentials, login via role | | Audit/logging | Log prose | "Generates the following **log** in the Postgres Logs" | | Code and routes | Paths and filenames | `app/login/`, `Login.tsx`, `demos/android-login` | | External URLs | Third-party login pages | `dash.cloudflare.com/login`, `console.neon.tech/login`, `vercel.com/login` | | API identifiers | Event and field names | Audit actions `login`/`logout`, `should_logout_user` | ## To test - Run `pnpm lint:mdx` in `apps/docs` - Spot-check `features.mdx`, `social-login.mdx`, and a provider guide (e.g. Facebook, Kakao) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Standardized authentication terminology across guides, reference material, CLI documentation, and copywriting guidance using “sign in,” “sign out,” and “sign up.” * Updated authentication instructions, headings, link text, examples, and SSO guidance for clearer, more consistent wording. * Corrected related grammar, spelling, hyphenation, and documentation links while preserving established product names and implementation commands. * **Style** * Refined code examples with consistent import ordering and spacing. * **Examples** * Updated authentication button and menu labels to “Sign in” and “Sign out.” <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
3146650a5a |
Fix FormItemLayout usages for a11y (#49761)
Follow up of #49637. Usages that impacted tests were fixed in the previous PR. This PR fixes the other usages so that label are correctly linked to their inputs. No visual changes ## How to test 1. Design system: [Form examples](https://design-system-git-fix-form-item-layout-usages-supabase.vercel.app/design-system/docs/ui-patterns/forms): moved `FormControl` around the `SelectTrigger` so that the label is linked to the button (It's actually done like this in the [Select Form example](https://design-system-git-fix-form-item-layout-usages-supabase.vercel.app/design-system/docs/components/select#form) and Radix recommend targeting the button too in their [documentation](https://www.radix-ui.com/primitives/docs/components/select#labelling)) 2. [Access tokens](https://studio-staging-463111oii-supabase.vercel.app/dashboard/account/tokens): updated usage to fallback on generated ids and fixed the select just like _1_ 3. [New TOTP factor](https://studio-staging-463111oii-supabase.vercel.app/dashboard/account/security): updated usage to fallback on generated ids 4. _Studio/Database/Extensions_ (`https://studio-staging-463111oii-supabase.vercel.app/dashboard/project/[PROJECT]/database/extensions`): updated the extension enabling modal to fallback on generated ids 5. _Studio/Integrations/Vault (`https://studio-staging-463111oii-supabase.vercel.app/dashboard/project/[PROJECT]/integrations/vault/secrets`): updated the secret edition modal to fallback on generated ids 6. _Studio/Observability(`https://studio-staging-463111oii-supabase.vercel.app/dashboard/project/[PROJECT]/observability`): updated the report creation and edition modals to fallback on generated ids 7. _Studio/SQL Editor(`https://studio-staging-463111oii-supabase.vercel.app/dashboard/project/[PROJECT]/sql/new`): updated the query renaming modal to fallback on generated ids 8. _Studio/Storage/Analytics(`https://studio-staging-463111oii-supabase.vercel.app/dashboard/project/[PROJECT]/storage/analytics`): updated the table creation sheet to fallback on generated ids (you must have a bucket first) 9. _Studio/Workers(`https://studio-staging-463111oii-supabase.vercel.app/dashboard/project/[PROJECT]/workers`): updated the worker creation modal to fallback on generated ids (you must have a bucket first) 10. Updated [Signup](https://studio-staging-463111oii-supabase.vercel.app/dashboard/sign-up?returnTo=%2Fnew), [Signin](https://studio-staging-463111oii-supabase.vercel.app/dashboard/sign-in) and [SSO Signin](https://studio-staging-463111oii-supabase.vercel.app/dashboard/sign-in-sso) forms to fallback on generated ids <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Improvements** - Standardized form field presentation across access tokens, authentication, reports, integrations, database extensions, SQL editor, storage, and worker deployment workflows. - Updated password fields and visibility toggles for more consistent input behavior. - Refined token expiration selection, verification code entry, and dropdown layouts. - Preserved existing labels, validation, options, and form functionality while simplifying the interface structure. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
02cf09212e |
chore: Remove tsconfig paths (#49770)
This PR removes all `paths` in `tsconfig.json` for all apps and packages. They were added previosly because some of the components had a `_Shadcn` suffix because of an ongoing migration. How that the migration is done, the paths can be removed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized shared UI component, utility, and icon imports across design-system examples and application screens. * Simplified shared component access and project configuration. * Added shared access to anchor-link helpers and animation styles. * **Compatibility** * Updated component exports and imports without changing existing behavior. * No changes to user-facing workflows, screens, or functionality. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
6cb08304d9 |
Fix: RadioGroupCard accessibility issues (#48527)
## Problem The `<RadioGroupCard>` component has an accessibility issue: duplicate ids on the items. Besides, its usage in the Design System app has additional issue: no label on the group itself when used outside a react-hook-form. Finally, the form example wrap each item in a `FormField` and `FormControl` which is unnecessary and causes another accessibility issue as all items are then injected the same `id` prop. ## Solution - Fix the duplicate ids issue - Fix all design system example - Fix the only wrong usage we have in studio No visual changes ## Notes When used outside a form, I added aria-label attributes on the group and they are announced by Mac Voice Over. However, when used in a form, our components adds a label with the correct for attribute but it seems that Mac Voice Over does not announce it. Not sure about how this should be handled. ## How to test On https://design-system-git-fix-radio-group-card-a11y-supabase.vercel.app/design-system/docs/components/radio-group-card, with Voice Over enabled: - tab to the first radio group, it should announce the value and the label of group itself, _Size_ - tab to the second, same but label is _Theme_ On https://design-system-git-fix-radio-group-card-a11y-supabase.vercel.app/design-system/docs/components/radio-group-card#form (Form example): - select any option and submit - check the correct option is submitted On https://studio-staging-git-fix-radio-group-card-a11y-supabase.vercel.app: - Go to your organization settings, Audit Log Drains, open your devtool network tab - Create a new custom endpoint and select the HTTP version - Check in the network tab that the correct http version is passed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Accessibility** * Improved labeling for radio card groups, including size, spacing, theme, and webhook version selections. * Radio options now use stable or automatically generated identifiers with reliable label associations. * **Bug Fixes** * Simplified radio option structure in forms for more consistent behavior. * Improved ID handling across radio card, stacked, and large radio options. * Updated the themed radio card example to use the dark theme by default. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
14fe0c0cc8 |
fix(studio): slightly round split-button corners on focus (#49129)
## What kind of change does this PR introduce? UI polish for split buttons (primary action + dropdown chevron). Follow-up to #49055. ## What is the current behavior? The focus ring sits above the neighbouring half, but the inner edge stays square, so the ring has two sharp corners at the join. ## What is the new behavior? On keyboard focus, the squared-off edge uses a slight radius so the ring matches the outer corners more closely. Resting state is unchanged. Split-button callsites now share the same join classes as the design-system example. | Before | After | | --- | --- | | <img width="1030" height="296" alt="43471" src="https://github.com/user-attachments/assets/9df3bd72-c7ac-4419-ae18-a7e649dc2d66" /> | <img width="1056" height="276" alt="CleanShot 2026-08-17 at 10 45 09@2x" src="https://github.com/user-attachments/assets/52e8a4dc-9c52-45ce-b4d0-f0e7b1b75935" /> | ## To test Tab to each half (labelled button, then chevron). Inner corners of the focus ring should be slightly rounded, not square. 1. [Split with dropdown](https://design-system-git-fix-split-button-focus-radius-supabase.vercel.app/design-system/docs/components/button#split-with-dropdown) (no login) 2. [Access Tokens](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/account/tokens) → Generate new token 3. Any project on [studio staging](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/_/settings/general) → Settings → General → Restart project <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Accessibility** - Added accessible labels to dropdown and export controls. - Improved keyboard-focus visibility, layering, and rounded edge treatment across joined buttons and menus. - Removed misleading or redundant screen-reader text and titles. - **Bug Fixes** - Prevented split-button controls from shrinking or displaying awkward borders and corners. - Refined hover and focus behavior for action buttons throughout settings, database, storage, account, and documentation interfaces. - **Documentation** - Clarified guidance for using overflow menus and responsive split-button actions. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
2b26da360e |
show API and AWS authorization errors inline (#48471)
## What kind of change does this PR introduce? Bug fix and design-system update. ## What is the current behavior? API authorisation and AWS Marketplace action failures use transient toasts. The inline action-error treatment introduced for organisation invitations is implemented locally. ## What is the new behavior? Action failures remain visible below their actions and clear on retry or organisation change. This PR adds a shared `InterstitialActionError` component, updates the connect-interstitial guidance and demo to use it, and retroactively applies it to `OrganizationInvite`. Mutation errors are read directly from their mutation hooks rather than copied into component state. | Before | After | | --- | --- | | <img width="1024" height="759" alt="Authorize API Access Supabase" src="https://github.com/user-attachments/assets/9520aff3-496d-44b1-b5b5-02b331872e32" /> | <img width="1024" height="759" alt="Authorize API Access Supabase" src="https://github.com/user-attachments/assets/2d09e337-573a-45b5-80ac-7c546ed1401d" /> | | <img width="1024" height="759" alt="Link AWS Marketplace Supabase" src="https://github.com/user-attachments/assets/bb1a4581-0399-432a-8037-d84ab15ecc4b" /> | <img width="1024" height="759" alt="Link AWS Marketplace Supabase" src="https://github.com/user-attachments/assets/f9d43cd9-c661-42ed-91c0-e45ccb9c19f5" /> | _Note since taking that AWS screenshot: the error message now replaces the prior footer text. I.e. “Learn more about billing through AWS.” is now gone when an error message is present._ ## To test ### AWS Marketplace For a visual check with local Studio running: 1. In `apps/studio/components/interfaces/Organization/CloudMarketplace/AwsMarketplaceOnboarding.tsx`, immediately before `if (!buyerId)`, temporarily add: ```tsx return ( <AwsMarketplaceInterstitial> <div className="flex flex-col gap-5"> <InterstitialAccountRow displayName="reviewer@example.com" /> <OrganizationSelector organizations={[ { name: 'Example Organization', slug: 'example-organization', plan: { id: 'pro', name: 'Pro' }, } as Organization, ]} selectedSlug="example-organization" disabled onSelect={() => undefined} /> <div className="flex flex-col gap-5"> <div className="flex flex-col gap-2"> <Button variant="primary" block> Link organization </Button> <InterstitialActionError error="Failed to link organization: Test error" /> </div> <p className="text-center text-xs text-foreground-lighter text-balance"> <InlineLink href={`${DOCS_URL}/guides/platform/aws-marketplace`}> Learn more </InlineLink>{' '} about billing through AWS. </p> </div> </div> </AwsMarketplaceInterstitial> ) ``` 2. Open `http://localhost:8082/aws-marketplace-onboarding?buyer_id=test` while signed in. 3. Confirm the error appears below **Link organization** with a divider. Remove the temporary return before committing anything. ### API authorization For a visual check with local Studio running: 1. In `apps/studio/components/interfaces/ApiAuthorization/ApiAuthorization.Valid.tsx`, immediately before `if (isLoading)`, temporarily add: ```tsx return ( <ApiAuthorizationMainView approvalState="indeterminate" form={form} requester={{ name: 'Test App', website: 'https://example.com', icon: null, domain: 'example.com', scopes: [], expires_at: '2099-01-01T00:00:00.000Z', approved_at: null, registration_type: 'static', }} organizations={{ _tag: 'success', organizations: [ { name: 'Example Organization', slug: 'example-organization' } as Organization, ], }} requestedOrganizationSlug={undefined} actionError="Failed to authorize request: Test error" onOrganizationChange={() => undefined} onApprove={() => undefined} onDecline={() => undefined} /> ) ``` 2. Open `http://localhost:8082/authorize?auth_id=test` while signed in. 3. Confirm the error appears below the authorisation actions with a divider. Remove the temporary return before committing anything. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added consistent inline error messaging for authorization, organization invitations, and AWS Marketplace onboarding. * Error messages now appear within the relevant interstitial and replace supporting footer content until resolved. * Retry and action buttons remain available after failed operations. * **Bug Fixes** * AWS Marketplace linking failures no longer trigger toast notifications. * Billing guidance is hidden while an onboarding error is displayed. * **Tests** * Added coverage for authorization, cancellation, and AWS Marketplace failure states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Danny White
|
5edcaef74c |
chore: show organization invite errors inline (#48470)
## What kind of change does this PR introduce? Bug fix and design-system documentation update. ## What is the current behavior? Invite acceptance failures only appear in a transient toast. ## What is the new behavior? Invite failures remain visible beside the actions. The design-system guidance now distinguishes field, action, state, and toast feedback. | Before | After | | --- | --- | | <img width="759" height="619" alt="Join Organization Supabase" src="https://github.com/user-attachments/assets/ed8e974c-5da3-477a-81da-628d3f847131" /> | <img width="741" height="768" alt="Join Organization Supabase" src="https://github.com/user-attachments/assets/4c3f6bcd-4ed9-40b2-8280-e8c8a44ecbd6" /> | ## To test With local Studio running at `http://localhost:8082`: 1. Open `apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.utils.ts`. 2. At line 37, immediately inside `getOrganizationInviteStatus`, add: ```tsx return 'ready' ``` This deliberately bypasses invite lookup and account checks for the visual test. 3. Open `apps/studio/components/interfaces/OrganizationInvite/OrganizationInvite.tsx`. 4. At line 30, change: ```tsx const [joinError, setJoinError] = useState<string>() ``` to: ```tsx const [joinError, setJoinError] = useState<string>('Invite token can only be accepted via an SSO account') ``` 5. Open `http://localhost:8082/join?token=test&slug=test` while signed in. 6. Confirm the card says **Join an organization** and shows the error below **Decline**, separated from the actions by a divider. 7. Revert both temporary edits before committing anything. ## Additional context First PR in a five-PR stack. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a new connect interstitial example showcasing an inline action-error state with clear retry guidance. - **Bug Fixes** - Invitation acceptance failures now show inline destructive feedback under “Accept invite,” keeping the button enabled for retry (and removing prior toast-based failure behavior). - Updated the invalid-invitation title to “Invalid invitation.” - Changed the “Decline” link destination to `/organizations`. - **Documentation** - Expanded Sonner toast “When to use” guidance. - Refined form and connect interstitial action-feedback patterns (inline vs toast usage). - **Tests** - Updated and added coverage for the inline error rendering and “Invalid invitation” text. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Danny White
|
37dded67d1 |
feat: unify SkipToContent across studio, docs, www, and design-system (#48314)
## What kind of change does this PR introduce? Feature / a11y polish ## What is the current behavior? Studio and Docs each had their own skip-to-content link (different styling and behaviour). www and design-system had none. ## What is the new behavior? Shared `SkipToContent` in `ui-patterns`, adopted by Studio, Docs, www, and design-system. Documented as a fragment with a short note under Accessibility → Jumping ahead. Tab once to reveal the button (top-left), Enter to jump to a content-only `<main>`. | After | | --- | | <img width="836" height="324" alt="CleanShot 2026-07-24 at 14 08 47@2x" src="https://github.com/user-attachments/assets/6df29452-e53a-4eca-8f64-946f2b9f605d" /> | ## To test Shared steps for every app: enable Tab key navigation if needed, load the preview, press **Tab** once — skip button should slide in top-left. Press **Enter** — focus jumps to main content (no blue ring on `<main>`). Press **Tab** again — first interactive control in the page body, not the sidebar/nav. Hover the skip button — solid fill, clear hover state, no chrome showing through. - **Studio** — [preview](https://studio-staging-git-dnywh-featskip-to-content-supabase.vercel.app) → sign in → any project page - **Docs** — [preview](https://docs-git-dnywh-featskip-to-content-supabase.vercel.app) → any docs page with sidebar - **www** — [preview](https://zone-www-dot-com-git-dnywh-featskip-to-content-supabase.vercel.app) → homepage or any marketing page with the default nav - **Design system** — [preview](https://design-system-git-dnywh-featskip-to-content-supabase.vercel.app) → any docs page (confirm Tab from content does **not** walk the sidebar), plus [Skip to Content fragment](https://design-system-git-dnywh-featskip-to-content-supabase.vercel.app/docs/fragments/skip-to-content) ## Additional context Follow-up to #47694 / #48303 (Studio) and #47515 (Docs). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a reusable “Skip to content” accessibility link across key layouts and pages. - Updated main landmarks to support keyboard focus and skip-link navigation (`id="main"`). - **Accessibility** - Skip links now follow consistent landmark-target conventions and remain hidden until focused. - Improved documentation for skip links/jump shortcuts in persistent chrome layouts. - **Documentation** - Added a dedicated Skip to Content fragment, navigation entry, and expanded accessibility guidance. - Updated button description wording in component docs. - **Tests** - Added component tests for SkipToContent. - **Chores** - Exposed SkipToContent via additional public package entry points. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Alaister Young
|
ca2b50a0a7 |
chore(ui-patterns): collapse the admonition shim into ui-patterns/Admonition (#48377)
Follow-up to #48344: collapses the two resolution paths for the Admonition module into one. `src/admonition.tsx` was a back-compat shim re-exporting `src/Admonition/`. Two ways to resolve one module is exactly what produced the macOS self-import bug fixed in #48344, and the local typecheck errors that #48374 worked around. This removes the shim and standardizes on the PascalCase subpath, matching every other export in the package. **Changed:** - Codemodded all 246 `ui-patterns/admonition` imports to `ui-patterns/Admonition` (240 `.tsx`, 5 `.mdx`, 1 `.ts` across studio, docs, www, design-system, and lite-studio) - Pointed the 5 internal `'../admonition'` imports back at the `'../Admonition'` directory **Removed:** - `packages/ui-patterns/src/admonition.tsx`, and its `./admonition` entry in the exports map (regenerated with `pnpm gen:exports`) ## To test - `grep -r "ui-patterns/admonition" --include='*.ts*'` → no hits - `pnpm test:case-hazards` → passes - `pnpm typecheck` → all 15 tasks green - `pnpm --filter studio run lint:ratchet` → passes - `pnpm --filter ui-patterns vitest run src/Admonition` → 11 tests pass <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Standardized Admonition component imports across the application and documentation. * Improved compatibility with case-sensitive environments by using the canonical component path. * Removed the legacy Admonition import entry point. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Danny White
|
3bca21b3f8 |
chore(a11y): convert leftover focus recipes to focus-ring (#48219)
## What kind of change does this PR introduce? Accessibility cleanup (DEPR-628). ## What is the current behavior? Leftover call sites still use ad-hoc focus recipes (`ring-foreground-muted`, `outline-brand`, Dialog/Sheet `focus:` rings, etc.) instead of the shared utilities from #41575. ## What is the new behavior? Converts those leftovers across `packages/ui`, Studio, www, docs, and design-system to `focus-ring`, preferring `focus-visible`. Keeps documented exceptions (`group-focus-visible`, InputGroup `:has()`). ## To test Tab through controls (keyboard only). Expect a consistent offset ring on `:focus-visible`, not a green/brand/custom stack, and no ring animation. ### www (marketing) Preview: https://zone-www-dot-com-git-danny-depr-628-focus-ring-fbccf9-supabase.vercel.app - Global nav on `/`: Product, Developers, Solutions dropdowns; logo; hamburger + mobile menu - `/features`: view toggles and feature cards - `/company`: card links - `/changelog`: timeline / entry links - `/partners/catalog`: grid/list toggle and partner cards - `/pricing`: compute section expand control - Product / Modules / Solutions sticky navs on product pages (e.g. `/database`, `/storage`) - `/state-of-startups`: TwoOptionToggle if present ### docs Preview: https://docs-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app - Any guide page: top nav dropdowns and items - Narrow viewport: hamburger, then mobile menu links + close - Guide with PromptPanel / tabs: tab to prompt actions and tab list ### studio (dashboard) Preview: https://studio-staging-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app - Project home: Connect section tiles; drag-handle focus on sortable sections - Integrations marketplace (`/project/<ref>/integrations`): featured cards, list/grid toggle, list rows - Auth (`/project/<ref>/auth/oauth-apps`, `/project/<ref>/auth/providers`): open create/edit sheet, tab to close (X) - Database policies (`/project/<ref>/database/policies`): open policy editor sheet, tab to close - Storage policies (`/project/<ref>/storage/files/policies`): bucket section links; policy modal close - Query performance (`/project/<ref>/observability/query-performance`): info icon buttons on metrics - Replication pipeline detail (if available): slot lag / status info icons - Support (`/support/new`): attachment add/remove controls - Table editor: spreadsheet import preview checkboxes; row text/JSON editor TwoOptionToggle - Any Dialog/Sheet/toast close (X): ring on keyboard focus only, not mouse click ### design-system Preview: https://design-system-git-danny-depr-628-focus-ring-long-tail-supabase.vercel.app - Colour palette swatches (keyboard focus) - Form patterns sidepanel example: avatar / focusable control in the example ## Additional context - Linear: [DEPR-628](https://linear.app/supabase/issue/DEPR-628) - Follow-ups: form-group CSS (DEPR-629), Storage columns selection (DEPR-630), ESLint rule (DEPR-632) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Accessibility & Usability** * Standardized keyboard focus indicators across navigation, dialogs, forms, buttons, toggles, links, and tooltips using a consolidated focus style. * Improved toggle controls to use proper button semantics (instead of clickable text), including `aria-pressed`/disabled handling and better keyboard navigation. * **Visual Updates** * Harmonized hover/focus ring visuals across the design system, Studio, documentation, and marketing pages while preserving existing layout and interaction behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
6f6badae51 |
fix(eslint): promote require-explicit-tabindex to error (#48170)
## What kind of change does this PR introduce? Accessibility / lint hardening (Safari keyboard focus). ## What is the current behavior? `supabase/require-explicit-tabindex` is `'warn'`. Studio’s ratchet was at 0 but the rule was still ratcheted; www / docs / design-system still had raw `<button>` / `role="button"` call sites without an explicit `tabIndex`. [DEPR-627](https://linear.app/supabase/issue/DEPR-627) · follow-up to #47984 / #48040 ## What is the new behavior? - Shared config: `'supabase/require-explicit-tabindex': 'error'` - Swept www / docs / design-system (+ Studio test fixtures the ratchet skipped) - Removed the rule from the Studio ratchet + baselines ## To test Prefer **Safari**. This PR only adds explicit `tabIndex` to raw `<button>` / `role="button"` call sites — not links, and not controls that already go through `Button` from `ui`. ### Marketing (`www`) ([staging link](https://zone-www-dot-com-git-danny-depr-627-promote-req-7ae43c-supabase.vercel.app/)) - [x] Homepage frameworks / dashboard feature tabs — Tab through each tab button - [x] Product pages (e.g. `/auth`, `/database`) — section tab switchers - [x] Narrow viewport — open the hamburger; Tab through menu buttons - [x] `/partners/catalog` — filter / view controls - [x] Blog view toggle (list ↔ grid) ### Docs ([staging link](https://docs-git-danny-depr-627-promote-require-explici-25e46d-supabase.vercel.app/)) - [x] **Desktop (≥ lg):** top-right **⋯ menu** (hamburger icon) — opens a dropdown that includes Theme. Not a separate theme button. - [x] **Mobile (< lg):** top-right **hamburger** opens the sheet; close (X) is the raw button we tagged. Theme inside the sheet uses `ThemeToggle` / `DropdownMenuTrigger` from `ui` (already supposed to set `tabIndex`). - [x] **Code blocks** — copy / language controls - [x] **Is this helpful?** — X / check are `Button` from `ui` (should already Tab). After voting **while signed in**, the follow-up “What went well?” / “How can we improve?” text button is the raw one we tagged. - [x] **AI Tools → Copy as Markdown** (right rail on a guide) — this is the only GuidesSidebar control this PR changed. “On this page” TOC items are **links**, not covered by this lint. - [x] **Reference docs** (e.g. JS client reference) — section headers that expand/collapse in the left nav (`Collapsible.Trigger`) - [x] **Troubleshooting index** — type in the search field, then Tab to the **clear (X)** control ### Dashboard (`studio`) No production UI changes in this PR (tests + lint config only). Quick Safari smoke that prior tabindex work still holds: - [x] Project sidebar — Tab through primary nav links - [x] Settings → General — Tab through inputs / buttons - [x] Storage → Files — Tab a bucket row / file actions |
||
|
Danny White
|
e19cd1863d |
feat(studio): connect logo contract for authorize (#48161)
## What kind of change does this PR introduce? Feature + docs. Closes [DEPR-604](https://linear.app/supabase/issue/DEPR-604/define-connect-logo-asset-and-variant-contract). ## What is the current behavior? `/authorize` logo resolution trusted self-asserted requester `name` (and similar) for curated MCP marks, fell back to a letter tile when there was no usable icon, and always used theme-reactive tile chrome. This includes the scenario when pairing against unclassified uploaded OAuth app bitmaps. ## What is the new behavior? - [Documents the Connect logo asset/variant contract](https://design-system-git-danny-depr-604-connect-logo-contract-supabase.vercel.app/design-system/docs/ui-patterns/connect-interstitials#logos) (default to light, keep pairs matched, no theme-recolour of vendor SVGs). - Resolves curated partner logos from allowlisted `redirect_uri` hosts only (`claude.ai` / `anthropic.com`, `cursor.com` / `cursor.sh`, `chatgpt.com` / `openai.com`, `perplexity.ai`). - Unknown / missing / failed requester icons show `SupabaseLogo` alone (no letter tile). - Uploaded organisation OAuth app icons (unclassified bitmaps) pair with fixed light tile chrome (`border-black/10 bg-white` / `SupabaseLogo forceLight`) on both sides across Studio themes. - Curated partners keep theme-reactive tiles and may use dark assets when available. ### To test Real MCP clients (Claude, Cursor, etc.) only send users to **production** `/authorize`, so you cannot drive a local or preview Studio build from those tools. Use a Network override instead: 1. Start Studio and sign in (`pnpm dev:studio`, or use the Vercel preview once available). 2. Open `/dashboard/authorize?auth_id=foo` (any `auth_id` is fine — the real response may 404). 3. DevTools → **Network** → find `GET …/platform/oauth/authorizations/foo` (or whatever id you used). 4. Right-click → **Override content** (enable Local Overrides / pick a folder if prompted). 5. Paste one of the payloads below (status **200**), save, then reload the authorize page. 6. Keep `expires_at` in the future so the request does not look expired. The fields that matter for this PR are `name`, `icon`, and `redirect_uri`. #### Curated pair (allowlisted redirect) Expect Cursor mark + Supabase pair. Toggle light/dark: curated dark assets may swap; tiles stay theme-reactive (`bg-surface-75`). ```json { "name": "Cursor", "website": "https://cursor.com", "icon": null, "domain": "cursor.com", "redirect_uri": "https://cursor.com/callback", "expires_at": "2099-01-01T00:00:00.000Z", "scopes": ["organizations:read", "projects:read"], "approved_at": null, "registration_type": "dynamic" } ``` #### Unknown → Supabase alone Expect Supabase bolt alone. No letter tile. No curated mark even if `name` says Claude. ```json { "name": "Acme", "website": "https://acme.example", "icon": null, "domain": "acme.example", "redirect_uri": "https://acme.example/callback", "expires_at": "2099-01-01T00:00:00.000Z", "scopes": ["organizations:read", "projects:read"], "approved_at": null, "registration_type": "dynamic" } ``` #### Spoofed trusted name, non-allowlisted redirect (logo only) Expect Supabase alone (no Claude mark). This PR does **not** show the impersonation caution (that is coming in #48162). ```json { "name": "Claude", "website": "https://claude.ai", "icon": null, "domain": "claude.ai", "redirect_uri": "https://evil.com/callback", "expires_at": "2099-01-01T00:00:00.000Z", "scopes": ["organizations:read", "projects:read"], "approved_at": null, "registration_type": "dynamic" } ``` #### Uploaded OAuth app icon → forced-light pair Expect remote icon + Supabase pair with forced-light tiles (`border-black/10 bg-white`) on both sides in light and dark Studio themes. The icon URL below is the checked-in solid-colour Acme bitmap on this branch. ```json { "name": "Acme", "website": "https://acme.example", "icon": "https://raw.githubusercontent.com/supabase/supabase/danny/depr-604-connect-logo-contract/apps/design-system/public/img/icons/acme-oauth-icon.png", "domain": "acme.example", "redirect_uri": "https://acme.example/callback", "expires_at": "2099-01-01T00:00:00.000Z", "scopes": ["organizations:read", "projects:read"], "approved_at": null, "registration_type": "static" } ``` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Improved authorization interstitial branding with trusted requester logos and safer fallback behavior. * Added support for consistent light-theme treatment of uploaded OAuth app icons. * Added examples and documentation for unknown requesters, uploaded logos, and wrong-account states. * **Bug Fixes** * Prevented unverified or unavailable requester icons from being presented as trusted. * Ensured logo pairing remains visually consistent across light and dark themes. * **Tests** * Added coverage for trusted-host validation, fallback branding, icon loading failures, and theme behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Danny White
|
c8aca8d3a0 |
chore(design-system): standardise keyboard focus rings (#41575)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? UI / design-system consistency (accessibility). ## What is the current behavior? Keyboard focus rings are inconsistent across Studio and `packages/ui`: - Custom Button uses thick `outline` with per-variant colours (brand / grey / destructive / warning) - Form controls use muted grey rings (`ring-background-control`) - Tabs / NavMenu / Radio use soft brand `ring-ring` - Studio `.inset-focus` uses dark green `outline-brand-600` Related: [DEPR-354](https://linear.app/supabase/issue/DEPR-354). ## What is the new behavior? One shared focus recipe, exposed as Tailwind `@utility` classes in `packages/config/css/utilities.css`: | Utility | Use when | | --- | --- | | `focus-ring` | Buttons, inputs, most controls (offset ring) | | `focus-inset` | Dense/flush surfaces such as interactive table rows (renamed from `inset-focus`) | ```txt # focus-ring outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background ``` Applied on Button, shadcn form controls, Menu/NavMenu, Command palette trigger, Studio table rows, and related call sites. Documented in the design-system accessibility docs. Variants do not change focus ring colour. When the ring must appear on a different element than the focused one (e.g. Menu + ProductMenu `Link` via `group-focus-visible`, or InputGroup via `:has()`), keep an explicit ring stack. The utilities bake in `:focus-visible` on the same element. ## Additional context **Out of scope** - Full `packages/ui` / Studio / www sweep - Legacy Studio form-group green box-shadow cleanup - ESLint rule for bare `outline-none` ## Test plan Prefer Safari (“hard mode” for `tabIndex`). Expect one soft brand ring everywhere: not grey, not solid green outline. ### Design system - [ ] [Accessibility](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/accessibility): recipe docs match what you see - [ ] [Button](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/button): Tab primary / default / danger; same ring colour - [ ] [Table → Row-level navigation](https://design-system-git-dnywh-choreimprove-tab-focus-styles-supabase.vercel.app/design-system/docs/components/table#row-level-navigation): Tab an interactive row; inset outline (`focus-inset`) sits inside the row ### Studio - [ ] **Org home → table view** (`/organizations/_` or org projects): switch to the table layout, Tab onto a project row; inset outline sits inside the row (list/card view uses CardButton, not `focus-inset`) - [ ] **Project sidebar** (Database, Auth, Storage, …): Tab the main product nav links; ring follows the focused item (not the nested section menus like Tables / Roles) - [ ] **Storage → Files**: Tab a bucket row; same inset outline as org table rows - [ ] **Project Settings → General** (or Compute and Disk): Tab through inputs, checkboxes, switches, selects; same offset ring, no ring on mouse click - [ ] **Header ⌘K** (desktop width): Tab to the search control after Feedback; same soft brand `focus-ring` (was a thicker `ring-border-strong` before) - [ ] **Table Editor or SQL Editor tabs**: focus a tab, Tab to × if active; close shows a ring - [ ] **Light + dark**: ring stays visible against both backgrounds |
||
|
Danny White
|
8a0b324dff |
docs(design-system): add connect interstitials pattern (#45356)
## Summary - Adds design-system guidance for the shared Connect interstitial layout used by authorisation, invite, marketplace, CLI, and credit flows - Includes a glanceable example showing the centred 400px card for partner authorise and wrong-account invite states - Documents Studio helpers (`InterstitialLayout`, logo helpers, account row, `OrganizationSelector`) so future surfaces reuse one pattern instead of bespoke shells ## Context Most of the Studio Connect UI work from this effort has already landed. This PR keeps the documentation and design-system example so the pattern stays discoverable. Related: [Shared Connect UI for Authorization and Partner Flows](https://linear.app/supabase/project/shared-connect-ui-for-authorization-and-partner-flows-94587ac29d38) ## Test plan - [ ] Open `/docs/ui-patterns/connect-interstitials` in the design system - [ ] Confirm the page appears under UI Patterns in the nav - [ ] Confirm the example renders the authorise and wrong-account cards side by side - [ ] Skim the guidance for accuracy against current Studio `InterstitialLayout` usage <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added new design-system “Connect Interstitials” example demos, including branding variations (single vs dual logos) and a complete connect-card flow with account row and sign-out action. * Registered the new Connect Interstitials examples in the design-system example registry. * **Documentation** * Added a “Connect Interstitials” UI Patterns page covering when to use the pattern, recommended card/layout structure, branding/logo guidance, and conventions for states, actions, and copy. * Updated the documentation sidebar to include the new page. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
805aee289e |
fix(studio): color regressions after theme update (#47794)
## What kind of change does this PR introduce? Bug fix + small shared component ## What is the current behavior? After the recent colour system changes, several UI elements lost contrast in light mode: - `InfoIcon` with a background appeared as a flat grey circle (glyph fill matched the background) - Several buttons forced `text-white`, which no longer contrasts correctly against the updated brand fills - Selected / completed check badges were inconsistent between call sites ## What is the new behavior? - `InfoIcon` uses `text-background` for the glyph fill so the "i" is visible against the grey circle - www primary buttons drop hardcoded `text-white` and use standard `Button` colours - New shared `SuccessCheck` in `ui` for selected state and completion progress (green circle; white check in light mode, black check in dark mode) - Documented in the design system with selected + progress examples Note on `InfoIcon`: [#47933](https://github.com/supabase/supabase/pull/47933) landed a related fix using `text-background-200` (`--card`). This PR keeps `text-background` instead, to match `CheckIcon` / `EyeOffIcon` in the same file and avoid the legacy alias. | Before | After | | --- | --- | | <img width="688" height="268" alt="CleanShot 2026-07-10 at 11 30 25@2x" src="https://github.com/user-attachments/assets/c0276b0c-1023-46c8-805c-35a22def1353" /> | <img width="664" height="278" alt="CleanShot 2026-07-10 at 11 29 43@2x" src="https://github.com/user-attachments/assets/3508cf37-1b48-4fb7-a939-83522feb44f1" /> | | <img width="468" height="550" alt="CleanShot 2026-07-10 at 11 31 04@2x" src="https://github.com/user-attachments/assets/acd42273-15ce-4fb2-9d0c-5a43ac23073c" /> | <img width="460" height="540" alt="CleanShot 2026-07-10 at 11 32 50@2x" src="https://github.com/user-attachments/assets/f66fb4bc-81f7-4df1-95f5-63980c4e8537" /> | ## To test Use the staging preview link from this PR and check the following in **light mode** (and spot-check dark mode): **www** - Visit `/404` — "Head back" button should have readable text (not white-on-green) - Visit `/company` — "Join the team" button in the Team section - Visit a product page with a hero CTA (e.g. `/database`, `/realtime`) — primary "Start for free" button **studio** - Database → Replication → deploy a read replica — footer `InfoIcon` next to the pricing line should show a visible "i" inside the grey circle - `/redeem` — select an org; green `SuccessCheck` should match light/dark contrast (white check / black check) - Settings → API → service role key row — red "secret" tag text should be readable **design system** - `/docs/components/success-check` — demo, selected-state, and progress examples |
||
|
Jordi Enric
|
a75a3b22b6 |
fix(studio): align PITR calendar dates in the first week (#47806)
## What Fixes misaligned day cells in the PITR calendar widget for the first week of the month. ## Why The PITR calendar draws a \`border\` on each day cell via \`classNames.day\`. The day \`<td>\` has no explicit width, so \`box-sizing: border-box\` doesn't apply and the 1px borders add to its size (36px → 38px), while the weekday header cells stay pinned at \`w-9\` (36px). Bordered day cells therefore drift right of their headers, which is most visible in the first partial week where unbordered leading cells sit flush next to the wider bordered ones. ## How Pin each day cell to a fixed \`w-9 box-border\` so the border is drawn inside the 36px box, and let the day button fill the cell (\`w-full\`). Column pitch now matches the weekday headers regardless of border state. Class-only change, no logic touched. Closes FE-3886 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved calendar day cell sizing and layout for more consistent rendering. * Ensured day buttons use full-width styling where applicable, while preserving existing hover, border, background, and corner behavior. * **Documentation** * Added documentation for “Calendar with disabled days,” including a new interactive preview. * **New Features** * Introduced a calendar example demonstrating disabled-day behavior with mid-week month start and restricted date selection. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Gildas Garcia
|
cabe14e5ca |
chore: remove _Shadcn_ suffix from ui tabs components (#47628)
## Problem Now that we migrated all usages of the deprecated `Tabs` component, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR does, no visual nor functional changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Standardized tab components across the app so pages and dialogs now use the same consistent tab UI. * Improved tab-based views in design, docs, studio, learn, and website experiences for a more uniform interface. * **Chores** * Updated shared UI exports to expose tab components directly, simplifying future usage across the product. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
fb02182e86 |
Color system (#47288)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES/NO ## What kind of change does this PR introduce? Bug fix, feature, docs update, ... ## What is the current behavior? Please link any relevant issues here. ## What is the new behavior? Feel free to include screenshots if it includes visual changes. ## Additional context Add any other context or screenshots. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Refreshed theming across the UI to use modern color expressions and shared theme variables (including OKLCH-based gradients), improving consistency for charts, code blocks, overlays, icons, and decorative backgrounds. * **Bug Fixes** * Improved light/dark color and gradient consistency across axis/grid styling, reference lines, buttons/badges, sidebar accents, loaders, and other visual components. * **Documentation** * Updated styling/theming guidance to align with the revised semantic token system and the updated theme variable usage patterns. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com> |
||
|
Danny White
|
be01b38118 |
docs(design-system): document split button with dropdown pattern (#47422)
## Summary - Add `button-split-dropdown` and `admonition-button-split` design-system examples for primary action + chevron menu. - Document the shared middle border pattern (`-ml-px`, `hover:z-10`; avoid `border-l-0`) in Button and Admonition docs. - Mirrors the approach established in the custom SMTP email templates admonition. ## Test plan - [ ] Open design-system site and verify `Button → Split with dropdown` preview renders correctly - [ ] Open `Admonition → Split button with dropdown` preview and confirm middle border looks correct on hover/focus - [ ] Confirm peek code shows the documented class names <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added new split-button dropdown live demos, including icon/chevron-triggered menus with actionable items. * Added an admonition demo demonstrating a split primary button plus dropdown trigger with responsive layout. * **Documentation** * Expanded “Split with dropdown” guidance with pairing/when-to-use rules, required styling/border behavior, and responsive layout instructions for the primary + chevron actions. * Updated button documentation heading capitalization to match typography standards. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
c49c2c8e8b |
fix(design-system): add missing breadcrumb demo components (#47421)
## What kind of change does this PR introduce? Bug fix, docs update ## What is the current behavior? - The breadcrumb component docs at `/design-system/docs/components/breadcrumb` reference six `ComponentPreview` demos, but the example components were never implemented and their registry entries were commented out. The page rendered without working previews. Unrelated but snuck in: - The “responsive” Admonition example is a H2 instead of H3 like the others. - The design system ⌘K command switcher grows to the full height of its nav items instead of scrolling within a bounded list. Closes DEPR-607 Closes DEPR-608 ## What is the new behavior? - Adds six breadcrumb example components (`breadcrumb-demo`, `breadcrumb-separator`, `breadcrumb-dropdown`, `breadcrumb-ellipsis`, `breadcrumb-link`, `breadcrumb-responsive`) under `apps/design-system/registry/default/example/` - Re-enables the corresponding entries in `registry/examples.ts` and rebuilds `__registry__/index.tsx` - Fixes invalid nested `<li>` markup in the responsive breadcrumb demo that caused a hydration error Also includes two small unrelated fixes: - Caps the ⌘K switcher `CommandList` at `max-h-[300px]` so it scrolls instead of stretching - Corrects the admonition fragment docs header type ## Additional context Test plan: - [ ] Run `pnpm dev:design-system` and open `/docs/components/breadcrumb` - [ ] Confirm all six breadcrumb previews render - [ ] Confirm no hydration warnings in the browser console for the responsive example - [ ] Open the ⌘K switcher and confirm the list scrolls within a bounded height <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added multiple Breadcrumb demos to the design system gallery, including link, dropdown, ellipsis, separator, and responsive variants. * Enabled these Breadcrumb demos in the examples registry. * **Documentation** * Updated the “Responsive” docs heading level. * **Style** * Constrained the command menu list height inside the dialog for improved fit. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
b30db91d71 |
chore: cleanup UI patterns exports (#47406)
## Problem We now export components under a subpath in ui-patterns to avoid barrel files as they slow down every tools (from IDE to linters, etc.) and may also affect bundles our users have to download. ## Solution - Remove the UI patterns index file - Fix invalid impors |
||
|
Gildas Garcia
|
a6e79ebacb |
chore: delete Button alternative deprecated variant (#47260)
## Problem The `alternative` variant for `<Button>` has been deprecated but is still used in a few places. ## Solution - Migrate usages to the recommended `primary` variant - Delete the `alternative` variant <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated several buttons across forms, logs, recent queries, and release headers to use the primary visual style. * Button styling is now more consistent throughout the app, with a cleaner default emphasis for key actions. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
211b99f144 |
fix: consolidate focus states across inputs (#46588)
## Problem All inputs don't have the same style when focused ## Solution Consolidate focus states across inputs ## How to test Checkout the design system form examples: https://design-system-git-gildasgarcia-depr-354-consoli-0188d7-supabase.vercel.app/design-system/docs/ui-patterns/forms <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined focus-visible ring/outline and ring-offset tokens across buttons, multi-select, radio groups, checkbox, select, and switch for a more consistent accessible experience. * Updated focus-state styling details within the shared Button and related controls (including open-state outline behavior). * **Refactor** * Updated icon upload preview triggers in form examples to use the shared Button component while preserving existing upload behavior and visuals. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
093ed8f610 |
introduce DatePicker (#46837)
## Problem The date picker pattern we currently have: - requires developers add classes and props themselves to get the expected result. This is cumbersome and prone to error. - does not visually convey the field invalid state like inputs do <img width="702" height="256" alt="image" src="https://github.com/user-attachments/assets/cacd6414-6789-42e3-8d06-88e44fd9fe0a" /> ## Solution Introduce a new `DatePicker` _UI pattern_ that wraps the `Popover` and `Button` components to ease the most common scenarios while still allowing full customization <img width="699" height="250" alt="image" src="https://github.com/user-attachments/assets/e80f842c-28b2-4a4f-b316-c2005e771912" /> ## Component usage Note how we manually pass the `isInvalid` prop to the `<DatePickerButton>` to avoid relying on `react-hook-form` contexts which would make the date picker unusable outside RHF forms. Alternative would be to also have a `<DatePickerInput>` that could be used instead of `<DatePickerButton>` when inside an RHF form. ```tsx <FormField control={form.control} name="expiryDate" render={({ field, fieldState }) => ( <FormItemLayout layout="horizontal" label="Date Picker" description="Date selection with calendar popover" > <FormControl className="col-span-6"> <DatePicker> <DatePickerTrigger asChild> <DatePickerButton isInvalid={fieldState.invalid}> {field.value ? format(field.value, 'PPP') : 'Pick a date'} </DatePickerButton> </DatePickerTrigger> <DatePickerContent> <Calendar mode="single" selected={field.value} onSelect={field.onChange} initialFocus /> </DatePickerContent> </DatePicker> </FormControl> </FormItemLayout> )} /> --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Gildas Garcia
|
96d43099bb |
chore: refactor Button API so that it can be used a standard button (#46880)
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
ChloeGarciaMillerand
|
3701302b84 |
fix(design system documentation): remove unwanted horizontal scroll caused by separator styles (#46584)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Fix the design system documentation in UI Patterns/ Form section. ## What is the current behavior? The form panels have horizontal scrolling due to the style of the separators <img width="2107" height="1255" alt="260602_before" src="https://github.com/user-attachments/assets/3714e751-425f-4f97-82f5-9d55e357a8eb" /> The MultiSelector components originally used a complex style, which has been simplified without affecting the visual appearance. ## What is the new behavior? The style of the MultiSelector components has been simplified. There is no longer any horizontal scrolling in the form panel. <img width="2107" height="1255" alt="260602_after" src="https://github.com/user-attachments/assets/c59da9c5-d383-47d8-9644-b7993417b6ca" /> ## Additional context The style has not been changed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Standardized separator layout in the form patterns side panel to use full-width spacing, improving visual consistency and alignment across panels. * Relaxed the multi-selector trigger width constraint so it now fills available space, allowing more flexible and cohesive layout behavior without altering form behavior or validation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> |
||
|
Gildas Garcia
|
1150d32462 |
fix: number inputs does not allow some editions (#46538)
## Problem Because we have controller inputs and zod validation on numbers, many of them cannot be cleared correctly as deleting their value resets it to `0`. ## Solution Update the `Input` component to allow those editions by always storing and displaying the user entered value ## How to test - Open the webhook page and add/edit one - Clear its timeout value and observe that it is not reset to `0` - Same for: - Database network restrictions - API settings max rows - Disk size modal <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized numeric form input handling across examples, settings, and modals — inputs now rely on form bindings and schema coercion for consistent parsing and simplified behavior. * **Chores** * Added form resolver utilities and a user-event testing library to development dependencies. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Francesco Sansalvadore
|
e79f0d1dd1 |
feat(design-system): add Markdown component to ui-patterns (#46325)
## What kind of change does this PR introduce? Add `Markdown` component - as a ui-pattern - docs in design-system <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a Markdown UI pattern with full documentation and a docs sidebar entry. * Markdown component supports composable renderers, optional lazy syntax highlighting, and customizable element overrides. * Added many interactive examples (full demo, headings, paragraphs, lists, links, inline code, blockquotes, code blocks, tables, images, horizontal rules) plus Quote and Avatar demos. * **Documentation** * New MDX guide detailing usage, props, and customization previews. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46325?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 --> |
||
|
Danny White
|
55ee3e0f2c |
feat(ui-patterns): add CollapsibleCardSection component (#46250)
## What kind of change does this PR introduce? New shared component + docs. ## What is the current behavior? `AdvancedConfiguration` and `InternalOnlyConfiguration` in the New Project form each contain bespoke `<Collapsible>` markup. There's no reusable collapsible section component available to other card/panel forms. ## What is the new behavior? - Extracts a shared `CollapsibleCardSection` into `packages/ui-patterns`, exported via `ui-patterns/CollapsibleCardSection` - Refactors `AdvancedConfiguration` and `InternalOnlyConfiguration` to use it - Adds design system docs with a live demo at `/docs/fragments/collapsible-card-section` This is a prereq for #45707 and #46187, which both consume this component. | Example Usage | | --- | | <img width="1464" height="500" alt="CleanShot 2026-05-22 at 15 20 38@2x" src="https://github.com/user-attachments/assets/5b88ef8d-3f9a-4454-b246-5bbaf53e027a" /> | ## To test - [ ] Check that [the Design System page](https://design-system-git-dnywh-collapsible-card-section-supabase.vercel.app/design-system/docs/fragments/collapsible-card-section) makes sense - [ ] Check that the [new project form](https://studio-staging-git-dnywh-collapsible-card-section-supabase.vercel.app/dashboard/new/) collapsible sections work as expected <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Introduced CollapsibleCardSection component as a reusable UI pattern for collapsible card-based content with customizable title, description, and open state. * Refactored project configuration interfaces to use the new component for improved visual consistency. * **Documentation** * Added comprehensive documentation with interactive examples and multiple usage patterns for CollapsibleCardSection. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46250?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> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Danny White
|
331278bfe4 |
feat(studio): add async handling to AlertDialog actions (#45960)
## What kind of change does this PR introduce? Feature, bug fix, and docs update. Addresses the AlertDialog async action behaviour discussed in Slack and follow-up PR feedback. ## What is the current behavior? `AlertDialogAction` delegates directly to Radix, so confirm actions close the dialog immediately on click. Async mutation flows have to use `asChild` with `event.preventDefault()` and a custom loading button to keep the dialog open while work is in flight. ## What is the new behavior? - `AlertDialogAction` now accepts async handlers and a controlled `loading` prop. Promise-returning actions keep the dialog open, show the existing Button loading state, disable cancel/dismissal while pending, close on success, and stay open on rejection. - Existing workaround usages in Studio have been migrated to the direct action API (see 'To test' callsite list below) - design-system docs now include async action examples and `AlertDialogBody` guidance for inline feedback https://github.com/user-attachments/assets/1af66410-e9f9-4231-9c6d-fe650bd717a4 ## Additional context - [ ] Once #45572 is rebased onto this change, `ResetTemplateDialog` should use `AlertDialogAction loading={isResettingTemplate}` with a promise-returning reset handler instead of a plain loading `Button` in `AlertDialogFooter`. ## To test - [x] On Studio API Keys settings, use a project with no publishable or secret API keys, click the “Create API keys” banner action, and confirm the Alert Dialog stays open with loading until the default publishable and secret keys are created. - [x] Delete a JIT database access rule and confirm the Alert Dialog stays open with loading until deletion succeeds, and stays open with inline feedback if it fails. - [x] With temporary access disabled and existing rules configured, enable temporary access and confirm the “This will activate existing rules” Alert Dialog stays open with loading until the configuration update succeeds, and stays open with inline feedback if it fails. - [x] Disable external replication and confirm the Alert Dialog stays open with loading until the mutation succeeds. - [x] Enable Index Advisor and confirm the Alert Dialog stays open with loading until the mutation succeeds, and stays open with inline feedback if it fails. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Alert dialogs support async actions with built-in loading, dismissal blocking while pending, and preserved dialog on error. * Two interactive examples demonstrating async success and error flows. * **Improvements** * Dialogs now surface inline error messages and consistent loading/confirm behavior across flows (create keys, replication, JIT DB access, index advisor). * Minor UI refinements for action controls. * **Documentation** * Docs updated with async-action guidance and inline-error recommendations. * **Tests** * New test suite validating async dialog behaviors. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45960) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> |
||
|
Gildas Garcia
|
31c8601201 |
Chore/migrate modals 1 (#46216)
## Problem We still use the deprecated `Modal` component in many places. ## Solution Migrate to the new `Dialog` component. Removed the design system page that was missing anyway: https://supabase.com/design-system/docs/fragments/modal This PR focuses on the design system and docs related components. ## How to test - Docs videos: - prod: https://supabase.com/docs/guides/auth - staging: https://docs-git-chore-migrate-modals-1-supabase.vercel.app/docs/guides/auth - Feedback modal: not sure how to show it on staging but it should look identical - Privacy settings: not sure how to show it on staging but it should look identical - `PopupFrame`: this one is not used anywhere AFAIK. If confirmed I could delete it. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Chores** * Removed Modal component documentation entries and example patterns from the design system. * Migrated internal modal and dialog implementations to use the Dialog component suite for standardized behavior and improved consistency across the application. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46216?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 --> |
||
|
Saxon Fletcher
|
f0afc5948b |
page layout patterns (#46126)
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 --> |
||
|
Gildas Garcia
|
243e079a2c |
chore: remove _Shadcn_ suffix from Command components (#46153)
## Problem The `_Shadcn_` suffix isn't needed anymore on `Command` components ## Solution - Remove the `_Shadcn_` suffix - Simplify UI package exports - Apply prettier <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Simplified command component imports and exports across the UI library by removing internal naming aliases and adopting direct component references. Updated the public UI package barrel export to use wildcard re-exports for cleaner API surface. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46153?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 --> |
||
|
Gildas Garcia
|
224dbb09bb |
chore: rename CommandMenu internal components to avoid conflicts with base shadcn ones (#45996)
## Problem The `ui-patterns/CommandMenu` exposes internal components that have the same names as the base shadcn components they wrap. This create confusion about which one to use and forces us to expose the base ones with the `_Shadcn_` suffix. ## Solution Rename those internal components to have `CommandMenu` in their names to make it clearer they are meant to be used with `CommandMenu`. We will then rename the shadcn base ones to remove the suffix. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Refactor * Standardized Command Menu component naming across the design system for improved consistency and clarity. Updated component names: `CommandInput` → `CommandMenuInput`, `CommandList` → `CommandMenuList`, `CommandItem` → `CommandMenuItem`, `CommandEmpty` → `CommandMenuEmpty`, and `CommandGroup` → `CommandMenuGroup`. Updated public API exports, internal subpath references, all examples within the registry, and implementations across documentation, studio, and application interfaces. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45996) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
8577b5fe77 |
chore: remove <Accordion> _Shadcn_ suffix (#46107)
## Problem The `_Shadcn_` suffix isn't needed anymore on Accordion components ## Solution - Remove the `_Shadcn_` suffix - Simplify UI package exports - Apply prettier <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated accordion component exports and imports to use unified naming conventions across the codebase, improving consistency for developers using the UI library. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46107?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 --> |
||
|
Gildas Garcia
|
aedd91a9bb |
chore: remove <HoverCard> _Shadcn_ suffix (#45987)
## Problem The `_Shadcn_` suffix isn't needed anymore on `HoverCard` components ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized hover-card component usage across the apps and design system for consistent behavior and markup. * No user-facing changes — hover previews, tooltips, snippet/template previews, and code hover panels retain the same appearance and interactions. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45987) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
426f150e02 |
chore: remove <Breadcrumb> _Shadcn_ suffix (#45984)
## Problem The `_Shadcn_` suffix isn't needed anymore on breadcrumb components ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized breadcrumb component exports across the codebase by removing internal aliasing and using direct component exports. No UI, behavior, or public API changes; end-user experience unchanged. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45984) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
5d97339d41 |
chore: remove <Select> _Shadcn_ suffix (#45988)
## Problem The `_Shadcn_` suffix isn't needed anymore on `Select` components ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Updated internal component architecture to standardize and simplify the codebase. These changes improve code maintainability and consistency across the application without affecting existing functionality or user experience. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
8c6d5036ea |
chore: remove <Label> _Shadcn_ suffix (#45986)
## Problem The `_Shadcn_` suffix isn't needed anymore on label component ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized Label usage across the codebase by removing the legacy alias and using the direct Label export from the UI package consistently. * **Documentation** * Updated component examples and docs to use the standardized Label component in usage snippets and demos. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45986) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
d0fd4478c0 |
chore: migrate Popover usages to Shadcn components (#45980)
## Problem We have multiple Popover components ## Solution - [x] migrate Popover usages to Shadcn components - Migrated JSON and text editor in the `TableEditor` (inline row edition) - Migrated the template popover in the logs explorer templates page - [x] remove `_Shadcn_` suffix from Popover components (renaming + prettier) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Unified popover implementation across the app and design system; dropdowns, calendars, menus and tooltips now use a consistent popover API with no visual or interaction changes. * **Chores** * Minor prop typing update for the logs date-picker to align with the consolidated popover content type. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45980) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
4e86c39ea1 |
chore: remove <ContextMenu> _Shadcn_ suffix (#45971)
## Problem The `_Shadcn_` suffix isn't needed anymore on `<ContextMenu_Shadcn_>` and related components ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced legacy context-menu component variants with the unified UI context-menu components across the app for consistent rendering and imports; behavior and menu content remain unchanged. * **Tests** * Updated a test mock to track the unified context-menu component mount count. * **Chores** * Simplified UI package re-exports to expose the canonical context-menu symbols. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45971) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
0713a1efc1 |
chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)
## Problem Now that we migrated old components to their new shadcn alternatives, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove it <img width="659" height="609" alt="image" src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f" /> |
||
|
Gildas Garcia
|
5845ef13f0 |
chore: remove <Toggle> _Shadcn_ suffix (#45970)
## Problem The `_Shadcn_` suffix isn't needed anymore on `<Toggle__Shadcn_>` ## Solution Remove it. No other changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Refactor** * Updated Toggle component examples and standardized exports * Simplified export structure for improved consistency * All existing Toggle component functionality maintained <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45970) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
09fa2b8fc1 |
Clarify alert and collapsible design-system patterns (#45863)
## What kind of change does this PR introduce? Docs update and design-system component taxonomy cleanup ## What is the current behavior? The design-system docs conflate low-level shadcn primitives with product-level alert patterns. Collapsible documentation previews the alert-specific wrapper, and the alert/collapsible relationship is unclear ## What is the new behavior? - Documents Alert and Collapsible as low-level atom components - Moves the alert-styled expandable wrapper into `ui-patterns/expandable-alert` as `ExpandableAlert` - Documents Expandable Alert as a Fragment Component next to Admonition - Updates the Session Timeout modal to import `ExpandableAlert` from `ui-patterns/expandable-alert` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * `CollapsibleAlert` component is now available for alert-styled expandable content. * **Documentation** * Updated component documentation to clarify when to use `Alert`, `Collapsible`, `Admonition`, and `CollapsibleAlert`. * Added comprehensive documentation for `CollapsibleAlert` with usage examples and variant options. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45863) <!-- review_stack_entry_end --> <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> |
||
|
Danny White
|
04c9fb7c3e |
chore(design-system): redo safer Admonition updates (#45618)
## What kind of change does this PR introduce? Feature and design-system update. Resolves DEPR-551. This is a narrower redo of #45302 after the revert in #45535. ## What is the current behaviour? The reverted implementation made Admonition more flexible, but it also changed Studio callsites, touched shared Alert styling, renamed the design-system Tailwind config, and changed Docs-facing content/API assumptions in a way that broke production docs static generation. ## What is the new behaviour? Admonition now supports description-only content, children-only content, optional `title`, legacy `label`, and `type="success"` without touching `apps/docs/content/**` or shared Alert styling. `title` wins over `label` when both are provided. The runtime component props stay backwards-compatible for existing MDX and Studio usage, while `AdmonitionStrictProps` captures the stricter new-usage contract for tests and future callsites. The design-system docs and registry include description-only and success examples, and the Admonition tests cover the rendering paths that broke production previously. | After | | --- | | <img width="1668" height="1768" alt="CleanShot 2026-05-06 at 17 35 13@2x" src="https://github.com/user-attachments/assets/1c00ea7f-e3ca-45eb-8af9-3536b657c341" /> | ## Additional context These things that were in #45302 have been left out (unless checked): - [ ] Studio callsite rewrites from title/label to description - [ ] Shared Alert text-colour changes - [ ] Design-system Tailwind config rename - [ ] Design-system global CSS changes - [ ] Any docs content migration or label deprecation - [ ] Any production docs workaround <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added success admonition variant with dedicated styling and icon. * Introduced description-only admonition example. * **Documentation** * Expanded admonition guidance on title vs description usage and best practices. * Added example sections showcasing description-only and success variants. * **Tests** * Added comprehensive tests covering admonition variants and rendering/precedence behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
b554f58106 |
chore: migrate Input usages to Shadcn components (#45429)
## Problem We want to reduce the code we ship and maintain. ## Solution - Migrate old `Input` usage to the new Shadcn `input` This PR focuses on: - DevToolbar - design-system examples - `www` usages - `docs` usages ## Screenshots ### Docs: OAuth Apple Before: <img width="613" height="508" alt="image" src="https://github.com/user-attachments/assets/1d2d7726-cc5e-471f-a2c2-995b9d7f70ee" /> After: <img width="606" height="530" alt="image" src="https://github.com/user-attachments/assets/ca4f522f-de9c-4edf-966b-70cad5015d0c" /> NOTE: Also used the `DataInput` for the secret once the inputs are filled. ### Docs: Extensions Before: <img width="596" height="161" alt="image" src="https://github.com/user-attachments/assets/16d2f548-90dc-4987-9954-7c47ac58e76e" /> After: <img width="604" height="227" alt="image" src="https://github.com/user-attachments/assets/62c74102-98c6-47a6-b19b-cbf67dfad68f" /> ### WWW: Blog search Before: <img width="971" height="417" alt="image" src="https://github.com/user-attachments/assets/efb0307e-60b5-4d8f-9823-c8b8996cdf32" /> After: <img width="964" height="403" alt="image" src="https://github.com/user-attachments/assets/2dc0decd-b773-4bc6-9a72-c43f352f8cbf" /> ### WWW: Blog author search Before: <img width="953" height="337" alt="image" src="https://github.com/user-attachments/assets/1f629704-ab7d-4e4b-878e-1838ab16037f" /> After: <img width="1028" height="341" alt="image" src="https://github.com/user-attachments/assets/d8d54dcb-3c00-46ea-b97f-55c16cda917f" /> ### WWW: Assistant demo Before: <img width="421" height="715" alt="image" src="https://github.com/user-attachments/assets/bcc4a591-d53c-4202-acf8-2b3d6cfd52d2" /> After: <img width="435" height="731" alt="image" src="https://github.com/user-attachments/assets/8a57c5da-5c9e-474d-a89e-2835d3498aef" /> ### WWW: Integrations Before: <img width="740" height="599" alt="image" src="https://github.com/user-attachments/assets/cf3d3d8a-b247-4e20-b47d-11976ca49c57" /> After: <img width="911" height="492" alt="image" src="https://github.com/user-attachments/assets/dcb5b6e8-f4e2-4801-b390-352390a0b486" /> ### WWW: features Before: <img width="1098" height="491" alt="image" src="https://github.com/user-attachments/assets/ea3645c5-df03-4eb9-b28c-41018e01c41e" /> After: <img width="976" height="479" alt="image" src="https://github.com/user-attachments/assets/4439a38e-6342-42cd-a859-1e599a8cf0f4" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Adjusted input widths and spacing for more consistent search and form layouts. * **Refactor** * Standardized input components across apps and docs, and reimplemented search controls as composed input groups with dedicated icon/action areas. * **Chores** * Removed a deprecated legacy input variant along with its legacy styles and tests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Jeremias Menichelli
|
c49eb8bb7d | Revert "chore(studio + design-system): more flexible Admonition" (#45535) | ||
|
Danny White
|
5bfbae22a9 |
chore(studio + design-system): more flexible Admonition (#45302)
## What kind of change does this PR introduce? Feature and design-system cleanup. Resolves DEPR-551. ## What is the current behavior? Admonition supports several overlapping content shapes, but it previously did not support a first-class success state or description-only usage cleanly. Title-only usage was also possible, which made some callouts read like floating headings without body copy. Docs MDX Admonitions could also pick up prose spacing around rich children, while the design-system Tailwind config emitted an ESM/CommonJS warning in the design-system app. ## What is the new behavior? Adds a `success` Admonition type, description-only support, and a stricter content contract: `title` or legacy `label` now requires either `description` or `children`. Existing title-only Studio callsites have been converted to description-only callouts. The design-system docs now include examples for description-only and success Admonitions, plus guidance for `title`, `description`, `children`, and legacy `label` usage. This also tightens Admonition body spacing so rich MDX children keep docs link/code styling without inheriting excessive prose margins, and renames the design-system Tailwind config to `tailwind.config.cjs` so it matches its CommonJS syntax. Warning and destructive alerts now explicitly set `text-foreground`, preventing nested Admonition titles from inheriting muted form-description colour after the Tailwind v4 cascade changes. | Before | After | | --- | --- | | <img width="1818" height="388" alt="Image" src="https://github.com/user-attachments/assets/283a1853-348a-4d74-a408-013957350e5e" /> | <img width="1380" height="462" alt="Image" src="https://github.com/user-attachments/assets/e5761e8e-3697-423b-805b-45110205099a" /> | | <img width="1398" height="550" alt="CleanShot 2026-04-28 at 15 12 41@2x" src="https://github.com/user-attachments/assets/982694d9-5461-4362-8bae-a6e2b4c60e8b" /> | <img width="1402" height="450" alt="CleanShot 2026-04-28 at 15 13 09@2x" src="https://github.com/user-attachments/assets/0b1257c4-6b58-4c39-a182-4861a9e378ee" /> | | <img width="1640" height="716" alt="CleanShot 2026-04-28 at 15 17 25@2x" src="https://github.com/user-attachments/assets/a5be4d5f-2bf7-4dc2-b396-56129fe64ec9" /> | <img width="1630" height="716" alt="CleanShot 2026-04-28 at 15 16 00@2x" src="https://github.com/user-attachments/assets/0d589252-aaf8-4efc-9d81-15ec4f99ec61" /> | | Design System Docs | | --- | | <img width="1646" height="1864" alt="CleanShot 2026-04-28 at 14 59 15@2x" src="https://github.com/user-attachments/assets/12d13595-8972-4fb2-a04a-fb916388ebb6" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a "success" admonition variant and new example previews demonstrating success and description-only usages. * **Documentation** * Clarified admonition guidance: when to use title vs description vs children; added example sections for short callouts and success messages. * **Refactor** * Standardized UI by moving short/advisory text into description across the app and harmonized trailing punctuation. * **Style** * Ensured warning/destructive admonitions use consistent foreground text styling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
56de26fe22 |
chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@gmail.com> |
||
|
Gildas Garcia
|
c65935d0d3 |
chore: fix multi-select to ensure it works inside dialogs (#45369)
## Problem The current [multi-select](https://supabase.com/design-system/docs/fragments/multi-select) does not work inside a dialog. The dropdown list is hidden. ## Solution Fix it using the `Popover` component which also handle repositioning above the input when there's not enough space below. ## How to test - [Demo on design-system](https://design-system-git-chore-fix-multi-select-supabase.vercel.app/design-system/docs/fragments/multi-select#inside-a-dialog) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Added a new example demonstrating multi-select usage within a dialog component with inline search capabilities. * Enhanced multi-select component with improved stability and interaction handling. * **Documentation** * Added "Inside a dialog" section to multi-select documentation with usage guidelines for inline search in dialog contexts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
