## Problem
`FormItemLayout` does not correctly binds inputs descriptions and
validation messages to their inputs. This is because the input ids are
generated and not correctly propagated to the `FormMessage` and
`FormDescription` components. Besides, we still pass `name` or `id`
directly to the inputs or `FormItemLayout` in some places.
## Solution
- Fix `FormItemLayout` to correctly binds inputs descriptions and
validation messages to their inputs
- Fix incorrect usages
- Fix Design System documentation
## How to test
The issue is visible in production:
- Open https://supabase.com/design-system/docs/ui-patterns/forms
- Open the devtool and check the labels `for`, the description `id` and
the input `id` or `aria-describedby` attributes. You'll see they often
don't match
Do the same on staging:
- Open
https://design-system-git-fix-a11y-form-input-descriptions-supabase.vercel.app/design-system/docs/ui-patterns/forms
- Open the devtool and check the labels `for`, the description `id` and
the input `id` or `aria-describedby` attributes. They now match
Dashboard fixes:
-
https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/tokens:
_Expires in_ select button is now correctly linked to its label
-
https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/me:
the switches are now correctly linked to their label
- In Database/Indexes: the select buttons when creating an index are now
correctly linked to their label
- All other changes are the same things
## Context
There's 2 areas of the dashboard that has the project creation flow -
and this PR consolidates both to use the same UI components to minimise
duplication + keep things consistent
### Before
<img width="1920" height="957" alt="image"
src="https://github.com/user-attachments/assets/2a7ab79d-71c7-43f2-925b-1e1666cc3a69"
/>
### After
<img width="1389" height="957" alt="image"
src="https://github.com/user-attachments/assets/f8465568-af99-46eb-80ee-7ac345383231"
/>
## Changes involved
- What this means for the project creation flow for Vercel Integration:
- Smart region can be selected
- Compute size can be selected
- Enable Data API can be checked
- Automatic RLS enable can be checked
- How it differs from the main project creation flow on `new/slug`
- Organization selection is disabled (cannot be changed)
- The following UI is hidden:
- "Internal configuration" section
- "GitHub repository" field
- "Free project info" at the bottom
- "Cancel" button
Eventually we could looking into reducing the differences more, e.g
having data seeding for both ways, and showing GitHub repository field
for Vercel integration
Resolves DEPR-616
Resolves FE-3905
## To test
Tbh, I'm not really sure how you'd be able to test the vercel
integration locally or on staging, this seemingly can only be done when
changes land on prod.
- What I'd do however is to just test the project creation flow
minimally by landing on
`/integrations/vercel/_/deploy-button/new-project`
- Project creation can work, but just not the connection creation part
- And also test project creation on `/new/slug` as well
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
* **New Features**
* Added “Create sample tables with seed data” during project creation.
* Enhanced Vercel integration setup with a guided creation flow and
post-creation connection step.
* Added an option to disable organization selection in specialized
flows.
* Added support for triggering a callback after successful project
creation.
* Added support for hiding the Cancel button in specialized flows.
* **UI Improvements**
* Refined the connected GitHub repository selector button/dropdown
visuals.
* Improved security options behavior for different project creation
contexts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The new project form has accessibility issues:
- labels are not linked to inputs
- description are not linked to inputs
## How to test
Navigate through the form inputs with voice over and make sure every
input makes sense
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved form field identification consistency across project creation
screens (compute size, database password, project name, PostgreSQL
version, region, and organization).
* Enhanced selector/input accessibility by adding explicit element
identifiers to key controls.
* Updated region and repository UI structure to improve reliable
rendering without changing setup behavior.
* Preserved existing password, version, and routing logic while making
dropdowns and fields easier to locate and interact with.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
The `_Shadcn_` suffix isn't needed anymore on `Select` components
## Solution
Remove it. No other changes
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Updated internal component architecture to standardize and simplify
the codebase. These changes improve code maintainability and consistency
across the application without affecting existing functionality or user
experience.
<!-- review_stack_entry_start -->
[](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45988)
<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
## 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
## Problem
React Query cache keys for permissions and organizations are generic
(`['permissions']`, `['organizations']`) with no user identifier. When a
new session is established without going through the explicit sign-out
flow (e.g. clicking an email verification link while still logged in as
another account), stale data from the previous user persists in cache.
The new user ends up seeing the old user's permissions and org list,
which makes the project creation form appear enabled. When submitted,
the backend rejects with "not an owner" because the token belongs to the
new account which has no ownership of the old org.
A hard refresh clears the in-memory React Query state and forces a fresh
fetch, which is why it resolved the issue.
## Fix
Scope `permissionKeys.list` and `organizationKeys.list` by user ID so
different accounts never share the same cache slot. When a different
user logs in, their queries simply get fresh cache entries and never see
data from the previous session. Updated all invalidation and
`setQueriesData` call sites across 18 files to pass the current user ID.
## How to test
I don't think it can be tested in the preview environment sadly since
the request to verify has to go to auth.supabase.green instead of
vercel-ref.supabase.green
---------
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
* Break down new project page into smaller components
* Fix types
* Address comments
* Add min length check for project name in project settings
* Fix tests
Gildas Garcia
