[docs] Document the `TreeItem2` component and the `useTreeItem2` hook #14551

noraleonte · 2024-09-09T14:56:33Z

I have followed (at least) the PR section of the contributing guide.

noraleonte · 2024-09-09T14:58:12Z

docs/data/tree-view/tree-item-customization/tree-item-customization.md

+
+You can select an item of the Tree View by clicking its content slot. The demo below demonstrates how to handle selection when the user clicks on an icon.
+
+{{"demo": "HandleSelectionDemo.js"}}


I am struggling to find a decent use-case/ idea for a demo for handleSelection and handleCheckboxSelection -> so any suggestions are welcome here.

docs/data/tree-view/tree-item-customization/LabelSlot.tsx

mui-bot · 2024-09-09T15:00:48Z

Deploy preview: https://deploy-preview-14551--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against dff6fd9

github-actions · 2024-09-10T16:05:52Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

docs/data/tree-view/tree-item-customization/CheckboxSlot.js

docs/data/tree-view/tree-item-customization/tree-item-customization.md

docs/data/tree-view/tree-item-customization/LabelSlot.tsx

…ustomization

docs/data/tree-view/rich-tree-view/customization/customization.md

docs/data/tree-view/simple-tree-view/customization/customization.md

docs/data/tree-view/tree-item-customization/tree-item-customization.md

samuelsycamore · 2024-09-26T16:06:43Z

docs/data/tree-view/tree-item-customization/tree-item-customization.md

+
+By default, a tree item is expanded when clicking the content. You can change the expansion trigger using the `expansionTrigger` prop to the `iconContainer`. Read more about the expansion API on the dedicated [documentation page](/x/react-tree-view/rich-tree-view/expansion/#limit-expansion-to-icon-container).
+
+To achieve a deeper customization of the expansion of an item use the `handleExpansion` interaction method. The demo below demonstrates how to introduce a new element that expands or collapses the item.


Suggested change

To achieve a deeper customization of the expansion of an item use the `handleExpansion` interaction method. The demo below demonstrates how to introduce a new element that expands or collapses the item.

Use the `handleExpansion` interaction method for deeper customization of Item expansion.

The demo below shows how to introduce a new element that expands and collapses the Item.

for deeper customization of Item expansion. sounds a bit weird to me 🤔 not sure why. Maybe for deeper customization of the Item's expansion behavior.?

docs/data/tree-view/tree-item-customization/tree-item-customization.md

Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com>

noraleonte

Thanks for the review @samuelsycamore 🎉 😄

noraleonte · 2024-09-27T08:36:36Z

docs/data/tree-view/tree-item-customization/tree-item-customization.md

+
+By default, a tree item is expanded when clicking the content. You can change the expansion trigger using the `expansionTrigger` prop to the `iconContainer`. Read more about the expansion API on the dedicated [documentation page](/x/react-tree-view/rich-tree-view/expansion/#limit-expansion-to-icon-container).
+
+To achieve a deeper customization of the expansion of an item use the `handleExpansion` interaction method. The demo below demonstrates how to introduce a new element that expands or collapses the item.


for deeper customization of Item expansion. sounds a bit weird to me 🤔 not sure why. Maybe for deeper customization of the Item's expansion behavior.?

flaviendelangle

Thanks for the terrific work 🙏

…ustomization

oliviertassinari

Great to have more customzation docs 👍

oliviertassinari · 2024-10-15T12:48:48Z

docs/next-env.d.ts

-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/basic-features/typescript for more information.


A small regression, it got fixed in HEAD already.

oliviertassinari · 2024-10-15T12:49:42Z

docs/src/modules/components/TreeItem2Anatomy.js

+      : '/static/x/tree-view-illustrations/tree-item-dark.png';
+  return (
+    <Card elevation={0} variant="outlined" sx={{ padding: 4 }}>
+      <CardMedia


This image width growth too much. src is 1440px so can only support up to 720px without looking blurry (desktop width is more like 740px).

oliviertassinari · 2024-10-15T12:52:48Z

docs/src/modules/components/TreeItem2Anatomy.js

+  const src =
+    palette.mode === 'light'
+      ? '/static/x/tree-view-illustrations/tree-item-light.png'


This pattern will blink for dark mode users (once docs-infra starts and finishes the migration to CSS variables).

I think the right pattern here is to follow the other instances:

mui-x/docs/data/introduction/support/support.md

Lines 35 to 40 in 05e83ee

<span class="only-light-mode">

<img src="/static/docs-infra/forking-an-example.png" alt="Forking an example" loading="lazy" width="1628" height="700" style="display: block; max-width: 774px;">

</span>

<span class="only-dark-mode">

<img src="/static/docs-infra/forking-an-example-dark.png" alt="Forking an example" loading="lazy" width="1628" height="700" style="display: block; max-width: 774px;">

</span>

Another thought on this one. It feels like we should link the source to the Figma file we used (a code comment I guess) so anyone can easily come here and change the image when we reorganize the component structure.

noraleonte added 6 commits August 28, 2024 19:38

anatomy+ first demos

e0f3eb2

wip

a2c74df

update status demo

0ccc322

utils docs

b474ffa

add expansion and selection demo

7db82f9

unify widths

fd12f37

noraleonte added docs Improvements or additions to the documentation component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! labels Sep 9, 2024

noraleonte self-assigned this Sep 9, 2024

noraleonte commented Sep 9, 2024

View reviewed changes

noraleonte requested a review from flaviendelangle September 9, 2024 14:59

noraleonte added 2 commits September 10, 2024 13:50

scripts and typos

8e3e0ea

fix links

21c4674

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 10, 2024

flaviendelangle reviewed Sep 11, 2024

View reviewed changes

docs/data/tree-view/tree-item-customization/CheckboxSlot.js Outdated Show resolved Hide resolved

flaviendelangle reviewed Sep 11, 2024

View reviewed changes

docs/data/tree-view/tree-item-customization/tree-item-customization.md Outdated Show resolved Hide resolved

docs/data/tree-view/tree-item-customization/LabelSlot.tsx Show resolved Hide resolved

noraleonte added 3 commits September 25, 2024 14:49

Merge branch 'master' of github.com:noraleonte/mui-x into tree-item-c…

3d4880b

…ustomization

update

393d97a

fix CheckboxSlot demo

536669f

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Sep 25, 2024

noraleonte requested a review from samuelsycamore September 25, 2024 12:00

noraleonte mentioned this pull request Sep 25, 2024

[TreeView] Export publicAPI form useTreeItem2Utils #14729

Merged

1 task

scripts

99d638c

samuelsycamore reviewed Sep 26, 2024

View reviewed changes

Apply suggestions from code review - Sam

35d45e8

Co-authored-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Signed-off-by: Nora <72460825+noraleonte@users.noreply.github.com>

noraleonte commented Sep 27, 2024

View reviewed changes

noraleonte added 2 commits September 27, 2024 11:39

Sam's review

c436d4a

capitalize Date and Time pickers

d27dff3

flaviendelangle approved these changes Oct 9, 2024

View reviewed changes

noraleonte added 4 commits October 9, 2024 14:54

Merge branch 'master' of github.com:noraleonte/mui-x into tree-item-c…

9990c06

…ustomization

fix

1dd1935

fix phrasing

2650bae

fix

d80dea7

flaviendelangle changed the title ~~[docs] Create an "Item customization" doc page that uses useTreeItem2 and TreeItem2~~ [docs] Document the TreeItem2 component and the useTreeItem2 hook Oct 9, 2024

noraleonte added 2 commits October 9, 2024 15:32

fix types

e96bbf7

fix

dff6fd9

noraleonte merged commit e8991e9 into mui:master Oct 9, 2024
18 checks passed

noraleonte deleted the tree-item-customization branch October 9, 2024 13:05

oliviertassinari reviewed Oct 15, 2024

View reviewed changes

DMPatod mentioned this pull request Nov 2, 2024

[Snyk] Upgrade @mui/x-date-pickers from 7.18.0 to 7.20.0 DMPatod/dmpatod-ledger-app#6

Open

mbreadmachine mentioned this pull request Nov 5, 2024

[Snyk] Upgrade @mui/x-date-pickers from 7.13.0 to 7.20.0 mbreadmachine/arany-d-osztaly-weboldal#61

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[docs] Document the `TreeItem2` component and the `useTreeItem2` hook #14551

[docs] Document the `TreeItem2` component and the `useTreeItem2` hook #14551

noraleonte commented Sep 9, 2024

noraleonte Sep 9, 2024

mui-bot commented Sep 9, 2024 •

edited

Loading

github-actions bot commented Sep 10, 2024

samuelsycamore Sep 26, 2024

noraleonte Sep 27, 2024

noraleonte left a comment

noraleonte Sep 27, 2024

flaviendelangle left a comment

oliviertassinari left a comment

oliviertassinari Oct 15, 2024

oliviertassinari Oct 15, 2024

oliviertassinari Oct 15, 2024

oliviertassinari Nov 19, 2024 •

edited

Loading


		You can select an item of the Tree View by clicking its content slot. The demo below demonstrates how to handle selection when the user clicks on an icon.

		{{"demo": "HandleSelectionDemo.js"}}


		By default, a tree item is expanded when clicking the content. You can change the expansion trigger using the `expansionTrigger` prop to the `iconContainer`. Read more about the expansion API on the dedicated [documentation page](/x/react-tree-view/rich-tree-view/expansion/#limit-expansion-to-icon-container).

		To achieve a deeper customization of the expansion of an item use the `handleExpansion` interaction method. The demo below demonstrates how to introduce a new element that expands or collapses the item.

	To achieve a deeper customization of the expansion of an item use the `handleExpansion` interaction method. The demo below demonstrates how to introduce a new element that expands or collapses the item.
	Use the `handleExpansion` interaction method for deeper customization of Item expansion.
	The demo below shows how to introduce a new element that expands and collapses the Item.

		// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
		// see https://nextjs.org/docs/basic-features/typescript for more information.

	<span class="only-light-mode">
	<img src="/static/docs-infra/forking-an-example.png" alt="Forking an example" loading="lazy" width="1628" height="700" style="display: block; max-width: 774px;">
	</span>
	<span class="only-dark-mode">
	<img src="/static/docs-infra/forking-an-example-dark.png" alt="Forking an example" loading="lazy" width="1628" height="700" style="display: block; max-width: 774px;">
	</span>

[docs] Document the TreeItem2 component and the useTreeItem2 hook #14551

[docs] Document the TreeItem2 component and the useTreeItem2 hook #14551

Conversation

noraleonte commented Sep 9, 2024

noraleonte Sep 9, 2024

Choose a reason for hiding this comment

mui-bot commented Sep 9, 2024 • edited Loading

github-actions bot commented Sep 10, 2024

samuelsycamore Sep 26, 2024

Choose a reason for hiding this comment

noraleonte Sep 27, 2024

Choose a reason for hiding this comment

noraleonte left a comment

Choose a reason for hiding this comment

noraleonte Sep 27, 2024

Choose a reason for hiding this comment

flaviendelangle left a comment

Choose a reason for hiding this comment

oliviertassinari left a comment

Choose a reason for hiding this comment

oliviertassinari Oct 15, 2024

Choose a reason for hiding this comment

oliviertassinari Oct 15, 2024

Choose a reason for hiding this comment

oliviertassinari Oct 15, 2024

Choose a reason for hiding this comment

oliviertassinari Nov 19, 2024 • edited Loading

Choose a reason for hiding this comment

[docs] Document the `TreeItem2` component and the `useTreeItem2` hook #14551

[docs] Document the `TreeItem2` component and the `useTreeItem2` hook #14551

mui-bot commented Sep 9, 2024 •

edited

Loading

oliviertassinari Nov 19, 2024 •

edited

Loading