## Problem
The tooltip comment we have about removing the `aria-describedby`
attribute to avoid screen readers reading the same text twice is wrong.
## Solution
Make it clear why we do that so that future devs don't remove it.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Accessibility**
* Clarified accessibility guidance for tooltips and screen-reader labels
across code blocks, database controls, function editors, hooks, and
table actions.
* **Documentation**
* Updated internal comments to more clearly explain why duplicate
tooltip text is avoided for screen readers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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?
Improving accessibility by adding `aria-label` and associating the
switches with their labels in database section.
Adding `Tooltip` for icon only buttons.
## What is the current behavior?
`Switch` components are not connected with their labels, `aria-label`
and some `Tooltip` are missing.
## What is the new behavior?
Icon-only buttons have now buttons and `aria-label` have been added.
`Switch` components are connected to their labels.
## Additional context
No visual changes have been made.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Accessibility Improvements**
- Added descriptive labels and tooltips to database management actions,
including remove, delete, and “More options” controls.
- Improved screen reader support for function editor maximize/minimize
controls, privilege switches, publication switches, and column actions.
- Connected privilege labels with their corresponding controls for
clearer navigation.
- Clarified permission-related messaging when deleting columns.
- Reduced duplicate announcements from tooltips and accessible
descriptions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
## Context
Part of efforts to consolidate all the code editors that we have in the
repository
`CodeEditor` will serve as the base monaco editor file that all UIs
should consume from
It's aimed to be generic and just stores the common logic that will be
generally used where-ever we need a code editor (editor options, base
editor set up on mount, etc)
The idea is that `CodeEditor` holds just 3 default actions (run queyr,
format document and placeholder fill)
If any editor needs specific behaviours (e.g SQL Editor), they can
declare them in the `onMount` prop of `CodeEditor` which gives some
flexibility
## Changes involved
- Use `CodeEditor` component for SQL Editor's `MonacoEditor`
- Shifted Cmd K behaviour into `CodeEditor` since that's probably needed
everywhere that we render that UI
- Deprecate `MonacoEditor` from the table editor's `grid` folder
- All files that were using that component to use `CodeEditor` component
instead
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
* **Refactor**
* Migrated the studio’s code editing UI (including JSON, text, and
payload viewers) to a unified CodeEditor experience.
* **New Features**
* Added plaintext language support for read-only/truncated views.
* **Behavior Changes**
* Improved editor startup by setting cursor position consistently and
deferring autofocus.
* Streamlined editor context-menu actions to the core set (run query,
format, placeholder fill).
* Updated SQL editor wiring for more consistent command/menu and
selection handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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>
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>
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.
## 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
* Refactor and remove the CreateFunctionStore.
* Fix a duplicate key in the functions table.
* More fixes for the create-function form.
* Add excluded schemas to schema selector.
* Cleanup the createFunction code after the merge.
* Remove unneeded wrapper fragments.
* Minor fixes for the FormItemLayout stories.
* Refactor the CreateFunction panel using the new FormItemLayout.
* Revert the migration to use FormItemLayout. Will revisit later.
* Add a CSS class for popover content width to match its trigger width. Use it on the schema selector.
* Replace all listboxes with selects.
* Fix the comments.
* Switch to FormItemLayout wherever possible.
* Move the createFunction file to its own folder.
* Refactor the panel to use shadcn components: Sheet, SheetContent and SheetHeader.
* Add showClose prop to the Sheet component.
* Add function editor and a feature to maximize/minimize the code editor.
* Some fixes
* Add sameWidthAsTrigger to the popover component.
* Fix the icon size.
---------
Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Gildas Garcia