[DataGrid][docs] Add overlay documentation (mui#13624)

Signed-off-by: Kenan Yusuf <[email protected]> Co-authored-by: Andrew Cherniavskii <[email protected]>
thomasmoon · Sep 6, 2024 · d4f09ce · d4f09ce
1 parent 173369e
commit d4f09ce
Show file tree

Hide file tree

Showing 25 changed files with 570 additions and 314 deletions.
diff --git a/docs/data/data-grid/components/CustomEmptyOverlayGrid.js b/docs/data/data-grid/components/CustomEmptyOverlayGrid.js
diff --git a/docs/data/data-grid/components/CustomEmptyOverlayGrid.tsx b/docs/data/data-grid/components/CustomEmptyOverlayGrid.tsx
diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md
@@ -128,23 +128,6 @@ The next demo reuses `GridPagination` but replaces the previous and next page bu
 
 {{"demo": "CustomPaginationGrid.js", "bg": "inline"}}
 
-### Loading overlay
-
-By default, the loading overlay displays a circular progress.
-This demo replaces it with a linear progress.
-
-{{"demo": "CustomLoadingOverlayGrid.js", "bg": "inline"}}
-
-### No rows overlay
-
-In the following demo, an illustration is added on top of the default "No Rows" message.
-
-{{"demo": "CustomEmptyOverlayGrid.js", "bg": "inline"}}
-
-:::info
-As with the no-rows overlay, the Data Grid also lets you override the no-results overlay using the `NoResultsOverlay` slot.
-:::
-
 ### Row
 
 The `slotProps.row` prop can be used to pass additional props to the row component.
@@ -166,6 +149,10 @@ As any component slot, every icon can be customized. However, it is not yet poss
 
 {{"demo": "CustomSortIcons.js", "bg": "inline"}}
 
+### Overlays
+
+See the [Overlays](/x/react-data-grid/overlays/) documentation on how to customize the `loadingOverlay`, `noRowsOverlay`, and `noResultsOverlay`.
+
 ## Slot props
 
 To override default props or pass custom props to slot components, use the `slotProps` prop.

diff --git a/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js b/docs/data/data-grid/layout/AutoHeightOverlayNoSnap.js
@@ -9,68 +9,43 @@ const StyledGridOverlay = styled('div')(({ theme }) => ({
   alignItems: 'center',
   justifyContent: 'center',
   height: '100%',
-  '& .ant-empty-img-1': {
-    fill: theme.palette.mode === 'light' ? '#aeb8c2' : '#262626',
+  '& .no-rows-primary': {
+    fill: theme.palette.mode === 'light' ? '#AEB8C2' : '#3D4751',
   },
-  '& .ant-empty-img-2': {
-    fill: theme.palette.mode === 'light' ? '#f5f5f7' : '#595959',
-  },
-  '& .ant-empty-img-3': {
-    fill: theme.palette.mode === 'light' ? '#dce0e6' : '#434343',
-  },
-  '& .ant-empty-img-4': {
-    fill: theme.palette.mode === 'light' ? '#fff' : '#1c1c1c',
-  },
-  '& .ant-empty-img-5': {
-    fillOpacity: theme.palette.mode === 'light' ? '0.8' : '0.08',
-    fill: theme.palette.mode === 'light' ? '#f5f5f5' : '#fff',
+  '& .no-rows-secondary': {
+    fill: theme.palette.mode === 'light' ? '#E8EAED' : '#1D2126',
   },
 }));
 
 function CustomNoRowsOverlay() {
   return (
     <StyledGridOverlay>
       <svg
-        style={{ flexShrink: 0 }}
-        width="240"
-        height="200"
-        viewBox="0 0 184 152"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        width={96}
+        viewBox="0 0 452 257"
         aria-hidden
         focusable="false"
       >
-        <g fill="none" fillRule="evenodd">
-          <g transform="translate(24 31.67)">
-            <ellipse
-              className="ant-empty-img-5"
-              cx="67.797"
-              cy="106.89"
-              rx="67.797"
-              ry="12.668"
-            />
-            <path
-              className="ant-empty-img-1"
-              d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
-            />
-            <path
-              className="ant-empty-img-2"
-              d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
-            />
-            <path
-              className="ant-empty-img-3"
-              d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
-            />
-          </g>
-          <path
-            className="ant-empty-img-3"
-            d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
-          />
-          <g className="ant-empty-img-4" transform="translate(149.65 15.383)">
-            <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
-            <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
-          </g>
-        </g>
+        <path
+          className="no-rows-primary"
+          d="M348 69c-46.392 0-84 37.608-84 84s37.608 84 84 84 84-37.608 84-84-37.608-84-84-84Zm-104 84c0-57.438 46.562-104 104-104s104 46.562 104 104-46.562 104-104 104-104-46.562-104-104Z"
+        />
+        <path
+          className="no-rows-primary"
+          d="M308.929 113.929c3.905-3.905 10.237-3.905 14.142 0l63.64 63.64c3.905 3.905 3.905 10.236 0 14.142-3.906 3.905-10.237 3.905-14.142 0l-63.64-63.64c-3.905-3.905-3.905-10.237 0-14.142Z"
+        />
+        <path
+          className="no-rows-primary"
+          d="M308.929 191.711c-3.905-3.906-3.905-10.237 0-14.142l63.64-63.64c3.905-3.905 10.236-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142l-63.64 63.64c-3.905 3.905-10.237 3.905-14.142 0Z"
+        />
+        <path
+          className="no-rows-secondary"
+          d="M0 10C0 4.477 4.477 0 10 0h380c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 20 0 15.523 0 10ZM0 59c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10C4.477 69 0 64.523 0 59ZM0 106c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 153c0-5.523 4.477-10 10-10h195.5c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 200c0-5.523 4.477-10 10-10h203c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10ZM0 247c0-5.523 4.477-10 10-10h231c5.523 0 10 4.477 10 10s-4.477 10-10 10H10c-5.523 0-10-4.477-10-10Z"
+        />
       </svg>
-      <Box sx={{ mt: 1 }}>No Rows</Box>
+      <Box sx={{ mt: 2 }}>No rows</Box>
     </StyledGridOverlay>
   );
 }