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

Jump to bottom

Delete TreeView.LinkItem. #2592

Merged
merged 19 commits into from
Nov 21, 2022
Merged

Delete TreeView.LinkItem. #2592

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
36b37f8
Delete TreeView.LinkItem.
radglob Nov 17, 2022
2603b46
Merge branch 'main' of github.com:primer/react into delete-treeview-l…
radglob Nov 17, 2022
70f2288
Update treeview stories to not use LinkItem.
radglob Nov 17, 2022
9e30f5d
Remove all other references to TreeView.LinkItem.
radglob Nov 17, 2022
818e162
Linting fixes.
radglob Nov 17, 2022
935b6da
Revert changes to CHANGELOG. Should be immutable.
radglob Nov 21, 2022
2e89a75
Add onSelect example for TreeView.Item.
radglob Nov 21, 2022
87fe68c
Create honest-moles-divide.md
radglob Nov 21, 2022
d1f68a2
Merge branch 'main' into delete-treeview-linkitem
radglob Nov 21, 2022
5f53fe1
Delete TreeView.LinkItem.
radglob Nov 17, 2022
93a5db8
Update treeview stories to not use LinkItem.
radglob Nov 17, 2022
305bd87
Remove all other references to TreeView.LinkItem.
radglob Nov 17, 2022
205b928
Linting fixes.
radglob Nov 17, 2022
8152dde
Revert changes to CHANGELOG. Should be immutable.
radglob Nov 21, 2022
4ff4a9f
Add onSelect example for TreeView.Item.
radglob Nov 21, 2022
e80a743
Remove test that expected TreeView.Item to have an href prop.
radglob Nov 21, 2022
474010f
Merge branch 'delete-treeview-linkitem' of github.com:primer/react in…
radglob Nov 21, 2022
1a440fb
Merge branch 'main' into delete-treeview-linkitem
radglob Nov 21, 2022
12beef7
Update .changeset/honest-moles-divide.md
radglob Nov 21, 2022
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
5 changes: 5 additions & 0 deletions .changeset/honest-moles-divide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Delete TreeView.LinkItem.
radglob marked this conversation as resolved.
Show resolved Hide resolved
108 changes: 31 additions & 77 deletions docs/content/TreeView.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,35 +23,35 @@ import {TreeView} from '@primer/react/drafts'
</TreeView.LeadingVisual>
src
<TreeView.SubTree>
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
<TreeView.Item id="src/Avatar.tsx" onSelect={() => console.log('src/Avatar.tsx')}>
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Avatar.tsx
<TreeView.TrailingVisual>
<StyledOcticon icon={DiffAddedIcon} color="success.fg" aria-label="added" />
</TreeView.TrailingVisual>
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button.tsx" href="#" current>
</TreeView.Item>
<TreeView.Item id="src/Button.tsx" current>
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Button.tsx
<TreeView.TrailingVisual>
<StyledOcticon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
</TreeView.TrailingVisual>
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.Item>
<TreeView.LinkItem id="package.json" href="#">
<TreeView.Item id="package.json">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
package.json
<TreeView.TrailingVisual>
<StyledOcticon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
</TreeView.TrailingVisual>
</TreeView.LinkItem>
</TreeView.Item>
</TreeView>
</nav>
</Box>
Expand All @@ -63,46 +63,46 @@ import {TreeView} from '@primer/react/drafts'
<Box sx={{maxWidth: 400}}>
<nav aria-label="Files">
<TreeView aria-label="Files">
<TreeView.LinkItem id="src" href="#">
<TreeView.Item id="src">
<TreeView.LeadingVisual>
<TreeView.DirectoryIcon />
</TreeView.LeadingVisual>
src
<TreeView.SubTree>
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
<TreeView.Item id="src/Avatar.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Avatar.tsx
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button" href="#" current>
</TreeView.Item>
<TreeView.Item id="src/Button" current>
<TreeView.LeadingVisual>
<TreeView.DirectoryIcon />
</TreeView.LeadingVisual>
Button
<TreeView.SubTree>
<TreeView.LinkItem id="src/Button/Button.tsx" href="#">
<TreeView.Item id="src/Button/Button.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Button.tsx
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button/Button.test.tsx" href="#">
</TreeView.Item>
<TreeView.Item id="src/Button/Button.test.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Button.test.tsx
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.LinkItem>
<TreeView.LinkItem id="package.json" href="#">
</TreeView.Item>
<TreeView.Item id="package.json">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
package.json
</TreeView.LinkItem>
</TreeView.Item>
</TreeView>
</nav>
</Box>
Expand Down Expand Up @@ -202,12 +202,12 @@ function ControlledTreeView() {
<TreeView.Item id="src" expanded={expanded} onExpandedChange={setExpanded}>
src
<TreeView.SubTree>
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
<TreeView.Item id="src/Avatar.tsx">
Avatar.tsx
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button.tsx" href="#" current>
</TreeView.Item>
<TreeView.Item id="src/Button.tsx" current>
Button.tsx
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.Item>
</TreeView>
Expand All @@ -233,12 +233,12 @@ To render stateful visuals, pass a render function to `TreeView.LeadingVisual` o
</TreeView.LeadingVisual>
src
<TreeView.SubTree>
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
<TreeView.Item id="src/Avatar.tsx">
Avatar.tsx
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button.tsx" href="#" current>
</TreeView.Item>
<TreeView.Item id="src/Button.tsx" current>
Button.tsx
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.Item>
</TreeView>
Expand All @@ -258,12 +258,12 @@ Since stateful directory icons are a common use case for TreeView, we provide a
</TreeView.LeadingVisual>
src
<TreeView.SubTree>
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
<TreeView.Item id="src/Avatar.tsx">
Avatar.tsx
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button.tsx" href="#" current>
</TreeView.Item>
<TreeView.Item id="src/Button.tsx" current>
Button.tsx
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.Item>
</TreeView>
Expand Down Expand Up @@ -318,52 +318,6 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
{/* <PropsTableSxRow /> */}
</PropsTable>

### TreeView.LinkItem

<PropsTable>
<PropsTableRow name="id" type="string" required description="Unique identifier for the item." />
<PropsTableRow name="children" type="React.ReactNode" required />
<PropsTableRow
name="href"
type="string"
description={
<>
The URL that the item navigates to. <InlineCode>href</InlineCode> is passed to the underlying{' '}
<InlineCode>&lt;a&gt;</InlineCode> element. If <InlineCode>as</InlineCode> is specified, the component may need
different props. If the item contains a sub-nav, the item is rendered as a{' '}
<InlineCode>&lt;button&gt;</InlineCode> and <InlineCode>href</InlineCode> is ignored.
</>
}
/>
<PropsTableRow
name="current"
type="boolean"
defaultValue="false"
description="Whether the item is the current item. No more than one item should be current at once. The path to the current item will be expanded by default."
/>
<PropsTableRow
name="defaultExpanded"
type="boolean"
description="The expanded state of the item when it is initially rendered. Use when you do not need to control its state."
/>
<PropsTableRow
name="expanded"
type="boolean"
description="The controlled expanded state of item. Must be used in conjunction with onExpandedChange."
/>
<PropsTableRow
name="onExpandedChange"
type="(expanded: boolean) => void"
description="Event handler called when the expanded state of the item changes."
/>
<PropsTableRow
name="onSelect"
type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
/>
<PropsTableRefRow refType="HTMLElement" />
{/* <PropsTableSxRow /> */}
</PropsTable>

### TreeView.LeadingVisual

<PropsTable>
Expand Down Expand Up @@ -406,7 +360,7 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
<PropsTableRow name="children" type="React.ReactNode" />
<PropsTableRow
name="state"
type={`| 'initial'
type={`| 'initial'
| 'loading'
| 'done'
| 'error'`}
Expand Down
57 changes: 28 additions & 29 deletions src/TreeView/TreeView.features.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,49 +24,48 @@ const meta: Meta = {
export const Files: Story = () => (
<nav aria-label="Files">
<TreeView aria-label="Files">
<TreeView.LinkItem id="src" href="#src" defaultExpanded>
<TreeView.Item id="src" defaultExpanded>
<TreeView.LeadingVisual>
<TreeView.DirectoryIcon />
</TreeView.LeadingVisual>
src
<TreeView.SubTree>
<TreeView.LinkItem id="src/Avatar.tsx" href="#avatar-tsx">
<TreeView.Item id="src/Avatar.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Avatar.tsx
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button" href="#button" current>
</TreeView.Item>
<TreeView.Item id="src/Button" current>
<TreeView.LeadingVisual>
<TreeView.DirectoryIcon />
</TreeView.LeadingVisual>
Button
<TreeView.SubTree>
<TreeView.LinkItem id="src/Button/Button.tsx" href="#button-tsx">
<TreeView.Item id="src/Button/Button.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Button.tsx
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button/Button.test.tsx" href="#button-test-tsx">
</TreeView.Item>
<TreeView.Item id="src/Button/Button.test.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Button.test.tsx
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.LinkItem>
</TreeView.Item>
<TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
ReallyLongFileNameThatShouldBeTruncated.tsx
</TreeView.Item>
</TreeView.SubTree>
</TreeView.LinkItem>
<TreeView.LinkItem
</TreeView.Item>
<TreeView.Item
id="public"
href="#public"
// eslint-disable-next-line no-console
onExpandedChange={isExpanded => console.log(`${isExpanded ? 'Expanded' : 'Collapsed'} "public" folder `)}
>
Expand All @@ -75,26 +74,26 @@ export const Files: Story = () => (
</TreeView.LeadingVisual>
public
<TreeView.SubTree>
<TreeView.LinkItem id="public/index.html" href="#index-html">
<TreeView.Item id="public/index.html">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
index.html
</TreeView.LinkItem>
<TreeView.LinkItem id="public/favicon.ico" href="#favicon-ico">
</TreeView.Item>
<TreeView.Item id="public/favicon.ico">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
favicon.ico
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.LinkItem>
<TreeView.LinkItem id="package.json" href="#package-json">
</TreeView.Item>
<TreeView.Item id="package.json">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
package.json
</TreeView.LinkItem>
</TreeView.Item>
</TreeView>
</nav>
)
Expand All @@ -109,39 +108,39 @@ export const FilesChanged: Story = () => {
</TreeView.LeadingVisual>
src
<TreeView.SubTree>
<TreeView.LinkItem id="src/Avatar.tsx" href="#avatar-tsx">
<TreeView.Item id="src/Avatar.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Avatar.tsx
<TreeView.TrailingVisual label="added">
<StyledOcticon icon={DiffAddedIcon} color="success.fg" />
</TreeView.TrailingVisual>
</TreeView.LinkItem>
</TreeView.Item>
<TreeView.Item id="src/Button" defaultExpanded>
<TreeView.LeadingVisual>
<TreeView.DirectoryIcon />
</TreeView.LeadingVisual>
Button
<TreeView.SubTree>
<TreeView.LinkItem id="src/Button/Button.tsx" href="#button-tsx" current>
<TreeView.Item id="src/Button/Button.tsx" current>
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Button.tsx
<TreeView.TrailingVisual label="modified">
<StyledOcticon icon={DiffModifiedIcon} color="attention.fg" />
</TreeView.TrailingVisual>
</TreeView.LinkItem>
<TreeView.LinkItem id="src/Button/Button.test.tsx" href="#button-test-tsx">
</TreeView.Item>
<TreeView.Item id="src/Button/Button.test.tsx">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
Button.test.tsx
<TreeView.TrailingVisual label="modified">
<StyledOcticon icon={DiffModifiedIcon} color="attention.fg" />
</TreeView.TrailingVisual>
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.Item>
<TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx">
Expand All @@ -161,24 +160,24 @@ export const FilesChanged: Story = () => {
</TreeView.LeadingVisual>
public
<TreeView.SubTree>
<TreeView.LinkItem id="public/index.html" href="#index-html">
<TreeView.Item id="public/index.html">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
index.html
<TreeView.TrailingVisual label="renamed">
<StyledOcticon icon={DiffRenamedIcon} />
</TreeView.TrailingVisual>
</TreeView.LinkItem>
<TreeView.LinkItem id="public/favicon.ico" href="#favicon-ico">
</TreeView.Item>
<TreeView.Item id="public/favicon.ico">
<TreeView.LeadingVisual>
<FileIcon />
</TreeView.LeadingVisual>
favicon.ico
<TreeView.TrailingVisual label="removed">
<StyledOcticon icon={DiffRemovedIcon} color="danger.fg" />
</TreeView.TrailingVisual>
</TreeView.LinkItem>
</TreeView.Item>
</TreeView.SubTree>
</TreeView.Item>
</TreeView>
Expand Down
Loading