docs: improve component explorer UI and apply design tokens #471
Conversation
…ponent explorer - Created anatomy JSON files for Popover, RadioGroup, Radio, Select, Sheet, Switch, Table, Tabs, Toast, Tooltip components. - Implemented a script to generate anatomy files from component parts. - Enhanced the preview page to support an explorer mode for visualizing component anatomy. - Developed the ComponentExplorer and AnatomyPanel components for displaying component parts. - Added highlight overlay functionality to visually indicate hovered parts in the component preview. - Updated the layout and styling of the preview components for better user experience.
…proved typography
- Remove 'Live Preview' header from component explorer for cleaner UI - Replace hardcoded colors with Vapor UI design tokens in highlight overlay - Remove chevron icon from part button for simplified design Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary of ChangesHello @MaxLee-dev, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request introduces a significant new interactive feature to the Vapor UI documentation: a 'Component Explorer'. This tool allows users to delve into the internal structure of UI components, providing a visual representation of their individual parts and how they are composed. The implementation includes a new automated process for generating component anatomy data, a dedicated UI for the explorer, and a robust communication mechanism between the main documentation page and the component preview iframe to enable interactive highlighting. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
apps/website/src/components/component-explorer/component-explorer.tsx
Outdated
Show resolved
Hide resolved
apps/website/src/components/component-explorer/iframe/highlight-overlay.tsx
Show resolved
Hide resolved
apps/website/src/components/component-explorer/iframe/highlight-overlay.tsx
Outdated
Show resolved
Hide resolved
- Add AbortController to prevent race conditions when componentName changes rapidly - Add error state management and display error UI with icon and message - Add retry button for failed anatomy data fetches - Check HTTP response status and handle network errors properly - Fix highlight overlay z-index from z-1 to z-10 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
| if (highlightedPart === 'Trigger') { | ||
| const dialogPopup = document.querySelector( | ||
| '[data-part="PopupPrimitive"], [data-part="Popup"]', | ||
| ); | ||
| if (dialogPopup) { | ||
| setIsVisible(false); | ||
| return; | ||
| } | ||
| } |
There was a problem hiding this comment.
Dialog can definitely be ambiguous... However, since elements like Menu and Select don't overlap with Trigger and Popup, I'm concerned that not displaying the Trigger when it's open might actually cause confusion.
There was a problem hiding this comment.
That's a good suggestion. Having considered that point, I believe an Overlay covering the entire screen is semantically more appropriate than a Popup, so I've completed the modification. (PopupPrimitive → OverlayPrimitive)
1d513c5
apps/website/src/components/component-explorer/iframe/highlight-overlay.tsx
Show resolved
Hide resolved
| onBlur?: () => void; | ||
| } | ||
|
|
||
| export const PartButton = memo(function PartButton({ |
There was a problem hiding this comment.
I understand that using memo to memoize a component prevents the component itself from re-rendering. Is this part okay?
| onBlur, | ||
| }: PartButtonProps) { | ||
| return ( | ||
| <Button |
There was a problem hiding this comment.
It might be worth considering whether this element should actually be a button. Currently, it directly handles all mouse events, and clicking it doesn't trigger any action.
Also, simply hovering the mouse sets aria-pressed to true, which seems to be an incorrect WAI-ARIA pattern!
MaxLee-dev
changed the title
…s-component-analyzer
…component explorer
2 participants
Description of Changes
The UI of the Component Explorer has been improved and design tokens applied:
Checklist