[TreeView] Add new component #14827

joshwooding · 2019-03-10T17:32:43Z

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

Closes #12263

Demo: https://deploy-preview-14827--material-ui.netlify.com/lab/tree-view/

TODO

Finish off the components
Tests
TypeScript
Demos

mui-pr-bot · 2019-03-10T18:16:45Z

No bundle size changes comparing bdb4baa...82898b1

Generated by 🚫 dangerJS against 82898b1

eps1lon

Have you looked at https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView? Maybe this helps when writing tests. Could solve two problems at once.

packages/material-ui-lab/src/TreeNode/TreeNode.js

oliviertassinari

It's a great start. Few concerns:

What do you think of removing all the hover effects?
Without looking at the accessibility of the component, I would guess it wasn't studied yet. Should use use ul > li > ul > li nesting? I don't know, to look into the state of the art resources.

pages/_app.js

packages/material-ui-lab/src/TreeView/useTreeState.js

packages/material-ui-lab/src/TreeNode/TreeNode.js

joshwooding · 2019-03-14T00:36:35Z

@mbrookes I've changed the icons and tried to improve the spacing a little bit.

@eps1lon I've gotten rid of depth completely used nested lists

jshearer · 2019-03-18T18:51:11Z

This is looking great @joshwooding! Two questions:

reconciling the alignment of nodes with and without icons is going to be challenging

Is this talking about the difference in text alignment here?

Not sure how to fix that.. maybe an empty IconButton?

Also, will it be possible to rearrange the rendered components? For example, one requirement I have is to have the chevron to the right of the text, as opposed to the left, like this:

packages/material-ui-lab/src/TreeNode/TreeNode.js

mui-pr-bot · 2019-06-02T18:49:54Z

@material-ui/core: parsed: +0.13% , gzip: +0.02%
@material-ui/lab: parsed: +7.61% , gzip: +6.94%

Details of bundle changes.

Comparing: 3f9fa1f...ce3e367

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	+0.13% 🔺	+0.02% 🔺	331,368	331,796	90,896	90,912
@material-ui/core/Paper	+0.01% 🔺	+0.04% 🔺	69,177	69,181	20,528	20,536
@material-ui/core/Paper.esm	0.00%	+0.04% 🔺	62,047	62,050	19,208	19,216
@material-ui/core/Popper	+0.01% 🔺	+0.04% 🔺	29,182	29,184	10,427	10,431
@material-ui/core/Textarea	0.00%	-0.04%	5,759	5,759	2,367	2,366
@material-ui/core/TrapFocus	0.00%	0.00%	3,806	3,806	1,602	1,602
@material-ui/core/styles/createMuiTheme	+0.01% 🔺	-0.09%	16,390	16,391	5,825	5,820
@material-ui/core/useMediaQuery	0.00%	-0.08%	3,221	3,221	1,314	1,313
@material-ui/lab	+7.61% 🔺	+6.94% 🔺	141,987	152,797	43,790	46,827
@material-ui/styles	0.00%	+0.05% 🔺	51,886	51,888	15,339	15,346
@material-ui/system	0.00%	+0.14% 🔺	15,761	15,761	4,380	4,386
Button	0.00%	+0.01% 🔺	79,460	79,462	24,301	24,303
Modal	0.00%	+0.08% 🔺	14,961	14,961	5,221	5,225
Portal	0.00%	+0.06% 🔺	3,579	3,579	1,566	1,567
Rating	0.00%	+0.03% 🔺	70,667	70,669	22,064	22,071
Slider	+0.01% 🔺	0.00%	75,061	75,065	23,277	23,277
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	52,056	52,056	13,831	13,831
docs.main	0.00%	0.00%	606,828	606,828	194,402	194,402
packages/material-ui/build/umd/material-ui.production.min.js	0.00%	0.00%	299,987	299,987	86,202	86,202

Generated by 🚫 dangerJS against ce3e367

joshwooding · 2019-06-09T23:08:55Z

Trying a different approach, and passing in an array. Please excuse the messy code... Working on the keyboard focus.

joshwooding · 2019-06-11T23:43:45Z

The TreeView should now have all keyboard support listed on the aria-practices page 🎉

eps1lon

This is good to go as soon as we find out why https://deploy-preview-14827--material-ui.netlify.com/components/tree-view/ crashes and we settled on a name. Kind of prefer TreeItem following the aria role.

joshwooding · 2019-07-25T06:08:53Z

I’ll have a look at the crash later, works on my version of chrome and my phone but crashes without an error on IE it seems.

eps1lon · 2019-07-25T07:21:24Z

ave a look at the crash later, works on my version of chrome and my phone but crashes without an error on IE it seems.

The deployed netlify build? Works on neither ubuntu chrome, windows chrome, android chrome, windows firefox nor IE 11.

eps1lon · 2019-07-25T10:25:37Z

For feature requests please wait for the first release of this component. It will be released in the lab under an alpha version which gives us enough freedom to iterate over the API.

joshwooding · 2019-07-25T14:59:27Z

The deployed netlify build?

Hmm, yeah doesn’t crash on my phone but the tree doesn’t work either 😅

Worked on my computer (windows chrome)

joshwooding · 2019-07-27T15:33:09Z

It was a broken merge :P

eps1lon

Nice job

merceyz · 2019-07-27T21:44:31Z

packages/material-ui-lab/src/TreeItem/TreeItem.js

+      {...other}
+    >
+      <div className={classes.content} onClick={handleClick} ref={contentRef}>
+        {stateIconsProvided ? <div className={classes.iconContainer}>{stateIcon}</div> : null}


Suggested change

{stateIconsProvided ? <div className={classes.iconContainer}>{stateIcon}</div> : null}

{stateIconsProvided && <div className={classes.iconContainer}>{stateIcon}</div>}

I'm curious, is there a reason this syntax isn't used?
https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator

Not really, was just following what I found in the code. Looks like the only time the above syntax is used is in CardHeader vs SvgIcon, LinearProgress, GridListTileBar, SnackbarContent. I'm happy with either syntax. Normally I prefer the one you suggested. Do either of you have a preference @oliviertassinari @eps1lon

Second one is idiomatic react for conditional rendering. If this is the intention then we should use it. If the ternary is used for a reason other than conditional rendering it should be documented.

React documents both: https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator. I don't have a preference. I used to use && when first using React, nowadays, I only use ternaries. Maybe we should use && because it yields smaller code? However, if we use && we need to make sure we compare with a boolean! e.g. 0 && <span /> will display 0 🙃.

It's not that important in the end IMO. Personally I would stick with strict equality checks and ternaries but as long as one pattern doesn't introduce more bugs than the other it really doesn't matter.

Or we introduce something like Bikeshed-Sundays were we batch those discussions 😄

Valid point, it doesn't change anthing at the end of the day. As long as we use the same pattern everywhere, that we only have this discussion once, I'm happy. So all in in ternaries?

Or we introduce something like Bikeshed-Sundays were we batch those discussions

@eps1lon 😆 I’m not sure I like the name though. What about Bikeshed Sundays it’s soooo much cleaner 😉

packages/material-ui-lab/src/TreeItem/index.d.ts

packages/material-ui-lab/src/TreeView/index.d.ts

oliviertassinari · 2019-07-28T09:28:11Z

@joshwooding Really well done! A great step toward an awesome tree view component.

felipezacani · 2020-06-16T22:35:47Z

@oliviertassinari Not sure if I should post a bug or a support request. I'm trying to implement draggable TreeItems and the "draggable" prop is not being passed to the native element, as stated in the docs. Is this expected?

oliviertassinari · 2020-06-16T22:41:15Z

@felipezacani You can follow mui/mui-x#9686.

joshwooding force-pushed the tree-view branch 3 times, most recently from 43456c5 to 9b03209 Compare March 10, 2019 18:12

This comment has been minimized.

Sign in to view

eps1lon reviewed Mar 10, 2019

View reviewed changes

packages/material-ui-lab/src/TreeNode/TreeNode.js Outdated Show resolved Hide resolved

oliviertassinari reviewed Mar 11, 2019

View reviewed changes

pages/_app.js Outdated Show resolved Hide resolved

packages/material-ui-lab/src/TreeView/useTreeState.js Outdated Show resolved Hide resolved

packages/material-ui-lab/src/TreeNode/TreeNode.js Outdated Show resolved Hide resolved

oliviertassinari added new feature New feature or request component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! labels Mar 11, 2019

joshwooding force-pushed the tree-view branch 2 times, most recently from e489772 to 82898b1 Compare March 14, 2019 00:45

This comment has been minimized.

Sign in to view

oliviertassinari changed the title ~~[TreeView] Add TreeView component~~ [TreeView] Add new component Apr 8, 2019

oliviertassinari force-pushed the next branch from ad52812 to 5a768d7 Compare April 28, 2019 10:54

oliviertassinari added the priority: important This change can make a difference label May 12, 2019

oliviertassinari changed the base branch from next to master May 23, 2019 21:10

oliviertassinari mentioned this pull request May 31, 2019

Implement a TreeView component #12263

Closed

n370 reviewed May 31, 2019

View reviewed changes

packages/material-ui-lab/src/TreeNode/TreeNode.js Outdated Show resolved Hide resolved

joshwooding force-pushed the tree-view branch from 82898b1 to 55ade1a Compare June 2, 2019 18:42

joshwooding force-pushed the tree-view branch 2 times, most recently from 9f913a3 to ac11ab4 Compare June 2, 2019 18:54

This comment has been minimized.

Sign in to view

joshwooding force-pushed the tree-view branch from 4e60532 to e9fd648 Compare June 11, 2019 05:54

eps1lon reviewed Jul 25, 2019

View reviewed changes

This comment has been minimized.

Sign in to view

TreeNode -> TreeItem

b8f0dff

joshwooding force-pushed the tree-view branch from c752992 to b8f0dff Compare July 27, 2019 14:26

joshwooding added 3 commits July 27, 2019 15:29

TreeItem typescript

c3cf69e

Fixed merge

98ec5c3

Change to use event bubbling

4f585aa

joshwooding requested a review from eps1lon July 27, 2019 15:32

joshwooding requested a review from oliviertassinari July 27, 2019 15:59

oliviertassinari approved these changes Jul 27, 2019

View reviewed changes

eps1lon approved these changes Jul 27, 2019

View reviewed changes

joshwooding added the PR: good for merge label Jul 27, 2019

merceyz reviewed Jul 27, 2019

View reviewed changes

packages/material-ui-lab/src/TreeItem/index.d.ts Show resolved Hide resolved

merceyz reviewed Jul 27, 2019

View reviewed changes

packages/material-ui-lab/src/TreeView/index.d.ts Show resolved Hide resolved

Add TypeScript exports

ce3e367

oliviertassinari merged commit e04b463 into mui:master Jul 28, 2019

eps1lon mentioned this pull request Jul 28, 2019

[docs] Update treeview related API docs #16781

Merged

joshwooding deleted the tree-view branch July 28, 2019 17:35

snyk-bot mentioned this pull request Sep 4, 2019

[Snyk] Upgrade @material-ui/styles from 4.3.0 to 4.3.3 iliutastoica/React-Discord-Clone#5

Open

oliviertassinari mentioned this pull request Jan 6, 2021

[TreeView] HTML is not valid mui/mui-x#12285

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TreeView] Add new component #14827

[TreeView] Add new component #14827

joshwooding commented Mar 10, 2019 •

edited

Loading

mui-pr-bot commented Mar 10, 2019 •

edited

Loading

This comment has been minimized.

eps1lon left a comment

oliviertassinari left a comment •

edited

Loading

joshwooding commented Mar 14, 2019

This comment has been minimized.

This comment has been minimized.

jshearer commented Mar 18, 2019 •

edited

Loading

This comment has been minimized.

mui-pr-bot commented Jun 2, 2019 •

edited

Loading

This comment has been minimized.

joshwooding commented Jun 9, 2019

joshwooding commented Jun 11, 2019 •

edited

Loading

eps1lon left a comment

joshwooding commented Jul 25, 2019

eps1lon commented Jul 25, 2019

This comment has been minimized.

This comment has been minimized.

eps1lon commented Jul 25, 2019

joshwooding commented Jul 25, 2019

joshwooding commented Jul 27, 2019

eps1lon left a comment

merceyz Jul 27, 2019 •

edited

Loading

joshwooding Jul 27, 2019 •

edited

Loading

eps1lon Jul 28, 2019

oliviertassinari Jul 28, 2019 •

edited

Loading

eps1lon Jul 28, 2019

oliviertassinari Jul 28, 2019

joshwooding Jul 28, 2019

oliviertassinari commented Jul 28, 2019

felipezacani commented Jun 16, 2020

oliviertassinari commented Jun 16, 2020

	{stateIconsProvided ? <div className={classes.iconContainer}>{stateIcon}</div> : null}
	{stateIconsProvided && <div className={classes.iconContainer}>{stateIcon}</div>}

[TreeView] Add new component #14827

[TreeView] Add new component #14827

Conversation

joshwooding commented Mar 10, 2019 • edited Loading

mui-pr-bot commented Mar 10, 2019 • edited Loading

This comment has been minimized.

eps1lon left a comment

Choose a reason for hiding this comment

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

joshwooding commented Mar 14, 2019

This comment has been minimized.

This comment has been minimized.

jshearer commented Mar 18, 2019 • edited Loading

This comment has been minimized.

mui-pr-bot commented Jun 2, 2019 • edited Loading

This comment has been minimized.

joshwooding commented Jun 9, 2019

joshwooding commented Jun 11, 2019 • edited Loading

eps1lon left a comment

Choose a reason for hiding this comment

joshwooding commented Jul 25, 2019

eps1lon commented Jul 25, 2019

This comment has been minimized.

This comment has been minimized.

eps1lon commented Jul 25, 2019

joshwooding commented Jul 25, 2019

joshwooding commented Jul 27, 2019

eps1lon left a comment

Choose a reason for hiding this comment

merceyz Jul 27, 2019 • edited Loading

Choose a reason for hiding this comment

joshwooding Jul 27, 2019 • edited Loading

Choose a reason for hiding this comment

eps1lon Jul 28, 2019

Choose a reason for hiding this comment

oliviertassinari Jul 28, 2019 • edited Loading

Choose a reason for hiding this comment

eps1lon Jul 28, 2019

Choose a reason for hiding this comment

oliviertassinari Jul 28, 2019

Choose a reason for hiding this comment

joshwooding Jul 28, 2019

Choose a reason for hiding this comment

oliviertassinari commented Jul 28, 2019

felipezacani commented Jun 16, 2020

oliviertassinari commented Jun 16, 2020

joshwooding commented Mar 10, 2019 •

edited

Loading

mui-pr-bot commented Mar 10, 2019 •

edited

Loading

oliviertassinari left a comment •

edited

Loading

jshearer commented Mar 18, 2019 •

edited

Loading

mui-pr-bot commented Jun 2, 2019 •

edited

Loading

joshwooding commented Jun 11, 2019 •

edited

Loading

merceyz Jul 27, 2019 •

edited

Loading

joshwooding Jul 27, 2019 •

edited

Loading

oliviertassinari Jul 28, 2019 •

edited

Loading