Merge branch 'alpha' of https://github.com/supabase/ui into alpha

Author: MildTomato

development.md

@@ -9,14 +9,20 @@ make sure you are in the supabase-ui folder
 cd supabase-ui
 ```
 
+install dependencies
+
+> :warning: **This project currently won't work using the latest node version. Internally we are using node 17.**
+
+```cli
+npm install
+```
+
 run storybook
 
 ```cli
 npm run storybook
 ```
 
-(you may need to run `npm install` first)
-
 Storybook runs by default on `http://localhost:6006/`
 
 ## Local Development

src/components/Listbox/Listbox2.tsx

@@ -271,12 +271,11 @@ function Listbox({
 
 interface OptionProps {
   id?: string
-  className?: string
   value: any
-  children?: React.ReactNode
   label: string
-  addOnBefore?: ({ active, selected }: any) => React.ReactNode
   disabled?: boolean
+  children?: React.ReactNode
+  addOnBefore?: ({ active, selected }: any) => React.ReactNode
 }
 
 type addOnBefore = {
@@ -286,12 +285,11 @@ type addOnBefore = {
 
 function SelectOption({
   id,
-  className,
   value,
-  children,
   label,
-  addOnBefore,
   disabled = false,
+  children,
+  addOnBefore,
 }: OptionProps) {
   const __styles = styleHandler('listbox')
 
@@ -308,7 +306,7 @@ function SelectOption({
               active ? __styles.option_active : ' ',
               disabled ? __styles.option_disabled : ' '
             )}
-            onSelect={() => onChange(value)}
+            onSelect={() => (!disabled ? onChange(value) : {})}
           >
             <div className={__styles.option_inner}>
               {addOnBefore && addOnBefore({ active, selected })}

src/components/Listbox/SelectStyled.stories.tsx

@@ -37,6 +37,20 @@ export const Default = (args: any) => (
   </Listbox>
 )
 
+export const WithDisabled = (args: any) => (
+  <Listbox label="Default listbox">
+    <Listbox.Option label="Option 1" value="option-1">
+      Option 1
+    </Listbox.Option>
+    <Listbox.Option label="Option 2" value="option-2">
+      Option 2
+    </Listbox.Option>
+    <Listbox.Option disabled label="Option 3" value="option-3">
+      Option 3
+    </Listbox.Option>
+  </Listbox>
+)
+
 const people = [
   {
     value: 1,

src/lib/theme/defaultTheme.ts

@@ -388,8 +388,8 @@ export default {
     size: {
       ...default__padding_and_text,
     },
-    scrollable: `overflow-auto whitespace-nowrap`,
-    content: `focus:outline-none focus:ring`,
+    scrollable: `overflow-auto whitespace-nowrap no-scrollbar mask-fadeout-right`,
+    content: `focus:outline-none focus:ring text-scale-900`,
   },
 
   /*

ui.config.js

@@ -300,6 +300,27 @@ const uiConfig = {
           border: '1px solid hsla(0, 0%, 39.2%, 0.2)',
           borderRadius: '3px',
         },
+        '.no-scrollbar': {
+          /* Hide scrollbar for IE, Edge*/
+          '-ms-overflow-style': 'none',
+
+          /* Firefox */
+          'scrollbar-width': 'none', /* Firefox */
+          
+          /* Hide scrollbar for Chrome, Safari and Opera */
+          '&::-webkit-scrollbar': {
+            display: 'none'
+          }
+        },
+        /* Add fadeout effect */
+        '.mask-fadeout-right': {
+          '-webkit-mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
+          'mask-image': 'linear-gradient(to right, white 98%, transparent 100%)',
+        },
+        '.mask-fadeout-left': {
+          '-webkit-mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
+          'mask-image': 'linear-gradient(to left, white 98%, transparent 100%)',
+        },
       })
       addVariant('data-open-parent', '[data-state="open"] &')
       addVariant('data-closed-parent', '[data-state="closed"] &')