Skip to content

Commit d9c7290

Browse files
radglobcolebemis
radglob
and
colebemis
authored
Delete TreeView.LinkItem. (#2592)
* Delete TreeView.LinkItem. * Update treeview stories to not use LinkItem. * Remove all other references to TreeView.LinkItem. * Linting fixes. * Revert changes to CHANGELOG. Should be immutable. * Add onSelect example for TreeView.Item. * Create honest-moles-divide.md * Delete TreeView.LinkItem. * Update treeview stories to not use LinkItem. * Remove all other references to TreeView.LinkItem. * Linting fixes. * Revert changes to CHANGELOG. Should be immutable. * Add onSelect example for TreeView.Item. * Remove test that expected TreeView.Item to have an href prop. * Update .changeset/honest-moles-divide.md Co-authored-by: Cole Bemis <[email protected]> Co-authored-by: Cole Bemis <[email protected]>
1 parent 75c87fb commit d9c7290

File tree

6 files changed

+75
-168
lines changed

6 files changed

+75
-168
lines changed

‎.changeset/honest-moles-divide.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
Delete `TreeView.LinkItem`. Use `TreeView.Item` and call a navigation function inside the `onSelect` callback instead:
6+
7+
```diff
8+
- <TreeView.LinkItem href="#">...
9+
+ <TreeView.Item onSelect={() => navigate('#')}>...
10+
```

‎docs/content/TreeView.mdx

Lines changed: 31 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -23,35 +23,35 @@ import {TreeView} from '@primer/react/drafts'
2323
</TreeView.LeadingVisual>
2424
src
2525
<TreeView.SubTree>
26-
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
26+
<TreeView.Item id="src/Avatar.tsx" onSelect={() => console.log('src/Avatar.tsx')}>
2727
<TreeView.LeadingVisual>
2828
<FileIcon />
2929
</TreeView.LeadingVisual>
3030
Avatar.tsx
3131
<TreeView.TrailingVisual>
3232
<StyledOcticon icon={DiffAddedIcon} color="success.fg" aria-label="added" />
3333
</TreeView.TrailingVisual>
34-
</TreeView.LinkItem>
35-
<TreeView.LinkItem id="src/Button.tsx" href="#" current>
34+
</TreeView.Item>
35+
<TreeView.Item id="src/Button.tsx" current>
3636
<TreeView.LeadingVisual>
3737
<FileIcon />
3838
</TreeView.LeadingVisual>
3939
Button.tsx
4040
<TreeView.TrailingVisual>
4141
<StyledOcticon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
4242
</TreeView.TrailingVisual>
43-
</TreeView.LinkItem>
43+
</TreeView.Item>
4444
</TreeView.SubTree>
4545
</TreeView.Item>
46-
<TreeView.LinkItem id="package.json" href="#">
46+
<TreeView.Item id="package.json">
4747
<TreeView.LeadingVisual>
4848
<FileIcon />
4949
</TreeView.LeadingVisual>
5050
package.json
5151
<TreeView.TrailingVisual>
5252
<StyledOcticon icon={DiffModifiedIcon} color="attention.fg" aria-label="modified" />
5353
</TreeView.TrailingVisual>
54-
</TreeView.LinkItem>
54+
</TreeView.Item>
5555
</TreeView>
5656
</nav>
5757
</Box>
@@ -63,46 +63,46 @@ import {TreeView} from '@primer/react/drafts'
6363
<Box sx={{maxWidth: 400}}>
6464
<nav aria-label="Files">
6565
<TreeView aria-label="Files">
66-
<TreeView.LinkItem id="src" href="#">
66+
<TreeView.Item id="src">
6767
<TreeView.LeadingVisual>
6868
<TreeView.DirectoryIcon />
6969
</TreeView.LeadingVisual>
7070
src
7171
<TreeView.SubTree>
72-
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
72+
<TreeView.Item id="src/Avatar.tsx">
7373
<TreeView.LeadingVisual>
7474
<FileIcon />
7575
</TreeView.LeadingVisual>
7676
Avatar.tsx
77-
</TreeView.LinkItem>
78-
<TreeView.LinkItem id="src/Button" href="#" current>
77+
</TreeView.Item>
78+
<TreeView.Item id="src/Button" current>
7979
<TreeView.LeadingVisual>
8080
<TreeView.DirectoryIcon />
8181
</TreeView.LeadingVisual>
8282
Button
8383
<TreeView.SubTree>
84-
<TreeView.LinkItem id="src/Button/Button.tsx" href="#">
84+
<TreeView.Item id="src/Button/Button.tsx">
8585
<TreeView.LeadingVisual>
8686
<FileIcon />
8787
</TreeView.LeadingVisual>
8888
Button.tsx
89-
</TreeView.LinkItem>
90-
<TreeView.LinkItem id="src/Button/Button.test.tsx" href="#">
89+
</TreeView.Item>
90+
<TreeView.Item id="src/Button/Button.test.tsx">
9191
<TreeView.LeadingVisual>
9292
<FileIcon />
9393
</TreeView.LeadingVisual>
9494
Button.test.tsx
95-
</TreeView.LinkItem>
95+
</TreeView.Item>
9696
</TreeView.SubTree>
97-
</TreeView.LinkItem>
97+
</TreeView.Item>
9898
</TreeView.SubTree>
99-
</TreeView.LinkItem>
100-
<TreeView.LinkItem id="package.json" href="#">
99+
</TreeView.Item>
100+
<TreeView.Item id="package.json">
101101
<TreeView.LeadingVisual>
102102
<FileIcon />
103103
</TreeView.LeadingVisual>
104104
package.json
105-
</TreeView.LinkItem>
105+
</TreeView.Item>
106106
</TreeView>
107107
</nav>
108108
</Box>
@@ -202,12 +202,12 @@ function ControlledTreeView() {
202202
<TreeView.Item id="src" expanded={expanded} onExpandedChange={setExpanded}>
203203
src
204204
<TreeView.SubTree>
205-
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
205+
<TreeView.Item id="src/Avatar.tsx">
206206
Avatar.tsx
207-
</TreeView.LinkItem>
208-
<TreeView.LinkItem id="src/Button.tsx" href="#" current>
207+
</TreeView.Item>
208+
<TreeView.Item id="src/Button.tsx" current>
209209
Button.tsx
210-
</TreeView.LinkItem>
210+
</TreeView.Item>
211211
</TreeView.SubTree>
212212
</TreeView.Item>
213213
</TreeView>
@@ -233,12 +233,12 @@ To render stateful visuals, pass a render function to `TreeView.LeadingVisual` o
233233
</TreeView.LeadingVisual>
234234
src
235235
<TreeView.SubTree>
236-
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
236+
<TreeView.Item id="src/Avatar.tsx">
237237
Avatar.tsx
238-
</TreeView.LinkItem>
239-
<TreeView.LinkItem id="src/Button.tsx" href="#" current>
238+
</TreeView.Item>
239+
<TreeView.Item id="src/Button.tsx" current>
240240
Button.tsx
241-
</TreeView.LinkItem>
241+
</TreeView.Item>
242242
</TreeView.SubTree>
243243
</TreeView.Item>
244244
</TreeView>
@@ -258,12 +258,12 @@ Since stateful directory icons are a common use case for TreeView, we provide a
258258
</TreeView.LeadingVisual>
259259
src
260260
<TreeView.SubTree>
261-
<TreeView.LinkItem id="src/Avatar.tsx" href="#">
261+
<TreeView.Item id="src/Avatar.tsx">
262262
Avatar.tsx
263-
</TreeView.LinkItem>
264-
<TreeView.LinkItem id="src/Button.tsx" href="#" current>
263+
</TreeView.Item>
264+
<TreeView.Item id="src/Button.tsx" current>
265265
Button.tsx
266-
</TreeView.LinkItem>
266+
</TreeView.Item>
267267
</TreeView.SubTree>
268268
</TreeView.Item>
269269
</TreeView>
@@ -318,52 +318,6 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
318318
{/* <PropsTableSxRow /> */}
319319
</PropsTable>
320320

321-
### TreeView.LinkItem
322-
323-
<PropsTable>
324-
<PropsTableRow name="id" type="string" required description="Unique identifier for the item." />
325-
<PropsTableRow name="children" type="React.ReactNode" required />
326-
<PropsTableRow
327-
name="href"
328-
type="string"
329-
description={
330-
<>
331-
The URL that the item navigates to. <InlineCode>href</InlineCode> is passed to the underlying{' '}
332-
<InlineCode>&lt;a&gt;</InlineCode> element. If <InlineCode>as</InlineCode> is specified, the component may need
333-
different props. If the item contains a sub-nav, the item is rendered as a{' '}
334-
<InlineCode>&lt;button&gt;</InlineCode> and <InlineCode>href</InlineCode> is ignored.
335-
</>
336-
}
337-
/>
338-
<PropsTableRow
339-
name="current"
340-
type="boolean"
341-
defaultValue="false"
342-
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."
343-
/>
344-
<PropsTableRow
345-
name="defaultExpanded"
346-
type="boolean"
347-
description="The expanded state of the item when it is initially rendered. Use when you do not need to control its state."
348-
/>
349-
<PropsTableRow
350-
name="expanded"
351-
type="boolean"
352-
description="The controlled expanded state of item. Must be used in conjunction with onExpandedChange."
353-
/>
354-
<PropsTableRow
355-
name="onExpandedChange"
356-
type="(expanded: boolean) => void"
357-
description="Event handler called when the expanded state of the item changes."
358-
/>
359-
<PropsTableRow
360-
name="onSelect"
361-
type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
362-
/>
363-
<PropsTableRefRow refType="HTMLElement" />
364-
{/* <PropsTableSxRow /> */}
365-
</PropsTable>
366-
367321
### TreeView.LeadingVisual
368322

369323
<PropsTable>
@@ -406,7 +360,7 @@ See [Storybook](https://primer.style/react/storybook?path=/story/components-tree
406360
<PropsTableRow name="children" type="React.ReactNode" />
407361
<PropsTableRow
408362
name="state"
409-
type={`| 'initial'
363+
type={`| 'initial'
410364
| 'loading'
411365
| 'done'
412366
| 'error'`}

‎src/TreeView/TreeView.features.stories.tsx

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,49 +24,48 @@ const meta: Meta = {
2424
export const Files: Story = () => (
2525
<nav aria-label="Files">
2626
<TreeView aria-label="Files">
27-
<TreeView.LinkItem id="src" href="#src" defaultExpanded>
27+
<TreeView.Item id="src" defaultExpanded>
2828
<TreeView.LeadingVisual>
2929
<TreeView.DirectoryIcon />
3030
</TreeView.LeadingVisual>
3131
src
3232
<TreeView.SubTree>
33-
<TreeView.LinkItem id="src/Avatar.tsx" href="#avatar-tsx">
33+
<TreeView.Item id="src/Avatar.tsx">
3434
<TreeView.LeadingVisual>
3535
<FileIcon />
3636
</TreeView.LeadingVisual>
3737
Avatar.tsx
38-
</TreeView.LinkItem>
39-
<TreeView.LinkItem id="src/Button" href="#button" current>
38+
</TreeView.Item>
39+
<TreeView.Item id="src/Button" current>
4040
<TreeView.LeadingVisual>
4141
<TreeView.DirectoryIcon />
4242
</TreeView.LeadingVisual>
4343
Button
4444
<TreeView.SubTree>
45-
<TreeView.LinkItem id="src/Button/Button.tsx" href="#button-tsx">
45+
<TreeView.Item id="src/Button/Button.tsx">
4646
<TreeView.LeadingVisual>
4747
<FileIcon />
4848
</TreeView.LeadingVisual>
4949
Button.tsx
50-
</TreeView.LinkItem>
51-
<TreeView.LinkItem id="src/Button/Button.test.tsx" href="#button-test-tsx">
50+
</TreeView.Item>
51+
<TreeView.Item id="src/Button/Button.test.tsx">
5252
<TreeView.LeadingVisual>
5353
<FileIcon />
5454
</TreeView.LeadingVisual>
5555
Button.test.tsx
56-
</TreeView.LinkItem>
56+
</TreeView.Item>
5757
</TreeView.SubTree>
58-
</TreeView.LinkItem>
58+
</TreeView.Item>
5959
<TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx">
6060
<TreeView.LeadingVisual>
6161
<FileIcon />
6262
</TreeView.LeadingVisual>
6363
ReallyLongFileNameThatShouldBeTruncated.tsx
6464
</TreeView.Item>
6565
</TreeView.SubTree>
66-
</TreeView.LinkItem>
67-
<TreeView.LinkItem
66+
</TreeView.Item>
67+
<TreeView.Item
6868
id="public"
69-
href="#public"
7069
// eslint-disable-next-line no-console
7170
onExpandedChange={isExpanded => console.log(`${isExpanded ? 'Expanded' : 'Collapsed'} "public" folder `)}
7271
>
@@ -75,26 +74,26 @@ export const Files: Story = () => (
7574
</TreeView.LeadingVisual>
7675
public
7776
<TreeView.SubTree>
78-
<TreeView.LinkItem id="public/index.html" href="#index-html">
77+
<TreeView.Item id="public/index.html">
7978
<TreeView.LeadingVisual>
8079
<FileIcon />
8180
</TreeView.LeadingVisual>
8281
index.html
83-
</TreeView.LinkItem>
84-
<TreeView.LinkItem id="public/favicon.ico" href="#favicon-ico">
82+
</TreeView.Item>
83+
<TreeView.Item id="public/favicon.ico">
8584
<TreeView.LeadingVisual>
8685
<FileIcon />
8786
</TreeView.LeadingVisual>
8887
favicon.ico
89-
</TreeView.LinkItem>
88+
</TreeView.Item>
9089
</TreeView.SubTree>
91-
</TreeView.LinkItem>
92-
<TreeView.LinkItem id="package.json" href="#package-json">
90+
</TreeView.Item>
91+
<TreeView.Item id="package.json">
9392
<TreeView.LeadingVisual>
9493
<FileIcon />
9594
</TreeView.LeadingVisual>
9695
package.json
97-
</TreeView.LinkItem>
96+
</TreeView.Item>
9897
</TreeView>
9998
</nav>
10099
)
@@ -109,39 +108,39 @@ export const FilesChanged: Story = () => {
109108
</TreeView.LeadingVisual>
110109
src
111110
<TreeView.SubTree>
112-
<TreeView.LinkItem id="src/Avatar.tsx" href="#avatar-tsx">
111+
<TreeView.Item id="src/Avatar.tsx">
113112
<TreeView.LeadingVisual>
114113
<FileIcon />
115114
</TreeView.LeadingVisual>
116115
Avatar.tsx
117116
<TreeView.TrailingVisual label="added">
118117
<StyledOcticon icon={DiffAddedIcon} color="success.fg" />
119118
</TreeView.TrailingVisual>
120-
</TreeView.LinkItem>
119+
</TreeView.Item>
121120
<TreeView.Item id="src/Button" defaultExpanded>
122121
<TreeView.LeadingVisual>
123122
<TreeView.DirectoryIcon />
124123
</TreeView.LeadingVisual>
125124
Button
126125
<TreeView.SubTree>
127-
<TreeView.LinkItem id="src/Button/Button.tsx" href="#button-tsx" current>
126+
<TreeView.Item id="src/Button/Button.tsx" current>
128127
<TreeView.LeadingVisual>
129128
<FileIcon />
130129
</TreeView.LeadingVisual>
131130
Button.tsx
132131
<TreeView.TrailingVisual label="modified">
133132
<StyledOcticon icon={DiffModifiedIcon} color="attention.fg" />
134133
</TreeView.TrailingVisual>
135-
</TreeView.LinkItem>
136-
<TreeView.LinkItem id="src/Button/Button.test.tsx" href="#button-test-tsx">
134+
</TreeView.Item>
135+
<TreeView.Item id="src/Button/Button.test.tsx">
137136
<TreeView.LeadingVisual>
138137
<FileIcon />
139138
</TreeView.LeadingVisual>
140139
Button.test.tsx
141140
<TreeView.TrailingVisual label="modified">
142141
<StyledOcticon icon={DiffModifiedIcon} color="attention.fg" />
143142
</TreeView.TrailingVisual>
144-
</TreeView.LinkItem>
143+
</TreeView.Item>
145144
</TreeView.SubTree>
146145
</TreeView.Item>
147146
<TreeView.Item id="src/ReallyLongFileNameThatShouldBeTruncated.tsx">
@@ -161,24 +160,24 @@ export const FilesChanged: Story = () => {
161160
</TreeView.LeadingVisual>
162161
public
163162
<TreeView.SubTree>
164-
<TreeView.LinkItem id="public/index.html" href="#index-html">
163+
<TreeView.Item id="public/index.html">
165164
<TreeView.LeadingVisual>
166165
<FileIcon />
167166
</TreeView.LeadingVisual>
168167
index.html
169168
<TreeView.TrailingVisual label="renamed">
170169
<StyledOcticon icon={DiffRenamedIcon} />
171170
</TreeView.TrailingVisual>
172-
</TreeView.LinkItem>
173-
<TreeView.LinkItem id="public/favicon.ico" href="#favicon-ico">
171+
</TreeView.Item>
172+
<TreeView.Item id="public/favicon.ico">
174173
<TreeView.LeadingVisual>
175174
<FileIcon />
176175
</TreeView.LeadingVisual>
177176
favicon.ico
178177
<TreeView.TrailingVisual label="removed">
179178
<StyledOcticon icon={DiffRemovedIcon} color="danger.fg" />
180179
</TreeView.TrailingVisual>
181-
</TreeView.LinkItem>
180+
</TreeView.Item>
182181
</TreeView.SubTree>
183182
</TreeView.Item>
184183
</TreeView>

0 commit comments

Comments
 (0)