feat(CSVColumnMapper): redesign column cards with design system tokens#48
Merged
feat(CSVColumnMapper): redesign column cards with design system tokens#48
Conversation
- Redesign column cards to match professional reference design - Add status icons: checkmark for mapped columns, warning for unmapped - Apply semantic border colors: success/30 for mapped, warning/30 for unmapped - Display sample data in monospace font within muted pill background - Use uppercase labels with tracking-wider for 'SAMPLE DATA' and 'MAP TO FIELD' - Integrate Select component from design system for field mapping dropdown - Add warning ring indicator on Select when column is unmapped - Replace Button component with simple text link for Ignore/Include action - Use conditional icons: + for Include Column, × for Ignore Column - Apply opacity-50 and neutral border for ignored/disabled cards - Configure Storybook controls with proper argTypes and default args - Apply design system CSS variables throughout for consistent theming
There was a problem hiding this comment.
Pull request overview
This PR redesigns the CSVColumnMapper component to use design system tokens and components for a more professional, consistent appearance.
Changes:
- Replaced hardcoded colors with semantic design system tokens (e.g.,
bg-card,text-primary-foreground,border-success/30) - Integrated
ButtonandSelectcomponents from the design system to replace native HTML elements - Added status icons (checkmark for mapped, warning for unmapped) and visual indicators to column cards
- Enhanced Storybook configuration with proper argTypes and controls for
importingandimportProgressprops
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/components/CSVColumnMapper/CSVColumnMapper.tsx | Redesigned UI with design tokens, added status icons, integrated Button/Select components, improved accessibility with uppercase labels |
| src/components/CSVColumnMapper/CSVColumnMapper.stories.tsx | Added argTypes configuration and wired importing/importProgress props through wrapper component |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Remove unused 'labels' parameter from CSVColumnCard component - Remove unused label properties from CSVColumnCardProps interface - Remove unused label properties (ignore, include, incomingSample, fieldType) from CSVColumnMapperLabels - Replace hardcoded text-[10px] with text-xs for design system consistency Addresses Copilot review feedback on PR #48
Deploying ui with
|
| Latest commit: |
2805ced
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7dd98dce.ui-6d0.pages.dev |
| Branch Preview URL: | https://feature-csv-column-mapper-up.ui-6d0.pages.dev |
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
garrity-miepub
commented
Feb 2, 2026
Contributor
Author
garrity-miepub
left a comment
garrity-miepub
left a comment
There was a problem hiding this comment.
Addressed Copilot's feedback on uppercase + tracking-wider:
These classes are not redundant - they serve different purposes:
uppercaseappliestext-transform: uppercase(converts text to all caps)tracking-widerappliesletter-spacing: 0.05em(adds spacing between letters)
Using both together is a common design pattern for stylized section labels, making text more readable when capitalized. Both are intentional.
Member
In your example, the dropdown gets cut off by the card around it. This shouldn't be the case & needs resolved before merging. |
- Remove overflow-hidden from card container to allow Select dropdown to extend beyond card boundaries without being clipped - Replace hardcoded text-white on status icons with design system tokens: - Success checkmark: use text-success-foreground - Warning icon: use text-warning-foreground - Warning icon inner circle: use fill-warning class - Ensures proper color adaptation when switching between light/dark modes and across different brand themes
Contributor
Author
|
fixed dropdown column-mapper-2.mov |
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
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.
csv-column-mapper.mov