[docs] Standardize the usage of callouts in the MUI X docs (mui#7127)

Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: delangle <[email protected]>
Co-authored-by: Andrew Cherniavskii <[email protected]>

docs/data/data-grid/aggregation/aggregation.md

@@ -6,9 +6,9 @@ title: Data Grid - Aggregation
 
 <p class="description">Add aggregation functions to the Data Grid so users can combine row values.</p>
 
-You can aggregate rows through the data grid interface by opening the column menu and selecting from the items under **Aggregation**.
+You can aggregate rows through the Data Grid interface by opening the column menu and selecting from the items under **Aggregation**.
 
-The aggregated values are rendered in a footer row at the bottom of the data grid.
+The aggregated values are rendered in a footer row at the bottom of the Data Grid.
 
 {{"demo": "AggregationInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
 

docs/data/data-grid/api-object/api-object.md

@@ -35,7 +35,7 @@ You don't need to initialize the API object using `useGridApiRef` to be able to
 
 ### Outside the Data Grid
 
-When using the API object outside the data grid components, you need to initialize it using the `useGridApiRef` hook.
+When using the API object outside the Data Grid components, you need to initialize it using the `useGridApiRef` hook.
 You can then pass it to the Data Grid's `apiRef` prop:
 
 ```tsx

docs/data/data-grid/cell-selection/cell-selection.md

@@ -79,7 +79,7 @@ If a single cell is selected, all classes above are applied to the same element.
 The grid exposes a set of methods that enables all of these features using the imperative `apiRef`. To know more about how to use it, check the [API Object](/x/react-data-grid/api-object/) section.
 
 :::warning
-Only use this API as the last option. Give preference to the props to control the grid.
+Only use this API as the last option. Give preference to the props to control the Data Grid.
 :::
 
 {{"demo": "CellSelectionApiNoSnap.js", "bg": "inline", "hideToolbar": true}}

docs/data/data-grid/column-definition/column-definition.md

@@ -27,7 +27,7 @@ You can create the array outside the render function or memoize it.
 
 ## Providing content
 
-By default, the data grid uses the field of a column to get its value.
+By default, the Data Grid uses the field of a column to get its value.
 For instance, the column with field `name` will render the value stored in `row.name`.
 But for some columns, it can be useful to manually get and format the value to render.
 
@@ -105,7 +105,7 @@ and `valueFormatter` is used to display it as a percentage (e.g. `20%`).
 
 ## Rendering cells
 
-By default, the data grid renders the value as a string in the cell.
+By default, the Data Grid renders the value as a string in the cell.
 It resolves the rendered output in the following order:
 
 1. `renderCell() => ReactElement`
@@ -141,8 +141,7 @@ const columns: GridColDef[] = [
 {{"demo": "RenderCellGrid.js", "bg": "inline", "defaultCodeOpen": false }}
 
 :::warning
-Using `renderCell`, requires paying attention to the following points.
-If the type of the value returned by `valueGetter` does not correspond to the column's `type`, you should:
+When using `renderCell`, if the type of the value returned by `valueGetter` does not correspond to the column's `type`, you should:
 
 - handle [sorting](/x/react-data-grid/sorting/#custom-comparator) by providing `sortComparator` to the column.
 - set a `valueFormatter` providing a representation for the value to be used when [exporting](/x/react-data-grid/export/#exported-cells) the data.

docs/data/data-grid/column-dimensions/column-dimensions.md

@@ -30,7 +30,7 @@ The first column will be 200px wide, leaving 300px remaining. The column with `f
 
 To set a minimum and maximum width for a `flex` column set the `minWidth` and the `maxWidth` property in `GridColDef`.
 
-:::info
+:::warning
 Before using fluid width, note that:
 
 - `flex` doesn't work together with `width`. If you set both `flex` and `width` in `GridColDef`, `flex` will override `width`.

docs/data/data-grid/column-groups/column-groups.md

@@ -5,7 +5,7 @@
 Grouping columns allows you to have a multi-level hierarchy of columns in your header.
 
 :::warning
-This feature is experimental, it needs to be explicitly activated using the `columnGrouping` experimental feature flag.
+This feature is experimental and must be explicitly activated using the `columnGrouping` experimental feature flag:
 
 ```tsx
 <DataGrid experimentalFeatures={{ columnGrouping: true }} {...otherProps} />

docs/data/data-grid/column-pinning/column-pinning.md

@@ -39,8 +39,8 @@ The column pinning feature can be completely disabled with `disableColumnPinning
 :::
 
 :::warning
-You may encounter issues if the sum of the widths of the pinned columns is larger than the width of the data grid.
-Make sure that the data grid can accommodate properly, at least, these columns.
+You may encounter issues if the sum of the widths of the pinned columns is larger than the width of the Grid.
+Make sure that the Data Grid can properly accommodate these columns at a minimum.
 :::
 
 ## Controlling the pinned columns
@@ -67,8 +67,8 @@ This can be done in two ways:
 
 {{"demo": "DisableColumnPinningButtons.js", "bg": "inline"}}
 
-:::info
-Using the `disableColumnMenu` prop also works, however, you disable completely the column menu with this approach.
+:::warning
+Using the `disableColumnMenu` prop also works, but this approach completely disables the column menu.
 :::
 
 ## Pinning the checkbox selection column

docs/data/data-grid/column-spanning/column-spanning.md

@@ -22,7 +22,7 @@ interface GridColDef {
 
 :::warning
 When using `colSpan`, some other features may be pointless or may not work as expected (depending on the data model).
-To avoid confusing grid layout, consider disabling the following features for the column(s) that are affected by `colSpan`:
+To avoid a confusing grid layout, consider disabling the following features for any columns that are affected by `colSpan`:
 
 - [sorting](/x/react-data-grid/sorting/#disable-the-sorting)
 - [filtering](/x/react-data-grid/filtering/#disable-the-filters)

docs/data/data-grid/components/components.md

@@ -119,7 +119,7 @@ In the following demo, an illustration is added on top of the default "No Rows"
 {{"demo": "CustomEmptyOverlayGrid.js", "bg": "inline"}}
 
 :::info
-As the no rows overlay, the data grid allows to override the no results overlay with the `NoResultsOverlay` slot.
+As with the no-rows overlay, the Data Grid also lets you override the no-results overlay using the `NoResultsOverlay` slot.
 :::
 
 ### Row

docs/data/data-grid/custom-columns/custom-columns.md

@@ -39,7 +39,7 @@ The example below uses `@mui/x-date-pickers` for both `date` and `dateTime` colu
 
 {{"demo": "EditingWithDatePickers.js", "bg": "inline", "defaultCodeOpen": false }}
 
-:::warning
+:::info
 You can change the date format by importing different locale (`en-US` locale is used in the example above).
 See [Localization](/x/react-date-pickers/localization/) for more information.
 :::

docs/data/data-grid/demo/demo.md

@@ -3,7 +3,7 @@
 <p class="description">Use the demo below to explore the most significant features and their respective plans.</p>
 
 :::info
-We're using the Data Grid to display the following features' table.
+This demo uses the Data Grid to display a table of features.
 
 Filtering, sorting, and grouping (by plan) are at your disposal to help you explore the list.
 :::

docs/data/data-grid/export/export.md

@@ -405,7 +405,7 @@ For more information, check the [Clipboard copy](/x/react-data-grid/clipboard/#c
 The grid exposes a set of methods that enables all of these features using the imperative `apiRef`. To know more about how to use it, check the [API Object](/x/react-data-grid/api-object/) section.
 
 :::warning
-Only use this API as the last option. Give preference to the props to control the data grid.
+Only use this API as the last option. Give preference to the props to control the Data Grid.
 :::
 
 ### CSV

docs/data/data-grid/filtering/index.md

@@ -17,7 +17,7 @@ _See [the dedicated section](/x/react-data-grid/filtering/customization/) to lea
 ## Single and multi-filters
 
 :::warning
-The `DataGrid` can only filter the rows according to one criterion at the time.
+The Data Grid can only filter the rows according to one criterion at the time.
 
 To use [multi-filters](/x/react-data-grid/filtering/multi-filters/), you need to upgrade to the [Pro plan](/x/introduction/licensing/#pro-plan) or above.
 :::
@@ -136,7 +136,7 @@ You can ignore diacritics (accents) when filtering the rows. See [Quick filter -
 The grid exposes a set of methods that enables all of these features using the imperative `apiRef`. To know more about how to use it, check the [API Object](/x/react-data-grid/api-object/) section.
 
 :::warning
-Only use this API as the last option. Give preference to the props to control the data grid.
+Only use this API as the last option. Give preference to the props to control the Data Grid.
 :::
 
 {{"demo": "FilterApiNoSnap.js", "bg": "inline", "hideToolbar": true}}

docs/data/data-grid/getting-started/getting-started.md

@@ -60,7 +60,9 @@ pnpm add @mui/styled-engine-sc styled-components
 
 </codeblock>
 
-Take a look at the [Styled engine guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine.
+:::info
+Take a look at the [Styled Components guide](/material-ui/guides/styled-components/) for more information about how to configure `styled-components` as the style engine.
+:::
 
 ## Quickstart
 

docs/data/data-grid/layout/layout.md

@@ -5,7 +5,7 @@
 :::error
 By default, the Data Grid has **no intrinsic dimensions**.
 Instead, it takes up the space given by its parent.
-The grid will raise an error in the console if its container has no intrinsic dimensions.
+The Data Grid will raise an error in the console if its container has no intrinsic dimensions.
 :::
 
 ## Percentage dimensions

docs/data/data-grid/localization/localization.md

@@ -16,9 +16,9 @@ In the following example, the labels of the density selector are customized.
 {{"demo": "CustomLocaleTextGrid.js", "bg": "inline"}}
 
 :::warning
-It's important to note that because the data grid uses components from the Material UI library some translation keys need to be accessed using that component key.
+It's important to note that because the Data Grid uses components from the Material UI library, some translation keys need to be accessed using that component key.
 
-One example is the table pagination component used in the data grid footer when pagination is enabled. All the keys provided to the `MuiTablePagination` object are applied as props directly to the [`TablePagination`](/material-ui/api/table-pagination/) component.
+One example is the table pagination component used in the Data Grid footer when pagination is enabled. All the keys provided to the `MuiTablePagination` object are applied as props directly to the [Table Pagination](/material-ui/api/table-pagination/) component.
 
 ```jsx
 <DataGrid

docs/data/data-grid/master-detail/master-detail.md

@@ -41,7 +41,7 @@ Returning `null` or `undefined` as the value of `getDetailPanelContent` will pre
 
 :::warning
 Always memoize the function provided to `getDetailPanelContent` and `getDetailPanelHeight`.
-The grid depends on the referential value of these props to cache their values and optimize the rendering.
+The Data Grid depends on the referential value of these props to cache their values and optimize the rendering.
 
 ```tsx
 const getDetailPanelContent = React.useCallback(() => { ... }, []);

docs/data/data-grid/overview/overview.md

@@ -19,7 +19,7 @@ The component leverages the power of React and TypeScript, to provide the best U
 Visit the [installation guide](/x/react-data-grid/getting-started/#installation) to learn how to install the correct package version and dependencies.
 :::
 
-The `DataGrid` presents information in a structured format of rows and columns. The data is displayed in a user-friendly, quick-to-scan and interactive way, enabling users to efficiently identify patterns, edit data, and gather insights.
+The Data Grid presents information in a structured format of rows and columns. The data is displayed in a user-friendly, quick-to-scan and interactive way, enabling users to efficiently identify patterns, edit data, and gather insights.
 
 The component comes in three different versions. One available under MIT license and two available under commercial license.
 

docs/data/data-grid/pagination/pagination.md

@@ -27,7 +27,7 @@ You should either provide an array of:
 Use the `autoPageSize` prop to auto-scale the `pageSize` to match the container height and the max number of rows that can be displayed without a vertical scroll bar.
 
 :::warning
-You can't use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the data grid according to the `pageSize`.
+You can't use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.
 :::
 
 {{"demo": "PageSizeAuto.js", "bg": "inline"}}
@@ -91,7 +91,7 @@ This means you have to give the rows of all pages to the data grid.
 If your dataset is too big, and you only want to fetch the current page, you can use server-side pagination.
 
 :::info
-For more information regarding server-side pagination in combination with controlled selection check [here](/x/react-data-grid/row-selection/#usage-with-server-side-pagination)
+Check out [Selection—Usage with server-side pagination](/x/react-data-grid/row-selection/#usage-with-server-side-pagination) for more details.
 :::
 
 ### Basic implementation
@@ -129,10 +129,10 @@ You can customize the rendering of the pagination in the footer following [the c
 
 ## apiRef
 
-The grid exposes a set of methods that enables all of these features using the imperative `apiRef`. To know more about how to use it, check the [API Object](/x/react-data-grid/api-object/) section.
+The Data Grid exposes a set of methods that enables all of these features using the imperative `apiRef`. To know more about how to use it, check the [API Object](/x/react-data-grid/api-object/) section.
 
 :::warning
-Only use this API as the last option. Give preference to the props to control the data grid.
+Only use this API as the last option. Give preference to the props to control the Data Grid.
 :::
 
 {{"demo": "PaginationApiNoSnap.js", "bg": "inline", "hideToolbar": true, "defaultCodeOpen": false }}

docs/data/data-grid/row-definition/row-definition.md

@@ -12,7 +12,7 @@ The rows can be defined with the `rows` prop, which expects an array of objects.
 
 :::warning
 The `rows` prop should keep the same reference between two renders except when you want to apply new rows.
-Otherwise, the data grid will re-apply heavy work like sorting and filtering.
+Otherwise, the Data Grid will re-apply heavy work like sorting and filtering.
 :::
 
 {{"demo": "RowsGrid.js", "bg": "inline"}}
@@ -23,9 +23,9 @@ Each row must have a unique identifier.
 
 This identifier is used internally to identify the row in the various models—for instance, the row selection model—and to track the row across updates.
 
-By default, the data grid looks for a property named `id` in the data set to get that identifier.
+By default, the Data Grid looks for a property named `id` in the data set to get that identifier.
 
-If the row's identifier is not called `id`, then you need to use the `getRowId` prop to tell the data grid where it's located.
+If the row's identifier is not called `id`, then you need to use the `getRowId` prop to tell the Data Grid where it's located.
 
 The following demo shows how to use `getRowId` to grab the unique identifier from a property named `internalId`:
 
@@ -39,14 +39,14 @@ function getRowId(row) {
 
 {{"demo": "RowsGridWithGetRowId.js", "bg": "inline", "defaultCodeOpen": false}}
 
-If no such unique identifier exists in the data set, then you must create it by some other means, but this scenario should be avoided because it leads to issues with other features of the data grid.
+If no such unique identifier exists in the data set, then you must create it by some other means, but this scenario should be avoided because it leads to issues with other features of the Data Grid.
 
 Note that it is not necessary to create a column to display the unique identifier data.
-The data grid pulls this information directly from the data set itself, not from anything that is displayed on the screen.
+The Data Grid pulls this information directly from the data set itself, not from anything displayed on the screen.
 
 :::warning
 Just like the `rows` prop, the `getRowId` function should keep the same JavaScript reference between two renders.
-Otherwise, the data grid will re-apply heavy work like sorting and filtering.
+Otherwise, the Data Grid will re-apply heavy work like sorting and filtering.
 
 It could be achieved by either defining the prop outside the component scope or by memoizing using the `React.useCallback` hook if the function reuses something from the component scope.
 :::

docs/data/data-grid/row-grouping/row-grouping.md

@@ -266,7 +266,7 @@ If you are rendering leaves with the `leafField` property of `groupingColDef`, t
 In both cases, you can force the sorting and filtering to be applied on another grouping criteria with the `mainGroupingCriteria` property of `groupingColDef`
 
 :::warning
-This feature is not yet compatible with `sortingMode = "server"` and `filteringMode = "server"`
+This feature is not yet compatible with `sortingMode = "server"` and `filteringMode = "server"`.
 :::
 
 {{"demo": "RowGroupingSortingSingleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}}
@@ -287,7 +287,7 @@ In the example below:
 {{"demo": "RowGroupingSortingMultipleGroupingColDef.js", "bg": "inline", "defaultCodeOpen": false}}
 
 :::warning
-If you are dynamically switching the `leafField` or `mainGroupingCriteria`, the sorting and filtering models will not automatically be cleaned-up and the sorting/filtering will not be re-applied.
+If you are dynamically switching the `leafField` or `mainGroupingCriteria`, the sorting and filtering models will not be cleaned up automatically, and the sorting/filtering will not be re-applied.
 :::
 
 ## Get the rows in a group

docs/data/data-grid/row-height/row-height.md

@@ -13,20 +13,20 @@ Use the `rowHeight` prop to change this default value, as shown below:
 
 ## Variable row height
 
-If you need some rows to have different row heights this can be achieved using the `getRowHeight` prop.
+If you need some rows to have different row heights, this can be achieved using the `getRowHeight` prop.
 This function is called for each visible row and if the return value is a `number` then that `number` will be set as that row's `rowHeight`.
 If the return value is `null` or `undefined`, then the `rowHeight` prop will take effect for the given row.
 
 {{"demo": "VariableRowHeightGrid.js", "bg": "inline"}}
 
 :::warning
-Changing the `DataGrid` density does not affect the rows with variable row height.
+Changing the Data Grid density does not affect the rows with variable row height.
 You can access the density factor from the params provided to the `getRowHeight` prop
 :::
 
 :::warning
 Always memoize the function provided to `getRowHeight`.
-The grid bases on the referential value of these props to cache their values and optimize the rendering.
+The Data Grid bases on the referential value of these props to cache their values and optimize the rendering.
 :::
 
 ```tsx
@@ -111,8 +111,8 @@ To add a border instead, set `rowSpacingType` to `"border"` and customize the co
 />
 ```
 
-:::info
-⚠ Adding a bottom margin or border to rows that also have a [detail panel](/x/react-data-grid/master-detail/) is not recommended because the detail panel relies on the bottom margin to work.
+:::success
+Adding a bottom margin or border to rows that also have a [detail panel](/x/react-data-grid/master-detail/) is not recommended because the detail panel relies on the bottom margin to work.
 
 As an alternative, you can use the top spacing to define the space between rows.
 It's easier to always increase the next row spacing no matter if the detail panel is expanded or not, but you can use `gridDetailPanelExpandedRowIdsSelector` to apply a spacing depending on the open state.

docs/data/data-grid/row-ordering/row-ordering.md

@@ -74,7 +74,7 @@ To start with our suggested configuration, spread `GRID_REORDER_COL_DEF` when de
 This approach can also be used to change the location of the toggle column.
 
 :::warning
-For now, row reordering is disabled if sorting is applied to the data grid.
+For now, row reordering is disabled if sorting is applied to the Data Grid.
 :::
 
 ## Reordering rows with row grouping 🚧

docs/data/data-grid/row-pinning/row-pinning.md

@@ -30,7 +30,7 @@ Pinned rows data should also meet [Row identifier](/x/react-data-grid/row-defini
 
 :::warning
 Just like the `rows` prop, `pinnedRows` prop should keep the same reference between two renders.
-Otherwise, the data grid will re-apply heavy work like sorting and filtering.
+Otherwise, the Data Grid will re-apply heavy work like sorting and filtering.
 :::
 
 ## Controlling pinned rows