feat: add FileUpload component
#2016
Conversation
🦋 Changeset detectedLatest commit: e126797 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
✅ PR title follows Conventional Commits specification. |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit e126797:
|
snitin315
force-pushed
the
feat/add-file-upload
branch
from
9068984 to
1bca91e
Compare
snitin315
requested review from
chaitanyadeorukhkar and
kamleshchandnani
as code owners
|
There's a quite a lot of layout shift which is happening after selecting a file, this is happening because after the "Upload GST" label the margin is increasing, ideally margin should stay same. Screen.Recording.2024-02-23.at.2.56.42.PM.movOn design the margin stays consistent: 
|
|
File name and the Tick icon doesn't look aligned vertically. 
On design: 
|
|
There's a gap in the bottom after the progressbar: 
Gap not present in design: 
|
|
In the first storybook example, can you wire up the controls? I cannot play around with different variants like isDisabled. |
Fixed
Done
Updated
Can you try again? I think this is the same as #2016 (comment)
Fixed. |
Weird, cannot find any stories which shows the tick mark anymore, Unable to confirm this.
The file upload progress story doesn't show the progressbar anymore upon selecting the file, Unable to confirm this. |
|
this one still exists. |
|
labelPosition: left looks broken: 
|
| useMemo(() => { | ||
| for (const file of selectedFiles) { | ||
| if (!file.id) { | ||
| file.id = `${new Date().getTime().toString()}${Math.floor(Math.random() * 1000000)}`; |
There was a problem hiding this comment.
can we not use our useId('file-upload-id') hook?
|
@anuraghazra Fixed the stories, you can check again.
Fixed
It's the current behavior of FormLabel for all our inputs. The 
|
packages/blade/src/components/FileUpload/StyledFileUploadItemWrapper.tsx
Outdated
Show resolved
Hide resolved
|
The examples in stories and examples on stackblitz seem like same examples. Maybe you can keep basic examples in stories and move complex examples in stackblitz because they'll be able to see full code on stackblitz |
Stackblitz takes significant boot-up time hence I've kept both. Users can play around with stories and look at examples if they want to see the implementation. |
snitin315
added
Review - L2
Description