-
Notifications
You must be signed in to change notification settings - Fork 12
fix(FileUpload): update styling #679
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR improves the visual presentation and state management of FileUpload components by repositioning progress bars to appear directly beneath file names and enhancing UI consistency.
- Restructured layout to display progress bars under file names instead of in separate containers
- Enhanced state management to prevent progress and success states from conflicting
- Replaced inline styles with styled components and improved error state styling
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
File | Description |
---|---|
src/components/FileUpload/FileUpload.tsx | Restructured file info layout, moved progress bar positioning, and improved state-based rendering logic |
src/components/FileUpload/FileMultiUpload.tsx | Applied consistent layout changes and state management improvements to match FileUpload component |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's perfect!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good to me. One suggestion about Intl.NumberFormat
.
Also, for these kinds of changes, screenshots of the new changes would be very helpful
<FileDetails> | ||
<FileName>{truncateFilename(file.name)}</FileName> | ||
{file.status === "uploading" && ( | ||
<FileUploadDescription>{file.progress}%</FileUploadDescription> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should probably use Intl.NumberFormat
with a style
of percent
, just because it gives us more future proofing
Improved progress bar positioning to appear directly under file name text for both
FileUpload
andFileMultiUpload
components. Aligns with changes @crisalbu gave me. It is backward compatible so no concerns for control plane usages.