mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
cli/ref-doc
1315
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
2759b13efc |
refine display settings ui (#49466)
<img width="392" height="343" alt="image" src="https://github.com/user-attachments/assets/4a17e3ad-364d-45c6-9770-0f937ad18418" /> ## 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? Studio UI refinement. ## What is the current behavior? The Explorer result settings popover uses a spacious vertical layout with mixed control heights and local active-state overrides. ## What is the new behavior? - Condenses the result settings into the horizontal form layout used by compact settings surfaces. - Uses base ToggleGroup, Select, MultiSelector, and Switch component variants. - Adds shared tiny Toggle and MultiSelector sizes so the compact controls render at 26px. - Uses the accent token for shared toggle active states. - Keeps the chart configuration behavior and disabled states intact. ## Verification - UI and UI Patterns focused tests - UI, UI Patterns, and Studio typechecks - Studio ESLint - Local visual verification against the supplied prototype <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Chart-specific configuration options now appear only when chart view is selected, keeping display settings focused and relevant. * Updated chart controls provide clearer options for scale, cumulative values, and labels. * Added compact sizing for multi-select fields and toggles to improve alignment with other form controls. * Refined toggle styling and adjusted small-size dimensions for a more consistent interface. * **Tests** * Added coverage for compact multi-select and toggle sizes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com> |
||
|
Ali Waseem
|
310b29c37b | fix(ui): anchor radio group bubble inputs to their group (#49494) | ||
|
Miranda LimonczenkoandClaude Opus 5
|
3178da7f4d |
fix(ui): give enabled checkboxes a pointer cursor (#49408)
Closes FE-4249
## Problem
The `Checkbox` primitive sets `disabled:cursor-not-allowed` but never
sets a base cursor. It renders a Radix `button`, and a UA `button {
cursor: default }` rule beats an inherited value from any parent, so an
enabled checkbox shows an arrow while being clickable. The `disabled:`
variant only makes sense if a base cursor exists.
A parent cannot fix this. `/features` tried `cursor-pointer!` on a
wrapper `div` with a sibling checkbox and label. Measured:
| Element | Computed cursor |
| -- | -- |
| wrapper `div` | `pointer` |
| `label` | `default` |
| checkbox `button` | `default` |
A declaration targeting an element always beats an inherited value, so
`!important` on the parent changed nothing. Only the bare gap between
the two children showed a pointer.
## Solution
Add the base `cursor-pointer` that the existing `disabled:` variant
already implied.
Split out of #49346 so this shared-package change gets reviewed on its
own. It affects www, Docs and Studio.
## Manual testing
**www**
1. Open
[/features](https://zone-www-dot-com-git-ui-checkbox-pointer-cursor-supabase.vercel.app/features).
2. Hover any filter checkbox in the left sidebar. The cursor is a
pointer.
**Studio**, since this is a shared primitive. Needs Vercel SSO and a
logged-in account.
3. Open the [Studio
preview](https://studio-staging-git-ui-checkbox-pointer-cursor-supabase.vercel.app)
and pick any project.
4. Go to Table Editor and click the funnel icon in the left sidebar.
5. Hover the checkboxes in the "Filter entity types" popover. Each shows
a pointer.
**Disabled state**, which this PR must not change.
6. In devtools, add `disabled` to any checkbox. The cursor becomes
`not-allowed`.
**Docs has nothing to check.** `apps/docs` contains no `Checkbox` usage.
A runtime sweep found zero checkboxes on the troubleshooting page with
its Products filter open, and on `/docs`,
`/docs/guides/database/overview` and `/docs/guides/auth`. Its
[preview](https://docs-git-ui-checkbox-pointer-cursor-supabase.vercel.app/docs)
builds only because `packages/ui` is a dependency.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Style**
* Updated checkbox controls to display a pointer cursor, making them
feel clickable.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
|
||
|
Danny White
|
5f9ce727c0 |
fix(ui): systematise control surface fills and hover borders (#48887)
## What kind of change does this PR introduce? Bug fix / design-system token hygiene for form and selector chrome. ## What is the current behavior? After opaque default-button fills, text fields, selects, and selector tiles drifted apart: inputs and selects mixed ad-hoc washes, hover borders bounced between `border-stronger` / `border-foreground-muted`, invalid fields had no hover step, and composites like InputGroup leaked inner hover borders. Follow-up to #48837 (opaque button fills) where Select rest still felt darker than Input on forms such as scoped access tokens. ## What is the new behavior? Named control roles and one interactive border: | Role | Fill | Rest border | Hover / focus / open | | --- | --- | --- | --- | | Field (sunk) | `bg-field` | `border-control` | `border-control-hover` | | Raised control | `bg-control-raised` | `border-strong` | `border-control-hover` | | Overlaying action | card → popover | `border-strong` | `border-control-hover` | | Invalid field | `bg-destructive-200` | `border-destructive-400` | `border-destructive` | - `--field` / `--control-raised` / `--border-control-hover` live in `semantic.css` (source of truth for roles; README points there) - Input / Textarea / InputGroup / legacy TextArea use the field ladder (incl. invalid hover) - Select and empty MultiSelect use raised; filled MultiSelect sinks to field - Default + dashed Button, CommandMenu trigger, and radio card/stacked/large use `border-control-hover` - Studio selector tiles aligned: Connect mode, role impersonation, DuckLake modes, compute “Contact us” | Before and After | | --- | | <img width="1576" height="759" alt="Access Tokens Account Supabase" src="https://github.com/user-attachments/assets/4bbe8b2b-a31a-4d63-80ba-04a1a8a5609d" /> | | <img width="1576" height="759" alt="Access Tokens Account Supabase" src="https://github.com/user-attachments/assets/92271223-4103-4cc6-a7c0-9e4ff71cce30" /> | ## Additional context `--control-raised` aliases `--card` today (role name so fill can diverge later). Rest `border-control` / `border-strong` both still map to `--input` via compat; the shared interactive step is `--border-control-hover`. ## To test 1. **[Account → Access Tokens](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/account/tokens)** Open Generate / New scoped token. Side-by-side Input, Select, RadioGroupStacked, MultiSelect. Confirm sunk vs raised fills, shared hover border, MultiSelect flips to sunk once a value is selected. Leave a required field empty to check invalid rest → hover → focus. 2. **[Org → Projects](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/org/_)** Hover the dashed Status filter. Hover default / filled filter buttons when active. Confirm hover/open borders match. 3. **[Project → Connect](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/project/_)** Open Connect from the header. Mode grid tiles: hover + selected borders match radio cards (no old muted-foreground ring). 4. **[Project → Compute](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/project/_/settings/infrastructure)** (optional) Compute size radios + “Contact us” tile hover. |
||
|
Danny White
|
6c0439ace8 |
fix(ui): opaque default button hover fills (#48837)
## What kind of change does this PR introduce? Bug fix for translucent default Button (and related control) fills that show through stacked content on hover. Resolves [DEPR-636](https://linear.app/supabase/issue/DEPR-636/report-snippet-cell-expand-button-becomes-transparent-on-hover). ## What is the current behavior? Default `Button` hover uses `bg-selection`, and dark-mode rest uses `bg-muted`. After the colour system migration those legacy aliases point at translucent `--accent` / `--muted`, so hover punches through whatever sits behind the button (SQL Editor / Reports cell expand, sticky columns, skip-to-content, etc.). | Before: Light | Before: Dark | | --- | --- | | <img width="491" height="75" alt="CleanShot 2026-08-03 at 09 12 26@2x" src="https://github.com/user-attachments/assets/20e33ba9-74c5-47eb-aced-ac932a0059fa" /> | <img width="205" height="54" alt="21257" src="https://github.com/user-attachments/assets/a2c9f092-18a7-4a4d-a49b-6e019e50895f" /> | ## What is the new behavior? Default Button, Select, MultiSelect, and the CommandMenu trigger use opaque elevation tokens (`bg-background dark:bg-card`, `hover:bg-popover`). SkipToContent drops its opaque-plate workaround. No global `compat.css` alias remaps. | After: Light | After: Dark | | --- | --- | | <img width="466" height="110" alt="CleanShot 2026-08-07 at 16 09 59@2x" src="https://github.com/user-attachments/assets/6410cb58-b37c-427f-a0ff-7b223a7f3f51" /> | <img width="474" height="132" alt="CleanShot 2026-08-07 at 16 08 53@2x" src="https://github.com/user-attachments/assets/575c56d1-8ee5-4eb5-8f08-e4b5af8520f0" /> | ## Additional context - Overlay tokens (`--muted` / `--accent` / `--tertiary`) stay intentional for washes on solid surfaces. Controls that can sit over content should use solid elevation tokens (`card` / `popover`) instead. - Same root cause as the workarounds in #47996 and #48314. - The “View full cell content” control lives in SQL Editor results / Report `QueryBlock` (`ResultCell`), not Table Editor. It only renders when the value is an object/array, contains a newline, or is longer than 60 characters, and it stays `opacity-0` until you hover the cell. ## To test Short path in Studio (light and dark): 1. **Expand button over cell text (clearest repro)** – SQL Editor, run: ```sql select repeat('x', 80) as name; ``` Hover the result cell. The expand control should appear over the text; hover the button itself and confirm the fill is solid (no `x`s showing through). Same control is what Report snippets use. 2. **Any default Button** – Top nav **Connect** (or any bordered default button). Hover: solid fill. 3. **Select** – Project picker or a Settings form select. Trigger hover / open fill stays opaque. 4. **Command menu trigger** – Hover the header search / Cmd-K control; match default Button. 5. **Skip to content** – Tab once on Studio. Skip link hover stays solid over the page behind it. 6. **Editor tabs regression** – SQL / Table Editor tab strip should still look grey in light mode (not washed white). |
||
|
Danny White
|
9ab06ef9c3 |
fix(ui): restore normal alert text wrapping (#48840)
## What kind of change does this PR introduce? UI bug fix. ## What is the current behavior? `AlertDescription` applies balanced or pretty text wrapping by default. Alert and Admonition copy can redistribute words across lines and leave unnatural ragged edges. ## What is the new behavior? `AlertDescription` uses normal text wrapping by default. Consumers can still opt into balanced wrapping through `className`. | Before | After | | --- | --- | | <img width="1484" height="216" alt="34098" src="https://github.com/user-attachments/assets/6ae828f1-d88d-4c25-af79-fc64388558f3" /> | <img width="1274" height="264" alt="CleanShot 2026-08-07 at 17 18 52@2x" src="https://github.com/user-attachments/assets/bb437bff-206f-4bb7-b5e6-650d5f08f839" /> | # To test Use the Docs and Design System preview deployments: - [Self-hosted Functions](https://supabase.com/docs/guides/self-hosting/self-hosted-functions#using-an-env-file-recommended): check the caution under **Using an env file (recommended)**. The text should fill each line naturally. - [Configure Reverse Proxy and HTTPS](https://supabase.com/docs/guides/self-hosting/self-hosted-proxy-https#set-up-https): check the three titled notes under **Set up HTTPS**, then the caution under **Self-signed certificates (development only)**. - [Design System Admonition examples](https://supabase.com/design-system/docs/fragments/admonition): scan the description-only, titled, and rich-content examples at desktop and a narrow width. Spacing should be unchanged. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved alert description text wrapping for more consistent display across screen sizes. * Preserved support for custom text-balancing styles. * **Tests** * Added coverage verifying alert description attributes, default styling, and consumer-supplied text-balancing classes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon FletcherandDanny White
|
ec24d69369 |
Browser compatibility for colours (#47801)
Replaces abs and from for foreground colours to potentially improve browser compatibility <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved semantic color calculations for broader browser compatibility. * Refined foreground, muted, and tertiary text colors for more consistent theme rendering. * Improved surface overlay contrast across different tones. * Fine-tuned the light theme’s link color brightness for better visual balance. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> |
||
|
Miranda LimonczenkoandClaude Sonnet 5
|
e7d9c88cbc |
fix(docs): resolve remaining heading-order issues found in Pass 2 diagnostic (#48664)
## Problem After merging [#48456](https://github.com/supabase/supabase/pull/48456) (shared components) and [#48459](https://github.com/supabase/supabase/pull/48459) (per-page content fixes), a follow-up diagnostic pass found 22 remaining heading-order violations, logged as Pass 2 in the [triage report](https://app.notion.com/p/supabase/Playwright-E2E-Triage-Reports-3ab5004b775f81e3bc60d058fa5a02c1). None of them were caught by the earlier fixes because they came from places that scan didn't check: shared partials, raw HTML heading tags written directly in MDX, and a couple of shared/interactive components rendering hardcoded heading levels. ## Solution - `_partials/social_provider_setup.mdx`: `#### Local development` → `###`, matching the `##` that always precedes it on all 14 social-login pages. - `guides/database/functions.mdx` and `guides/integrations/vercel-marketplace.mdx`: replaced raw `<h4>`/`<h5>` tags with correctly-nested real headings (`### Planets`/`### People`; `#### Deploy a Next.js app...`) — no styling workarounds needed since they nest naturally one level below their parent section. - `auth/quickstarts/{nextjs,react-native,react,astrojs}.mdx`: these 4 pages had no heading at all before the embedded `_partials/api_settings.mdx` partial's own `### Get API details` heading, so added a `## Quickstart` heading above the walkthrough to give it a valid parent. - `packages/ui`'s `Accordion` component: Radix's `AccordionPrimitive.Header` renders as an unconditional `<h3>` regardless of where the accordion is used. That's shared across Studio, www, and design-system, not just docs, and surfaced on docs' vendor-agnostic telemetry page. Now rendered via `asChild` onto a plain `div` instead, since a generic accordion has no way to know what heading level (if any) is valid in a given page. - SQL-to-REST translator tool (`/docs/guides/api/sql-to-rest`): its `Assumptions`/`FAQs` section labels were hardcoded `<h3>` with no `h2` anywhere on the page. Converted to styled spans rather than promoting to a real `<h2>`, because real h1/h2/h3 tags in this codebase force a prose font-size that utility classes can't override — promoting the tag would have visibly changed its size. - `RealtimeLimitsEstimator` (embedded on both `postgres-changes` and `benchmarks`): its 3 section headings were hardcoded `<h4>`, but the two embedding pages need different levels (h3 vs h4) for that spot to be valid — no single correct heading level. Converted to styled spans, same pattern used throughout this project for components embedded at varying heading depths. ## Manual testing 1. Check out this branch and run `pnpm dev:docs`. 2. Visit `/docs/guides/auth/social-login/auth-github` (or any other provider page) and confirm the "Local development" callout under "Find your callback URL" still looks and reads the same. 3. Visit `/docs/guides/database/functions` → "Returning data sets" tab and confirm the "Planets" / "People" table captions still look the same. 4. Visit `/docs/guides/integrations/vercel-marketplace` → "Quickstart" → "Via template" and confirm the CTA card title still looks the same. 5. Visit `/docs/guides/auth/quickstarts/nextjs` (or react-native/react/astrojs) and confirm a "Quickstart" heading now appears above the walkthrough, and "Get API details" still renders correctly further down. 6. Run `pnpm dev:design-system` and open `/design-system/docs/components/accordion` — expand/collapse an item and confirm it still animates and looks identical; inspect the DOM and confirm the trigger's wrapper is a `div`, not an `h3`. 7. Visit `/docs/guides/api/sql-to-rest`, translate any query, and confirm the "Assumptions"/"FAQs" section labels still look the same. 8. Visit `/docs/guides/realtime/postgres-changes` and `/docs/guides/realtime/benchmarks`, scroll to the connection-limits calculator, and confirm its section labels still look the same on both pages. 9. (Optional, for a full re-check) Run `pnpm e2e:docs:a11y --all` against a deployed preview of this branch — only `/docs/guides/cli` (pre-existing 404, unrelated to headings) should fail; every other page should pass. Verified with a full Playwright run against a real preview deployment: **756 passed, 1 failed** (`/docs/guides/cli`, the pre-existing unrelated 404). Zero heading-order violations remain. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Documentation** - Added clearly labeled Quickstart sections to Astro, Next.js, React Native, and React authentication guides. - Improved heading hierarchy and formatting across social provider setup, database functions, and deployment documentation. - Updated estimator and SQL-to-REST section presentation for more consistent content structure. - **Bug Fixes** - Improved accordion trigger layout while preserving existing behavior, styling, accessibility, and icon display. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com> |
||
|
Danny White
|
e7796315d2 |
fix sheets stealing focus (#48521)
## What kind of change does this PR introduce? Bug fix. Resolves DEPR-539. ## What is the current behavior? When a focused child unmounts, Radix can move focus to the Sheet wrapper and break the expected tab order. Several callsites suppress the wrapper's tabindex individually. ## What is the new behavior? Sheet still focuses its first interactive child when opened, but the wrapper itself is no longer focusable by default. Callers can opt in with an explicit `tabIndex` when needed. ## Additional context ### Testing Compare this Studio experience on both this branch and `master`: 1. Open any project with an Edge Function. 2. Go to **Edge Functions**, open the function, then click **Test**. 3. Under **Headers**, click **Add Headers**. Click the first header key input, then Tab slowly through the header inputs and remove buttons. On `master`, focus can jump to the whole Sheet. On this branch, focus stays on the controls in order. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved keyboard focus behavior across sheets and panels. * Sheets now focus the first available interactive element when opened, without adding unnecessary focus targets. * Preserved support for programmatic focus and prevented focus from unexpectedly moving to the sheet when focused content is removed. * Updated authentication, integrations, connection, logging, storage, and other sheet interfaces consistently. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
d1e7c403ac |
fix(ui): align Admonition titles and docs link hover with prose (#48428)
## What kind of change does this PR introduce? UI bug fix. ## What is the current behavior? After the recent Admonition a11y refactor: - Titled Admonitions in MDX (blog and docs) could pick up large prose top margin on the title, or (after follow-ups) end up with a title much smaller than the body because the title was a `div` at `text-sm` while body `<p>`s took prose ~15px - Docs MDX links (including inside Admonitions) had a weak hover: prose only shifted underline colour Prior issues: - A couple of guide callouts bolded link text via `[**…**](…)` - Some funky Admonition formatting as called out in comments below ## What is the new behavior? - `AlertTitle` is a `<p>` with `!mt-0 mb-0.5 font-medium` (not an `h5` / bare `div`), so it does not break heading hierarchy and matches admonition body font-size under prose - Admonition uses `AlertTitle` again (though with `<p>` as explained above) and wraps MDX `children` in `AlertDescription` (same as `description`) - `Alert` / `AlertTitle` / `AlertDescription` get `data-slot` attributes; description keeps string→`<p>` wrapping, Studio density, plus `text-balance` - Docs link hover: typography `a:hover` and `MdxAnchor` now move text + decoration toward foreground (InlineLink-like), without stealing brand link colour via `text-inherit` - Content: remove accidental bold on oauth-scopes and multi-factor-authentication guide links | Before | After | | --- | --- | | <img width="1360" height="378" alt="CleanShot 2026-07-29 at 16 44 48@2x" src="https://github.com/user-attachments/assets/1aa98cb4-e691-428e-b7e2-a78afcdf518d" /> | <img width="1350" height="362" alt="CleanShot 2026-07-29 at 16 44 08@2x" src="https://github.com/user-attachments/assets/63c9c7df-c1c7-49c4-8fdb-0411ae251a71" /> | | <img width="1518" height="448" alt="CleanShot 2026-07-29 at 16 46 18@2x" src="https://github.com/user-attachments/assets/d618e138-fcd7-4a44-b16d-cb0ac5ba6b0e" /> | <img width="1524" height="424" alt="CleanShot 2026-07-29 at 16 46 30@2x" src="https://github.com/user-attachments/assets/dbc7710e-42c6-483c-b367-19b2ff3a6475" /> | | <img width="1524" height="598" alt="CleanShot 2026-07-29 at 16 47 15@2x" src="https://github.com/user-attachments/assets/c9c07f37-4e2b-40fa-bc90-c86a17e5ea32" /> | <img width="1530" height="584" alt="CleanShot 2026-07-29 at 16 47 39@2x" src="https://github.com/user-attachments/assets/806735f0-fa44-42e6-bd5a-127899d0bfc2" /> | ## To test **Docs** 1. [Functions quickstart](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/functions/quickstart): titled tip near the top. Title and body should be the same size, no giant gap above the title 2. [BYO MCP](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/ai-tools/byo-mcp): tip with links. Hover a link (text + underline should both go foreground) 3. [OAuth scopes](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/integrations/build-a-supabase-oauth-integration/oauth-scopes): note link is not bold 4. [Multi-factor authentication](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/platform/multi-factor-authentication): same, note link not bold **Blog** 5. [CLI v2 config as code](https://zone-www-dot-com-git-fix-admonition-alert-title-prose-supabase.vercel.app/blog/cli-v2-config-as-code): titled Admonitions. Title size matches body, no huge top margin **Other** 6. [Design system: Admonition](https://design-system-git-fix-admonition-alert-title-prose-supabase.vercel.app/design-system/docs/fragments/admonition): component reference 7. Studio (e.g. project Edge Functions secrets): Admonitions should stay compact `text-sm` outside prose. Preview: [studio-staging](https://studio-staging-git-fix-admonition-alert-title-prose-supabase.vercel.app) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * None * **Style** * Improved link decoration consistency (underline/hover) across internal and external documentation content, with safer external link handling. * **Bug Fixes** * Refined alert/admonition rendering for clearer title/description semantics and better spacing/text wrapping. * Updated documentation image rendering to avoid forwarding whitespace-only children and adjusted chart image layout. * **Tests** * Expanded assertions for alert/admonition structure and styling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
e558779969 |
Fix: RadioGroupCard focus state design (#48494)
Fix the `<RadioGroupCard>` focus state design Before: <img width="676" height="117" alt="image" src="https://github.com/user-attachments/assets/39849fd3-e6de-43dc-b4d7-67edcce3812d" /> After: <img width="741" height="167" alt="image" src="https://github.com/user-attachments/assets/13dad707-bc63-48da-8574-eb3d90b29625" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated radio group card selection styling for a cleaner, more consistent focus and checked-state appearance. * Added improved outline handling for radio group card items. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
6b14df7724 |
chore: Bump vulnerable deps (#48387)
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Updated Next.js, PostCSS, and tar package versions. * Added the required TypeScript native tooling where needed. * Refined package configuration and dependency ordering across the project. * Removed an unused empty dependency configuration. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
e74ccefbb9 |
fix(docs): add cursor-pointer to tabs and copy controls (#48380)
## 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? Bug fix / polish ## What is the current behavior? Some docs interactive controls (copy buttons, tab triggers) do not show a pointer cursor on hover, so they feel less clickable than surrounding links. Called out on https://github.com/supabase/supabase/pull/48318. ## What is the new behavior? Adds `cursor-pointer` in one sweep so related controls stay consistent: - Shared `TabsTrigger` in `packages/ui` (covers PromptPanel AI Prompt / CLI tabs, including the unselected tab) - PromptPanel copy button and Show more / Show less - Guides sidebar “Copy as Markdown” - Docs code block copy button ## To test Hover the controls below and confirm the cursor is `pointer` on both selected and unselected tabs, and on copy buttons. ### Docs Preview: https://docs-git-dnywh-docs-cursor-pointer-supabase.vercel.app/docs - Homepage setup prompt: [AI Prompt / CLI tabs + copy](https://docs-git-dnywh-docs-cursor-pointer-supabase.vercel.app/docs) - Quickstart prompt: [Show more / Show less + copy](https://docs-git-dnywh-docs-cursor-pointer-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs) - Guide sidebar + code block: [Copy as Markdown + code copy](https://docs-git-dnywh-docs-cursor-pointer-supabase.vercel.app/docs/guides/database/tables) ### Design system Preview: https://design-system-git-dnywh-docs-cursor-pointer-supabase.vercel.app/design-system - Shared tabs demo: [Account / Password triggers](https://design-system-git-dnywh-docs-cursor-pointer-supabase.vercel.app/design-system/docs/components/tabs) ### UI library Preview: https://ui-library-git-dnywh-docs-cursor-pointer-supabase.vercel.app/ui - Install command package-manager tabs (npm / pnpm / yarn / bun) + copy: [Password-based auth](https://ui-library-git-dnywh-docs-cursor-pointer-supabase.vercel.app/ui/docs/nextjs/password-based-auth) ### Studio (staging) Preview: https://studio-staging-git-dnywh-docs-cursor-pointer-supabase.vercel.app - Auth user panel: open a project → Authentication → Users → select a user → hover Overview / Logs (and related) tabs - Connect sheet: open Connect on a project → hover the install method tabs ### Studio (self-hosted) Preview: https://studio-self-hosted-git-dnywh-docs-cursor-pointer-supabase.vercel.app - Same `TabsTrigger` callsites as Studio staging (user panel / Connect sheet) ### WWW Preview: https://zone-www-dot-com-git-dnywh-docs-cursor-pointer-supabase.vercel.app - Blog chart tabs (`PGChart` → shared `TabsTrigger`): [Latency / Number of results / Average latency / Raw data](https://zone-www-dot-com-git-dnywh-docs-cursor-pointer-supabase.vercel.app/blog/postgres-full-text-search-vs-the-rest) (scroll to the Results section) ## Additional context Split out from #48318 so the homepage prompt polish stays focused. Prefer fixing the shared tab trigger rather than only the PromptPanel copy button, otherwise the copy control would show pointer while an unselected CLI tab would not. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Improved hover feedback across the docs UI by adding a pointer cursor to “Copy as Markdown,” code block copy and word-wrap controls, prompt copy buttons, and tab selectors. * Updated cursor styling consistently so interactive controls better communicate clickability. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
kemal.earth
|
67c983caef |
fix(design-system): small chart and metric card fixes (#48439)
## 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? This fixes the following: - Our `<MetricCard />` and `<LogsBarChart />` which use `<ChartTitle />` were rendering the wrong font style for the title. The `font-mono` class being overwritten by recent changes, this helps sort cascade so it renders correct. - In our design system, the warning variable for charts was rendering black, this should be fixed to be our warning yellow. - There was an odd padding on `<MetricsCard />` content area, meaning our line chart wasn't flush to the edges, this required a small extension to `twMerge` so it could resolve. Please have a look around studio in places we have charts to double check nothing is broken. Also compare live design system vs. this branch by checking Logs Bar Chart, Charts and Metrics Card pages. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined heading typography for more consistent font and weight styling. * Improved class merging for custom spacing utilities. * **Bug Fixes** * Adjusted composed chart Y-axis sizing for clearer layouts. * Improved warning color fallbacks in log bar charts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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
|
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
|
3d07613c2b |
fix(ui): restore text-contrast token (#48017)
## 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? Bug fix ## What is the current behavior? `text-contrast` / `text-foreground-contrast` resolve to `--primary-foreground`, which is always the darker of surface / foreground lightness (text for the green primary fill). In light mode that is near-black, so contrast text on inverted fills is wrong: on true black (`bg-black`) it disappears; on dark fills like `bg-red-900` it shows as a black icon instead of white. Visible regression on the design-system colour usage page: the `text-contrast` swatch only shows "Postgres" on hover. Regression from the colour system rewrite (#47288), which aliased `--foreground-contrast` → `--primary-foreground`. ## What is the new behavior? `--foreground-contrast` is defined again as a surface-based inverse of `--foreground` (light in light mode, dark in dark mode). Tailwind utilities `text-contrast` and `text-foreground-contrast` map to it. `--primary-foreground` is unchanged and still used for text on the primary fill. ## Additional context ### Callsites to test (light mode especially) | Where to look | What to check | |---|---| | [Design system → Colour usage](https://design-system-git-fix-text-contrast-token-supabase.vercel.app/design-system/docs/color-usage) | Under **Text**, the `text-contrast` swatch shows "Postgres" without hovering | | [Studio staging → Auth Users](https://studio-staging-git-fix-text-contrast-token-supabase.vercel.app/project/_/auth/users) → open any user | Boolean fields (e.g. confirmed): check/X on the black circle should be **white** (not missing) | | [Studio staging → Support new](https://studio-staging-git-fix-text-contrast-token-supabase.vercel.app/support/new) → upload a file | Red remove (`X`) badge should be a **white** X (prod currently shows black) | | [www → Contribute](https://zone-www-dot-com-git-fix-text-contrast-token-supabase.vercel.app/contribute) → apply at least one filter | Filter count badge: **white** number on black | | [Studio staging → Support link](https://studio-staging-git-fix-text-contrast-token-supabase.vercel.app/support/link) success state (after linking a ticket) | Check on the brand badge should use contrast text (light on brand in light mode) | `Announcement` (`text-foreground-contrast` dismiss icon) is not currently mounted in any app — covered by the design-system / token check above. |
||
|
Ivan Vasilov
|
24ce0ba5f8 |
chore: migrate repo to pnpm v11 (#48033)
## 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? Chore / dependency tooling update. ## What is the current behavior? The repo is pinned to pnpm 10.24.0. Closes https://linear.app/supabase/issue/FE-3673/migrate-the-repo-to-use-pnpm-v11. ## What is the new behavior? The repo is pinned to pnpm 11.13.1, pnpm v11 workspace settings are migrated to `allowBuilds`, and the Studio Dockerfile installs pnpm 11.13.1. ## Additional context Validated with `CI=true mise exec node@22 -- pnpm install --frozen-lockfile`, `mise exec node@22 -- pnpm run typecheck`, and `mise exec node@22 -- pnpm run lint`; full Prettier check still fails on existing generated docs/router files outside this migration. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Chores** * Updated tooling requirements (pnpm **11.13.1**, Node **>=22.13**) and aligned container build tooling accordingly. * Adjusted package manager behavior (scoped registry override, update notifications disabled) and workspace build/engine validation settings. * **Maintenance** * Updated `clean` scripts across apps/packages to remove only build/cache artifacts (no longer delete installed dependencies). * Reduced Turbo `clean` task output to **errors-only** for cleaner logs. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
6f19dfe18c |
fix(ui): bake explicit tabindex into interactive primitives (#47984)
## What kind of change does this PR introduce?
A11y fix for keyboard focus (esp. Safari), plus a lint rule to keep it
from regressing.
## What is the current behavior?
`Button` already defaults an explicit `tabIndex={0}` (#40458). Other
interactive primitives (Checkbox, bare triggers, etc.) still skip Tab
focus in Safari unless macOS Keyboard navigation is on. Raw `<button>`
call sites have no guardrail.
## What is the new behavior?
- Same explicit `tabIndex` default baked into Checkbox, Accordion
Trigger, Collapsible Trigger, Dropdown Menu / Popover / Dialog / Sheet /
Alert Dialog triggers, Table Head Sort, Command reset, sidebar actions,
and shadcn Button
- `supabase/require-explicit-tabindex` ESLint rule, ratcheted in Studio
(82 existing violations)
- Design-system accessibility docs list which primitives bake this in
Resolves [DEPR-621](https://linear.app/supabase/issue/DEPR-621)
## Additional context
### To test
Use **Safari** with macOS Keyboard navigation **off** (the default).
Chrome once for a sanity pass.
**Storage → Files bucket (list view) — Checkbox**
1. Open an empty folder (or one with only folders). Header “select all”
Checkbox is disabled and skipped by Tab — expected (`columnFiles.length
=== 0`).
2. Upload a file (e.g. an image). Header Checkbox enables.
3. Tab to it and toggle with Space. Row Checkboxes should also be
Tab-reachable.
**Storage → Analytics bucket → bucket details — Accordion Trigger**
On an Analytics bucket with no tables yet, Tab to the “Create your first
table via PyIceberg” Accordion Triggers and open/close with Enter/Space.
**Elsewhere (light smoke)**
- Bare Dropdown / Popover / Collapsible triggers still Tab + activate
- `*Trigger asChild><Button>` (Sheets, Dialogs, menus) still one Tab
stop; open/close fine
- Disabled controls stay out of the Tab order
### Later
Chip-away of the 82 raw Studio buttons (and remove exceptions from
rule). Prefer migrating those to `Button` from `ui` later.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility Improvements**
* Improved keyboard focus behavior across common interactive controls
(buttons, dialog/popover/dropdown/sheet triggers,
accordions/collapsibles, checkboxes, and sidebar actions).
* Disabled controls now default to `tabIndex={-1}`, while enabled
controls default to `tabIndex={0}`.
* Added explicit `tabIndex` handling for command reset and table sort
header controls.
* **New Features**
* Added a shared `getExplicitTabIndex` utility used by UI components to
standardize focus behavior.
* **Documentation**
* Updated accessibility guidance to clarify which components include
built-in focus/tabIndex handling and which require manual setup.
* **Developer Experience**
* Added an ESLint rule to enforce explicit `tabIndex` on raw button-like
elements, with corresponding baseline updates.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
Danny White
|
50e9fedb20 |
feat(studio): finesse logs date picker range colours (#48019)
## What kind of change does this PR introduce? UI polish / bug fix for the shared Calendar range selection and Logs date picker. ## What is the current behavior? - Selected date ranges use opaque `brand-400` / `brand-500` fills that read too loud in light mode, with black text that is hard to read on darker endpoints. - Start/end days are squared off on the connecting edge without intentional outer rounding. - Outside days in a selected range are dimmed with `opacity-50`, which can tint the range wash incorrectly when a range starts in the prior month. - The large-range warning in `LogsDatePicker` is a full-bleed yellow banner that feels too heavy for the popover. - Time inputs show a clock icon that adds visual noise. ## What is the new behavior? - Range middle uses a softer `brand-200` wash; start/end stay on stronger brand fills with readable foreground text. - Start days round on the left (`rounded-l-md`), end days on the right (`rounded-r-md`); day hover keeps `rounded-md`. - Selected outside days and “today” no longer fight the range wash colours. - Large-range warning is quiet inline `text-warning` copy that wraps to the calendar column width. - Clock icon removed from `TimeSplitInput`. | Before | After | | --- | --- | | <img width="1096" height="1076" alt="CleanShot 2026-07-16 at 17 59 21@2x" src="https://github.com/user-attachments/assets/eac38022-ed92-4dbe-9932-55f7bf0af934" /> | <img width="988" height="1064" alt="CleanShot 2026-07-16 at 17 59 34@2x" src="https://github.com/user-attachments/assets/3dce30dd-9fd8-4da4-82b3-5663250a4ddc" /> | ## Additional context Shared `Calendar` changes apply anywhere range mode is used, not only logs. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Refined the date-picker popover layout for start/end controls with better fit and max-width handling. - Updated calendar day and range visuals (selection, outside states, rounding, and hover behavior) to reduce “ghost” styling and improve consistency. - Restyled the large-range warning to improve spacing and alignment. - Simplified the time-splitting input UI by removing the leading clock icon. - Adjusted the “Copy range” button feedback color for copied/pasted states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
2279c4e69e |
fix(studio,www): repair Join us on Discord buttons (#47711)
## What kind of change does this PR introduce? Bug fix ## What is the current behavior? The "Join us on Discord" buttons are broken in two places: - **Studio support sidebar** (`HelpPanel`): on light mode the button background is not white, so the intended white button with purple icon and text is broken. - **www `/support` page** (shared `secondary` button variant): the text disappears on hover, and the Discord icon is never rendered (always invisible). Both issues occur on light and dark mode. ## What is the new behavior? - **Studio support sidebar**: force a white background on all colour schemes via `bg-white hover:bg-white/90`, matching the existing pattern in `DiscordCTACard`. The purple icon and text now render correctly on light mode. - **Shared `secondary` button variant** (`packages/ui`): - The icon container used `text-border-muted`, which blended into the `bg-foreground` button, so the icon was invisible. Changed to `text-background` to match the button's text colour. - The hover state used `text-border-stronger`, which had no contrast against the background, so text disappeared on hover. Changed to `text-background/80`. - Removed the ineffective `fill="var(--background-default)"` from `IconDiscord` on the `/support` page — the SVG path uses `currentColor`, so the fill prop had no effect. These `secondary` variant fixes apply globally, so other secondary buttons benefit too. | Before | After | | --- | --- | | <img width="868" height="642" alt="CleanShot 2026-07-07 at 15 39 42@2x" src="https://github.com/user-attachments/assets/6897b6ba-311e-43c7-bb5a-7b70017a54cc" /> | <img width="906" height="610" alt="CleanShot 2026-07-07 at 16 21 31@2x" src="https://github.com/user-attachments/assets/16104cf0-8ed1-4857-8467-532c1f7fdb5f" /> | | <img width="636" height="620" alt="CleanShot 2026-07-07 at 15 24 53@2x" src="https://github.com/user-attachments/assets/75f55f6c-eaa7-45ee-94fe-eac513126eff" /> | <img width="656" height="404" alt="CleanShot 2026-07-07 at 16 24 23@2x" src="https://github.com/user-attachments/assets/35649b23-fcdd-42fd-8140-e4aaf394667e" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **Style** * Refreshed secondary button styling for a more consistent look, including updated hover and loading text/icon colors. * Improved the “Join us on Discord” button’s background and hover appearance. * Simplified the Discord card’s icon rendering to rely on the default icon styling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
df69219859 |
fix(ui): restore success and warning badge contrast (#47828)
## What kind of change does this PR introduce? Bug fix ## What is the current behavior? After the colour system migration, `Badge` success and warning variants use semantic `text-brand` / `text-warning` (and soft `border-brand` / `border-warning` tokens). In light mode those fills sit around mid–high lightness, so the badges look flat and the text is hard to read. Call sites that never migrated — e.g. Compute badges (`SMALL`) and table constraint tokens (`PRIMARY`) — still use the darker scale tokens and look fine. ## What is the new behavior? Success and warning badges again use the darker scale tokens, matching those working call sites: - success: `text-brand-600` + `border-brand-500` - warning: `text-warning-600` + `border-warning-500` | Before | After | | --- | --- | | <img width="791" height="288" alt="Tables Database Chisel Toolshed Supabase" src="https://github.com/user-attachments/assets/99659555-bf78-42d7-af93-415cdc8e858c" /> | <img width="791" height="288" alt="82859" src="https://github.com/user-attachments/assets/368d4a8e-d7cf-4bf6-b896-89f29eca982d" /> | ## To test On the staging preview in **light mode**: - Any `Badge variant="success"` — e.g. “New”, “Enabled”, “Healthy”, branch badges - Any `Badge variant="warning"` — e.g. beta / warning status badges - Compare with Compute size badges and Database → Tables → Columns → Constraints (`PRIMARY`) — contrast should now feel similar Spot-check **dark mode** to confirm badges still look correct. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated warning and success badges with refined text and border colors for improved visual consistency. <!-- 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 |
||
|
kemal.earth
|
93e1631f19 |
fix: class name for text on infoicon (#47933)
## 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? Class name was bodged on `InfoIcon`. It was `text-background-surface-200`, think after recent update it should be `text-background-200`. | Before | After | |--------|--------| | <img width="371" height="67" alt="Screenshot 2026-07-14 at 16 46 42" src="https://github.com/user-attachments/assets/813ef5c8-98d1-4889-99b3-8bd885a48139" /> | <img width="366" height="64" alt="Screenshot 2026-07-14 at 16 47 53" src="https://github.com/user-attachments/assets/e76c120a-70c8-451a-a7a9-48814978cfd3" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated the Info icon’s background-visible styling to use the correct background color for improved visual consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
c793352036 |
Add some keyboard shortcuts for the Assistant (#47872)
## Context Part of some minor improvements to the AI Assistant - this one's about adding some keyboard shortcuts ## Changes involved - Added keyboard shortcut for "New chat" <img width="212" height="96" alt="image" src="https://github.com/user-attachments/assets/e9c3bd63-adbc-4b05-8c52-1baed67e365a" /> - Also added a small animation for the "How can I assist you?" text for visual indication when moving between chats that might not have a conversation yet - Added keyboard shortcut for "Permission settings" <img width="236" height="86" alt="image" src="https://github.com/user-attachments/assets/337da009-5979-4910-9292-73cc4d7f7cce" /> - Show keyboard shortcut for "Close Assistant" <img width="165" height="88" alt="image" src="https://github.com/user-attachments/assets/b45a4f5a-8e12-45f1-8fdb-a18c0deedb02" /> - Fix `ExpandingTextArea` height calculation logic issue - If you open and close the Assistant panel a number of times, the height of the input field isn't consistent, so this fixes that <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Added keyboard shortcuts for starting a new AI Assistant chat and opening permission settings. - Header actions now display shortcut hints and support keyboard access. - **Improvements** - Enhanced accessibility with labels for chat edit controls (save, cancel, edit, delete). - Chat onboarding now remounts when switching active chats. - Improved chat popover alignment. - Escape now blurs the message input; textarea resizing is more reliable during content/layout changes. - **Bug Fixes** - Updated onboarding loading behavior based on the lints loading state. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
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> |
||
|
|
a3f2c4ffc1 |
chore(deps): upgrade to TypeScript 7 (native compiler) (#47757)
Upgrades the monorepo to TypeScript 7.0.2, released 2026-07-08. `tsc` is now the native Go compiler ([announcement](https://devblogs.microsoft.com/typescript/announcing-typescript-7-0/)) — full turbo typecheck drops from ~56s to ~19s locally. TS 7.0 ships **without a programmatic API** (it lands in 7.1), so this uses Microsoft's recommended side-by-side setup: the `typescript` name resolves to `@typescript/typescript6` (the 6.0 API republished) for API consumers — typescript-eslint and Next.js build typechecking — while `@typescript/native` (the real `typescript@7.0.2`) owns the `tsc` bin that typecheck scripts run. Exactly one version of each is in the lockfile; nothing imports the native package as a library. When 7.1 + tool support lands we can collapse back to a single `typescript` dep in the catalog. **Changed:** - `pnpm-workspace.yaml`: catalog aliases for `typescript` / `@typescript/native` - 17 package.json files: `@typescript/native` added beside each `typescript` dep so every package's `tsc` is the native binary - `apps/studio/tsconfig.json`: exclude `dist/` (gitignored build output) from typechecking **Fixed** (real type errors TS 6 under-reported): - `packages/ui-patterns` CodeBlock: `borderLeft: null` → `undefined` (`CSSProperties` doesn't accept null) - `apps/www` CodeBlock: removed a JSX `@ts-ignore` comment that tsgo doesn't honor and fixed what it masked (untyped `.js` theme objects, possibly-undefined highlighter children) ⚠️ **Merge timing:** the new packages are inside pnpm's 3-day `minimumReleaseAge` window until ~July 11. Installs from the committed lockfile are unaffected (resolution is skipped), but anything that forces a re-resolution before then will fail — hold off merging until the window passes. Note for editors: the compat package has no `lib/tsserver.js`, so VS Code's "Use Workspace Version" won't work — use the bundled TS or the TypeScript Native Preview extension. ## To test - `pnpm install && pnpm typecheck` — all 15 tasks green, and `./node_modules/.bin/tsc --version` prints 7.0.2 - `pnpm lint --filter=studio` — typescript-eslint still parses (resolves the 6.0 API) - `pnpm build --filter=design-system` (or any Next app) — Next's tsconfig validation and build typecheck still work - CodeBlock rendering on www (syntax highlighting, line highlights with/without border) — the two fixes are behavior-neutral but worth an eyeball <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements / New Features** * Enhanced TypeScript tooling support across the workspace for smoother development builds and checks. * **Bug Fixes** * Code blocks render more reliably when content is empty or missing. * Highlighted code line styling applies more consistently. * **Maintenance** * Studio TypeScript builds now avoid including generated output (such as `dist`) during compilation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Joshen Lim
|
073cada53a |
Fix observability custom reports menu item (#47759)
## Context More action button should be flushed to the right here <img width="294" height="156" alt="image" src="https://github.com/user-attachments/assets/65017960-3edb-4268-bb0e-1e2c26937d4b" /> ## Changes involved - Adjust `Menu.Item` in `packages/ui` to use a `div` instead of a `span` - Was otherwise causing HTML validation issues as we were trying to nest a `div` within a `span` - Having a `div` is a bit more flexible as well since `Menu.Item` expects `children` to be of any type (e.g a react node) <img width="279" height="149" alt="image" src="https://github.com/user-attachments/assets/12730cef-b077-4ef4-93c9-c21def939888" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized the Observability menu component to use named exports, ensuring consistent usage across the app. * Updated the mobile observability menu registration to reference the correct exported component. * **Style** * Refined Observability menu item layout, spacing, truncation, and dropdown sizing for a cleaner presentation. * Enhanced menu item rendering to allow custom `className` styling and full-width content layout. * **Accessibility** * Added an aria-label to the “more actions” button for improved screen reader support. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
19ee79b030 |
color text refine (#47718)
Adjusts light theme for better contrast on foreground, muted-foreground and tertiary-foreground text <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Retuned the light theme’s surface chroma and updated light, muted, and tertiary foreground levels for improved readability. * Updated the brand link color saturation to better align with the revised theme. * Refreshed code block token colors for both light and dark themes. * **Documentation** * Updated the “Edit this page on GitHub” link styling to use updated token-based text colors for default and hover states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
561e43b36c |
Increase lightness of light theme surface (#47713)
Adjusts surface value for light theme <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Refined the light theme’s color tuning (including a small adjustment to chroma) and retuned the canvas surface tone. * Updated code block light-theme styling so string literal token colors are now `#c46a0a` (applied consistently across the design system, docs, learning, and UI library). <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
27050a69b1 | Color spot fixes policy and sheet (#47682) | ||
|
Gildas Garcia
|
623a9230bd |
fix: add labels to org home page view buttons (#47633)
## Problem The buttons on the organization home page that allow to switch between list and grid views are not accessible. ## Solution Add screen readers only text to these buttons. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary of changes * **Bug Fixes / Improvements** * Improved accessibility for project view toggle controls and the clear-search action. * Added an explicit accessible label to the clear button. * Added screen-reader text and tooltips to better communicate grid vs. list view. * **Other** * Improved error handling robustness when updating report snippet visibility. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 --> |
||
|
Gildas Garcia
|
4b7cb27ba9 |
chore: refactor docs tabs (#47557)
## Problem Now that `docs` is the only place where we use the deprecated `ui/Tabs`, we can move this component and the related HOC from `ui-patterns` in `docs` ## Solution - Move `ui/Tabs`, `ui-patterns/ComplexTabs/withQueryParams` and `ui-patterns/ComplexTabs/withSticky` to `docs` - Refactor `ui-patterns/ComplexTabs/withQueryParams` and `ui-patterns/ComplexTabs/withSticky` HOCs as hooks to make them easier to understand - Refactor `Tabs` accordingly No visual nor functional changes. ## How to test On https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords (Tabs are driven by URL and the flow tabs should have sticky headers even though there's a CSS bug already reported) - check that by default, the first tab in each tabs is active - change the tabs in different groups and validate it works - refresh the page and check that previously selected tabs are active (URL based selection) - In a new tab, visit https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords again and check that previously selected tabs are active (LocalStorage based selection) Do the same on https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/database/database-advisors (This one is driven by URL but does not have sticky tab headers) Do the same on https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/deployment/terraform/reference (this one is not driven by URL nor has sticky tab headers) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Docs tabs now persist and restore the active tab via URL query parameters. * Added optional “sticky” tab behavior that keeps the active panel in view. * Enhanced keyboard interaction for selecting tabs. * **Bug Fixes** * Improved active-tab initialization and synchronization when the URL query changes. * **Chores** * Refreshed the tabs UI implementation and styling to improve consistency and remove deprecated tab exports from shared UI packages. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon FletcherandClaude Opus 4.8
|
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> |
||
|
Gildas Garcia
|
c41e2835e3 |
chore: UI theme cleanup (#47519)
## Problem - We still use/maintain the legacy theming even though we moved to Shadcn - We have two themes list with similar code ## Solution - Migrate some components to `cva` and `cn` instead of `styleHandler` - Remove redundant `themes` in favor of `singleThemes` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Standardized theme selection across the app so theme menus consistently offer the same light/dark/system options, including dropdowns, navigation menus, and command menus. * **Refactor** * Refreshed styling for multiple shared UI components (menus, tabs, side panels, loading indicators, icons, and modal dialogs) to improve consistency while preserving visual behavior. * **Chores** * Improved the UI patterns CI “validate exports” check for clearer failure output when exports change unexpectedly. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny WhiteandCursor
|
1edcd311dc |
chore(ui): tighten dropdown sub-trigger spacing (#47355)
## What kind of change does this PR introduce? UI polish. ## What is the current behavior? Dropdown sub-menu triggers use symmetric padding and a heavier chevron. ## What is the new behavior? Tighter right padding and a smaller, muted chevron. | Before | After | | --- | --- | | <img width="1170" height="672" alt="CleanShot 2026-06-26 at 17 07 18@2x-4BDA3F92-78B4-45F4-B31E-897FF1FE537E" src="https://github.com/user-attachments/assets/ade505c7-f4b0-4046-a728-c49ee93009d4" /> | <img width="1168" height="672" alt="CleanShot 2026-06-26 at 17 06 33@2x-9A8992B6-C389-4698-BE19-7AEE3FB12A83" src="https://github.com/user-attachments/assets/c1c9ba73-e059-45a1-82f3-5c268f060e2f" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved dropdown submenu trigger spacing and alignment for a cleaner, more consistent menu layout. * Updated the trailing chevron icon’s positioning and sizing to keep it consistently aligned at the far right across states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|
Gildas Garcia
|
c1646f9a95 |
chore: dead code deletion in packages/ui (#47385)
## Problem There's still more unused code in the repository which slows down everything: - checkouts - tooling - probably builds (not sure how good turbopack is at handling this) ## Solution - remove old unused code <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Cleaned up several UI building blocks and related styling, including typography, menus, buttons, loading states, side panels, form layout, input adornments, spinner, theme context, and mobile detection. * Removed some previously available UI helpers and variants from the public component set. * **Style** * Simplified or removed multiple CSS modules and visual rules across the design system. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Miranda Limonczenko
|
5fc0c86007 |
feat(studio) Link observability pages to relevant docs (#47351)
Closes DOCS-488 <img width="1266" height="353" alt="Screenshot 2026-06-26 at 11 02 57 AM" src="https://github.com/user-attachments/assets/67b5d47b-249e-4e53-9230-2bbcb7f037b7" /> ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## Problem We have helpful documentation that delves into each observability metric, but it is not easily findable in the moment it is needed while viewing the dashboards. ## Solution Solution includes: - Add a docs link in Studio in every relevant place with the `DocsButton` component - Add aria-hidden on the `DocsButton` icon - An added `constants.ts` to see all of the docs links in one place - A contextual aria-label for the docs so that screenreader users know where they're going | Page | Docs link | |------|-----------| | Overview | `/guides/telemetry/reports` | | Query Performance / Query Insights | `/guides/platform/performance#examining-query-performance` | | API Gateway | `/guides/telemetry/reports#api-gateway` | | Database | `/guides/telemetry/reports#database` | | Data API | `/guides/telemetry/reports#postgrest` | | Auth | `/guides/telemetry/reports#auth` | | Edge Functions | `/guides/telemetry/reports#edge-functions` | | Storage | `/guides/telemetry/reports#storage` | | Realtime | `/guides/realtime/reports` | | Custom reports | `/guides/telemetry/reports#using-reports` | Query Performance and Query Insights already had the button in their custom headers. They now use the shared constants. ## Tophatting 1. Go to a project `/observability`. 2. Click into each of the panels and see a **Docs** link in the top right. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added direct documentation links across observability report pages, making it easier to open relevant help content from each view. * Added clearer, page-specific labels for observability headers and docs links. * **Bug Fixes** * Improved accessibility for icon buttons so icons are hidden from assistive technologies while button labels remain clear. * Adjusted report navigation layouts to keep controls aligned with the new docs buttons. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
968fa3f052 |
chore: remove old Input component (#47259)
## Problem Every inputs and textarea have been migrated to the new shadcn components. This `Input` is no longer needed ## Solution - Delete it - Clean up the `defaultTheme` accordingly <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Breaking Changes** * Removed the built-in Input component from the UI library, including its attached TextArea export. * Removed input styling support from the default theme (standard/error variants and related icon/action/textarea spacing). * Cleared the Input module styles, so prior textarea action UI styling is no longer available. * Removed the Reports filtering UI in Studio (including the popover component and the associated report-filter hook), which may affect report filtering screens. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
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 --> |
||
|
|
9eab4f8fbf |
build(studio): Vite/TanStack-Start build pipeline behind flag (stack 1/6, from #46424) (#47107)
**Stack 1/6** of the TanStack Start migration (#46424), split into reviewable, independently-mergeable PRs. > [!IMPORTANT] > **Next stays the default and only active framework after this PR.** This wires up the Vite/TanStack-Start build pipeline behind the `STUDIO_FRAMEWORK` flag, but there are no TanStack routes yet — so the TanStack build isn't functional or tested until later PRs in the stack. Nothing about the Next build, dev, or deploy changes behaviourally here. ## What's in this PR - **Dispatch:** `dev`/`build`/`start` now go through `scripts/dispatch.js`, which runs the Next variant unless `STUDIO_FRAMEWORK=tanstack`. The original commands are preserved as `dev:next`/`build:next`/`start:next`. - **Build pipeline:** `vite.config.ts`, `serve.js`, `smoke-server.mjs`, vite/tanstack deps, `turbo.jsonc`. - **`tsconfig.json`:** `jsx: react-jsx`, `moduleResolution: Bundler`, `target: ES2022`. Because `include` is `**/*.ts(x)`, this re-typechecks the whole app, so the companion adaptations below land with it. - **Shared adaptations (companions to the tsconfig change):** `BufferSource` casts, `packages/ui` unused-`React` import removals, etc. - **Routing/middleware plumbing:** `next.config.ts` + `redirects.shared.ts` (redirect rules now shared with `vercel.ts`), `proxy.ts`/`start.ts` middleware + `hosted-api-allowlist.ts`. ## Verification Run locally off `master`: frozen install ✓, `studio` typecheck ✓, **Next build ✓** (compiles + generates all routes), lint ratchet ✓ ("some rules improved"), prettier ✓. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a hosted API endpoint allowlist to return 404 for non-supported `/api/*` routes. * Introduced a TanStack route-migration checklist and expanded TanStack Start routing support. * **Improvements** * Enhanced deployment refresh/detection by tightening cookie handling for “latest deployment” updates. * Centralized redirect/maintenance-mode rules for consistent platform vs self-hosted behavior. * Improved production serving with a dedicated static + proxy server and a post-build smoke test. * **Dependencies** * Updated TanStack-related packages and React Table/query tooling versions. * **Documentation / Chores** * Updated formatting and tooling config; added shared build environment parsing utilities. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Miranda Limonczenko
|
ea539b4f83 |
fix(docs) Remove unneeded double border on docs Accordion (#47202)
Closes DOCS-974 <img width="891" height="328" alt="Screenshot 2026-06-22 at 3 11 13 PM" src="https://github.com/user-attachments/assets/d7b49d56-cf77-4c1d-a933-7cbeab3168c2" /> ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## Problem From Linear: Accordion usage in the docs is inconsistent and can render with double lines instead of single lines. The current docs contribution guidance appears to recommend wrapping accordions with an extra div, which seems to be the cause of the extra divider in some pages. ## Solution This PR: - Removes all wrapping `divs` to AccordionItems that adds an extra border - For a11y, adds a cursor pointer and a slight bg color change on hover to make the clickable area more obvious - For a11y, adds reduce-motion option for animation and `aria-hidden` on the chevron **Note:** It is good for a11y to have more than one hover-state indicator. For example, color-change and an underline. ## Tophatting To review changes on the preview environment: 1. Go to `/docs/guides/platform/backups` and `/docs/guides/platform/migrating-to-supabase/auth0#frequently-asked-questions-faq`. 2. Expand accordion. 3. See nothing visually odd such as strange spacing or double borders. **Note:** To be exhaustive in your review, view all affected URLs and scan the docs for `border-b` to see if there are any stragglers. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Enhanced accordion components with improved hover state styling for better visual feedback. * **Refactor** * Simplified accordion markup across documentation pages for cleaner, more consistent layout and improved component nesting structure. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
2d06acd0f4 |
chore: remove old <Breadcrumb> (#47184)
## Problem We now use the Shadcn breadcrumb everywhere but we still have the old breadcrumb code. ## Solution - Remove the old breadcrumb code - Fix import paths where needed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Consolidated UI component imports across the codebase to use unified package entrypoints. * Removed legacy breadcrumb component implementation in favor of standardized components. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
bb1ad6780e |
Fix button styles (#47075)
## Problem When we restored the `Button` focus styles in [46800](https://github.com/supabase/supabase/pull/46800/changes#diff-97973c54c2ac5270cf2d68e8f372365341693c8ae9d540ed62e0f614bfe92cf0L16), we removed the wrong duplicate `display` property (`inline-flex` instead of `flex`). This made some buttons take up as much space as available on some pages: <img width="2992" height="1628" alt="image" src="https://github.com/user-attachments/assets/63943b27-10de-453a-ac96-51b3dbff633d" /> <img width="1216" height="952" alt="image" src="https://github.com/user-attachments/assets/24aa02c4-66b0-4c34-a3d4-39c4c74fec7a" /> ## Solution Use `inline-flex` instead of `flex` (it's one or the other, cannot be both). <img width="1277" height="566" alt="image" src="https://github.com/user-attachments/assets/4add0aff-7afc-4e8f-9b57-16f93be99689" /> <img width="756" height="493" alt="image" src="https://github.com/user-attachments/assets/b3f8c8ec-4e89-40f1-b14b-10a141887370" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated button layout rendering to use `inline-flex` instead of `flex`, improving how buttons align within inline contexts. * Refreshed button icon/loading styling configuration (including icon container and loader behavior) to keep visual states consistent. * Adjusted the “Open positions” primary button spacing on the careers page, changing its alignment to better match the header layout. <!-- 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 GarciaandIvan Vasilov
|
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> |
||
|
Gildas Garcia
|
5b46264cdb |
fix: avoid showing navigation item as disabled while loading (#46942)
## Problem On pages that needs to check conditions for which data is loaded asynchronously, the navigation links in the sidebar appear disabled for a split second: <img width="1394" height="1636" alt="image" src="https://github.com/user-attachments/assets/0681966d-676d-4c8c-8bd4-852dcf93ddb7" /> ## Solution Check whether the required data is loading and override the styles so that the links are still disabled to avoid errors but appear as normal. ## How to test - Open the project setting page - Check the styles of the sidebar items carefully while it load (might require to refresh a few times to be sure) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Navigation buttons, menu items, and settings menus now display loading states while project data is being fetched, providing visual feedback and preventing interaction during data loading operations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
aba4e147eb |
Joshen/fe 3613 database tables query should have schema filter wherever appropriate (#46935)
## Context There's certain areas in the dashboard where we're calling `useTablesQuery` without a schema filter, in which case the dashboard then fires a query against the project's database to fetch _all_ tables across _all_ schemas - this could easily be a heavy query if there's a large number of relations in the project's database. Am hence opting to either add a schema filter if appropriate, or otherwise opt to use the infinite loading behaviour ## Changes involved - Add schema filter to `useTablesQuery` in database triggers and publications - Use infinite loading for tables in Cmd K for "Run query on table" and "Search database tables" ## To test - [x] Verify that database triggers + publications still function as expected - [x] Verify that CMD K "Run query on table" and "Search database tables" still function as expected (including search) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Implemented debounced infinite-scrolling table search in the command menu and SQL editor command flow. * Added a schema selector dropdown to publications management for easier navigation. * **Improvements** * Removed the “Schema” column from the publications tables UI. * Updated search guidance and table-picker status (counts/loading) during infinite browsing. * Trigger table listings now follow the selected schema context. * Refined command menu list height and improved the database-tables placeholder text. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
856600e152 |
fix: restore button focus state design (#46800)
## Problem We lost the button focus state design while migrating to tailwind v4 See https://supabase.com/design-system/docs/components/button and move to each buttons with the _Tab_ key. ## Solution Restore it. ## How to test - Open https://design-system-git-fix-button-focus-state-supabase.vercel.app/design-system/docs/components/button - Move to each buttons with the _Tab_ key. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated Button component styling for improved layout, typography, and transitions. * Refined focus state and outline styling for better visual consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |