From e8a341a6fbd68c327134a5fbb1d7b097ba07c15a Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Thu, 13 Jul 2023 20:33:31 +0200
Subject: [PATCH 1/2] use codeblocks to differentiate between packages

---
 docs/data/data-grid/components/components.md | 60 ++++++++++++++++++--
 1 file changed, 56 insertions(+), 4 deletions(-)

diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md
index 73f1fce3290b..18ffba252d3d 100644
--- a/docs/data/data-grid/components/components.md
+++ b/docs/data/data-grid/components/components.md
@@ -184,8 +184,10 @@ For example, for `columnMenu` slot, the interface name would be `ColumnMenuProps
 
 This [file](https://github.com/mui/mui-x/blob/-/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts) lists all the interfaces for each slot which could be used for augmentation.
 
-```tsx
-// augment the props for `toolbar` slot
+<codeblock storageKey="data-grid-pricing-plan">
+
+```tsx Community
+// augment the props for the toolbar slot
 declare module '@mui/x-data-grid' {
   interface ToolbarPropsOverrides {
     someCustomString: string;
@@ -195,12 +197,36 @@ declare module '@mui/x-data-grid' {
 
 <DataGrid
   slots={{
-    // custom component passed to the `toolbar` slot
+    // custom component passed to the toolbar slot
+    toolbar: CustomGridToolbar,
+  }}
+  slotProps={{
+    toolbar: {
+      // props required by CustomGridToolbar
+      someCustomString: 'Hello',
+      someCustomNumber: 42,
+    },
+  }}
+>
+```
+
+```tsx Pro
+// augment the props for the toolbar slot
+declare module '@mui/x-data-grid-pro' {
+  interface ToolbarPropsOverrides {
+    someCustomString: string;
+    someCustomNumber: number;
+  }
+}
+
+<DataGridPro
+  slots={{
+    // custom component passed to the toolbar slot
     toolbar: CustomGridToolbar,
   }}
   slotProps={{
     toolbar: {
-      // props required by `CustomGridToolbar`
+      // props required by CustomGridToolbar
       someCustomString: 'Hello',
       someCustomNumber: 42,
     },
@@ -208,6 +234,32 @@ declare module '@mui/x-data-grid' {
 >
 ```
 
+```tsx Premium
+// augment the props for the toolbar slot
+declare module '@mui/x-data-grid-premium' {
+  interface ToolbarPropsOverrides {
+    someCustomString: string;
+    someCustomNumber: number;
+  }
+}
+
+<DataGridPremium
+  slots={{
+    // custom component passed to the toolbar slot
+    toolbar: CustomGridToolbar,
+  }}
+  slotProps={{
+    toolbar: {
+      // props required by CustomGridToolbar
+      someCustomString: 'Hello',
+      someCustomNumber: 42,
+    },
+  }}
+>
+```
+
+</codeblock>
+
 This demo below shows how to use the `slotProps` prop and module augmentation to pass a new prop `status` to the `footer` slot.
 
 {{"demo": "CustomFooter.js", "bg": "inline"}}

From bd09ccc2d2fbb623d9597e7ea05442fc0daee1ef Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Fri, 21 Jul 2023 12:56:01 +0200
Subject: [PATCH 2/2] update storage key

---
 docs/data/data-grid/components/components.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md
index 18ffba252d3d..c64f8c20442e 100644
--- a/docs/data/data-grid/components/components.md
+++ b/docs/data/data-grid/components/components.md
@@ -184,7 +184,7 @@ For example, for `columnMenu` slot, the interface name would be `ColumnMenuProps
 
 This [file](https://github.com/mui/mui-x/blob/-/packages/grid/x-data-grid/src/models/gridSlotsComponentsProps.ts) lists all the interfaces for each slot which could be used for augmentation.
 
-<codeblock storageKey="data-grid-pricing-plan">
+<codeblock storageKey="pricing-plan">
 
 ```tsx Community
 // augment the props for the toolbar slot