Rework file uploader dropzone and import feedback - #287
Merged
Conversation
The dropzone now follows the new design: static SVG illustrations replace the icon composite (colored variant while dragging a file), and the error state uses a dedicated interrupted-progress icon. A description prop (with a default and an error tone) lets consumers display contextual feedback under the selected file. Dragging over children of the dropzone no longer makes the hover state flicker: dragleave events are ignored while the pointer stays inside the zone.
jbpenrath
reviewed
Jul 30, 2026
Parsed-row counts and import failures were displayed in Alerts below the uploader while parse errors already appeared on the file itself. Both now go through the uploader description so all import feedback lives in one place. ShareModal reports a failed onImportContacts with a message consumers can override via importErrorMessage, cleared when a new file is selected or the modal closes. importModalChildren is kept for extra custom content.
The sample rows should show the full role wording expected by the products consuming the import.
de-DE and es-ES were missing the whole upload section and every locale but en-US and fr-FR was missing the share import section, so the new components fell back to English. Also adds the failed-import message introduced on this branch. All locales now have full key parity with en-US.
Keep the unreleased section in sync with the branch content before opening the review.
The dragging state doubled the border width, growing the dropzone by 2px and shifting the surrounding layout. The inset box-shadow already renders the thicker border, so the border-width override is dropped.
The dropzone height is content-driven, so box-sizing cannot absorb a wider border and the box grew by 2px while dragging. An outline with a negative offset paints the same 2px border on top of the box without ever affecting layout.
Review feedback: the error state now renders an inline icon, leaving progress.svg, the old error badge mark and its styles unreferenced.
Review feedback: the bundled template now says administrator but the share modal stories still used admin as role value, so importing the template into the story flow produced rows matching no role.
Hardcoded hex values in the inline icon bypassed theming. The icon now inherits its color, set on the icon slot with the neutral secondary design token.
Minor Changes - ✨(front) rework file uploader dropzone states - ♻️(front) surface import feedback through the uploader description Patch Changes - 🌐(front) complete upload and import translations - 🐛(front) keep dropzone size stable while dragging
NathanVss
force-pushed
the
fix/upload-patch
branch
from
July 31, 2026 10:22
c59062e to
240067f
Compare
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
2 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.
What
description/descriptionModeprops, and a fix for the hover flicker while dragging over the zone.ShareModalgets animportErrorMessageprop to customize the failure message;importModalChildrenis unchanged.How to test
Components/Forms/FileUploader(Dragging, SingleWithDescription, SingleWithErrorDescription) andComponents/Share(ImportContacts, ImportContactsFailure).yarn playwright test e2e/share-import-modal e2e/share-modal/share-modal-import-integration.spec.tsx