✨(components) add mass import into share modal + others components#282
Open
NathanVss wants to merge 8 commits into
Open
✨(components) add mass import into share modal + others components#282NathanVss wants to merge 8 commits into
NathanVss wants to merge 8 commits into
Conversation
NathanVss
force-pushed
the
feat/import-contact
branch
2 times, most recently
from
July 21, 2026 09:24
6e05378 to
5c3e706
Compare
This version ships minor fixes that we need for the import contact feature.
Wrap cunningham's new Alert to swap the material icons for the kit's own icon set, so alerts render consistently with the other components. It is exported at the root for direct use by consumer apps.
The uploader is a form control, so it now lives alongside the other form components and its stories under Components/Forms. The move also brings an MDX docs page. Root exports are unchanged for consumers.
Role and link dropdown triggers now use nano neutral buttons with the kit's chevron icons, and section titles are lighter, to match the new share modal design. User rows break long names and emails instead of overflowing. Stories say Reader instead of Viewer to follow the products' wording.
Apps can now offer a CSV/XLSX contact import with a downloadable template. Parsing and validation (type, size, row count, columns) happen client side via read-excel-file so errors surface immediately in the uploader, before anything reaches the backend. The rows are handed to the app through onImport. Behaviour is covered by dedicated component tests.
With allowFileImport set, an Import contacts menu in the members title opens ShareImportModal, so apps only have to wire onImportContacts. Returning false keeps the modal open for the app to surface a server error through importModalChildren. The stories showcase the flow and its failure path, and the component docs move to a proper MDX page.
The single spec had grown too large to navigate as the modal gained features. Tests are now grouped per area (basics, link settings, invitations, members, search, import) on top of a shared mount helper that records callback calls so scenarios stay serializable across the Playwright CT bridge.
NathanVss
force-pushed
the
feat/import-contact
branch
from
July 23, 2026 13:44
995b6e7 to
9304a78
Compare
The spec asserted the input's y equals the last chip row exactly. On CI's Linux font rendering the chips are wider, the last row is full and the input wraps to its own row below, so the equality only held on chromium. Assert the input never stays pinned above the chip rows instead, which is the behaviour the test is really about.
PanchoutNathan
approved these changes
Jul 24, 2026
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.
This PR adds a contacts import flow to the share modal, plus the building blocks it needed.
ShareImportModal: import contacts from a CSV/XLSX file (email, role). Parsing and validation happen client side, the parsed rows are handed to the consumer viaonImportContacts. A template file can be downloaded from the modal.allowFileImportprop that shows an "Import contacts" menu on the members title (hidden whencanUpdateis false).CleanShot.2026-07-20.at.17.22.18.mp4
Before
After