Commit Graph
28 Commits
Author SHA1 Message Date
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce?

Mechanical cleanup on top of the Button default-variant change (#50160).

## What is the current behavior?

Many callsites still pass `variant="default"` even though that is now
the component default.

## What is the new behavior?

Removes redundant static `variant="default"` from legacy `Button` and
`ButtonTooltip` callsites. Keeps explicit defaults where they document
the API:

- `button-default.tsx` and `button-sizes.tsx` demos
- `DocsButton`, which pins neutral styling at the wrapper boundary

## To test

Studio:

- [Auth → Rate
Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits):
dirty the form so Cancel appears; Cancel stays neutral, Save stays green
- [Project Settings → API
Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys):
`DocsButton` in the header actions stays neutral

Design system:

- [Design system →
Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button):
`button-default` / `button-sizes` still show explicit default styling;
Primary (green) is restricted to the Primary section (and `asChild`)

WWW:

- [www → Brand
assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets):
Download logo kit / Download button kit stay neutral
2026-09-11 17:05:26 +10:00
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 -->
2026-09-10 11:23:17 +10: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 1150d32462 fix: number inputs does not allow some editions (#46538)
## Problem

Because we have controller inputs and zod validation on numbers, many of
them cannot be cleared correctly as deleting their value resets it to
`0`.

## Solution

Update the `Input` component to allow those editions by always storing
and displaying the user entered value

## How to test

- Open the webhook page and add/edit one
- Clear its timeout value and observe that it is not reset to `0`
- Same for:
  - Database network restrictions
  - API settings max rows
  - Disk size modal

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

* **Refactor**
* Standardized numeric form input handling across examples, settings,
and modals — inputs now rely on form bindings and schema coercion for
consistent parsing and simplified behavior.

* **Chores**
* Added form resolver utilities and a user-event testing library to
development dependencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-02 14:38:01 +02:00
Gildas Garcia 3c2255c27c chore: migrate database settings Modal to Dialog (#46270)
## Problem

Database settings still uses the deprecated `Modal` for:
- readonly toggle
- password reset
- disk size configuration
- network restrictions

## Solution

- use `Dialog` instead
- use `AlertDialog` when it makes sense

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

* **Refactor**
* Replaced various Database settings modals with unified
Dialog/AlertDialog components for a consistent look and behavior.
* Confirmation flows now await async submit actions; confirm/cancel
controls are disabled and show loading while operations are pending.
* Validation, loading/disabled states, and user-facing success/error
messaging remain intact.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46270?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-26 10:24:55 +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
Ivan Vasilov 308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285)
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
2026-04-28 11:33:53 +02: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 fba5a8a001 chore: use react-hook-form in network restrictions modal (#44238)
## Problem

- Network restrictions modal still uses `formik` and we want to remove
it in favour of `react-hook-form` to keep only one form library

## Solution

- Migrate to `react-hook-form`

## Screenshots

<img width="546" height="478" alt="image"
src="https://github.com/user-attachments/assets/457e59c0-e4cf-4bcb-b941-68cdb8876b45"
/>

<img width="568" height="511" alt="image"
src="https://github.com/user-attachments/assets/b118468a-bbe0-4c59-a63c-4bb33fe548eb"
/>
2026-03-26 16:23:48 +01:00
Danny WhiteandJoshen Lim d653617cdd chore(studio): improve inline code styling (#40724)
* sweep language

* update class docs

* additional

* basic docs

* sweep relevant instances

* replace text-code

* additional in sweep

* Tiny fix

* prettier

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-11-24 16:34:30 +08: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
5f533247e1 Update docs url to env var (#38772)
* Update Supabase docs URLs to use env variable

Co-authored-by: a <a@alaisteryoung.com>

* Refactor: Use DOCS_URL constant for documentation links

This change centralizes documentation links using a new DOCS_URL constant, improving maintainability and consistency.

Co-authored-by: a <a@alaisteryoung.com>

* Refactor: Use DOCS_URL constant for all documentation links

This change replaces hardcoded documentation URLs with a centralized constant, improving maintainability and consistency.

Co-authored-by: a <a@alaisteryoung.com>

* replace more instances

* ci: Autofix updates from GitHub workflow

* remaining instances

* fix duplicate useRouter

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: alaister <10985857+alaister@users.noreply.github.com>
2025-09-26 10:16:33 +00:00
Alaister Young e3dae9ec36 chore: only load data in modals when they're visible (#34617)
* chore: only load data in modals when they're visible

* SidePanelGitHubRepoLinker

* scrolling is not my strong suit

* simple loading state for add new secret

* fix button width

* update to use shadcn

* fix ts
2025-04-02 16:41:47 +08:00
Kevin Grüneberg 2b94dd7430 feat: Dedicated Pooler rollout (#34240) 2025-03-21 14:46:58 +01: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
Ivan Vasilov 8aa5523fcc chore: Migrate tooltips in studio to use shadcn tooltips (#32679)
* Remove radix-popover and radix-tooltip as deps from studio.

* Migrate all uses of tooltip to shadcn tooltips.

* Add tooltip portal to all shadcn tooltips.

* Fix a warning about MenuItem not accepting refs in StorageMenu.

* Remove unneeded styling for the tooltips.

* Set a default delay duration for all tooltips in Studio.

* Fix a type error.

* Check and fix all tooltips.
2025-01-17 10:54:02 +01: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
Jonathan Summers-Muir 972773ca87 [Dashboard] Chore: update Modal component to use new components (#26844)
* init

* add more examples

* update modal

* update modals

* more modals updated

* update modal

* Update NewAccessTokenButton.tsx

* Update NewAccessTokenButton.tsx

* fix: issue with scale on dialog opening. chore: added bg-dialog color

* fix modals

* add deprecation notices

* revert bg

* revert

* Update Modal.tsx

* Update PITRSelection.tsx

* update dialog docs

* fix: issue with payment method modal

* update terminal instructions

* update padding defaults
2024-06-05 10:06:55 +00:00
Joshen LimandAlaister Young 0c81551110 RQ convert mutateAsync calls to mutate where possible, otherwise add try finally blocks (#26737)
* RQ convert mutateAsync calls to mutate where possible, otherwise add try finally blocks

* Skip eligibility query if project status is coming up

* Small UI update to replicas side panel

* Update apps/studio/components/interfaces/SQLEditor/RenameQueryModal.tsx

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>

* Add error handling in CIDR

* Prettier lint

---------

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2024-05-24 16:58:49 +08:00
Long Hoang 82a678864e chore: update outdated network restriction note (#23266) 2024-04-26 08:15:26 +00:00
Joshen Lim 89a96c788a Update network restrictions to support IPv6 (#20548)
* Update network restrictions to support IPv6

* Fix conditional

* Fix

* Fix
2024-01-22 11:24:35 +07:00
divit d9c0e1e39c fix: supavisor network restrictions date (#20546)
* fix: supavisor network restrictions date

* fix: supavisor network restrictions date
2024-01-18 18:29:29 +11:00
Inian 11cd11c3d1 note about pooler network restrictions enforcement (#20478)
* note about pooler network restrictions enforcement

* update studio network restrictions page

* update network restrictions doc

* improve wording

* update date
2024-01-17 14:08:55 +00:00
Joshen Lim da2d94d41a Normalize IP address when adding restriction (#20514)
* Normalize IP address when adding restriction

* 🤦‍ actually use normalized address in the payload

* Swap geoplugin with ipify

* Remove use my ip address button
2024-01-17 18:03:56 +08:00
ClarenceandAlaister Young 432de2fc69 chore: clean up on empty className attributes (#20203)
clean up on empty className attrib

Co-authored-by: Alaister Young <alaister@users.noreply.github.com>
2024-01-08 05:49:28 +00: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