feat(FileUploadItem): add small size variant#3460
Open
rkdotxyz wants to merge 7 commits into
Open
Conversation
Adds a compact single-line 'small' size variant to FileUploadItem for standalone usage. Includes 20x20 file icon without format text, baseline- aligned filename and file size, and compact action buttons. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
rkdotxyz
requested review from
anuraghazra,
kamleshchandnani,
ravikumar-rajagopalan,
rohankokane-dev,
saurabhdaware and
swapnil-kr1
as code owners
🦋 Changeset detectedLatest commit: af5cf74 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 |
Contributor
|
✅ PR title follows Conventional Commits specification. |
- Update labeler.yml to actions/labeler v5 format (changed-files syntax) - Add changeset for the FileUploadItem small variant feature - Apply prettier formatting Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
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 af5cf74:
|
Collaborator
🛡️ Coverage ReportSummaryFull Coverage Details |
swapnil-kr1
reviewed
Jun 8, 2026
| justifyContent={isSmall ? 'center' : undefined} | ||
| > | ||
| {isSmall ? ( | ||
| <BaseBox |
Contributor
There was a problem hiding this comment.
[major] The small variant's success state does not render a CheckCircleIcon, unlike medium/large variants. Is this intentional by design, or should a small-sized check icon be shown to give users visual confirmation of a successful upload?
If intentional, might be worth a code comment noting the design decision.
Member
Author
There was a problem hiding this comment.
This is intentional by design. At 36px height, the compact layout prioritizes file name and action buttons over status iconography. Adding a check icon here would crowd the row. Will add a code comment noting this decision.
| <BaseBox | ||
| display="flex" | ||
| flexDirection="row" | ||
| alignItems="center" |
Contributor
There was a problem hiding this comment.
[minor] paddingTop="spacing.2" looks like a manual vertical alignment nudge. This may break if the icon or text size changes. Consider using alignSelf="center" on the icon wrapper for more robust alignment.
Member
Author
There was a problem hiding this comment.
Keeping as-is — the paddingTop="spacing.2" is intentional for visual balance with the text baseline at this icon size. Will add a code comment clarifying this.
| iconSize?: 'small' | 'default'; | ||
| }; | ||
|
|
||
| const FileUploadItemIcon: React.ComponentType<FileUploadItemIconProps> = ({ |
Contributor
There was a problem hiding this comment.
[minor] The small error icon uses viewBox="0 0 38 38" (square) while the small non-error icon uses viewBox="0 0 38 39" (slightly taller). This mismatch means the icon's aspect ratio subtly changes between error and non-error states at the same 20×20 rendered size. Should these be consistent?
Member
Author
There was a problem hiding this comment.
Keeping as-is — the viewBox difference (38x38 for error vs 38x39 for non-error) is intentional. The error icon artwork is natively square while the file icon is slightly taller. The mismatch at 20x20 rendered size provides visual balance. Will add a code comment noting this.
| <BaseBox | ||
| width="100%" | ||
| display="flex" | ||
| flexDirection="column" |
Contributor
There was a problem hiding this comment.
[minor · maintainability] The small branch duplicates ~80 lines of action button logic (uploading → close, error → retry+remove, success → preview+remove) that closely mirrors the medium/large branch below. Future bug fixes or new actions will need to be applied in both places.
Consider extracting a shared <FileUploadItemActions size={...} status={...} ... /> component to DRY this up.
Member
Author
There was a problem hiding this comment.
Acknowledged, but keeping as-is for now. The small variant has subtly different button sizes (size="small"), layout (flexDirection="row" inline vs column offsets), and fewer elements (no progress bar, no check icon) — so a shared component would need enough conditional branches that the abstraction may not reduce complexity meaningfully. If a fourth size variant ever comes along, this becomes worth extracting.
- Add code comments for intentional design decisions (no CheckCircleIcon in small success state, paddingTop for visual balance, viewBox mismatch) - Narrow public size type to 'small' | 'medium' | 'large', keep 'variable' as internal-only type used by parent FileUpload component Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fixes import/first ESLint error caused by type declaration splitting the import block. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
'small'size variant (36px height) toFileUploadItemfor standalone usagesurface.border.gray.subtleborder color🤖 Generated with Claude Code