Files
supabase/packages/ui
Francesco Sansalvadore d06c971118 feat: multiselect (#29695)
* multi-select v2

* update values

* multi-select 2 wip

* multi select 2

* multi select with combobox

* use includs

* finish multi select

* wrap badges

* overflow-x-scroll

* more

* remove multi select old from menu

* add inline search input mode in multi-select

* fix size type

* reset input when adding item

* update studio multiselector

* remove console.log

* flex-1

* remove old multi-select and decrease badge padding

* remove removeEventListener

* fix errors

* fix

* try only command

* restore inline

* Revert "fix"

This reverts commit 2fc1bea1c6.

* change callback depencency

* remove useCallback

* sdf

* remove Popover from multiselect

* udpate troubleshooting multiselect

* update

* form

* multiselect changelog

* try to remove useCallback

* fox

* bug found: checkbox in CommandItem no good

* clean up commented code

* clean up

* restore loading check

* cleanup type

* autofocus combobox input

* autofocus

* remove badgeLimit auto

* focus trigger button when hitting escape

* add tests for multi-select

* add disabled example

* remove console and useless function

* showResetIcon

* showResetIcon

* handleClose

* reset focus after reset
2024-10-25 15:43:15 +02:00
..
2024-10-25 15:43:15 +02:00
2023-05-22 01:25:17 +08:00
2023-06-26 01:08:20 +08:00
2023-06-25 13:32:01 +08:00
2024-10-01 11:29:37 +02:00
2022-09-19 14:00:05 +02:00
2023-03-22 12:27:30 +08:00
2023-06-26 00:28:16 +08:00
2024-04-04 13:09:21 +00:00

Supabase UI Package

Figma-tokens setup

Tokens setup is based partly on blogpost on the Mirahi Digital Garden.

Transforms tokens stored on Figma Tokens using token-transformer and Style Dictionary to css-variables with references, and use them in your TailwindCSS environment with multiple themes.

Build all the styles files (css-variables and tailwind config)

npm run build-styles

This creates a directory called styles with the tokens and also CSS required.

Other examples

You can find other examples here by Jan Six

Adding new themes/sets

Add new sets by extending the scripts in package.json. Currently theme sets derive from exported/[set name] but can come from anywhere.

Adding a new set can be done with the following:

// package.json

//..
"build-transform-light": "npx token-transformer tokens.json styles/tokens/02_themes/light.json global,exported/light,theme global",
// add a new line like this:
"build-transform-new": "npx token-transformer tokens.json styles/tokens/02_themes/new.json global,new,theme global",
//..
// append the new theme/set command to end of the build-transform command
"build-transform": "npm run build-transform-global && npm run build-transform-typography && npm run build-transform-dark  && npm run build-transform-light && npm run build-transform-new",