[TreeView] Always apply the indentation at the item level instead of …

…the group level
mui · Oct 24, 2024 · 68ef16f · 68ef16f
1 parent 103c59c
commit 68ef16f
Show file tree

Hide file tree

Showing 39 changed files with 33 additions and 245 deletions.
diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.js
@@ -41,7 +41,6 @@ export default function DragAndDrop() {
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
         experimentalFeatures={{
-          indentationAtItemLevel: true,
           itemsReordering: true,
         }}
       />

diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx
@@ -41,7 +41,6 @@ export default function DragAndDrop() {
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
         experimentalFeatures={{
-          indentationAtItemLevel: true,
           itemsReordering: true,
         }}
       />

diff --git a/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/DragAndDrop.tsx.preview
@@ -3,7 +3,6 @@
   itemsReordering
   defaultExpandedItems={['grid', 'pickers']}
   experimentalFeatures={{
-    indentationAtItemLevel: true,
     itemsReordering: true,
   }}
 />
diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.js
@@ -247,7 +247,7 @@ export default function FileExplorer() {
       defaultExpandedItems={['1', '1.1']}
       sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
       slots={{ item: CustomTreeItem }}
-      experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}
+      experimentalFeatures={{ itemsReordering: true }}
       itemsReordering
       canMoveItemToNewPosition={(params) => {
         return (

diff --git a/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx b/docs/data/tree-view/rich-tree-view/ordering/FileExplorer.tsx
@@ -279,7 +279,7 @@ export default function FileExplorer() {
       defaultExpandedItems={['1', '1.1']}
       sx={{ height: 'fit-content', flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
       slots={{ item: CustomTreeItem }}
-      experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}
+      experimentalFeatures={{ itemsReordering: true }}
       itemsReordering
       canMoveItemToNewPosition={(params) => {
         return (

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.js b/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.js
@@ -45,7 +45,6 @@ export default function OnItemPositionChange() {
           items={MUI_X_PRODUCTS}
           itemsReordering
           experimentalFeatures={{
-            indentationAtItemLevel: true,
             itemsReordering: true,
           }}
           defaultExpandedItems={['grid', 'pickers']}

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnItemPositionChange.tsx
@@ -53,7 +53,6 @@ export default function OnItemPositionChange() {
           items={MUI_X_PRODUCTS}
           itemsReordering
           experimentalFeatures={{
-            indentationAtItemLevel: true,
             itemsReordering: true,
           }}
           defaultExpandedItems={['grid', 'pickers']}

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.js
@@ -104,7 +104,6 @@ export default function OnlyReorderFromDragHandle() {
         items={MUI_X_PRODUCTS}
         defaultExpandedItems={['grid', 'pickers']}
         experimentalFeatures={{
-          indentationAtItemLevel: true,
           itemsReordering: true,
         }}
         itemsReordering

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx
@@ -115,7 +115,6 @@ export default function OnlyReorderFromDragHandle() {
         items={MUI_X_PRODUCTS}
         defaultExpandedItems={['grid', 'pickers']}
         experimentalFeatures={{
-          indentationAtItemLevel: true,
           itemsReordering: true,
         }}
         itemsReordering

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderFromDragHandle.tsx.preview
@@ -2,7 +2,6 @@
   items={MUI_X_PRODUCTS}
   defaultExpandedItems={['grid', 'pickers']}
   experimentalFeatures={{
-    indentationAtItemLevel: true,
     itemsReordering: true,
   }}
   itemsReordering

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.js
@@ -41,7 +41,6 @@ export default function OnlyReorderInSameParent() {
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
         experimentalFeatures={{
-          indentationAtItemLevel: true,
           itemsReordering: true,
         }}
         canMoveItemToNewPosition={(params) =>

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx
@@ -41,7 +41,6 @@ export default function OnlyReorderInSameParent() {
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
         experimentalFeatures={{
-          indentationAtItemLevel: true,
           itemsReordering: true,
         }}
         canMoveItemToNewPosition={(params) =>

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderInSameParent.tsx.preview
@@ -3,7 +3,6 @@
   itemsReordering
   defaultExpandedItems={['grid', 'pickers']}
   experimentalFeatures={{
-    indentationAtItemLevel: true,
     itemsReordering: true,
   }}
   canMoveItemToNewPosition={(params) =>

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.js b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.js
@@ -44,7 +44,6 @@ export default function OnlyReorderLeaves() {
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
         experimentalFeatures={{
-          indentationAtItemLevel: true,
           itemsReordering: true,
         }}
         apiRef={apiRef}

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx
@@ -44,7 +44,6 @@ export default function OnlyReorderLeaves() {
         itemsReordering
         defaultExpandedItems={['grid', 'pickers']}
         experimentalFeatures={{
-          indentationAtItemLevel: true,
           itemsReordering: true,
         }}
         apiRef={apiRef}

diff --git a/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx.preview b/docs/data/tree-view/rich-tree-view/ordering/OnlyReorderLeaves.tsx.preview
@@ -3,7 +3,6 @@
   itemsReordering
   defaultExpandedItems={['grid', 'pickers']}
   experimentalFeatures={{
-    indentationAtItemLevel: true,
     itemsReordering: true,
   }}
   apiRef={apiRef}

diff --git a/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.js b/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.js
@@ -70,7 +70,6 @@ export default function SendAllItemsToServer() {
           itemsReordering
           defaultExpandedItems={['grid', 'pickers']}
           experimentalFeatures={{
-            indentationAtItemLevel: true,
             itemsReordering: true,
           }}
           onItemPositionChange={handleItemPositionChangeTreeViewA}

diff --git a/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.tsx b/docs/data/tree-view/rich-tree-view/ordering/SendAllItemsToServer.tsx
@@ -70,7 +70,6 @@ export default function SendAllItemsToServer() {
           itemsReordering
           defaultExpandedItems={['grid', 'pickers']}
           experimentalFeatures={{
-            indentationAtItemLevel: true,
             itemsReordering: true,
           }}
           onItemPositionChange={handleItemPositionChangeTreeViewA}

diff --git a/docs/data/tree-view/rich-tree-view/ordering/ordering.md b/docs/data/tree-view/rich-tree-view/ordering/ordering.md
@@ -12,13 +12,10 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
 <p class="description">Drag and drop your items to reorder them.</p>
 
 :::success
-To be able to reorder items, you first have to enable the `indentationAtItemLevel` and the `itemsReordering` experimental features:
+To be able to reorder items, you first have to enable the `itemsReordering` experimental feature:
 
 ```tsx
-<RichTreeViewPro
-  items={ITEMS}
-  experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}
-/>
+<RichTreeViewPro items={ITEMS} experimentalFeatures={{ itemsReordering: true }} />
 ```
 
 See [Tree Item Customization—Apply the nested item's indentation at the item level](/x/react-tree-view/tree-item-customization/#apply-the-nested-items-indentation-at-the-item-level) for more details.

diff --git a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js
diff --git a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx
diff --git a/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx.preview b/docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx.preview
diff --git a/docs/data/tree-view/tree-item-customization/tree-item-customization.md b/docs/data/tree-view/tree-item-customization/tree-item-customization.md
@@ -82,40 +82,6 @@ By default, a nested item is indented by `12px` from its parent item.
 
 {{"demo": "ItemChildrenIndentationProp.js"}}
 
-:::success
-If you are using a custom Tree Item component, and you want to override the padding,
-then apply the following padding to your `groupTransition` element:
-
-```ts
-const CustomTreeItemGroupTransition = styled(TreeItemGroupTransition)(({ theme }) => ({
-  // ...other styles
-  paddingLeft: `var(--TreeView-itemChildrenIndentation)`,
-}
-```
-
-If you are using the `indentationAtItemLevel` prop, then instead apply the following padding to your `content` element:
-
-```ts
-const CustomTreeItemContent = styled(TreeItemContent)(({ theme }) => ({
-  // ...other styles
-  paddingLeft:
-      `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`,
-}
-```
-
-:::
-
-### Apply the nested item's indentation at the item level
-
-By default, the indentation of nested items is applied by the `groupTransition` slot of its parent (i.e.: the DOM element that wraps all the children of a given item).
-This approach is not compatible with upcoming features like the reordering of items using drag & drop.
-
-To apply the indentation at the item level (i.e.: have each item responsible for setting its own indentation using the `padding-left` CSS property on its `content` slot),
-you can use the `indentationAtItemLevel` experimental feature.
-It will become the default behavior in the next major version of the Tree View component.
-
-{{"demo": "IndentationAtItemLevel.js"}}
-
 :::success
 If you are using a custom Tree Item component, and you want to override the padding,
 then apply the following padding to your `content` element:

diff --git a/docs/pages/x/api/tree-view/rich-tree-view-pro.json b/docs/pages/x/api/tree-view/rich-tree-view-pro.json
@@ -29,10 +29,7 @@
       "default": "'content'"
     },
     "experimentalFeatures": {
-      "type": {
-        "name": "shape",
-        "description": "{ indentationAtItemLevel?: bool, itemsReordering?: bool, labelEditing?: bool }"
-      }
+      "type": { "name": "shape", "description": "{ itemsReordering?: bool, labelEditing?: bool }" }
     },
     "getItemId": {
       "type": { "name": "func" },

diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json
@@ -21,10 +21,7 @@
       "default": "'content'"
     },
     "experimentalFeatures": {
-      "type": {
-        "name": "shape",
-        "description": "{ indentationAtItemLevel?: bool, labelEditing?: bool }"
-      }
+      "type": { "name": "shape", "description": "{ labelEditing?: bool }" }
     },
     "getItemId": {
       "type": { "name": "func" },

diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json
@@ -21,9 +21,7 @@
       "type": { "name": "enum", "description": "'content'<br>&#124;&nbsp;'iconContainer'" },
       "default": "'content'"
     },
-    "experimentalFeatures": {
-      "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
-    },
+    "experimentalFeatures": { "type": { "name": "object" } },
     "id": { "type": { "name": "string" } },
     "itemChildrenIndentation": {
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },

diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json
@@ -21,9 +21,7 @@
       "type": { "name": "enum", "description": "'content'<br>&#124;&nbsp;'iconContainer'" },
       "default": "'content'"
     },
-    "experimentalFeatures": {
-      "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" }
-    },
+    "experimentalFeatures": { "type": { "name": "object" } },
     "id": { "type": { "name": "string" } },
     "itemChildrenIndentation": {
       "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" },

diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx
@@ -187,7 +187,6 @@ RichTreeViewPro.propTypes = {
    * the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
-    indentationAtItemLevel: PropTypes.bool,
     itemsReordering: PropTypes.bool,
     labelEditing: PropTypes.bool,
   }),