mirror of
https://github.com/supabase/supabase.git
synced 2026-07-24 16:33:34 -04:00
create-pull-request/patch
1301 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 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 --> |
||
|
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> |
||
|
Alaister Young
|
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 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> |
||
|
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 White
|
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 --> |
||
|
Alaister Young
|
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 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> |
||
|
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 --> |
||
|
Ali Waseem
|
8d49701cb0 |
fix: clip overflowing text in collapsed sonner toasts (#46752)
When multiple toasts stack up, Sonner compresses background toasts. The text content in these collapsed toasts was overflowing past the boundary and leaking into the page layout. This adds `data-[expanded=false]:overflow-hidden` to clip the overflowing text. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated toast notification styling to better handle content overflow behavior when toasts are in a collapsed state. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ali Waseem
|
1c2d28d5b3 |
chore: wrap local storage into helper methods that are safer (#46628)
## 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? - Noticing our code we have many patterns of calling localstorage and handling those errors - We should add those in a single well tested file - Handle those errors in the singleton which makes it easier for us to debug customer issues. Logger is outputing local storage warnings for feature we expose - Side effect of this is random crashes on studio when local storage isn't available or handled correctly <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Improved browser storage handling across the app for more reliable persistence and graceful behavior in restricted or non-browser environments (settings, previews, charts, tabs, sign-in/session flows, integrations, and UI state). * **New Features** * Introduced a safe storage layer to standardize and harden local/session persistence. * **Tests** * Added comprehensive tests covering the new safe storage behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
8de1027d06 |
chore: remove deprecated Space component (#46431)
## Problem The `Space` component is deprecated but was still used ## Solution - Convert the only usage to simpler HTML - Remove the `Space` component <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **Chores** * Removed deprecated Space UI component from the library exports and codebase. * Cleaned up unused component imports across the application. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46431?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
|
49292c0e12 |
chore: remove Modal (#46425)
## Problem Now that we migrated all `Modal` usages to `Dialog`, we don't need `Modal` anymore ## Solution Remove the deprecated component |
||
|
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 --> |
||
|
Danny White
|
1e354209aa |
fix(design-system): fix last table cell showing independent hover state (#46251)
## What kind of change does this PR introduce? Bug fix. ## What is the current behavior? On pages where the table has horizontal overflow (e.g. Database Tables with its 7 columns), `ShadowScrollArea` unconditionally applies `!bg-surface-200` to `td:last-child` on row hover. Since `TableCell` has `transition-colors`, this gives the last cell an explicit animated background change — making it visually distinct from every other cell, which simply inherit the row's hover bg transparently. This manifests as the last cell appearing to have its own independent hover state, separate from the row hover. ## What is the new behavior? The `!bg-surface-200` override on `td:last-child` is moved inside the `stickyLastColumn` block, since that's the only case where an explicit background is actually needed (sticky cells require a solid bg to avoid showing scrolled content behind them). Non-sticky tables no longer get the spurious cell-level hover. Also reverts the MoreVertical dropdown trigger in `TableList` back to `type="default"` (undoes the workaround from #46247). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Fixed hover styling behavior in horizontally scrollable tables to apply only when appropriate. * **Style** * Updated the visual appearance of the row action dropdown button. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46251?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> |
||
|
Joshen Lim
|
8c4aa5e034 |
Add missing hover bg color on table row (#46246)
## Context Previously removed the group hover background color for TableCell in this PR [here](https://github.com/supabase/supabase/pull/45933/changes#diff-6eac0b6bc77e68de6a37e675290a8e0634b53493470a9d9843a047fe5fa4202d) with the intention to apply the background color on the TableRow instead, but totally forgot to add that behaviour on the TableRow 🤦 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Table rows now display enhanced hover states with improved visual feedback, providing clearer interaction cues when users navigate and interact with table data. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46246?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: Danny White <3104761+dnywh@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.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
|
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
|
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
|
082c2546d2 |
chore: migrate from deprecated Accordion to new shadcn components (#46103)
## Problem We have multiple Accordion components ## Solution Migrate Accordion usages to Shadcn components ## Screenshots ### Documentation MDX pages Before: <img width="1156" height="1088" alt="image" src="https://github.com/user-attachments/assets/0f7b90ec-a613-45cf-8b04-39d2fd4b9644" /> After: <img width="1154" height="952" alt="image" src="https://github.com/user-attachments/assets/05c5051d-fa2a-497a-8f6f-96d555098e33" /> ### Documentation Mobile Menu Before: <img width="389" height="674" alt="image" src="https://github.com/user-attachments/assets/c9a0fa7a-3590-4f10-acfd-8add16c28b7b" /> After: <img width="376" height="665" alt="image" src="https://github.com/user-attachments/assets/d85fe05d-6d71-4e63-b0ea-cdc495d2fa94" /> ### www - Launch week pages Before: <img width="1434" height="718" alt="image" src="https://github.com/user-attachments/assets/d777f887-65d4-49f2-8b12-5b05010ba95d" /> After: <img width="1428" height="732" alt="image" src="https://github.com/user-attachments/assets/4fa7eb02-12c7-4b3b-b77f-09846518690c" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Replaced and standardized accordion UI across docs, navigation, mobile menu, pricing FAQs, Launch Week pages, and error/detail panels for a more consistent, reliable expand/collapse experience. * **Bug Fixes** * Fixed inconsistencies in accordion behavior and item rendering (e.g., multi-open support and disabled states) to improve navigation and content discovery. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46103?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
|
09bbb7c323 |
fix(design-system): keep Alert variant text foreground explicit (#46050)
## What kind of change does this PR introduce? Bug fix. Follow-up to DEPR-551, #45302, #45535, #45618, and stacked on #46049. ## What is the current behaviour? Warning and destructive Alert variants do not explicitly own their foreground text colour. In muted parent contexts, nested Admonition content can inherit lighter text styling. ## What is the new behaviour? Warning and destructive Alert variants now include `text-foreground`, just like the default counterpart. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated styling for alert components with destructive and warning variants. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46050?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
|
4d9879d62d |
chore: remove slider shadcn suffix (#45992)
## Problem The `_Shadcn_` suffix isn't needed anymore on slider components ## Solution - Remove the `_Shadcn_` suffix - Simplify UI package exports <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Improved internal component export structure and import organization for better code maintainability. <!-- review_stack_entry_start --> [](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45992) <!-- 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 --> |
