Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: RAC Tree docs #7730

Merged
merged 26 commits into from
Feb 20, 2025
Merged

docs: RAC Tree docs #7730

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
e97bce1
docs: RAC Tree docs
snowystinger Feb 6, 2025
bdb952a
Merge branch 'main' into rac-tree-docs
snowystinger Feb 12, 2025
33b284a
Finish docs page for RAC Tree
snowystinger Feb 13, 2025
bda733d
fix all the types
snowystinger Feb 13, 2025
3c05b29
make some styles nicer
snowystinger Feb 13, 2025
604efb8
remove unstable, add anatomy
snowystinger Feb 14, 2025
5883d9c
Add little svg
snowystinger Feb 14, 2025
6fe5ca8
remove beta tag and add example card
snowystinger Feb 16, 2025
76bf5f4
fix example contrast problems
snowystinger Feb 17, 2025
0e5d825
review updates
snowystinger Feb 17, 2025
ef4f530
formatting and reusing code
snowystinger Feb 17, 2025
6c3a2d2
Merge branch 'main' into rac-tree-docs
snowystinger Feb 17, 2025
d0ca685
grammar
snowystinger Feb 18, 2025
3092824
Tree starter
snowystinger Feb 19, 2025
e6bd506
turn on verdaccio
snowystinger Feb 19, 2025
d181779
turn on starterkits
snowystinger Feb 19, 2025
028cebc
Merge branch 'main' into rac-tree-docs
snowystinger Feb 19, 2025
04d50d3
Revert "turn on verdaccio"
snowystinger Feb 19, 2025
88303ff
Make arrow in anatomy diagram closer to checkbox
devongovett Feb 19, 2025
f2a8f3e
formatting
devongovett Feb 19, 2025
f5aa5f6
Add Tree to vanilla starters
snowystinger Feb 19, 2025
2bbff1e
Turn on verdaccio again
snowystinger Feb 19, 2025
0da9de6
fix types
snowystinger Feb 19, 2025
fa29995
Revert "Turn on verdaccio again"
snowystinger Feb 19, 2025
e6e088e
Merge branch 'main' into rac-tree-docs
snowystinger Feb 20, 2025
cae78f4
fix lint
snowystinger Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* governing permissions and limitations under the License.
*/

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

<TreeViewItem id="Photos" textValue="Photos">
<TreeItemContent>
<TreeViewItemContent>
<Text>Photos</Text>
<Folder />
<ActionMenu>
Expand All @@ -51,10 +51,10 @@ function TreeExample(props) {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
</TreeViewItem>
<TreeViewItem id="projects" textValue="Projects">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects</Text>
<Folder />
<ActionMenu>
Expand All @@ -67,9 +67,9 @@ function TreeExample(props) {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
<TreeViewItem id="projects-1" textValue="Projects-1">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects-1</Text>
<Folder />
<ActionMenu>
Expand All @@ -82,9 +82,9 @@ function TreeExample(props) {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
<TreeViewItem id="projects-1A" textValue="Projects-1A">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects-1A</Text>
<FileTxt />
<ActionMenu>
Expand All @@ -97,11 +97,11 @@ function TreeExample(props) {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
</TreeViewItem>
</TreeViewItem>
<TreeViewItem id="projects-2" textValue="Projects-2">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects-2</Text>
<FileTxt />
<ActionMenu>
Expand All @@ -114,10 +114,10 @@ function TreeExample(props) {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
</TreeViewItem>
<TreeViewItem id="projects-3" textValue="Projects-3">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects-3</Text>
<FileTxt />
<ActionMenu>
Expand All @@ -130,7 +130,7 @@ function TreeExample(props) {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
</TreeViewItem>
</TreeViewItem>
</TreeView>
Expand Down Expand Up @@ -225,7 +225,7 @@ const DynamicTreeItem = (props) => {
return (
<>
<TreeViewItem id={props.id} childItems={childItems} textValue={name} href={props.href}>
<TreeItemContent>
<TreeViewItemContent>
<Text>{name}</Text>
{icon}
<ActionMenu>
Expand All @@ -238,7 +238,7 @@ const DynamicTreeItem = (props) => {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
<Collection items={childItems}>
{(item: any) => (
<DynamicTreeItem
Expand Down
18 changes: 9 additions & 9 deletions packages/@react-spectrum/s2/src/TreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ import {
Provider,
TreeItemProps as RACTreeItemProps,
TreeProps as RACTreeProps,
Tree,
TreeItem,
TreeItemContent,
Copy link
Member

@yihuiliao yihuiliao Feb 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

noticed a couple things in the stories while testing:

1. the focus ring doesn't sit on top of the selected item very well when isDetached is true (nvm, seems like it's fixed in virtualizer docs so it all just needs to get merged)

Screen.Recording.2025-02-14.at.2.09.55.PM.mov
  1. the focus ring appears on selection when i use my mouse to click. maybe usePress related and not anything in this PR in particular. also happens in RAC Tree but not in V3 TreeView
Screen.Recording.2025-02-14.at.2.08.16.PM.mov

TreeItemContentProps,
UNSTABLE_Tree,
UNSTABLE_TreeItem,
UNSTABLE_TreeItemContent,
useContextProps,
Virtualizer
} from 'react-aria-components';
Expand Down Expand Up @@ -118,13 +118,13 @@ function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
<Virtualizer layout={layout}>
<TreeRendererContext.Provider value={{renderer}}>
<InternalTreeContext.Provider value={{isDetached, isEmphasized}}>
<UNSTABLE_Tree
<Tree
{...props}
className={({isEmpty}) => tree({isEmpty, isDetached}, props.styles)}
selectionBehavior="toggle"
ref={domRef}>
{props.children}
</UNSTABLE_Tree>
</Tree>
</InternalTreeContext.Provider>
</TreeRendererContext.Provider>
</Virtualizer>
Expand Down Expand Up @@ -306,7 +306,7 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
let {isDetached, isEmphasized} = useContext(InternalTreeContext);

return (
<UNSTABLE_TreeItem
<TreeItem
{...props}
className={(renderProps) => treeRow({
...renderProps,
Expand All @@ -315,15 +315,15 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
);
};

export const TreeItemContent = (props: Omit<TreeItemContentProps, 'children'> & {children: ReactNode}) => {
export const TreeViewItemContent = (props: Omit<TreeItemContentProps, 'children'> & {children: ReactNode}) => {
let {
children
} = props;
let {isDetached, isEmphasized} = useContext(InternalTreeContext);
let scale = useScale();

return (
<UNSTABLE_TreeItemContent>
<TreeItemContent>
{({isExpanded, hasChildItems, selectionMode, selectionBehavior, isDisabled, isFocusVisible, isSelected, id, state}) => {
let isNextSelected = false;
let isNextFocused = false;
Expand Down Expand Up @@ -365,7 +365,7 @@ export const TreeItemContent = (props: Omit<TreeItemContentProps, 'children'> &
</div>
);
}}
</UNSTABLE_TreeItemContent>
</TreeItemContent>
);
};

Expand Down
2 changes: 1 addition & 1 deletion packages/@react-spectrum/s2/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ export {TextArea, TextField, TextAreaContext, TextFieldContext} from './TextFiel
export {ToggleButton, ToggleButtonContext} from './ToggleButton';
export {ToggleButtonGroup, ToggleButtonGroupContext} from './ToggleButtonGroup';
export {Tooltip, TooltipTrigger} from './Tooltip';
export {TreeView, TreeViewItem, TreeItemContent} from './TreeView';
export {TreeView, TreeViewItem, TreeViewItemContent} from './TreeView';

export {pressScale} from './pressScale';

Expand Down
32 changes: 16 additions & 16 deletions packages/@react-spectrum/s2/stories/TreeView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ import {
Link,
MenuItem,
Text,
TreeItemContent,
TreeView,
TreeViewItem
TreeViewItem,
TreeViewItemContent
} from '../src';
import {categorizeArgTypes} from './utils';
import Delete from '../s2wf-icons/S2_Icon_Delete_20_N.svg';
Expand Down Expand Up @@ -79,7 +79,7 @@ const TreeExampleStatic = (args) => (
onExpandedChange={action('onExpandedChange')}
onSelectionChange={action('onSelectionChange')}>
<TreeViewItem id="Photos" textValue="Photos">
<TreeItemContent>
<TreeViewItemContent>
<Text>Photos</Text>
<Folder />
<ActionMenu onAction={action('onActionGroup action')}>
Expand All @@ -92,10 +92,10 @@ const TreeExampleStatic = (args) => (
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
</TreeViewItem>
<TreeViewItem id="projects" textValue="Projects">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects</Text>
<Folder />
<ActionMenu onAction={action('onActionGroup action')}>
Expand All @@ -108,9 +108,9 @@ const TreeExampleStatic = (args) => (
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
<TreeViewItem id="projects-1" textValue="Projects-1">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects-1</Text>
<Folder />
<ActionMenu onAction={action('onActionGroup action')}>
Expand All @@ -123,9 +123,9 @@ const TreeExampleStatic = (args) => (
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
<TreeViewItem id="projects-1A" textValue="Projects-1A">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects-1A</Text>
<FileTxt />
<ActionMenu onAction={action('onActionGroup action')}>
Expand All @@ -138,11 +138,11 @@ const TreeExampleStatic = (args) => (
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
</TreeViewItem>
</TreeViewItem>
<TreeViewItem id="projects-2" textValue="Projects-2">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects-2</Text>
<FileTxt />
<ActionMenu onAction={action('onActionGroup action')}>
Expand All @@ -155,10 +155,10 @@ const TreeExampleStatic = (args) => (
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
</TreeViewItem>
<TreeViewItem id="projects-3" textValue="Projects-3">
<TreeItemContent>
<TreeViewItemContent>
<Text>Projects-3</Text>
<FileTxt />
<ActionMenu onAction={action('onActionGroup action')}>
Expand All @@ -171,7 +171,7 @@ const TreeExampleStatic = (args) => (
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
</TreeViewItem>
</TreeViewItem>
</TreeView>
Expand Down Expand Up @@ -221,7 +221,7 @@ const DynamicTreeItem = (props) => {
return (
<>
<TreeViewItem id={props.id} childItems={childItems} textValue={name} href={props.href}>
<TreeItemContent>
<TreeViewItemContent>
<Text>{name}</Text>
{icon}
<ActionMenu onAction={action('onActionGroup action')}>
Expand All @@ -234,7 +234,7 @@ const DynamicTreeItem = (props) => {
<Text>Delete</Text>
</MenuItem>
</ActionMenu>
</TreeItemContent>
</TreeViewItemContent>
<Collection items={childItems}>
{(item: any) => (
<DynamicTreeItem
Expand Down
Loading