From 69df936c348d6d57f6fad5716b49aa455722bc29 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Fri, 24 Nov 2023 07:28:11 -0600 Subject: [PATCH] [docs] Standardize the usage of callouts in the MUI X docs (#7127) Signed-off-by: Flavien DELANGLE Co-authored-by: delangle Co-authored-by: Andrew Cherniavskii --- .../data/data-grid/aggregation/aggregation.md | 4 ++-- docs/data/data-grid/api-object/api-object.md | 2 +- .../cell-selection/cell-selection.md | 2 +- .../column-definition/column-definition.md | 7 +++--- .../column-dimensions/column-dimensions.md | 2 +- .../data-grid/column-groups/column-groups.md | 2 +- .../column-pinning/column-pinning.md | 8 +++---- .../column-spanning/column-spanning.md | 2 +- docs/data/data-grid/components/components.md | 2 +- .../custom-columns/custom-columns.md | 2 +- docs/data/data-grid/demo/demo.md | 2 +- docs/data/data-grid/export/export.md | 2 +- docs/data/data-grid/filtering/index.md | 4 ++-- .../getting-started/getting-started.md | 4 +++- docs/data/data-grid/layout/layout.md | 2 +- .../data-grid/localization/localization.md | 4 ++-- .../data-grid/master-detail/master-detail.md | 2 +- docs/data/data-grid/overview/overview.md | 2 +- docs/data/data-grid/pagination/pagination.md | 8 +++---- .../row-definition/row-definition.md | 12 +++++----- .../data-grid/row-grouping/row-grouping.md | 4 ++-- docs/data/data-grid/row-height/row-height.md | 10 ++++---- .../data-grid/row-ordering/row-ordering.md | 2 +- .../data/data-grid/row-pinning/row-pinning.md | 2 +- .../data-grid/row-selection/row-selection.md | 2 +- .../data/data-grid/row-updates/row-updates.md | 2 +- docs/data/data-grid/scrolling/scrolling.md | 2 +- docs/data/data-grid/sorting/sorting.md | 4 ++-- docs/data/data-grid/state/state.md | 2 +- docs/data/data-grid/style/style.md | 4 ++-- docs/data/data-grid/tree-data/tree-data.md | 23 +++++++++++-------- .../virtualization/virtualization.md | 2 +- .../adapters-locale/adapters-locale.md | 3 --- .../date-pickers/validation/validation.md | 15 ++++++------ docs/data/introduction/licensing/licensing.md | 5 ++-- .../migration-data-grid-v4.md | 8 ++++--- .../migration-data-grid-v5.md | 2 +- docsTech/processing.md | 4 +++- 38 files changed, 89 insertions(+), 82 deletions(-) diff --git a/docs/data/data-grid/aggregation/aggregation.md b/docs/data/data-grid/aggregation/aggregation.md index 18d722d6db0f..19c18382c117 100644 --- a/docs/data/data-grid/aggregation/aggregation.md +++ b/docs/data/data-grid/aggregation/aggregation.md @@ -6,9 +6,9 @@ title: Data Grid - Aggregation

Add aggregation functions to the Data Grid so users can combine row values.

-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}} diff --git a/docs/data/data-grid/api-object/api-object.md b/docs/data/data-grid/api-object/api-object.md index 9f575ba8a416..eb1ce143b95a 100644 --- a/docs/data/data-grid/api-object/api-object.md +++ b/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 diff --git a/docs/data/data-grid/cell-selection/cell-selection.md b/docs/data/data-grid/cell-selection/cell-selection.md index 8c65dc0cf053..bbf071932ccd 100644 --- a/docs/data/data-grid/cell-selection/cell-selection.md +++ b/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}} diff --git a/docs/data/data-grid/column-definition/column-definition.md b/docs/data/data-grid/column-definition/column-definition.md index 1c66b0e72c4f..59e42a9ac102 100644 --- a/docs/data/data-grid/column-definition/column-definition.md +++ b/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. diff --git a/docs/data/data-grid/column-dimensions/column-dimensions.md b/docs/data/data-grid/column-dimensions/column-dimensions.md index a1aa0720548a..c2d518212974 100644 --- a/docs/data/data-grid/column-dimensions/column-dimensions.md +++ b/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`. diff --git a/docs/data/data-grid/column-groups/column-groups.md b/docs/data/data-grid/column-groups/column-groups.md index 6401182819d2..aa9e43ea1a1c 100644 --- a/docs/data/data-grid/column-groups/column-groups.md +++ b/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 diff --git a/docs/data/data-grid/column-pinning/column-pinning.md b/docs/data/data-grid/column-pinning/column-pinning.md index 3509ab148831..b877c9e9cfa8 100644 --- a/docs/data/data-grid/column-pinning/column-pinning.md +++ b/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 diff --git a/docs/data/data-grid/column-spanning/column-spanning.md b/docs/data/data-grid/column-spanning/column-spanning.md index 4282b999fe33..896dc2f3a5d8 100644 --- a/docs/data/data-grid/column-spanning/column-spanning.md +++ b/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) diff --git a/docs/data/data-grid/components/components.md b/docs/data/data-grid/components/components.md index 6665ba18c921..2ac4c7a37915 100644 --- a/docs/data/data-grid/components/components.md +++ b/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 diff --git a/docs/data/data-grid/custom-columns/custom-columns.md b/docs/data/data-grid/custom-columns/custom-columns.md index 7ac7098d1c33..f89f0970f367 100644 --- a/docs/data/data-grid/custom-columns/custom-columns.md +++ b/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. ::: diff --git a/docs/data/data-grid/demo/demo.md b/docs/data/data-grid/demo/demo.md index a102d86cd55d..5ff5ffa15719 100644 --- a/docs/data/data-grid/demo/demo.md +++ b/docs/data/data-grid/demo/demo.md @@ -3,7 +3,7 @@

Use the demo below to explore the most significant features and their respective plans.

:::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. ::: diff --git a/docs/data/data-grid/export/export.md b/docs/data/data-grid/export/export.md index 9c3b94fed072..39e04b1eae01 100644 --- a/docs/data/data-grid/export/export.md +++ b/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 diff --git a/docs/data/data-grid/filtering/index.md b/docs/data/data-grid/filtering/index.md index 3d2597c60769..e2f910d65947 100644 --- a/docs/data/data-grid/filtering/index.md +++ b/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}} diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/getting-started/getting-started.md index 9b1bc24a3ddb..f4bb03002037 100644 --- a/docs/data/data-grid/getting-started/getting-started.md +++ b/docs/data/data-grid/getting-started/getting-started.md @@ -60,7 +60,9 @@ pnpm add @mui/styled-engine-sc styled-components -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 diff --git a/docs/data/data-grid/layout/layout.md b/docs/data/data-grid/layout/layout.md index ea0b2eb35375..67ff5ce52e17 100644 --- a/docs/data/data-grid/layout/layout.md +++ b/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 diff --git a/docs/data/data-grid/localization/localization.md b/docs/data/data-grid/localization/localization.md index 905c39065e32..b4974873aafd 100644 --- a/docs/data/data-grid/localization/localization.md +++ b/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 { ... }, []); diff --git a/docs/data/data-grid/overview/overview.md b/docs/data/data-grid/overview/overview.md index 9577b45abb19..db280aff8622 100644 --- a/docs/data/data-grid/overview/overview.md +++ b/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. diff --git a/docs/data/data-grid/pagination/pagination.md b/docs/data/data-grid/pagination/pagination.md index c8067c976742..2d518d3e465d 100644 --- a/docs/data/data-grid/pagination/pagination.md +++ b/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 }} diff --git a/docs/data/data-grid/row-definition/row-definition.md b/docs/data/data-grid/row-definition/row-definition.md index 191bbb4b2352..24cefe679041 100644 --- a/docs/data/data-grid/row-definition/row-definition.md +++ b/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. ::: diff --git a/docs/data/data-grid/row-grouping/row-grouping.md b/docs/data/data-grid/row-grouping/row-grouping.md index b9ba279a2625..8d36a2b367d1 100644 --- a/docs/data/data-grid/row-grouping/row-grouping.md +++ b/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 diff --git a/docs/data/data-grid/row-height/row-height.md b/docs/data/data-grid/row-height/row-height.md index 4a41064b29d1..c5e68574413b 100644 --- a/docs/data/data-grid/row-height/row-height.md +++ b/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. diff --git a/docs/data/data-grid/row-ordering/row-ordering.md b/docs/data/data-grid/row-ordering/row-ordering.md index 1c4f8e7768a5..09e3922d1b2f 100644 --- a/docs/data/data-grid/row-ordering/row-ordering.md +++ b/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 🚧 diff --git a/docs/data/data-grid/row-pinning/row-pinning.md b/docs/data/data-grid/row-pinning/row-pinning.md index adcaa6edbb15..2648eff0864c 100644 --- a/docs/data/data-grid/row-pinning/row-pinning.md +++ b/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 diff --git a/docs/data/data-grid/row-selection/row-selection.md b/docs/data/data-grid/row-selection/row-selection.md index 7c95c95b8c90..3cc10e15d5f4 100644 --- a/docs/data/data-grid/row-selection/row-selection.md +++ b/docs/data/data-grid/row-selection/row-selection.md @@ -86,7 +86,7 @@ The following demo shows the prop in action: 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": "RowSelectionApiNoSnap.js", "bg": "inline", "hideToolbar": true}} diff --git a/docs/data/data-grid/row-updates/row-updates.md b/docs/data/data-grid/row-updates/row-updates.md index 22c006849ff7..345802de1942 100644 --- a/docs/data/data-grid/row-updates/row-updates.md +++ b/docs/data/data-grid/row-updates/row-updates.md @@ -41,7 +41,7 @@ In addition, the area in which `onRowsScrollEnd` is called can be changed using ## Lazy loading [](/x/introduction/licensing/#pro-plan 'Pro plan') :::warning -This feature is experimental, it needs to be explicitly activated using the `lazyLoading` experimental feature flag. +This feature is experimental and must be explicitly activated using the `lazyLoading` experimental feature flag: ```tsx diff --git a/docs/data/data-grid/scrolling/scrolling.md b/docs/data/data-grid/scrolling/scrolling.md index 63b2670f34f8..59efabe6623c 100644 --- a/docs/data/data-grid/scrolling/scrolling.md +++ b/docs/data/data-grid/scrolling/scrolling.md @@ -17,7 +17,7 @@ The following demo explores the usage of this API: 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": "ScrollApiNoSnap.js", "bg": "inline", "hideToolbar": true}} diff --git a/docs/data/data-grid/sorting/sorting.md b/docs/data/data-grid/sorting/sorting.md index 9f0f93800bac..c593a3dbfae5 100644 --- a/docs/data/data-grid/sorting/sorting.md +++ b/docs/data/data-grid/sorting/sorting.md @@ -11,7 +11,7 @@ Following clicks change the column's sorting direction. You can see the applied ## Single and multi-sorting :::warning -The `DataGrid` can only sort the rows according to one criterion at a time. +The Data Grid can only sort the rows according to one criterion at a time. To use multi-sorting, you need to upgrade to [Pro plan](/x/introduction/licensing/#pro-plan) or above. ::: @@ -137,7 +137,7 @@ Sorting can be run server-side by setting the `sortingMode` prop to `server`, an ## apiRef :::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": "SortingApiNoSnap.js", "bg": "inline", "hideToolbar": true}} diff --git a/docs/data/data-grid/state/state.md b/docs/data/data-grid/state/state.md index 5102914ad0d8..1ebe1c4fb9e4 100644 --- a/docs/data/data-grid/state/state.md +++ b/docs/data/data-grid/state/state.md @@ -37,7 +37,7 @@ The simplest way to use a selector is to call it as a function with `apiRef` as const paginationModel = gridPaginationModelSelector(apiRef); ``` -:::info +:::warning Calling with `apiRef.current.state` also works, but may cause side effects when multiple Data Grid instances are present on a single page. If you still need to call it with the state, don't forget to pass the instance ID as the example: diff --git a/docs/data/data-grid/style/style.md b/docs/data/data-grid/style/style.md index 4de717ae89df..42cbe48475a7 100644 --- a/docs/data/data-grid/style/style.md +++ b/docs/data/data-grid/style/style.md @@ -94,7 +94,7 @@ const columns: GridColDef[] = [ 2. Using the `getCellClassName` prop: This prop is called for every cell in every column. -Different from the first option, this prop is defined at the data grid level, not column level. +Different from the first option, this prop is defined at the Data Grid level, not column level. It is also called with a `GridCellParams` object. {{"demo": "StylingAllCells.js", "bg": "inline"}} @@ -104,7 +104,7 @@ It is also called with a `GridCellParams` object. Use the `align` property in `GridColDef` to change the alignment of content of the cells. Choose between one of the following values: 'left' | 'right' | 'center'. -:::info +:::warning You must use `headerAlign` to align the content of the header. ::: diff --git a/docs/data/data-grid/tree-data/tree-data.md b/docs/data/data-grid/tree-data/tree-data.md index 41ee9fbd86bf..67e9e1ea6aff 100644 --- a/docs/data/data-grid/tree-data/tree-data.md +++ b/docs/data/data-grid/tree-data/tree-data.md @@ -102,16 +102,19 @@ You can limit the sorting to the top-level rows with the `disableChildrenSorting {{"demo": "TreeDataDisableChildrenSorting.js", "bg": "inline", "defaultCodeOpen": false}} -> If you are using `sortingMode="server"`, you need to always put the children of a row after its parent. -> For instance: -> -> ```ts -> // ✅ The row A.A is immediately after its parent -> const validRows = [{ path: ['A'] }, { path: ['A', 'A'] }, { path: ['B'] }]; -> -> // ❌ The row A.A is not immediately after its parent -> const invalidRows = [{ path: ['A'] }, { path: ['B'] }, { path: ['A', 'A'] }]; -> ``` +:::warning +If you are using `sortingMode="server"`, the children of a row must always immediately follow their parent. +For instance: + +```ts +// ✅ The row A.A is immediately after its parent +const validRows = [{ path: ['A'] }, { path: ['A', 'A'] }, { path: ['B'] }]; + +// ❌ The row A.A is not immediately after its parent +const invalidRows = [{ path: ['A'] }, { path: ['B'] }, { path: ['A', 'A'] }]; +``` + +::: ## Children lazy-loading 🚧 diff --git a/docs/data/data-grid/virtualization/virtualization.md b/docs/data/data-grid/virtualization/virtualization.md index bbe265173ea0..7ee018b63d75 100644 --- a/docs/data/data-grid/virtualization/virtualization.md +++ b/docs/data/data-grid/virtualization/virtualization.md @@ -38,7 +38,7 @@ You may want to turn it off to be able to test the data grid with a headless bro ``` -:::info +:::warning Disabling the virtualization will increase the size of the DOM and drastically reduce the performance. Use it only for testing purposes or on small datasets. ::: diff --git a/docs/data/date-pickers/adapters-locale/adapters-locale.md b/docs/data/date-pickers/adapters-locale/adapters-locale.md index 5b276e1bbad9..1702a408e26c 100644 --- a/docs/data/date-pickers/adapters-locale/adapters-locale.md +++ b/docs/data/date-pickers/adapters-locale/adapters-locale.md @@ -114,7 +114,6 @@ You can override the default setting with the `ampm` prop: ## Custom formats -:::warning The format received by the props described below depends on the date library you are using. Please refer to each library's documentation for the full format table: @@ -123,8 +122,6 @@ Please refer to each library's documentation for the full format table: - [Luxon](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) - [Moment.js](https://momentjs.com/docs/#/displaying/format/) -::: - ### Custom field format The fields have a default format that depends on the picker being used, the views enabled, and the 12h/24h format. diff --git a/docs/data/date-pickers/validation/validation.md b/docs/data/date-pickers/validation/validation.md index 992461f58c09..284eed82aeec 100644 --- a/docs/data/date-pickers/validation/validation.md +++ b/docs/data/date-pickers/validation/validation.md @@ -13,7 +13,7 @@ All the date and time pickers have an API for adding validation constraints. By default, they provide visual feedback if the component value doesn't meet the validation criteria. :::info -The validation props are showcased for each type of picker component using the responsive pickers (`DatePicker`, `TimePicker`, `DateTimePicker`, and `DateRangePicker`) +The validation props are showcased for each type of picker component using the responsive pickers (`DatePicker`, `TimePicker`, `DateTimePicker`, and `DateRangePicker`, etc.). But the same props are available on: @@ -69,7 +69,8 @@ For date time pickers, it will combine both. {{"demo": "DateValidationDisableFuture.js", "defaultCodeOpen": false}} :::info -The current time is computed during the first render of the `LocalizationProvider`, it will not change during the lifetime of the component. +The current time is computed during the first render of the `LocalizationProvider`. +It will not change during the lifetime of the component. ::: ## Date validation @@ -104,7 +105,7 @@ In the example below—the weekends are not selectable: `shouldDisableDate` only prevents the selection of disabled dates on the `day` view. For performance reasons—when rendering the `month` view—we are not calling the callback for every day of each month to see which one should be disabled (same for the `year` view). -If you know that all days of some months are disabled—you can provide the [`shouldDisableMonth`](#disable-specific-months) prop to disable them in the `month` view. +If you know that all days of some months are disabled, you can provide the [`shouldDisableMonth`](#disable-specific-months) prop to disable them in the `month` view. Same with the [`shouldDisableYear`](#disable-specific-years) prop for the `year` view. ::: @@ -128,9 +129,9 @@ The `shouldDisableMonth` prop prevents the selection of all dates in months for :::warning `shouldDisableMonth` only prevents the selection of disabled months on the `day` and `month` views. -For performance reasons—when rendering the `year` view—we are not calling the callback for every month of each year to see which one should be disabled. +For performance reasons, when rendering the `year` view, we are not calling the callback for every month of each year to see which one should be disabled. -If you know that all months of some years are disabled—you can provide the [`shouldDisableYear`](#disable-specific-years) prop to disable them in the `year` view. +If you know that all months of some years are disabled, you can provide the [`shouldDisableYear`](#disable-specific-years) prop to disable them in the `year` view. ::: ### Disable specific years @@ -199,10 +200,10 @@ The `maxDateTime` prop prevents the selection of all values after `props.maxDate {{"demo": "DateTimeValidationMaxDateTime.js", "defaultCodeOpen": false}} :::warning -If you want to put time boundaries independent of the date—use the [`time boundaries`](#set-time-boundaries) instead. +If you want to put time boundaries independent of the date, use the [`time boundaries`](#set-time-boundaries) instead. For now, you cannot use `maxDateTime` and `maxTime` together. -`maxDateTime` will override the `maxTime` behavior—Same for `minDateTime`/`minTime` +`maxDateTime` will override the `maxTime` behavior, and the same goes for `minDateTime` and `minTime`. ```tsx // Disable the values between 6 PM and midnight for every day diff --git a/docs/data/introduction/licensing/licensing.md b/docs/data/introduction/licensing/licensing.md index aa6b0463b141..230611a52271 100644 --- a/docs/data/introduction/licensing/licensing.md +++ b/docs/data/introduction/licensing/licensing.md @@ -76,7 +76,8 @@ For example, when you want to upgrade the Data Grid: ``` :::warning - However, there is an exception to the superset rule. The default value of the `pagination` prop changes, [see the docs of the pagination](/x/react-data-grid/pagination/). + There is an exception to the superset rule: the default value of the `pagination` prop changes. + See the [Pagination](/x/react-data-grid/pagination/) doc for details. ::: - **Upgrading from Pro to Premium.** @@ -130,7 +131,7 @@ When you purchase a commercial license, you'll receive a license key by email. This key removes all watermarks and console warnings. :::warning -The orders placed after **May 13, 2022** come with a license key by default that is only compatible with MUI X from `v5.11.0` and upwards. +Orders placed after **May 13, 2022** come with a license key by default that is only compatible with MUI X from `v5.11.0` and upwards. Please update your npm package if you're using an earlier version. diff --git a/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md b/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md index 0d1e13a187da..a6f819cf679c 100644 --- a/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md +++ b/docs/data/migration/migration-data-grid-v4/migration-data-grid-v4.md @@ -14,9 +14,11 @@ Most breaking changes are renaming of CSS classes or variables to improve the co ## Migrating MUI Core from v4 -> We strongly recommend you [migrate MUI Core to v5](/material-ui/migration/migration-v4/) when using MUI X v5. -> However, this might not be possible, depending on the complexity of the application. -> The alternative is to install MUI Core v5 and configure it to keep MUI Core v4 running alongside. +:::warning +We strongly recommend you [migrate MUI Core to v5](/material-ui/migration/migration-v4/) when using MUI X v5. +However, this might not be possible, depending on the complexity of the application. +The alternative is to install MUI Core v5 and configure it to keep MUI Core v4 running alongside. +::: ### Using MUI Core v4 with v5 diff --git a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md index 9388a7268379..4ae3cb1e0f57 100644 --- a/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md +++ b/docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md @@ -73,7 +73,7 @@ These changes were done for consistency, improve stability and make room for new Below are described the steps you need to make to migrate from v5 to v6. :::warning -The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, since [12.x.x has reached end-of-life this year](https://nodejs.org/en/blog/release/v12.22.12). +The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, since [12.x.x reached end-of-life status](https://nodejs.org/en/blog/release/v12.22.12) in 2022. ::: ### ✅ Renamed props diff --git a/docsTech/processing.md b/docsTech/processing.md index 6f8819bfede7..600f63e9356d 100644 --- a/docsTech/processing.md +++ b/docsTech/processing.md @@ -352,7 +352,9 @@ const preferencePanelPreProcessing = React.useCallback ⚠ This behavior should probably be improved to be a strategy processing to avoid having each processor check the value +:::warning +This behavior should probably be improved to be a strategy for processing to avoid having each processor check the value. +::: ## Strategy-processing