feat: list limit and overlay style

Author: lisalupi

packages/ui/src/components/FileInput/__stories__/Children.stories.tsx

@@ -4,10 +4,11 @@ import { Text } from '../../Text'
 import { FileInput } from '..'
 import { hereText } from './styles.css'
 
-export const Children: StoryFn<typeof FileInput> = () => (
+export const Children: StoryFn<typeof FileInput> = args => (
   <Stack direction="column" gap={2}>
     <FileInput
       aria-label="label"
+      disabled={args.disabled}
       list
       title={inputId => (
         <label htmlFor={inputId}>Click here to add a file (title)</label>
@@ -28,7 +29,13 @@ export const Children: StoryFn<typeof FileInput> = () => (
         </Stack>
       )}
     </FileInput>
-    <FileInput aria-label="label-2" list variant="overlay">
+    <FileInput
+      aria-label="label-2"
+      disabled={args.disabled}
+      list
+      title="drag here"
+      variant="overlay"
+    >
       {inputId => (
         <>
           Drag an drop on me or click{' '}

packages/ui/src/components/FileInput/__stories__/Controlled.stories.tsx

@@ -5,14 +5,15 @@ import { Text } from '../../Text'
 import { FileInput } from '..'
 import type { FilesType } from '../types'
 
-export const Controlled: StoryFn<typeof FileInput> = () => {
+export const Controlled: StoryFn<typeof FileInput> = args => {
   const [files, setFiles] = useState<FilesType[]>([])
   const onChange = (f: FilesType[]) => setFiles(f)
 
   return (
     <Stack direction="column" gap={3}>
       <FileInput
         defaultFiles={[]}
+        disabled={args.disabled}
         label="type='dropzone'"
         multiple
         onChangeFiles={onChange}

packages/ui/src/components/FileInput/__stories__/Disabled.stories.tsx

@@ -3,9 +3,10 @@ import { PlusIcon, UploadIcon } from '@ultraviolet/icons'
 import { Stack } from '../../Stack'
 import { FileInput } from '..'
 
-export const Disabled: StoryFn<typeof FileInput> = () => (
+export const Disabled: StoryFn<typeof FileInput> = args => (
   <Stack direction="column" gap={2}>
     <FileInput
+      accept={args.accept}
       disabled
       label="medium disabled"
       title="Drag and drop files to get started"
@@ -31,5 +32,18 @@ export const Disabled: StoryFn<typeof FileInput> = () => (
       title="Click or drag file to this area to upload"
       variant="dropzone"
     />
+    <FileInput
+      aria-label="label"
+      disabled
+      title={
+        <Stack direction="row" gap={1}>
+          <UploadIcon />
+          Click or drag file to this area to upload (disabled)
+        </Stack>
+      }
+      variant="overlay"
+    >
+      Some content (drag on me)
+    </FileInput>
   </Stack>
 )

packages/ui/src/components/FileInput/__stories__/DropzoneSize.stories.tsx

@@ -4,9 +4,10 @@ import { Link } from '../../Link'
 import { Stack } from '../../Stack'
 import { FileInput } from '..'
 
-export const DropzoneSize: StoryFn<typeof FileInput> = () => (
+export const DropzoneSize: StoryFn<typeof FileInput> = args => (
   <Stack direction="column" gap={2}>
     <FileInput
+      disabled={args.disabled}
       label="medium"
       title="Drag and drop files to get started"
       variant="dropzone"
@@ -28,6 +29,7 @@ export const DropzoneSize: StoryFn<typeof FileInput> = () => (
       </Stack>
     </FileInput>
     <FileInput
+      disabled={args.disabled}
       label="small"
       size="small"
       title="Click or drag file to this area to upload"

packages/ui/src/components/FileInput/__stories__/List.stories.tsx

@@ -11,14 +11,6 @@ const defaultFile = [
     size: 30460,
     type: 'image/png',
   },
-  {
-    error: 'Maximum file size exceeded',
-    file: 'error.png',
-    fileName: 'error_example.png',
-    lastModified: 1,
-    size: 4046000000,
-    type: 'image/png',
-  },
   {
     file: 'sound.mp3',
     fileName: 'sound.mp3',
@@ -48,11 +40,20 @@ const defaultFile = [
     size: 40460000,
     type: 'application/pdf',
   },
+  {
+    error: 'Maximum file size exceeded',
+    file: 'error.png',
+    fileName: 'error_example.png',
+    lastModified: 1,
+    size: 4046000000,
+    type: 'image/png',
+  },
 ]
-export const List: StoryFn<typeof FileInput> = () => (
+export const List: StoryFn<typeof FileInput> = args => (
   <Stack direction="column" gap={3}>
     <FileInput
       defaultFiles={defaultFile}
+      disabled={args.disabled}
       label="type='dropzone'"
       list
       multiple
@@ -64,9 +65,11 @@ export const List: StoryFn<typeof FileInput> = () => (
     <FileInput
       aria-label="label"
       defaultFiles={defaultFile}
+      disabled={args.disabled}
       list
       listPosition="top"
       multiple
+      title="dnd here"
       variant="overlay"
     >
       Type &quot;ovelay&quot; (listPosition=&quot;top&quot;)
@@ -75,21 +78,35 @@ export const List: StoryFn<typeof FileInput> = () => (
     <FileInput
       aria-label="label"
       defaultFiles={defaultFile}
+      disabled={args.disabled}
       list
       listPosition="bottom"
       multiple
+      title="dnd here"
       variant="overlay"
     >
       Type &quot;ovelay&quot; (listPosition=&quot;bottom&quot;)
     </FileInput>
+    <Separator />
+    <FileInput
+      defaultFiles={defaultFile}
+      disabled={args.disabled}
+      label="With prop listLimit"
+      list
+      listLimit={{ limit: 3, overflowText: 'See all' }}
+      multiple
+      size="small"
+      title="Click or drag file here"
+      variant="dropzone"
+    />
   </Stack>
 )
 
 List.parameters = {
   docs: {
     description: {
       story:
-        'With prop `list` it is possible to display all the drag&drop files added to the input. When using the FileInput as an overlay, it is possible to add the list on top or beneath the content using prop `listPosition`.',
+        'With prop `list` it is possible to display all the drag&drop files added to the input. When using the FileInput as an overlay, it is possible to add the list on top or beneath the content using prop `listPosition`. Size is displayed and computed automatically from file.sie (number, in byte). It is also possible to add a limit to the number of visible files in the list using prop `listLimit`.',
     },
   },
 }

packages/ui/src/components/FileInput/__stories__/Multiple.stories.tsx

@@ -11,10 +11,11 @@ const defaultFile = [
     type: 'image/png',
   },
 ]
-export const Multiple: StoryFn<typeof FileInput> = () => (
+export const Multiple: StoryFn<typeof FileInput> = args => (
   <Stack direction="column" gap={3}>
     <FileInput
       defaultFiles={defaultFile}
+      disabled={args.disabled}
       label="Multiple"
       list
       multiple
@@ -24,6 +25,7 @@ export const Multiple: StoryFn<typeof FileInput> = () => (
     />
     <FileInput
       defaultFiles={defaultFile}
+      disabled={args.disabled}
       label="Not multiple (default behavior)"
       list
       size="small"

packages/ui/src/components/FileInput/__stories__/Overlay.stories.tsx

@@ -1,16 +1,53 @@
 import type { StoryFn } from '@storybook/react-vite'
+import { RebootIcon, SendIcon, UploadIcon } from '@ultraviolet/icons'
 import { useRef, useState } from 'react'
 import { Avatar } from '../../Avatar'
+import { Button } from '../../Button'
 import { Stack } from '../../Stack'
+import { TextInput } from '../../TextInput'
 import { FileInput } from '..'
+import { promptContainer, promptInput } from './styles.css'
 
-export const Overlay: StoryFn<typeof FileInput> = () => {
+const Prompt = ({ inputId }: { inputId: string }) => (
+  <Stack
+    className={promptContainer}
+    direction="row"
+    gap={0.5}
+    width="fit-content"
+  >
+    <Button sentiment="neutral" size="medium">
+      <label htmlFor={inputId}>
+        <UploadIcon />
+      </label>
+    </Button>
+    <TextInput
+      className={promptInput}
+      helper="this is an helper"
+      placeholder="Placeholder"
+      size="medium"
+    />
+    <Button sentiment="neutral" size="medium">
+      <RebootIcon />
+    </Button>
+    <Button sentiment="primary" size="medium">
+      <SendIcon />
+    </Button>
+  </Stack>
+)
+
+export const Overlay: StoryFn<typeof FileInput> = args => {
   const [image, setImage] = useState<string | undefined>(undefined)
   const inputRef = useRef<HTMLInputElement>(null)
 
   return (
-    <Stack direction="row" gap={2}>
-      <FileInput aria-label="label" variant="overlay">
+    <Stack direction="column" gap={2}>
+      Drag files in here to see the component
+      <FileInput
+        aria-label="label"
+        disabled={args.disabled}
+        title="dnd here"
+        variant="overlay"
+      >
         {image ? (
           <Avatar
             image={image}
@@ -42,6 +79,24 @@ export const Overlay: StoryFn<typeof FileInput> = () => {
       <FileInput aria-label="label-2" title="Drop here" variant="overlay">
         Some content (this is also an overlay)
       </FileInput>
+      <FileInput
+        aria-label="prompt"
+        list
+        listPosition="top"
+        title={
+          <Stack
+            alignItems="center"
+            direction="row"
+            gap={1}
+            justifyContent="center"
+          >
+            <UploadIcon /> Drag file to this area to upload
+          </Stack>
+        }
+        variant="overlay"
+      >
+        {inputId => <Prompt inputId={inputId} />}
+      </FileInput>
     </Stack>
   )
 }

packages/ui/src/components/FileInput/__stories__/styles.css.ts

@@ -1,3 +1,4 @@
+import { theme } from '@ultraviolet/themes'
 import { style } from '@vanilla-extract/css'
 
 export const hereText = style({
@@ -8,3 +9,13 @@ export const hereText = style({
     },
   },
 })
+
+export const promptContainer = style({
+  padding: theme.space[3],
+  paddingBottom: theme.space[1],
+  background: theme.colors.neutral.backgroundWeak,
+  border: `1px solid ${theme.colors.neutral.border}`,
+})
+export const promptInput = style({
+  width: 500,
+})