docs: add component anatomy explorer for all compound components#472
docs: add component anatomy explorer for all compound components#472MaxLee-dev wants to merge 1 commit intodocs-component-analyzerfrom
Conversation
Add interactive anatomy examples with ComponentExplorer for 24 compound pattern components. Each example marks all component parts with data-part attributes for hover-based highlighting in the documentation site. Components added: - Simple: Grid, Avatar - Containers: Card, Callout, Collapsible, Breadcrumb - Form Controls: Switch, Checkbox, Radio, RadioGroup, InputGroup, Field - Tabs/Table: Pagination, Tabs, Table - Popup: Tooltip, FloatingBar, Popover, Sheet, NavigationMenu - Complex: Select, MultiSelect, Toast, Menu 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! 이 Pull Request는 컴포넌트 문서의 사용자 경험을 혁신적으로 개선하기 위해 인터랙티브 Anatomy Explorer를 도입합니다. 개발자와 디자이너는 이제 각 컴포넌트의 내부 구조와 파트를 시각적으로 탐색하고 이해할 수 있어, 컴포넌트 사용 및 커스터마이징이 훨씬 용이해질 것입니다. 이는 문서의 가독성과 유용성을 크게 향상시키는 중요한 기능 추가입니다. 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}
There was a problem hiding this comment.
Code Review
이 PR은 복합 컴포넌트(compound components)를 위한 대화형 Anatomy Explorer를 도입하여 문서의 완성도를 크게 높였습니다. 전반적인 구현은 훌륭하며, 자동화된 데이터 생성 스크립트와 다수의 컴포넌트에 대한 문서 업데이트가 인상적입니다. 다만, 일부 새로운 anatomy 예제 파일에서 data-part 속성이 누락되어 Explorer가 특정 파트를 하이라이트하지 못하는 문제가 발견되었습니다. 각 파일에 구체적인 수정 제안을 포함한 리뷰 코멘트를 남겼으니 확인 부탁드립니다. 이 리뷰는 저장소 스타일 가이드에 따라 작성되었습니다.
| <Breadcrumb.RootPrimitive data-part="RootPrimitive"> | ||
| <Breadcrumb.ListPrimitive data-part="ListPrimitive"> | ||
| <Breadcrumb.ItemPrimitive data-part="ItemPrimitive"> | ||
| <Breadcrumb.LinkPrimitive data-part="LinkPrimitive" href="#"> | ||
| Home | ||
| </Breadcrumb.LinkPrimitive> | ||
| </Breadcrumb.ItemPrimitive> | ||
| <Breadcrumb.Separator data-part="Separator" /> | ||
| <Breadcrumb.ItemPrimitive> | ||
| <Breadcrumb.LinkPrimitive href="#">Products</Breadcrumb.LinkPrimitive> | ||
| </Breadcrumb.ItemPrimitive> | ||
| <Breadcrumb.Separator /> | ||
| <Breadcrumb.Ellipsis data-part="Ellipsis" /> | ||
| <Breadcrumb.Separator /> | ||
| <Breadcrumb.ItemPrimitive> | ||
| <Breadcrumb.LinkPrimitive href="#" current> | ||
| Details | ||
| </Breadcrumb.LinkPrimitive> | ||
| </Breadcrumb.ItemPrimitive> | ||
| </Breadcrumb.ListPrimitive> | ||
| </Breadcrumb.RootPrimitive> |
There was a problem hiding this comment.
Anatomy Explorer가 모든 파트를 하이라이트할 수 있도록 data-part 속성이 누락된 컴포넌트들에 추가하는 것이 좋습니다. breadcrumb.json에 정의된 모든 파트가 예제 코드에 포함되어야 합니다. 예를 들어, 일부 ItemPrimitive, LinkPrimitive 및 Separator에 data-part 속성이 누락되었습니다.
<Breadcrumb.RootPrimitive data-part="RootPrimitive">
<Breadcrumb.ListPrimitive data-part="ListPrimitive">
<Breadcrumb.ItemPrimitive data-part="ItemPrimitive">
<Breadcrumb.LinkPrimitive data-part="LinkPrimitive" href="#">
Home
</Breadcrumb.LinkPrimitive>
</Breadcrumb.ItemPrimitive>
<Breadcrumb.Separator data-part="Separator" />
<Breadcrumb.ItemPrimitive data-part="ItemPrimitive">
<Breadcrumb.LinkPrimitive data-part="LinkPrimitive" href="#">Products</Breadcrumb.LinkPrimitive>
</Breadcrumb.ItemPrimitive>
<Breadcrumb.Separator data-part="Separator" />
<Breadcrumb.Ellipsis data-part="Ellipsis" />
<Breadcrumb.Separator data-part="Separator" />
<Breadcrumb.ItemPrimitive data-part="ItemPrimitive">
<Breadcrumb.LinkPrimitive data-part="LinkPrimitive" href="#" current>
Details
</Breadcrumb.LinkPrimitive>
</Breadcrumb.ItemPrimitive>
</Breadcrumb.ListPrimitive>
</Breadcrumb.RootPrimitive>
| <FloatingBar.PopupPrimitive data-part="PopupPrimitive"> | ||
| This is the floating bar content. | ||
| <FloatingBar.Close data-part="Close">Close</FloatingBar.Close> | ||
| </FloatingBar.PopupPrimitive> |
There was a problem hiding this comment.
floating-bar.json에 정의된 Popup 파트가 예제에 누락되었습니다. Anatomy Explorer에서 해당 파트를 식별하고 하이라이트할 수 있도록 FloatingBar.Popup 컴포넌트와 data-part="Popup" 속성을 추가해야 합니다. 다른 컴포넌트(예: Popover)의 anatomy 예제를 참고하시면 좋습니다.
<FloatingBar.PopupPrimitive data-part="PopupPrimitive">
<FloatingBar.Popup data-part="Popup">
This is the floating bar content.
<FloatingBar.Close data-part="Close">Close</FloatingBar.Close>
</FloatingBar.Popup>
</FloatingBar.PopupPrimitive>
| <Menu.PopupPrimitive data-part="PopupPrimitive"> | ||
| <Menu.Group data-part="Group"> | ||
| <Menu.GroupLabel data-part="GroupLabel">File</Menu.GroupLabel> | ||
| <Menu.Item data-part="Item">New File</Menu.Item> | ||
| <Menu.Item>Open File</Menu.Item> | ||
| </Menu.Group> | ||
| <Menu.Separator data-part="Separator" /> | ||
| <Menu.CheckboxItemPrimitive data-part="CheckboxItemPrimitive"> | ||
| <Menu.CheckboxItem data-part="CheckboxItem"> | ||
| <Menu.CheckboxItemIndicatorPrimitive data-part="CheckboxItemIndicatorPrimitive" /> | ||
| Auto Save | ||
| </Menu.CheckboxItem> | ||
| </Menu.CheckboxItemPrimitive> | ||
| <Menu.Separator /> | ||
| <Menu.RadioGroup data-part="RadioGroup" defaultValue="light"> | ||
| <Menu.RadioItemPrimitive data-part="RadioItemPrimitive" value="light"> | ||
| <Menu.RadioItem data-part="RadioItem" value="light"> | ||
| <Menu.RadioItemIndicatorPrimitive data-part="RadioItemIndicatorPrimitive" /> | ||
| Light | ||
| </Menu.RadioItem> | ||
| </Menu.RadioItemPrimitive> | ||
| <Menu.RadioItemPrimitive value="dark"> | ||
| <Menu.RadioItem value="dark">Dark</Menu.RadioItem> | ||
| </Menu.RadioItemPrimitive> | ||
| </Menu.RadioGroup> | ||
| <Menu.Separator /> | ||
| <Menu.SubmenuRoot data-part="SubmenuRoot"> | ||
| <Menu.SubmenuTriggerItem data-part="SubmenuTriggerItem"> | ||
| Export | ||
| </Menu.SubmenuTriggerItem> | ||
| <Menu.SubmenuPopup data-part="SubmenuPopup"> | ||
| <Menu.Item>PDF</Menu.Item> | ||
| <Menu.Item>CSV</Menu.Item> | ||
| </Menu.SubmenuPopup> | ||
| </Menu.SubmenuRoot> | ||
| </Menu.PopupPrimitive> |
There was a problem hiding this comment.
Anatomy Explorer가 모든 파트를 올바르게 하이라이트할 수 있도록 일부 컴포넌트에 data-part 속성을 추가하고, 누락된 Menu.Popup 컴포넌트를 추가해야 합니다.
- 여러
Menu.Item,Menu.Separator,Menu.RadioItemPrimitive,Menu.RadioItem에data-part속성이 누락되었습니다. menu.json에 정의된Popup파트가 예제에 없습니다.Menu.PopupPrimitive내부에Menu.Popup컴포넌트를 추가하고data-part="Popup"속성을 지정해야 합니다.
<Menu.PopupPrimitive data-part="PopupPrimitive">
<Menu.Popup data-part="Popup">
<Menu.Group data-part="Group">
<Menu.GroupLabel data-part="GroupLabel">File</Menu.GroupLabel>
<Menu.Item data-part="Item">New File</Menu.Item>
<Menu.Item data-part="Item">Open File</Menu.Item>
</Menu.Group>
<Menu.Separator data-part="Separator" />
<Menu.CheckboxItemPrimitive data-part="CheckboxItemPrimitive">
<Menu.CheckboxItem data-part="CheckboxItem">
<Menu.CheckboxItemIndicatorPrimitive data-part="CheckboxItemIndicatorPrimitive" />
Auto Save
</Menu.CheckboxItem>
</Menu.CheckboxItemPrimitive>
<Menu.Separator data-part="Separator" />
<Menu.RadioGroup data-part="RadioGroup" defaultValue="light">
<Menu.RadioItemPrimitive data-part="RadioItemPrimitive" value="light">
<Menu.RadioItem data-part="RadioItem" value="light">
<Menu.RadioItemIndicatorPrimitive data-part="RadioItemIndicatorPrimitive" />
Light
</Menu.RadioItem>
</Menu.RadioItemPrimitive>
<Menu.RadioItemPrimitive data-part="RadioItemPrimitive" value="dark">
<Menu.RadioItem data-part="RadioItem" value="dark">Dark</Menu.RadioItem>
</Menu.RadioItemPrimitive>
</Menu.RadioGroup>
<Menu.Separator data-part="Separator" />
<Menu.SubmenuRoot data-part="SubmenuRoot">
<Menu.SubmenuTriggerItem data-part="SubmenuTriggerItem">
Export
</Menu.SubmenuTriggerItem>
<Menu.SubmenuPopup data-part="SubmenuPopup">
<Menu.Item data-part="Item">PDF</Menu.Item>
<Menu.Item data-part="Item">CSV</Menu.Item>
</Menu.SubmenuPopup>
</Menu.SubmenuRoot>
</Menu.Popup>
</Menu.PopupPrimitive>
| Home | ||
| </NavigationMenu.Link> | ||
| </NavigationMenu.Item> | ||
| <NavigationMenu.Item> |
There was a problem hiding this comment.
Anatomy Explorer에서 모든 Item을 하이라이트할 수 있도록 이 NavigationMenu.Item 컴포넌트에도 data-part="Item" 속성을 추가하는 것이 좋습니다.
| <NavigationMenu.Item> | |
| <NavigationMenu.Item data-part="Item"> |
| <Table.Root data-part="Root" width="100%"> | ||
| <Table.ColumnGroup data-part="ColumnGroup"> | ||
| <Table.Column data-part="Column" /> | ||
| <Table.Column /> | ||
| </Table.ColumnGroup> | ||
| <Table.Header data-part="Header"> | ||
| <Table.Row data-part="Row"> | ||
| <Table.Heading data-part="Heading">Name</Table.Heading> | ||
| <Table.Heading>Role</Table.Heading> | ||
| </Table.Row> | ||
| </Table.Header> | ||
| <Table.Body data-part="Body"> | ||
| <Table.Row> | ||
| <Table.Cell data-part="Cell">Olivia Park</Table.Cell> | ||
| <Table.Cell>Designer</Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row> | ||
| <Table.Cell>Ethan Kim</Table.Cell> | ||
| <Table.Cell>Developer</Table.Cell> | ||
| </Table.Row> | ||
| </Table.Body> | ||
| <Table.Footer data-part="Footer"> | ||
| <Table.Row> | ||
| <Table.Cell colSpan={2}> | ||
| <Text typography="body3" foreground="hint-100"> | ||
| 2 members total | ||
| </Text> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| </Table.Footer> | ||
| </Table.Root> |
There was a problem hiding this comment.
Anatomy Explorer가 테이블의 모든 구성 요소를 하이라이트할 수 있도록 data-part 속성이 누락된 여러 요소에 추가해야 합니다. Column, Row, Heading, Cell 등 여러 컴포넌트에 data-part가 빠져 있습니다.
<Table.Root data-part="Root" width="100%">
<Table.ColumnGroup data-part="ColumnGroup">
<Table.Column data-part="Column" />
<Table.Column data-part="Column" />
</Table.ColumnGroup>
<Table.Header data-part="Header">
<Table.Row data-part="Row">
<Table.Heading data-part="Heading">Name</Table.Heading>
<Table.Heading data-part="Heading">Role</Table.Heading>
</Table.Row>
</Table.Header>
<Table.Body data-part="Body">
<Table.Row data-part="Row">
<Table.Cell data-part="Cell">Olivia Park</Table.Cell>
<Table.Cell data-part="Cell">Designer</Table.Cell>
</Table.Row>
<Table.Row data-part="Row">
<Table.Cell data-part="Cell">Ethan Kim</Table.Cell>
<Table.Cell data-part="Cell">Developer</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Footer data-part="Footer">
<Table.Row data-part="Row">
<Table.Cell data-part="Cell" colSpan={2}>
<Text typography="body3" foreground="hint-100">
2 members total
</Text>
</Table.Cell>
</Table.Row>
</Table.Footer>
</Table.Root>
| <Tabs.List data-part="List"> | ||
| <Tabs.Button data-part="Button" value="overview"> | ||
| Overview | ||
| </Tabs.Button> | ||
| <Tabs.Button value="features">Features</Tabs.Button> | ||
| <Tabs.IndicatorPrimitive data-part="IndicatorPrimitive" /> | ||
| </Tabs.List> | ||
| </Tabs.ListPrimitive> | ||
|
|
||
| <Tabs.Panel data-part="Panel" value="overview"> | ||
| <Text typography="body2" foreground="normal-100"> | ||
| Overview content | ||
| </Text> | ||
| </Tabs.Panel> | ||
|
|
||
| <Tabs.Panel value="features"> | ||
| <Text typography="body2" foreground="normal-100"> | ||
| Features content | ||
| </Text> | ||
| </Tabs.Panel> |
There was a problem hiding this comment.
Anatomy Explorer의 일관된 동작을 위해 data-part 속성이 누락된 Tabs.Button과 Tabs.Panel에 각각 data-part="Button"과 data-part="Panel"을 추가하는 것이 좋습니다.
| <Tabs.List data-part="List"> | |
| <Tabs.Button data-part="Button" value="overview"> | |
| Overview | |
| </Tabs.Button> | |
| <Tabs.Button value="features">Features</Tabs.Button> | |
| <Tabs.IndicatorPrimitive data-part="IndicatorPrimitive" /> | |
| </Tabs.List> | |
| </Tabs.ListPrimitive> | |
| <Tabs.Panel data-part="Panel" value="overview"> | |
| <Text typography="body2" foreground="normal-100"> | |
| Overview content | |
| </Text> | |
| </Tabs.Panel> | |
| <Tabs.Panel value="features"> | |
| <Text typography="body2" foreground="normal-100"> | |
| Features content | |
| </Text> | |
| </Tabs.Panel> | |
| <Tabs.List data-part="List"> | |
| <Tabs.Button data-part="Button" value="overview"> | |
| Overview | |
| </Tabs.Button> | |
| <Tabs.Button data-part="Button" value="features">Features</Tabs.Button> | |
| <Tabs.IndicatorPrimitive data-part="IndicatorPrimitive" /> | |
| </Tabs.List> | |
| </Tabs.ListPrimitive> | |
| <Tabs.Panel data-part="Panel" value="overview"> | |
| <Text typography="body2" foreground="normal-100"> | |
| Overview content | |
| </Text> | |
| </Tabs.Panel> | |
| <Tabs.Panel data-part="Panel" value="features"> | |
| <Text typography="body2" foreground="normal-100"> | |
| Features content | |
| </Text> | |
| </Tabs.Panel> |
noahchoii
left a comment
noahchoii
left a comment
There was a problem hiding this comment.
Thanks for your work! Explorer looks really great! I've left a few questions and points for discussion below—please take a look!
-
The reason we initially proposed adding Anatomy was to clearly show the hierarchical structure between component elements, but that part seems to be missing!
-
Elements like PortalPrimitive and PopupPrimitive don't seem to be navigating properly—please check this!
-
For rendering states like the open state of Overlay elements or the checked state of checkboxes, adjusting the initial value to true or similar might be beneficial!
-
Clicking the left button doesn't seem to trigger any specific event, but the active style remains, potentially creating an expectation among users that another action will occur. How about leaving only the hover style, or using a different element?
-
The
roleof the left sidebar is set tonavigation. The navigation role is a collection of links used for navigating a website. Personally, I feel this doesn't fit this component. Is there a specific reason you determined it should be the navigation role?
2 participants
Related Issues
Description of Changes
An interactive Anatomy Explorer has been implemented for all compound pattern components, and an Anatomy section has been added to each component's documentation.
1. Component Explorer System Implementation
2. Automated Anatomy Data Generation
generate:anatomyscript automatically generates anatomy JSON fromindex.parts.ts3. Add Anatomy Examples for 25 Components
4. MDX Documentation Updates
<componentexplorer>before the Props Table sectionChecklist