docs: update component thumbnails with new visual design #4457
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
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. |
There was a problem hiding this comment.
Pull request overview
This pull request comprehensively redesigns SVG thumbnails across the documentation to achieve better visual consistency, improved clarity, and stronger alignment with the design system. The changes span 16 files and introduce thumbnails for new components (segmented-control, use-dialog, use-toaster) while modernizing existing ones through simplified geometries, consistent sizing, updated color variables, and unified stroke widths.
Key Changes:
- Added thumbnail mappings for
segmented-control,use-dialog, anduse-toastercomponents - Standardized thumbnail dimensions, stroke widths (primarily to 2px), and border radius values
- Replaced text elements with abstract shapes (rectangles with rounded corners) for cleaner, more maintainable designs
- Updated color references to use design system variables consistently
- Simplified complex SVG paths to improve rendering performance and maintainability
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
docs/components/overview/ComponentThumbnail.tsx |
Added mappings for three new components: segmented-control, use-dialog, and use-toaster |
docs/components/thumbnails/typography.tsx |
Updated comments to English, replaced text elements with abstract rectangles, standardized sizing |
docs/components/thumbnails/status.tsx |
Improved visual consistency with updated dimensions, stroke widths, and simplified Badge design |
docs/components/thumbnails/overlays.tsx |
Dramatically simplified overlay thumbnails (Drawer, Modal, Popover, Tooltip, Whisper) with cleaner designs |
docs/components/thumbnails/navigation.tsx |
Simplified all navigation component thumbnails with consistent styling and abstract representations |
docs/components/thumbnails/misc.tsx |
Minor opacity and stroke width adjustments for Animation, CustomProvider, DOMHelper, and Hooks |
docs/components/thumbnails/media.tsx |
Updated Avatar, Icon, and Image thumbnails with cleaner layouts and better proportions |
docs/components/thumbnails/layout.tsx |
Simplified layout component thumbnails (Box, Center, Divider, Frame, Grid, Stack) with consistent fills and opacity |
docs/components/thumbnails/form.tsx |
Streamlined form component designs with consistent input field representations |
docs/components/thumbnails/disclosure.tsx |
Simplified Accordion, Tabs, and VisuallyHidden with cleaner chevron indicators |
docs/components/thumbnails/default.tsx |
Updated default thumbnail with dashed border and removed fill |
docs/components/thumbnails/dateTime.tsx |
Massively simplified date/time picker thumbnails, reducing complexity by ~70% |
docs/components/thumbnails/dataPickers.tsx |
Simplified all data picker thumbnails with consistent dropdown patterns and cleaner checkbox representations |
docs/components/thumbnails/dataGrid.tsx |
Streamlined table thumbnails with cleaner grid representations and simplified tree structures |
docs/components/thumbnails/dataEntry.tsx |
Added new SegmentedControl component; simplified all input components with consistent styling |
docs/components/thumbnails/buttons.tsx |
Removed text labels from buttons, converted IconButton to circle, redesigned ButtonGroup with path-based approach |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4457 +/- ##
=======================================
Coverage 94.47% 94.47%
=======================================
Files 559 559
Lines 13740 13740
Branches 4081 4081
=======================================
Hits 12981 12981
Misses 687 687
Partials 72 72
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
1 participant
This pull request updates and refines the SVG thumbnails for various UI components in the documentation, focusing on improving visual consistency, clarity, and alignment with the design system. It also adds thumbnails for new hooks and components. The changes are grouped into improvements to component mapping and significant visual updates to the thumbnails themselves.
Component and Hook Thumbnail Mapping Updates:
segmented-controlcomponent and theuse-dialoganduse-toasterhooks inComponentThumbnail.tsx. [1] [2]Visual and Structural Updates to Thumbnails:
Buttons:
Buttonthumbnail to a more abstract representation, removing the text label and using rectangles for a cleaner look.IconButtonthumbnail from a rounded rectangle to a circle, improving visual consistency, and addedstrokeLinejoin="round"for better rendering. [1] [2]ButtonGroupthumbnail to use paths for a more accurate depiction of grouped buttons and improved border rendering.Data Display Components:
Accordion,Carousel,List,Timeline,Panel,Card,Stat, andTagto use consistent sizing, spacing, and opacity. These changes enhance readability, align with the design system, and provide a more modern appearance. [1] [2] [3] [4] [5] [6] [7] [8]Default Thumbnail: