mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
2cd9b42e803277edefaa02e8aa5e4cdc27c19bb2
1331
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
|
bd95407a9c |
fix(ui): validate stored resizable-panel layout before handing it to react-resizable-panels (#50349)
## Summary - `serverCompatibleLocalStorage.getItem()` already guards against localStorage access itself throwing (SSR, private browsing, sandboxed iframes), but returns whatever string is stored without checking it's valid JSON. - `react-resizable-panels`' own `useDefaultLayout()` calls `JSON.parse()` on that value with no try/catch, so a stored value that isn't valid JSON (overwritten by another script sharing the origin, a browser extension, or a leftover value from a previous format) throws and crashes the whole panel group instead of falling back to the default layout. - Fix: validate the value is parseable JSON in `getItem()` itself (matching the file's existing best-effort persistence philosophy) and return `null` — same as a missing value — when it isn't. ## Evidence (Sentry, past week) - [SUPABASE-APP-KA8](https://supabase.sentry.io/issues/7726278966/) — `SyntaxError: Unexpected token 'K', "KV-OK" is not valid JSON`, full-page crash via `globalErrorBoundary` on `/project/[ref]/sql/[id]`. ## Test plan - [ ] Manually confirmed the existing `transformLayoutKey`/try-catch behavior for a missing or inaccessible key is unchanged - [ ] Considered adding a unit test for `serverCompatibleLocalStorage.getItem()`, but it isn't currently exported; happy to export it and add a test if reviewers want one 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01RUrmUfMBpPqkgerh9onNTM --- _Generated by [Claude Code](https://claude.ai/code/session_01RUrmUfMBpPqkgerh9onNTM)_ --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
Anthony Lio
|
819df2ae4d |
feat(www): menu nav enhancements (#50282)
## What kind of change does this PR introduce? feature reworks the www header dropdowns ## What is the current behavior? menu dropdown navigation animation between items feels scattered ## What is the new behavior? - adds dropdown card resize with a transition and the content crossfades when switching - removes dead zone between or under nav items - sets card is centered on the screen + enhance tablet bp - adds slight ui refresh spacing, colors, sizes | state | preview | | -------|------| | before | <video src="https://github.com/user-attachments/assets/acd8e161-a697-4070-b751-4f4e9f1eab19" /> | | after | <video src="https://github.com/user-attachments/assets/fe403afd-0074-4cb5-9223-fd6cdd2f7d5a" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Navigation dropdowns now provide smoother directional transitions, keyboard-focus states, and reduced-motion support. * Product navigation is organized into clearer Products and Modules sections. * Navigation layouts adapt earlier across screen sizes with responsive two-column arrangements. * **Style** * Updated dropdown spacing, colors, borders, menu item styling, and customer imagery sizing. * Refined blog loading placeholders with slightly tighter spacing. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
e57aae3c83 |
feat(design-system): document disabled controls and add focusableWhenDisabled (#50068)
## What kind of change does this PR introduce? Docs update, with supporting `ui` and Studio changes. ## What is the current behaviour? Disabled buttons with tooltips use native `disabled`, which removes them from the tab order. Keyboard users cannot focus the control or read the tooltip explaining why an action is blocked. The design system also lacked guidance on keeping disabled actions discoverable and explaining why they are unavailable. ## What is the new behaviour? - Adds a **Disabled controls** section to the accessibility docs, with live examples for a focusable disabled button and visible page-level context - Adds `focusableWhenDisabled` to `Button`, keeping `disabled` as the semantic state while using `aria-disabled`, retaining keyboard focus, and guarding click handlers - Updates Studio's `ButtonTooltip` to make disabled buttons with tooltip text focusable automatically Also includes earlier design-system fixes on this branch: - Centralises `BASE_PATH` with a `/design-system` fallback so asset URLs work without a local `.env` file - Fixes sidebar hover and active tokens in design-system and ui-library, aligned with Studio's `InnerSideMenuItem` ## To test **Design system** 1. Open the [accessibility preview](https://design-system-git-fix-design-system-docs-and-nav-fixes-supabase.vercel.app/design-system/docs/accessibility) 2. Scroll to **Disabled controls** 3. Tab to the **disabled-focusable** example. Confirm the button remains focusable, looks disabled, and shows its tooltip on focus 4. Confirm the **disabled-unavailable-with-notice** example shows the admonition and focusable disabled button pattern **Studio (optional, requires a High Availability project)** 5. Go to Settings → General → **Pause project**. Tab to the button and confirm it remains focusable, looks disabled, and shows the HA tooltip on focus 6. Go to Database → Backups and find **Restore** on a scheduled backup row. Confirm the same behaviour |
||
|
Anthony Lio
|
5d78b1da1a |
fix(docs): a11y projectconfigvariables (#50002)
## What kind of change does this PR introduce? bug fix for accessibility, fixes [docs-1280](https://linear.app/supabase/issue/DOCS-1280/projectconfigvariables-label-the-readonly-inputs-and-name) ## What is the current behavior? the project url and api key fields in `ProjectConfigVariables` have no associated label, so a screen reader announces an edit field with no indication of which value it holds ## What is the new behavior? - associates a `<label>` with each readonly input, so the fields announce as "project url" and "publishable key" - names each copy button after the value it copies - drops `role="combobox"` from the trigger, keeping the `aria-haspopup`, `aria-expanded` and `aria-controls` radix already supplies - names the trigger from its content instead of `aria-label`, so it announces the current selection - names the shared `CommandInput` reset button and hides its icons ## test - `pnpm dev:docs` - `/docs/guides/getting-started/quickstarts/nextjs` (`url` + `publishable`) - `/docs/guides/auth/server-side/creating-a-client`, branch selector, needs a branching-enabled project - `/docs/guides/observability/log-drains` - `api_settings` in any getting-started quickstart ## Additional context reverses part of #49952 as that pr added `aria-label` to satisfy `button-name`, but did replace the accessible name rather than adding to it _ the sr-only prefix added here keeps the rule passing and announces the selection <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Accessibility** * Improved screen reader support for variable configuration controls, including clearer labels and copy-status announcements. * Enhanced combobox and search interactions with accessible labeling, empty-result announcements, and clearer reset-button names. * Decorative icons and visual-only messages are now hidden from assistive technologies. * **Tests** * Added accessibility coverage for search input icons and the clear-search control. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
1966209483 |
chore(deps): upgrade vitest to v5 (#49994)
Upgrades Vitest from 4.1.4 to 5.0.0 across the monorepo, fixes the handful of things v5 turned into hard errors, and drops the `vi.clearAllMocks()` boilerplate that v5's `clearMocks` default makes redundant. **Changed:** - `vitest`, `@vitest/ui`, `@vitest/coverage-v8` 4.1.4 → 5.0.0 (catalog) - `vi.mock` calls that lived inside `beforeAll`/`beforeEach`/test bodies moved to module scope (v5 throws on nested calls). Affects the Studio and docs setup files and four Studio tests. - `detectBrowser` test restores `navigator` via `vi.unstubAllGlobals()` instead of assigning `global.navigator`, which now reaches jsdom's getter-only property. - `RowEditor.utils.test.ts` restores its `JSON.stringify` spy. It used to leak a throwing mock for the rest of the file, which v5's coverage provider now trips over. A later test in the same file had been asserting the leak's side effect (valid JSON reported as invalid) and now asserts the correct behavior. - `@testing-library/jest-dom` 6.6 → 7.0.1. Its vitest type augmentation resolves through a peer now, so it lands on each package's own `vitest` instead of whichever copy pnpm hoisted. Fixes `toBeInTheDocument` type errors in dev-tools after the reshuffle. - `@testing-library/react` 16.0.0 → 16.3.3 for the React 19 peer range. - `vite: catalog:` added to dev-tools, www, and common. Without it they resolved a newer vite than the catalog pin, which forked a second vitest instance in the lockfile. There's now one. - ai-commands custom matcher types use v5's `Matchers<R, T>` form. - 110 test files: `vi.clearAllMocks()` removed from `beforeEach`/`afterEach` hooks, along with hooks that only did that and the imports they left unused. Calls that also reset/restore mocks are untouched. Second commit, mechanical. **Added:** - `.vitest/` to the root gitignore (v5 writes JSON/JUnit/HTML reporter output there) **Removed:** - `vite-tsconfig-paths` catalog entry and deps. Vitest 5 resolves tsconfig paths itself. Release-age note: this sat in draft with a temporary `minimumReleaseAgeExclude` entry for `vitest` and `@vitest/*` while 5.0.0 was inside the workspace's 3-day `minimumReleaseAge` window. That window has closed, so the exclusion is gone and nothing bypasses the release-age gate. **Perf** (local, medians of 3 runs, same machine): | Suite | v4.1.4 | v5.0.0 | |---|---|---| | studio | 144.1s | 141.7s (-2%) | | studio `--coverage` | 156.9s | 146.4s (-7%) | | ui-patterns | 6.27s | 5.07s (-19%) | | ui `--coverage` | 3.35s | 2.14s (-36%) | | www | 0.89s | 0.47s (-47%) | Studio is dominated by jsdom environment setup per file, which v5 doesn't change. `vitest doctor` recommends keeping the current pool config: the vm pools and `isolate: false` all break tests. ## To test - `pnpm install --frozen-lockfile` succeeds with no `minimumReleaseAgeExclude` entry for vitest. - CI: Studio unit tests, ui, ui-patterns, www, docs, and typecheck/lint should all be green. The lint ratchet was checked locally: warning counts on touched Studio files are identical to master. - `pnpm test:studio` locally passes with coverage (588 files, 6240 tests). - Open a Studio test that uses `toBeInTheDocument` in your editor and confirm no type errors on jest-dom matchers, in Studio and in `packages/dev-tools`. - Known pre-existing failures unrelated to this PR: one dev-tools test (`getEventCountBadge` capped pill) fails on master too. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Tests - Improved test coverage for JSON validation and mobile navigation behavior. - Updated test setup, cleanup, environment configuration, and matcher support across application and shared package suites. - Removed obsolete coverage for alternate MCP transport selection. ## Chores - Streamlined TypeScript path resolution and Vitest reporter output handling. - Updated testing libraries and Vitest tooling across documentation, Studio, website, and shared packages. - Added Vitest reporter output to ignored files. <!-- 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> |
||
|
Danny White
|
1131e3e2ce |
fix(ui): default Button variant to default instead of primary (#50160)
## What kind of change does this PR introduce? Bug fix / design-system alignment for the legacy `Button` from `ui`. ## What is the current behavior? Omitting `variant` on the legacy `Button` falls back to brand-green `primary`. That makes accidental greens easy, and it is hard to spot the real main action on busy pages. ## What is the new behavior? - Legacy `Button` now defaults to neutral `default` - Intentional primary CTAs (create, save, submit, marketing CTAs, and matching `ButtonTooltip` usages) now set `variant="primary"` so their appearance is unchanged - Neutral actions that previously relied on the old fallback (cancel, close, back, dashboard nav, and similar) become grey/white - Design-system docs updated; regression tests cover the new default `Button_Shadcn_` is unchanged. It already uses its own CVA default. This is PR 1 of 2 in a stack. PR 2 drops now-redundant `variant="default"` props. ## To test Studio (http://localhost:8082): - `/sign-in`: Sign in stays green - Open a project → Database → Tables: New table stays green - Auth → Users → Invite: Invite user stays green; Cancel / dismiss controls stay neutral - Project Settings → General: edit a field so Cancel and Save appear. Cancel is neutral, Save is green Design system (http://localhost:3003): - Components → Button: default demo is neutral; primary demo is green; featured preview is the default variant Marketing (optional): - www header: Start your project stays green; logged-in Dashboard is neutral <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Buttons now default to a neutral style, while primary actions across Studio, documentation, marketing pages, forms, dialogs, and error states use prominent primary styling. - Updated button examples and previews clarify the distinction between default and primary variants. - Event registration now includes a directional arrow icon. - **Tests** - Added coverage confirming default button styling and explicit primary styling behave as expected. - Updated related test fixtures to use primary styling where appropriate. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
6a4cbefbcf |
feat(ui): align combobox trigger with select styling (#49665)
## What kind of change does this PR introduce? Bug fix and shared UI primitive. ## What is the current behaviour? In **Database > Replication > Add destination**, the searchable **Publication** field uses a double chevron and button styling. It looks inconsistent beside the **Initial sync** select, which uses a single chevron and the standard select surface. The shared multi-select trigger uses the same inconsistent double chevron. These differences are easy to repeat because searchable comboboxes do not have a dedicated trigger that shares the select styling. ## What is the new behaviour? - Adds `ComboboxTrigger` with the same shared styling as `SelectTrigger` - Uses a fixed single down chevron so combobox and select triggers cannot drift - Migrates the Studio **Database > Replication > Add destination > Publication** field to `ComboboxTrigger` - Updates `MultiSelectorTrigger` to replace `ChevronsUpDown` with the same fixed `ChevronDown`, including **Connect > MCP > Feature groups** in Studio - Updates the canonical design-system combobox examples - Leaves `Button` unchanged, so adopting combobox styling is explicit | Before | After | | --- | --- | | <img width="1256" height="448" alt="CleanShot 2026-09-09 at 10 21 32@2x" src="https://github.com/user-attachments/assets/bb7a6056-0b4e-4cb4-8dce-e92fa4f5afe7" /> | <img width="1256" height="448" alt="CleanShot 2026-09-09 at 10 21 11@2x" src="https://github.com/user-attachments/assets/860a06b9-617d-4d94-ac98-944316e9fdc3" /> | | <img width="1210" height="520" alt="CleanShot 2026-09-09 at 10 58 28@2x" src="https://github.com/user-attachments/assets/e916d3a2-6a75-40eb-965a-56e0694ba447" /> | <img width="1210" height="520" alt="CleanShot 2026-09-09 at 10 57 57@2x" src="https://github.com/user-attachments/assets/c5f1b8ff-8083-47b8-8242-59116d085c00" /> | ## Left for incremental migration These existing Studio comboboxes still use bespoke button triggers and will move to `ComboboxTrigger` in focused follow-up changes: - **Database > Backups > Point in time > Timezone** - **Authentication > Third-party auth > AWS region** - **Account > Preferences > Timezone** - Shared schema and function selectors See https://github.com/supabase/supabase/pull/50157. The organisation and project switchers in the top navigation are intentionally out of scope. They are context switchers rather than form-field comboboxes. ## To test ### Studio callsites On the [Studio preview](https://studio-staging-git-dnywh-featcombobox-trigger-supabase.vercel.app): 1. Open **Database > Replication > Add destination**. 2. Compare **Publication** with **Initial sync**. Both should use a single down chevron and the same closed-field surface, border, sizing, and hover treatment. 3. Open **Publication**, search for an option, and select it. The popover should close and the selected publication should be shown. 4. Open **Connect** from the project header, select **MCP**, and check **Feature groups**. Its multi-select trigger should use a single down chevron. ### Design system 1. Check the [combobox examples](https://design-system-git-dnywh-featcombobox-trigger-supabase.vercel.app/design-system/docs/components/combobox). 2. Check the [multi-select examples](https://design-system-git-dnywh-featcombobox-trigger-supabase.vercel.app/design-system/docs/fragments/multi-select). 3. Both trigger types should use a single down chevron. |
||
|
|
f5d0bf5d98 |
fix(ui): let command dropdowns scroll on touch inside overlays (#50103)
## What kind of change does this PR introduce? Bug fix. ## What is the current behavior? A command dropdown cannot be scrolled by touch when it sits inside a dialog or sheet. Radix wraps a modal dialog's overlay in a scroll lock that cancels wheel and touch events whose target is not inside the sheet. A dropdown portals to the body, so it falls outside that boundary and its scroll events get cancelled. Callers have been rediscovering this one at a time and fixing only half of it. `MultiSelectorList` stops wheel events reaching the document, and `SchemaSelector` and `FunctionSelector` expose a `stopScrollPropagation` prop that does the same. None of them handle touch, so the desktop symptom is fixed everywhere and the mobile one is fixed nowhere. ## What is the new behavior? `CommandList` keeps wheel and touch events off the document itself. That covers every command dropdown in the monorepo, in an overlay or not, with no call-site changes. A caller's own `onWheel` or `onTouchMove` still runs. The workarounds this replaces are removed: the handler in `MultiSelectorList`, and the `stopScrollPropagation` prop on `SchemaSelector` and `FunctionSelector` along with its four call sites. One behavior change worth naming: overscrolling past the end of a dropdown no longer scrolls the page behind it. That is what a dropdown should do, and it is what the four `stopScrollPropagation` call sites were already opting into. #50072 depends on this. It swaps two selects for comboboxes, and Radix Select brings its own scroll lock, so without this the swap would regress touch scrolling. ## To test - On the deploy preview, [open a project's Connect sheet](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_) and pick the MCP tab. - Narrow the window to phone width and switch on touch emulation in devtools. - Open the features dropdown and drag the list. It should scroll, and the sheet behind it should stay put. - Repeat with a mouse wheel to confirm desktop scrolling still works. - [Open Authentication > Hooks](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/auth/hooks) > Create hook, open the schema picker, and confirm it still scrolls by wheel now that `stopScrollPropagation` is gone. - [Open the SQL editor](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/sql/new)'s schema picker on a page with no overlay and confirm the list scrolls normally. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved wheel and touch scrolling behavior in command lists, selectors, and multi-select menus. - Reduced unwanted scroll-lock interference when using selectors inside overlays such as dialogs and sheets. - Preserved support for supplied scroll event callbacks. - **Accessibility** - Added clearer accessible labels to the Connect and mobile navigation menu buttons. - Updated the Connect button text behavior for icon-only and standard presentations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Anthony Lio
|
84d3ce1bd2 |
fix(docs): keep code block line numbers sticky while scrolling (#49962)
## What kind of change does this PR introduce? bug fix + some ui polish on the docs code block ## What is the current behavior? line numbers scroll away with the code _ so you lose your place in any block wide enough to scroll _ the gutter is also see-through so scrolled code renders interleaved with the numbers ## What is the new behavior? - makes gutter sticky and stays pinned while the code scrolls (no rubber) - fixes gutter, row hover, and button backgrounds as opaque so nothing bleeds through - adds gutter right edge fades vs bg - adds right padding so line endings clear the buttons - adds press feedback on the shared in-house `Button` gated behind `motion-safe` | state | preview | | -------|------| | before | <img width="566" height="263" alt="image" src="https://github.com/user-attachments/assets/81778815-1f15-4ea5-a647-ed48418210e8" /> | | after | <img width="566" height="259" alt="image" src="https://github.com/user-attachments/assets/b7d770c5-4156-491f-93c8-b0d900b7dc85" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **UI Improvements** * Refined code block controls with consistent styling, active states, animated icons, and automatic copy-status reset. * Improved code block line-number presentation with hover effects, sticky gutters, spacing, shadows, and smoother horizontal scrolling. * Added smoother button transitions and a subtle pressed-state animation. * Respect reduced-motion preferences by disabling icon animations when requested. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
66a748cdd1 |
fix(ui): restore accordion trigger layout (#50114)
## What kind of change does this PR introduce? Bug fix. Follow-up to #49660. ## What is the current behavior? `AccordionTrigger` adds horizontal padding at the shared primitive level. This shifts content at call sites that already own their spacing. In the Studio Advanced settings sections, padding around the whole accordion also constrains the trigger and its hit area instead of letting it fill the row. ## What is the new behavior? The shared trigger no longer adds horizontal padding and its header explicitly fills its container. Both Studio Advanced settings sections now apply their padding inside the full-width trigger and content, keeping the text aligned while extending the focus outline and hit area across the row. The inset focus treatment from #49660 is unchanged. | Before | After | | --- | --- | | <img width="1334" height="286" alt="CleanShot 2026-09-08 at 16 18 57@2x" src="https://github.com/user-attachments/assets/3a057b45-1eb4-4928-ae69-2d636b0c4678" /> | <img width="1302" height="278" alt="CleanShot 2026-09-08 at 16 18 12@2x" src="https://github.com/user-attachments/assets/0454493e-4fbc-4ad2-a9fd-1b9dc1d486dc" /> | ## To test ### Studio replication destination 1. Open the [Studio staging preview](https://studio-staging-git-dnywh-fixaccordion-trigger-width-supabase.vercel.app) and select a project with Pipelines enabled. 2. Go to **Database > Replication**. Under **Destinations**, click **Add destination**. 3. Tab to **Advanced settings** and press Enter to expand it. 4. Confirm the text aligns with the form content, the focus outline spans the full row between the sheet edges, and clicking near the far right of the row toggles it. ### Studio access-token permissions 1. In the [Studio staging preview](https://studio-staging-git-dnywh-fixaccordion-trigger-width-supabase.vercel.app), go to **Account > Access Tokens**. 2. Click **Generate new token** and scroll to **Permissions**. 3. Tab to any permission category, then click near the far right of its row. 4. Confirm the focus outline fills the category row, the label keeps its existing inset, and the full row toggles the category. ### Pricing FAQs 1. Open the [Pricing preview](https://zone-www-dot-com-git-dnywh-fixaccordion-trigger-width-supabase.vercel.app/pricing) and scroll to **Frequently asked questions**. 2. Tab to any question, then click near the far right of its row. 3. Confirm the question has not gained extra horizontal inset and the full row remains interactive. ### Design-system Accordion 1. Open the [design-system Accordion preview](https://design-system-git-dnywh-fixaccordion-trigger-width-supabase.vercel.app/docs/components/accordion). 2. Tab through the three accordion triggers and toggle each one. 3. Confirm each focus outline fills its row, with no extra horizontal padding around the label. |
||
|
Alaister YoungandAlaister Young
|
ec1029dff0 |
chore: migrate from clsx + tailwind-merge to shadcn-ui/cn (#49938)
Migrates the repo off `clsx` + `tailwind-merge` to [shadcn-ui/cn](https://github.com/shadcn-ui/cn). Every app and package already gets `cn` from `packages/ui`, so the swap happens in that one helper and flows through to Studio, docs, www, and the rest. **Changed:** - `packages/ui` `cn` helper now uses `createCn` from `cn/config`, keeping the custom `card`/`content` spacing scale so `p-card` still overrides `p-4`. It has an explicit signature and re-exports `ClassValue`. - The four www Launch Week files that imported the `ClassValue` type from `clsx` now import it from `ui`. - `blocks/vue` local `lib/utils.ts` re-exports `cn` from the package. - Comments/README that referenced tailwind-merge. **Removed:** - Direct `clsx` and `tailwind-merge` deps from `ui`, `ui-patterns`, `www`, and `blocks/vue`. `ui-patterns` and `www` declared them without importing. **Added:** - `packages/ui/src/lib/utils/cn.test.ts` covering clsx-style joining, conflict resolution, the custom spacing scale, and variant handling. Not migrated: the standalone apps under `examples/`. They're outside the workspace and mostly on Tailwind v3, which `cn` doesn't support. Lockfile note: after merging master, the lockfile diff is only the intended swap (`clsx` and `tailwind-merge` out, `cn@0.2.5` in). `tailwind-merge` stays in the lockfile as a transitive dep of a third-party package. Release-age note: this sat in draft with a temporary `minimumReleaseAgeExclude` entry for `cn` while `cn` was inside the workspace's 3-day `minimumReleaseAge` window. That window has closed, so the exclusion is gone and nothing bypasses the release-age gate. ## To test - `pnpm install --frozen-lockfile` succeeds with no `minimumReleaseAgeExclude` entry for `cn`. - `pnpm --filter ui test` – new `cn.test.ts` passes, including `cn('p-4', 'p-card')` → `p-card`. - Typecheck passes for studio, ui, ui-patterns, vue-blocks. www typecheck panics under tsgo on master already (pre-existing, unrelated); it passes with the JS `tsc` binary. - Spot-check Studio locally: class overrides still win in the usual places (e.g. `CodeEditor` height, `Button` variants with a custom `className`). https://claude.ai/code/session_01MkAt16tsPRDTm9oB5Jr8Ub <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Standardized Tailwind class merging across shared UI utilities while preserving conditional classes, custom spacing classes, and variant behavior. * Updated related components and examples to use the standardized class-merging utility. * **Tests** * Added coverage for conditional class handling, conflicting utility resolution, custom spacing classes, and variant separation. * **Documentation** * Updated usage guidance to reflect the standardized Tailwind class-merging approach. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Danny White
|
9f5b5ea6a7 |
fix(ui): standardise disclosure focus rings (#49660)
## What kind of change does this PR introduce? Bug fix and design-system accessibility update. ## What is the current behavior? Accordion and collapsible triggers do not consistently use the shared focus treatment. Accordion focus can animate from the browser outline, while call sites need to manage radius and focus geometry themselves. ## What is the new behavior? Bare accordion and collapsible triggers use the rounded `focus-inset` treatment by default, positioned 2px inside the control. Interactive children composed with `asChild`, such as a standard `Button`, retain their own focus treatment. Accordion triggers include a small default horizontal hit-area padding (`px-2`) and retain an explicit outer-ring option for standalone controls. The focus indicator is not animated. Focused tests cover the default and opt-out accordion variants. | Before | After | | --- | --- | | <img width="1792" height="384" alt="CleanShot 2026-09-07 at 15 40 23@2x" src="https://github.com/user-attachments/assets/8c8fd99a-3669-465a-a7b2-d272ec92dec7" /> | <img width="1784" height="498" alt="CleanShot 2026-09-07 at 15 39 52@2x" src="https://github.com/user-attachments/assets/7a0b7de1-a4bc-48cf-b9fc-3421618806b9" /> | | <img width="1564" height="360" alt="CleanShot 2026-09-07 at 15 35 11@2x" src="https://github.com/user-attachments/assets/34945180-e671-4dc2-981a-4c683d08f221" /> | <img width="1552" height="378" alt="CleanShot 2026-09-07 at 15 36 19@2x" src="https://github.com/user-attachments/assets/09f2c030-9ffb-4fa5-bf63-5e172326e8ef" /> | ## Visual impact Most call sites should look the same at rest. The exceptions are accordion triggers that did not already set their own horizontal padding: they pick up the new default `px-2`, `rounded-md`, and lose the old blanket `transition-all` on the trigger (chevron rotation is unchanged). | Resting layout change | Why | | --- | --- | | Accordion triggers without an explicit `px-*` | Inherit new default `px-2` and `rounded-md` | | Accordion triggers with their own `px-*` | Unchanged (call-site padding wins) | | Collapsible triggers | Focus ring only; spacing comes from the child element | | Direct `focus-inset` users (table rows, etc.) | Focus ring only | ## To test Use Tab to focus each disclosure trigger. Confirm the focus outline is rounded, sits 2px inside the trigger, and appears immediately without a dark flash. Previews: [design-system](https://design-system-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app) · [studio-staging](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app) · [docs](https://docs-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app) · [www](https://zone-www-dot-com-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app) ### Design system - [Accordion](https://design-system-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/design-system/docs/components/accordion) - [Collapsible](https://design-system-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/design-system/docs/components/collapsible) ### Studio (focus-only unless noted) - [Account → Access tokens → **New token**](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/dashboard/account/tokens): permission category accordions (already `px-4`) - [Database → Roles](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/dashboard/project/_/database/roles): role row collapsibles - [Observability → Query performance](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/dashboard/project/_/observability/query-performance): index suggestion accordions (already `px-4`) - [Settings → JWT (legacy)](https://studio-staging-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/dashboard/project/_/settings/jwt/legacy): migration help collapsible ### Docs - Docs mobile nav (narrow viewport): accordion sections **(resting layout: +px-2)** ### WWW - [Pricing → FAQs](https://zone-www-dot-com-git-dnywh-fixaccordion-focus-rings-supabase.vercel.app/pricing): FAQ accordions **(resting layout: +px-2)** - WWW mobile nav (narrow viewport): menu accordions **(resting layout: +px-2)** ### Not worth opening manually Sheets, modals, error fallbacks, and replication/cron/integration advanced-settings accordions inherit the focus fix but need specific flows or failure states to reach. Error-state troubleshooting accordions (`TroubleshootingSections`) also gain **+px-2** when visible. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## New Features - Accordion triggers now use an inset focus style by default, with an option to use the standard ring style. - Accordion and collapsible trigger styling can be customized more flexibly. ## Accessibility - Focus indicators appear consistently without flashing browser defaults. - Focus transitions are limited to visual properties that preserve immediate keyboard focus visibility. ## Documentation - Updated accessibility guidance explains inset focus behavior and transition considerations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
c6cdf4bd53 |
Migrate off contentlayer2 to Velite (design-system, ui-library, learn) (#48546)
## Summary - `contentlayer2@0.4.6` is unmaintained and drags in a heavy, stale dependency graph (esbuild pinned to 0.17–0.20, mdx-bundler, old `@opentelemetry/core`) that was the recurring source of vuln bumps. - Migrates all three apps that used it — `design-system`, `ui-library`, `learn` — to [Velite](https://velite.js.org), preserving the generated typed `allDocs`/`Doc` collection and the `body.code` + `useMDXComponent` runtime via a small shared local hook. - Same MDX pipeline (remark-gfm, remark-code-import, rehype-slug, rehype-pretty-code w/ Shiki compat + local theme, rehype-autolink-headings, custom `__rawString__`/`__src__`/`__event__`/`__style__` visitors) ported 1:1 into each app's `velite.config.js`. - `learn`'s extra frontmatter fields (`chapterNumber`, `explore`, `courseHero`) are now backed by real Velite/Zod schema types, so the `(doc as any)` casts in `get-next-page.ts` / `get-current-chapter.ts` / the doc page could be dropped. - `next.config.mjs` no longer wraps with `withContentlayer`; since Velite has no Next.js webpack-plugin equivalent, each app's `dev` script now runs `velite dev` and `next dev` in parallel via `npm-run-all`. Ref: [FE-3861](https://linear.app/supabase/issue/FE-3861/migrate-off-contentlayer2-learn-ui-library-design-system-to-shed) ## Test plan - [x] `pnpm build:content` (Velite build) succeeds for all three apps - [x] `pnpm typecheck` passes for all three apps - [ ] Manual smoke test of `pnpm dev` for each app in a browser (docs pages render, TOC, copy-button, code highlighting) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Improved content generation across documentation, learning materials, and the UI library for more consistent pages. * Preserved MDX rendering, navigation, table of contents, course metadata, source previews, and component examples. * Improved consistency when displaying documentation and interactive examples. * Improved application loading by optimizing how interface components are delivered. * **Chores** * Streamlined content compilation and development workflows across the design system, learning area, and UI library. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Ivan Vasilov
|
02cf09212e |
chore: Remove tsconfig paths (#49770)
This PR removes all `paths` in `tsconfig.json` for all apps and packages. They were added previosly because some of the components had a `_Shadcn` suffix because of an ongoing migration. How that the migration is done, the paths can be removed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized shared UI component, utility, and icon imports across design-system examples and application screens. * Simplified shared component access and project configuration. * Added shared access to anchor-link helpers and animation styles. * **Compatibility** * Updated component exports and imports without changing existing behavior. * No changes to user-facing workflows, screens, or functionality. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
6cb08304d9 |
Fix: RadioGroupCard accessibility issues (#48527)
## Problem The `<RadioGroupCard>` component has an accessibility issue: duplicate ids on the items. Besides, its usage in the Design System app has additional issue: no label on the group itself when used outside a react-hook-form. Finally, the form example wrap each item in a `FormField` and `FormControl` which is unnecessary and causes another accessibility issue as all items are then injected the same `id` prop. ## Solution - Fix the duplicate ids issue - Fix all design system example - Fix the only wrong usage we have in studio No visual changes ## Notes When used outside a form, I added aria-label attributes on the group and they are announced by Mac Voice Over. However, when used in a form, our components adds a label with the correct for attribute but it seems that Mac Voice Over does not announce it. Not sure about how this should be handled. ## How to test On https://design-system-git-fix-radio-group-card-a11y-supabase.vercel.app/design-system/docs/components/radio-group-card, with Voice Over enabled: - tab to the first radio group, it should announce the value and the label of group itself, _Size_ - tab to the second, same but label is _Theme_ On https://design-system-git-fix-radio-group-card-a11y-supabase.vercel.app/design-system/docs/components/radio-group-card#form (Form example): - select any option and submit - check the correct option is submitted On https://studio-staging-git-fix-radio-group-card-a11y-supabase.vercel.app: - Go to your organization settings, Audit Log Drains, open your devtool network tab - Create a new custom endpoint and select the HTTP version - Check in the network tab that the correct http version is passed <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Accessibility** * Improved labeling for radio card groups, including size, spacing, theme, and webhook version selections. * Radio options now use stable or automatically generated identifiers with reliable label associations. * **Bug Fixes** * Simplified radio option structure in forms for more consistent behavior. * Improved ID handling across radio card, stacked, and large radio options. * Updated the themed radio card example to use the dark theme by default. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
4f92790587 |
fix: FormItemLayout does not apply item id correctly (#49637)
## Problem `<FormItemLayout>` does not apply item id correctly. This can be seen on https://supabase.com/design-system/docs/ui-patterns/forms: open the devtool and check the form items labels. They have no `for` attribute. This makes it harder to correctly test and is an accessibility issue. Axe devtool actually report it ## Solution When inside React Hook Form, `<FormItemLayout>` actually generate an `id` (via `<FormItem>`). However, this `id` is overridden in `<FormLayout>` and read from context by `<FormLabel>`. Ensure we use the generated id unless one was provided. Also updated the paths filters for the CI check so that any changes in either `ui` or `ui-patterns` triggers the studio unit and e2e tests. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved form accessibility by ensuring labels consistently connect to their corresponding input fields. - React-based forms now correctly preserve field-specific identifiers when associating labels with inputs. - Added support for explicitly specifying a label’s input target, improving compatibility with customized form layouts. - Updated Studio forms to use consistent control identifiers and labeling behavior. - **Quality Improvements** - Automated validation now also runs when shared UI components and patterns are updated. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
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 --> |