Skip to content

Commit 90bc6c0

Browse files
snowystingerdevongovett
snowystinger
and
devongovett
authored
docs: RAC Tree docs (#7730)
* docs: RAC Tree docs * Finish docs page for RAC Tree * fix all the types * make some styles nicer * remove unstable, add anatomy * Add little svg * remove beta tag and add example card * fix example contrast problems * review updates * formatting and reusing code * grammar * Tree starter * turn on verdaccio * turn on starterkits * Revert "turn on verdaccio" This reverts commit e6bd506. * Make arrow in anatomy diagram closer to checkbox * formatting * Add Tree to vanilla starters * Turn on verdaccio again * fix types * Revert "Turn on verdaccio again" This reverts commit 2bbff1e. * fix lint --------- Co-authored-by: Devon Govett <[email protected]>
1 parent 818053f commit 90bc6c0

File tree

29 files changed

+1781
-386
lines changed

29 files changed

+1781
-386
lines changed

‎packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
* governing permissions and limitations under the License.
1111
*/
1212

13-
import {ActionMenu, Collection, Content, Heading, IllustratedMessage, Link, MenuItem, Text, TreeItemContent, TreeView, TreeViewItem} from '../src';
13+
import {ActionMenu, Collection, Content, Heading, IllustratedMessage, Link, MenuItem, Text, TreeView, TreeViewItem, TreeViewItemContent} from '../src';
1414
import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
1515
import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
1616
import FileTxt from '../s2wf-icons/S2_Icon_FileText_20_N.svg';
@@ -38,7 +38,7 @@ function TreeExample(props) {
3838
expandedKeys={['projects']}>
3939

4040
<TreeViewItem id="Photos" textValue="Photos">
41-
<TreeItemContent>
41+
<TreeViewItemContent>
4242
<Text>Photos</Text>
4343
<Folder />
4444
<ActionMenu>
@@ -51,10 +51,10 @@ function TreeExample(props) {
5151
<Text>Delete</Text>
5252
</MenuItem>
5353
</ActionMenu>
54-
</TreeItemContent>
54+
</TreeViewItemContent>
5555
</TreeViewItem>
5656
<TreeViewItem id="projects" textValue="Projects">
57-
<TreeItemContent>
57+
<TreeViewItemContent>
5858
<Text>Projects</Text>
5959
<Folder />
6060
<ActionMenu>
@@ -67,9 +67,9 @@ function TreeExample(props) {
6767
<Text>Delete</Text>
6868
</MenuItem>
6969
</ActionMenu>
70-
</TreeItemContent>
70+
</TreeViewItemContent>
7171
<TreeViewItem id="projects-1" textValue="Projects-1">
72-
<TreeItemContent>
72+
<TreeViewItemContent>
7373
<Text>Projects-1</Text>
7474
<Folder />
7575
<ActionMenu>
@@ -82,9 +82,9 @@ function TreeExample(props) {
8282
<Text>Delete</Text>
8383
</MenuItem>
8484
</ActionMenu>
85-
</TreeItemContent>
85+
</TreeViewItemContent>
8686
<TreeViewItem id="projects-1A" textValue="Projects-1A">
87-
<TreeItemContent>
87+
<TreeViewItemContent>
8888
<Text>Projects-1A</Text>
8989
<FileTxt />
9090
<ActionMenu>
@@ -97,11 +97,11 @@ function TreeExample(props) {
9797
<Text>Delete</Text>
9898
</MenuItem>
9999
</ActionMenu>
100-
</TreeItemContent>
100+
</TreeViewItemContent>
101101
</TreeViewItem>
102102
</TreeViewItem>
103103
<TreeViewItem id="projects-2" textValue="Projects-2">
104-
<TreeItemContent>
104+
<TreeViewItemContent>
105105
<Text>Projects-2</Text>
106106
<FileTxt />
107107
<ActionMenu>
@@ -114,10 +114,10 @@ function TreeExample(props) {
114114
<Text>Delete</Text>
115115
</MenuItem>
116116
</ActionMenu>
117-
</TreeItemContent>
117+
</TreeViewItemContent>
118118
</TreeViewItem>
119119
<TreeViewItem id="projects-3" textValue="Projects-3">
120-
<TreeItemContent>
120+
<TreeViewItemContent>
121121
<Text>Projects-3</Text>
122122
<FileTxt />
123123
<ActionMenu>
@@ -130,7 +130,7 @@ function TreeExample(props) {
130130
<Text>Delete</Text>
131131
</MenuItem>
132132
</ActionMenu>
133-
</TreeItemContent>
133+
</TreeViewItemContent>
134134
</TreeViewItem>
135135
</TreeViewItem>
136136
</TreeView>
@@ -225,7 +225,7 @@ const DynamicTreeItem = (props) => {
225225
return (
226226
<>
227227
<TreeViewItem id={props.id} childItems={childItems} textValue={name} href={props.href}>
228-
<TreeItemContent>
228+
<TreeViewItemContent>
229229
<Text>{name}</Text>
230230
{icon}
231231
<ActionMenu>
@@ -238,7 +238,7 @@ const DynamicTreeItem = (props) => {
238238
<Text>Delete</Text>
239239
</MenuItem>
240240
</ActionMenu>
241-
</TreeItemContent>
241+
</TreeViewItemContent>
242242
<Collection items={childItems}>
243243
{(item: any) => (
244244
<DynamicTreeItem

‎packages/@react-spectrum/s2/src/TreeView.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@ import {
1919
Provider,
2020
TreeItemProps as RACTreeItemProps,
2121
TreeProps as RACTreeProps,
22+
Tree,
23+
TreeItem,
24+
TreeItemContent,
2225
TreeItemContentProps,
23-
UNSTABLE_Tree,
24-
UNSTABLE_TreeItem,
25-
UNSTABLE_TreeItemContent,
2626
useContextProps,
2727
Virtualizer
2828
} from 'react-aria-components';
@@ -118,13 +118,13 @@ function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
118118
<Virtualizer layout={layout}>
119119
<TreeRendererContext.Provider value={{renderer}}>
120120
<InternalTreeContext.Provider value={{isDetached, isEmphasized}}>
121-
<UNSTABLE_Tree
121+
<Tree
122122
{...props}
123123
className={({isEmpty}) => tree({isEmpty, isDetached}, props.styles)}
124124
selectionBehavior="toggle"
125125
ref={domRef}>
126126
{props.children}
127-
</UNSTABLE_Tree>
127+
</Tree>
128128
</InternalTreeContext.Provider>
129129
</TreeRendererContext.Provider>
130130
</Virtualizer>
@@ -306,7 +306,7 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
306306
let {isDetached, isEmphasized} = useContext(InternalTreeContext);
307307

308308
return (
309-
<UNSTABLE_TreeItem
309+
<TreeItem
310310
{...props}
311311
className={(renderProps) => treeRow({
312312
...renderProps,
@@ -315,15 +315,15 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
315315
);
316316
};
317317

318-
export const TreeItemContent = (props: Omit<TreeItemContentProps, 'children'> & {children: ReactNode}) => {
318+
export const TreeViewItemContent = (props: Omit<TreeItemContentProps, 'children'> & {children: ReactNode}) => {
319319
let {
320320
children
321321
} = props;
322322
let {isDetached, isEmphasized} = useContext(InternalTreeContext);
323323
let scale = useScale();
324324

325325
return (
326-
<UNSTABLE_TreeItemContent>
326+
<TreeItemContent>
327327
{({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {
328328
let isNextSelected = false;
329329
let isNextFocused = false;
@@ -365,7 +365,7 @@ export const TreeItemContent = (props: Omit<TreeItemContentProps, 'children'> &
365365
</div>
366366
);
367367
}}
368-
</UNSTABLE_TreeItemContent>
368+
</TreeItemContent>
369369
);
370370
};
371371

‎packages/@react-spectrum/s2/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextFiel
7676
export {ToggleButton, ToggleButtonContext} from './ToggleButton';
7777
export {ToggleButtonGroup, ToggleButtonGroupContext} from './ToggleButtonGroup';
7878
export {Tooltip, TooltipTrigger} from './Tooltip';
79-
export {TreeView, TreeViewItem, TreeItemContent} from './TreeView';
79+
export {TreeView, TreeViewItem, TreeViewItemContent} from './TreeView';
8080

8181
export {pressScale} from './pressScale';
8282

‎packages/@react-spectrum/s2/stories/TreeView.stories.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ import {
2020
Link,
2121
MenuItem,
2222
Text,
23-
TreeItemContent,
2423
TreeView,
25-
TreeViewItem
24+
TreeViewItem,
25+
TreeViewItemContent
2626
} from '../src';
2727
import {categorizeArgTypes} from './utils';
2828
import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
@@ -79,7 +79,7 @@ const TreeExampleStatic = (args) => (
7979
onExpandedChange={action('onExpandedChange')}
8080
onSelectionChange={action('onSelectionChange')}>
8181
<TreeViewItem id="Photos" textValue="Photos">
82-
<TreeItemContent>
82+
<TreeViewItemContent>
8383
<Text>Photos</Text>
8484
<Folder />
8585
<ActionMenu onAction={action('onActionGroup action')}>
@@ -92,10 +92,10 @@ const TreeExampleStatic = (args) => (
9292
<Text>Delete</Text>
9393
</MenuItem>
9494
</ActionMenu>
95-
</TreeItemContent>
95+
</TreeViewItemContent>
9696
</TreeViewItem>
9797
<TreeViewItem id="projects" textValue="Projects">
98-
<TreeItemContent>
98+
<TreeViewItemContent>
9999
<Text>Projects</Text>
100100
<Folder />
101101
<ActionMenu onAction={action('onActionGroup action')}>
@@ -108,9 +108,9 @@ const TreeExampleStatic = (args) => (
108108
<Text>Delete</Text>
109109
</MenuItem>
110110
</ActionMenu>
111-
</TreeItemContent>
111+
</TreeViewItemContent>
112112
<TreeViewItem id="projects-1" textValue="Projects-1">
113-
<TreeItemContent>
113+
<TreeViewItemContent>
114114
<Text>Projects-1</Text>
115115
<Folder />
116116
<ActionMenu onAction={action('onActionGroup action')}>
@@ -123,9 +123,9 @@ const TreeExampleStatic = (args) => (
123123
<Text>Delete</Text>
124124
</MenuItem>
125125
</ActionMenu>
126-
</TreeItemContent>
126+
</TreeViewItemContent>
127127
<TreeViewItem id="projects-1A" textValue="Projects-1A">
128-
<TreeItemContent>
128+
<TreeViewItemContent>
129129
<Text>Projects-1A</Text>
130130
<FileTxt />
131131
<ActionMenu onAction={action('onActionGroup action')}>
@@ -138,11 +138,11 @@ const TreeExampleStatic = (args) => (
138138
<Text>Delete</Text>
139139
</MenuItem>
140140
</ActionMenu>
141-
</TreeItemContent>
141+
</TreeViewItemContent>
142142
</TreeViewItem>
143143
</TreeViewItem>
144144
<TreeViewItem id="projects-2" textValue="Projects-2">
145-
<TreeItemContent>
145+
<TreeViewItemContent>
146146
<Text>Projects-2</Text>
147147
<FileTxt />
148148
<ActionMenu onAction={action('onActionGroup action')}>
@@ -155,10 +155,10 @@ const TreeExampleStatic = (args) => (
155155
<Text>Delete</Text>
156156
</MenuItem>
157157
</ActionMenu>
158-
</TreeItemContent>
158+
</TreeViewItemContent>
159159
</TreeViewItem>
160160
<TreeViewItem id="projects-3" textValue="Projects-3">
161-
<TreeItemContent>
161+
<TreeViewItemContent>
162162
<Text>Projects-3</Text>
163163
<FileTxt />
164164
<ActionMenu onAction={action('onActionGroup action')}>
@@ -171,7 +171,7 @@ const TreeExampleStatic = (args) => (
171171
<Text>Delete</Text>
172172
</MenuItem>
173173
</ActionMenu>
174-
</TreeItemContent>
174+
</TreeViewItemContent>
175175
</TreeViewItem>
176176
</TreeViewItem>
177177
</TreeView>
@@ -221,7 +221,7 @@ const DynamicTreeItem = (props) => {
221221
return (
222222
<>
223223
<TreeViewItem id={props.id} childItems={childItems} textValue={name} href={props.href}>
224-
<TreeItemContent>
224+
<TreeViewItemContent>
225225
<Text>{name}</Text>
226226
{icon}
227227
<ActionMenu onAction={action('onActionGroup action')}>
@@ -234,7 +234,7 @@ const DynamicTreeItem = (props) => {
234234
<Text>Delete</Text>
235235
</MenuItem>
236236
</ActionMenu>
237-
</TreeItemContent>
237+
</TreeViewItemContent>
238238
<Collection items={childItems}>
239239
{(item: any) => (
240240
<DynamicTreeItem

0 commit comments

Comments
 (0)