dima/supabase

0 Fork 0

mirror of https://github.com/supabase/supabase.git synced 2026-10-10 03:45:06 +03:00

Files

T

History

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

2026-09-11 01:52:21 +00:00

build/css

fix(ui): systematise control surface fills and hover borders (#48887 )

2026-08-18 16:54:25 +10:00

scripts

chore: Remove dead code and unused files from the packages/ui (#45169 )

2026-04-24 10:30:35 +02:00

src

feat(design-system): document disabled controls and add focusableWhenDisabled (#50068 )

2026-09-11 01:52:21 +00:00

.gitignore

remove Next/Link deps

2023-06-26 01:08:20 +08:00

components.json

chore: Expand prettier commands to also run on packages (#32550 )

2025-01-03 16:23:32 +01:00

index.tsx

Migrate off contentlayer2 to Velite (design-system, ui-library, learn) (#48546 )

2026-09-04 15:49:44 +02:00

package.json

chore(deps): upgrade vitest to v5 (#49994 )

2026-09-10 16:45:54 +08:00

README.md

chore: migrate from clsx + tailwind-merge to shadcn-ui/cn (#49938 )

2026-09-07 21:35:06 +08:00

tailwind.config.css

chore: Migrate the main Tailwind JS config to CSS (#45686 )

2026-05-13 13:14:58 +02:00

tsconfig.json

chore: Bump Typescript to v6 (#44204 )

2026-03-26 15:27:35 +01:00

vitest.config.ts

Add coveralls integration (#35424 )

2025-05-08 12:23:37 +02:00

vitest.setup.ts

chire: Sort imports in all packages, cms, design-system and ui-library apps (#41610 )

2026-02-05 13:54:10 +01:00

README.md

`packages/ui`

Supabase's shared React component library. Built on Radix UI primitives and shadcn/ui, styled with Tailwind CSS, and used across all Supabase apps.

Usage

Import from the 'ui' package alias:

import { Badge, Button, Input } from 'ui'

Some of the components have the _Shadcn_ suffix. These components should be preferred, they're in a process of replacing the other ones.

Utilities

// deep object merge (used for themes)
import { clipboard, cn, mergeDeep } from 'ui' // Tailwind class merging (shadcn-ui/cn)

// copy-to-clipboard helper

Styling conventions

Tailwind only — no inline styles or CSS modules.
Prefer shadcn semantic pairs (bg-card text-card-foreground, bg-muted text-muted-foreground, bg-tertiary text-tertiary-foreground) over hardcoded colors. Legacy utilities such as text-foreground-light and border-default are compatibility aliases only.
Control surface roles (bg-field, bg-control-raised, border-control-hover; CSS --control aliases raised) live in build/css/source/semantic.css. Prefer those over inventing fills. Legacy bg-control is still the accent wash alias.
Themes set the core --hue (or the split --surface-hue / --primary-hue), --chroma, --surface, --foreground-lightness, and --contrast inputs, plus their --muted-foreground-level and --tertiary-foreground-level hierarchy. Semantic colors are derived from them in OKLCH; --contrast: 1 is the baseline and the supported adjustment range is 0.75 to 1.25.
The workspace root owns the actual tailwind.config.js. The file in this package is a stub for IntelliSense only.