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.

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] Cleanup of the Tree View demos #13237

Merged
merged 4 commits into from
May 30, 2024

Conversation

flaviendelangle
Copy link
Member

@flaviendelangle flaviendelangle commented May 24, 2024

  • Fix the layout shift on all demo when you expand all the items
  • Use the same MUI_X_PRODUCTS dataset whenever a data change is not relevant (even for basic customization examples)
  • Fix some issues on the selection docs (wrong issue link, usage of RichTreeView in the SimpleTreeView doc, ...)
  • Fix a sentence about the label slotProps on the RichTreeView that did not reflect the demo
  • Use the demo that shows how to disable items (on both Tree View components), it was created but never used
  • Remove aria-label, IMHO either we always use it and with a meaningful title or we never use it

Regarding the MUI_X_PRODUCTS, the issue is that we loose the preview on SimpleTreeView because the dataset is too big.
Do you think we should find a smaller dataset (having a small dataset on some demos and a larger on others make no sense IMHO, it's hard to have the right dimensions when it varies across demos and a lot of demos where the preview could be useful don't have one)?

Preview: https://deploy-preview-13237--material-ui-x.netlify.app/x/react-tree-view/

@flaviendelangle flaviendelangle 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 May 24, 2024
@flaviendelangle flaviendelangle self-assigned this May 24, 2024
@flaviendelangle flaviendelangle marked this pull request as ready for review May 24, 2024 10:08
Copy link
Member

@arthurbalduini arthurbalduini left a comment

Choose a reason for hiding this comment

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

LGTM :)

Copy link
Contributor

@noraleonte noraleonte left a comment

Choose a reason for hiding this comment

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

Very nice improvements 🎉

@flaviendelangle flaviendelangle merged commit 20c0f52 into mui:master May 30, 2024
17 checks passed
@flaviendelangle flaviendelangle deleted the clean-doc-tree-view branch May 30, 2024 13:57
DungTiger pushed a commit to DungTiger/mui-x that referenced this pull request Jul 23, 2024
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
Comment on lines -38 to +8
<Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
<RichTreeView items={MUI_X_PRODUCTS} />
<Box sx={{ minHeight: 352, minWidth: 250 }}>
Copy link
Member

@oliviertassinari oliviertassinari Nov 12, 2024

Choose a reason for hiding this comment

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

With the new height, going to https://mui.com/x/react-tree-view/simple-tree-view/selection/ and scrolling the page down to read the content has a lot of empty spaces. It doesn't feel as great as it could be.

Was "Fix the layout shift on all demo when you expand all the items" a problem in the first place?

Suggested change
<Box sx={{ minHeight: 200, flexGrow: 1, maxWidth: 400 }}>
<RichTreeView items={MUI_X_PRODUCTS} />
<Box sx={{ minHeight: 352, minWidth: 250 }}>
<Box sx={{ minHeight: 200, minWidth: 250 }}>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tree view TreeView, TreeItem. This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants