From bb05fdc361ef3b536a63479c29cc86f90c097a10 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Wed, 28 Aug 2024 10:34:13 -0500 Subject: [PATCH] docs(RSP): clean up TreeView docs (#6959) * add maxWidth to examples * dedupe items --- .../@react-spectrum/tree/docs/TreeView.mdx | 52 +++---------------- 1 file changed, 6 insertions(+), 46 deletions(-) diff --git a/packages/@react-spectrum/tree/docs/TreeView.mdx b/packages/@react-spectrum/tree/docs/TreeView.mdx index d8a01afbc44..06334ca4dc8 100644 --- a/packages/@react-spectrum/tree/docs/TreeView.mdx +++ b/packages/@react-spectrum/tree/docs/TreeView.mdx @@ -51,7 +51,7 @@ keywords: [tree, grid] ## Example ```tsx example - + Documents @@ -125,7 +125,7 @@ let items: MyItem[] = [ function ExampleTree(props) { return ( - + {(item: MyItem) => ( {item.name} @@ -337,7 +337,7 @@ This behavior is slightly different in the highlight selection style, where sing Tree items may also be links to another page or website. This can be achieved by passing the `href` prop to the `` component. Links behave the same way as described above for item actions depending on the `selectionMode` and `selectionStyle`. ```tsx example - + Bookmarks @@ -364,27 +364,7 @@ The `` component works with frameworks and client side routers lik ### With action groups ```tsx example -type MyItem = { - id: string, - name: string, - icon: JSX.Element, - childItems?: MyItem[] -}; - -let items: MyItem[] = [ - {id: 'projects', name: 'Projects', icon: , childItems: [ - {id: 'project-1', name: 'Project 1', icon: }, - {id: 'project-2', name: 'Project 2', icon: , childItems: [ - {id: 'document-a', name: 'Document A', icon: }, - {id: 'document-b', name: 'Document B', icon: }, - ]} - ]}, - {id: 'reports', name: 'Reports', icon: , childItems: [ - {id: 'report-1', name: 'Reports 1', icon: } - ]} -]; - - + {(item: MyItem) => ( {item.name} @@ -407,27 +387,7 @@ let items: MyItem[] = [ ### With action menus ```tsx example -type MyItem = { - id: string, - name: string, - icon: JSX.Element, - childItems?: MyItem[] -}; - -let items: MyItem[] = [ - {id: 'projects', name: 'Projects', icon: , childItems: [ - {id: 'project-1', name: 'Project 1', icon: }, - {id: 'project-2', name: 'Project 2', icon: , childItems: [ - {id: 'document-a', name: 'Document A', icon: }, - {id: 'document-b', name: 'Document B', icon: }, - ]} - ]}, - {id: 'reports', name: 'Reports', icon: , childItems: [ - {id: 'report-1', name: 'Reports 1', icon: } - ]} -]; - - + {(item: MyItem) => ( {item.name} @@ -477,7 +437,7 @@ function renderEmptyState() { ); } - + {[]} ```