Commit Graph
26 Commits
Author SHA1 Message Date
ChloeGarciaMillerand c87f673c4c Fix: improve accessibility for icon buttons (database menu) (#47531)
## 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 (accessibility improvement)

## What is the current behavior?

Icon-only buttons do not have explicit accessible names for screen
readers or tooltips.

## What is the new behavior?

All icon-only buttons now have explicit accessible names using visually
hidden text (sr-only), ensuring proper screen reader support.

## Additional context

Tooltip text is preserved or added for visual users.
No visual changes were introduced.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Tests**
* Tightened end-to-end checks for policy creation so policy names must
match exactly in the list.
* Improved validation coverage for SELECT, INSERT, UPDATE, and DELETE
policy flows, reducing the chance of false-positive test matches.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-06 16:59:40 +02:00
Gildas GarciaandIvan Vasilov 96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## Problem

Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.

## Solution

- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code

## How to test

As this is just prop renaming, if it builds it's ok

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-06-16 23:59:58 +02:00
Gildas Garcia 0713a1efc1 chore: remove shadcn suffix for Input, Textarea, Alert and Collapsible (#45867)
## Problem

Now that we migrated old components to their new shadcn alternatives, we
don't need the `_Shadcn_` suffix anymore.

## Solution

Remove it

<img width="659" height="609" alt="image"
src="https://github.com/user-attachments/assets/2d7271a9-066a-4dcc-92fe-729b106d2c2f"
/>
2026-05-15 14:55:37 +02:00
Gildas Garcia 35571d242e chore: migrate <Collapsible> to shadcn <Collapsible> (#45819)
## Problem

We have multiple `Collapsible` components.

## Solution

Reduce their number by using only the one from shadcn.
I haven't noticed any visual nor functional changes.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Migrated expandable/collapsible UI to a unified shadcn-based
implementation for more consistent expand/collapse behavior across the
app.

* **Style**
* Updated listbox check icon sizing and removed obsolete collapsible
open/close animations.

* **Chores**
* Removed deprecated collapsible variants and consolidated UI component
surface for simpler maintenance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-13 09:39:48 +02:00
Ivan VasilovandJordi Enric 56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00
Gildas Garcia 0facd341a6 chore: remove UI form components _Shadcn_ suffix (#45212)
## Problem

We used to have a `_Shadcn_` suffix for all the shadcn form components
because we also had `formik` form components.
This is not needed anymore.

## Solution

- Remove the suffix
- Update all usages
2026-04-24 12:14:15 +02:00
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Gildas Garcia e5fb3801ac chore: update database role form to use react-hook-form (#44178)
## Problem

- The database role form still uses `formik` and we want to remove it in
favour of `react-hook-form` to keep only one form library
- The database role form does not follow the design system guidelines

## Solution

- Migrate to `react-hook-form`
- Apply the design system guidelines
- Make sure you can toggle switches by clicking their labels too
- Fix accessibility issues

## Notes

In the new design system, labels for disabled inputs have the same style
as those for enabled inputs

## Screenshots

Before:
<img width="1325" height="288" alt="image"
src="https://github.com/user-attachments/assets/5e558618-3227-42be-b085-4ee388c0aff6"
/>
<img width="1328" height="402" alt="image"
src="https://github.com/user-attachments/assets/9e41a4c2-ab38-4772-b619-548a1a0b9556"
/>

After:
<img width="1281" height="325" alt="image"
src="https://github.com/user-attachments/assets/698e526c-5ae3-4e89-bcb5-0bfee1b70f72"
/>
<img width="1285" height="428" alt="image"
src="https://github.com/user-attachments/assets/65b30dc2-9724-4609-9fd0-f32171e37abd"
/>
2026-03-26 10:05:35 +01:00
Francesco Sansalvadore 6a2dabc058 fix: card paddings (#42775)
Uniform card paddings to use the `--card-padding-x` css var and `px-card` tw utility class.
2026-02-17 13:59:29 +01:00
Francesco Sansalvadore 263730a8b8 chore: uniform card and panel padding-x (#41237) 2025-12-11 09:18:21 +00:00
Ivan Vasilov 43cc61818c chore: Migrate all isPending uses in react-query (#40642)
* Bump react-query. Minor type and logic fixes.

* Migrate all use of isLoading to isPending in mutations.

* Fix type errors.
2025-11-20 16:44:53 +01:00
Francesco Sansalvadore cb045c9559 Chore: add param routing on panels (#40184)
* chore(studio): add useQueryStateWithSelect hook to handle nested param routing on panels
* handleErrorOnDelete fn for useQueryStateWithSelect
2025-11-12 15:58:31 +01:00
Joshen Lim e320368dc7 Part 2 of swapping useCheckPermissions with useAsyncCheckProjectPermissions (#37860)
* Part 2 of swapping useCheckPermissions with useAsyncCheckProjectPermissions

* Fix TS

* Address feedback

* Fix
2025-08-12 17:34:53 +07:00
Joshen Lim cab0585533 Fe 1799/consolidate to useselectedprojectquery and (#37684)
* Replace all usage of useProjectContext with useSelectedProjectQuery

* Replace all usage of useSelectedProject with useSelectedProjectQuery

* Replace all usage of useProjectByRef with useProjectByRefQuery

* Replace all usage of useSelectedOrganization with useSelectedOrganizationQuery

* Deprecate useSelectedProject, useSelectedOrganization, and useProjectByRef hooks

* Deprecate ProjecContext
2025-08-06 10:53:10 +07:00
Joshen Lim 3c3fe9b5f1 Chore/fix papercuts 020525 (#35427)
* Fix giant icon in roles edit button

* Fix portals for edge functions and realtime inspector

* Set refetchInterval to 2000 in DiskManagementForm if requested_modification in data

* Fix
2025-05-05 11:27:29 +08:00
Ivan Vasilov 52735e38bf chore: Rename all uses of Tooltip_Shadcn_ to just Tooltip (#32860)
* Rename all uses of Tooltip_Shadcn_ to just Tooltip.

* Fix a leftover change.
2025-01-20 22:23:45 +01:00
Francesco Sansalvadore ecd181bcd9 studio mobile v2 (#32630)
* improve some studio mobile layouts

* improve some studio mobile layouts

* improve settings

* assistant mobile

* assistant mobile

* assistant mobile

* responsive formlayout and new project layout

* improve dashboard pages headers

* improve dashboard auth pages

* mobile org settings

* mobile billing fixes

* adjust paused project container height

* remove comments

* triggers

* leftovers

* ai assistant

* fix errors

* remove 16px input size

* fix test

* merge access tokens settings page conflicsts

* smol integrations here and there
2025-01-17 19:07:35 +01:00
Joshen Lim c4e64f1746 Refactor/use shadcn tooltip (#31320)
* Refactor LogsExplorerHeader

* Refactor HelpPopover

* Refactor PreviewPane

* Deprecate SettingsButton, not used

* Refactor HookList

* Refactor AuditLogs

* Refactor InvoiceStatusBadge

* Refactor RoleRow

* Refactor ProductEmptyState

* Refactor BranchPanels

* Refactor JsonEditor

* Refactor UpgradingState

* Refactor ColumnManagement
2025-01-06 15:11:23 +07:00
Ivan VasilovandJoshen Lim 05a542ccea chore: Migrate all feather icons to lucide icons (#29038)
* Add lucide-react to docs (to make the autocomplete work).

* Migrate the docs app icons.

* Migrate the ui-patterns.

* Remove the old icons from ui package.

* Migrate the www app from react-feather icons.

* Migrate all of studio icons.

* Migrate the only component in design-system.

* Fix an old import in ui package. Revert an import in docs app.

* Fix some pages in www.

* Remove unneeded files used in generation of icons.

* Fix a prettier error.

* Fix more issues in www.

* Fix an issue in Log Date picker.

* Replace all string sizes with number sizes because the icons grew in some cases.

* Fix more imports in security page.

* Fix an extra import.

* Remove the size prop from all icons if they're in a button and they match the button size.

* Minor fixes for docs and www.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-09-04 19:46:21 +08:00
df52ea7ee0 feat: Replace all toasts with sonner (#28250)
* Update the design of the sonner toasts. Add the close button by default.

* Migrate studio and www apps to use the SonnerToaster.

* Migrate all toasts from studio.

* Migrate all leftover toasts in studio.

* Add a new toast component with progress. Use it in studio.

* Migrate the design-system app.

* Refactor the consent toast to use sonner.

* Switch docs to use the new sonner toasts.

* Remove toast examples from the design-system app.

* Remove all toast-related components and old code.

* Fix the progress bar in the toast progress component. Also make the bottom components vertically centered.

* Fix the width of the toast progress.

* Use text-foreground-lighter instead of muted for ToastProgress text

* Rename ToastProgress to SonnerProgress.

* Shorten the text in sonner progress.

* Use the correct classes for the close button. Add a const var for the default toast duration. Remove the custom width class from sonner.

* Set the position for all progress toasts to bottom right. Set the duration for all toasts to the default (when reusing a toast id from loading/progress toast, the duration is set to infinity).

* Fix the playwright tests.

* Refactor imports to use ui instead of @ui.

* Change all imports of react-hot-toast with sonner. These components were merged since the last commit to this branch.

* Remove react-hot-toast lib.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
2024-08-31 07:50:51 +08:00
Bobbie Soedirgo 1d58f2a11b chore: use @supabase/pg-meta for role queries (#22821)
* chore: use @supabase/pg-meta for role queries

* chore: prettier

* fix: typo
2024-04-17 16:19:49 +07:00
Kevin Grüneberg f9a55935f5 chore: use type imports for types/interfaces (#21738) 2024-03-04 20:48:22 +08:00
Terry SuttonandIvan Vasilov c37fa950ea Chore/rewrite roles form with shadcn (#19923)
* Fix new role form

* Rewrite form

* Commit a sin against ts

* Make the afterLabel a ReactNode.

* Fix minor type issues.

* Fix type

* Types

* Use lodash sortBy instead of the mutating array.sort.

* Fix the order of the roles with active connections.

* Sort the roles by lowercased names.

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2023-12-21 23:45:47 +01:00
Joshen LimandAlaister Young 5649330f96 Chore/deprecate roles store (#19718)
* Init RQ for database roles

* Shift all use of roles from pg meta mobx store to RQ

* Deprecate and remove roles pg meta mobx store

* Fix import

* Fix

* Address comments

* remove function child

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
2023-12-19 15:02:57 +07:00
Alaister Young 42164183f2 fix: add missing asChild props (#19456)
* fix: add missing asChild props

* move csvlink outside of dropdown trigger

* fix incorrect merge
2023-12-06 21:11:32 +11:00
Ivan Vasilov 436bdb10ae chore: Move the studio app to apps/studio (#18915)
* Move all studio files from /studio to /apps/studio.

* Move studio specific prettier ignores.

* Fix the ui references from studio.

* Fix the css imports.

* Fix all package.json issues.

* Fix the prettier setup for the studio app.

* Add .turbo folder to prettierignore.

* Fix the github workflows.
2023-11-15 12:38:55 +01:00