[DataGrid] Rename toolbar components for consistency (#1724)

mui · May 21, 2021 · 71d84fd · 71d84fd
1 parent 9953f25
commit 71d84fd
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 41 deletions.
diff --git a/docs/src/pages/components/data-grid/accessibility/DensitySelectorGrid.js b/docs/src/pages/components/data-grid/accessibility/DensitySelectorGrid.js
@@ -2,14 +2,14 @@ import * as React from 'react';
 import {
   DataGrid,
   GridToolbarContainer,
-  GridDensitySelector,
+  GridToolbarDensitySelector,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 function CustomToolbar() {
   return (
     <GridToolbarContainer>
-      <GridDensitySelector />
+      <GridToolbarDensitySelector />
     </GridToolbarContainer>
   );
 }

diff --git a/docs/src/pages/components/data-grid/accessibility/DensitySelectorGrid.tsx b/docs/src/pages/components/data-grid/accessibility/DensitySelectorGrid.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import {
   DataGrid,
   GridToolbarContainer,
-  GridDensitySelector,
+  GridToolbarDensitySelector,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 function CustomToolbar() {
   return (
     <GridToolbarContainer>
-      <GridDensitySelector />
+      <GridToolbarDensitySelector />
     </GridToolbarContainer>
   );
 }

diff --git a/docs/src/pages/components/data-grid/accessibility/DensitySelectorSmallGrid.js b/docs/src/pages/components/data-grid/accessibility/DensitySelectorSmallGrid.js
@@ -2,14 +2,14 @@ import * as React from 'react';
 import {
   DataGrid,
   GridToolbarContainer,
-  GridDensitySelector,
+  GridToolbarDensitySelector,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 function CustomToolbar() {
   return (
     <GridToolbarContainer>
-      <GridDensitySelector />
+      <GridToolbarDensitySelector />
     </GridToolbarContainer>
   );
 }

diff --git a/docs/src/pages/components/data-grid/accessibility/DensitySelectorSmallGrid.tsx b/docs/src/pages/components/data-grid/accessibility/DensitySelectorSmallGrid.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import {
   DataGrid,
   GridToolbarContainer,
-  GridDensitySelector,
+  GridToolbarDensitySelector,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 function CustomToolbar() {
   return (
     <GridToolbarContainer>
-      <GridDensitySelector />
+      <GridToolbarDensitySelector />
     </GridToolbarContainer>
   );
 }

diff --git a/docs/src/pages/components/data-grid/accessibility/accessibility.md b/docs/src/pages/components/data-grid/accessibility/accessibility.md
@@ -26,7 +26,7 @@ You can change the density of the rows and the column header.
 
 ### Density selector
 
-To enable the density selector you need to compose a toolbar containing the `GridDensitySelector` component, and apply it using the `Toolbar` property in the grid `components` prop.
+To enable the density selector you need to compose a toolbar containing the `GridToolbarDensitySelector` component, and apply it using the `Toolbar` property in the grid `components` prop.
 
 The user can change the density of the data grid by using the density selector from the toolbar.
 

diff --git a/docs/src/pages/components/data-grid/components/CustomToolbarGrid.js b/docs/src/pages/components/data-grid/components/CustomToolbarGrid.js
@@ -2,19 +2,19 @@ import * as React from 'react';
 import {
   DataGrid,
   GridToolbarContainer,
-  GridColumnsToolbarButton,
-  GridFilterToolbarButton,
+  GridToolbarColumnsButton,
+  GridToolbarFilterButton,
   GridToolbarExport,
-  GridDensitySelector,
+  GridToolbarDensitySelector,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 function CustomToolbar() {
   return (
     <GridToolbarContainer>
-      <GridColumnsToolbarButton />
-      <GridFilterToolbarButton />
-      <GridDensitySelector />
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      <GridToolbarDensitySelector />
       <GridToolbarExport />
     </GridToolbarContainer>
   );

diff --git a/docs/src/pages/components/data-grid/components/CustomToolbarGrid.tsx b/docs/src/pages/components/data-grid/components/CustomToolbarGrid.tsx
@@ -2,19 +2,19 @@ import * as React from 'react';
 import {
   DataGrid,
   GridToolbarContainer,
-  GridColumnsToolbarButton,
-  GridFilterToolbarButton,
+  GridToolbarColumnsButton,
+  GridToolbarFilterButton,
   GridToolbarExport,
-  GridDensitySelector,
+  GridToolbarDensitySelector,
 } from '@material-ui/data-grid';
 import { useDemoData } from '@material-ui/x-grid-data-generator';
 
 function CustomToolbar() {
   return (
     <GridToolbarContainer>
-      <GridColumnsToolbarButton />
-      <GridFilterToolbarButton />
-      <GridDensitySelector />
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      <GridToolbarDensitySelector />
       <GridToolbarExport />
     </GridToolbarContainer>
   );

diff --git a/docs/src/pages/components/data-grid/components/components.md b/docs/src/pages/components/data-grid/components/components.md
@@ -96,9 +96,9 @@ Alternatively, you can compose your own toolbar.
 function CustomToolbar() {
   return (
     <GridToolbarContainer>
-      <GridColumnsToolbarButton />
-      <GridFilterToolbarButton />
-      <GridDensitySelector />
+      <GridToolbarColumnsButton />
+      <GridToolbarFilterButton />
+      <GridToolbarDensitySelector />
       <GridToolbarExport />
     </GridToolbarContainer>
   );

diff --git a/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx b/packages/grid/_modules_/grid/components/toolbar/GridToolbar.tsx
@@ -7,9 +7,9 @@ import {
   GridToolbarContainer,
   GridToolbarContainerProps,
 } from '../containers/GridToolbarContainer';
-import { GridColumnsToolbarButton } from './GridColumnsToolbarButton';
-import { GridDensitySelector } from './GridDensitySelector';
-import { GridFilterToolbarButton } from './GridFilterToolbarButton';
+import { GridToolbarColumnsButton } from './GridToolbarColumnsButton';
+import { GridToolbarDensitySelector } from './GridToolbarDensitySelector';
+import { GridToolbarFilterButton } from './GridToolbarFilterButton';
 import { GridToolbarExport } from './GridToolbarExport';
 
 export const GridToolbar = React.forwardRef<HTMLDivElement, GridToolbarContainerProps>(
@@ -27,9 +27,9 @@ export const GridToolbar = React.forwardRef<HTMLDivElement, GridToolbarContainer
 
     return (
       <GridToolbarContainer ref={ref} {...props}>
-        <GridColumnsToolbarButton />
-        <GridFilterToolbarButton />
-        <GridDensitySelector />
+        <GridToolbarColumnsButton />
+        <GridToolbarFilterButton />
+        <GridToolbarDensitySelector />
         <GridToolbarExport />
       </GridToolbarContainer>
     );

diff --git a/...ents/toolbar/GridColumnsToolbarButton.tsx → ...ents/toolbar/GridToolbarColumnsButton.tsx b/...ents/toolbar/GridColumnsToolbarButton.tsx → ...ents/toolbar/GridToolbarColumnsButton.tsx
@@ -6,8 +6,8 @@ import { gridPreferencePanelStateSelector } from '../../hooks/features/preferenc
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
 import { GridApiContext } from '../GridApiContext';
 
-export const GridColumnsToolbarButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function GridColumnsToolbarButton(props, ref) {
+export const GridToolbarColumnsButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function GridToolbarColumnsButton(props, ref) {
     const apiRef = React.useContext(GridApiContext);
     const options = useGridSelector(apiRef, optionsSelector);
     const ColumnSelectorIcon = apiRef!.current.components.ColumnSelectorIcon!;

diff --git a/...omponents/toolbar/GridDensitySelector.tsx → ...ts/toolbar/GridToolbarDensitySelector.tsx b/...omponents/toolbar/GridDensitySelector.tsx → ...ts/toolbar/GridToolbarDensitySelector.tsx
@@ -14,8 +14,8 @@ import { optionsSelector } from '../../hooks/utils/optionsSelector';
 import { GridDensityOption } from '../../models/api/gridDensityApi';
 import { GridMenu } from '../menu/GridMenu';
 
-export const GridDensitySelector = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function GridDensitySelector(props, ref) {
+export const GridToolbarDensitySelector = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function GridToolbarDensitySelector(props, ref) {
     const apiRef = React.useContext(GridApiContext);
     const options = useGridSelector(apiRef, optionsSelector);
     const densityValue = useGridSelector(apiRef, gridDensityValueSelector);

diff --git a/...nents/toolbar/GridFilterToolbarButton.tsx → ...nents/toolbar/GridToolbarFilterButton.tsx b/...nents/toolbar/GridFilterToolbarButton.tsx → ...nents/toolbar/GridToolbarFilterButton.tsx
@@ -27,11 +27,11 @@ const useStyles = makeStyles(
       padding: theme.spacing(0, 1),
     },
   }),
-  { name: 'MuiDataGridFilterToolbarButton', defaultTheme },
+  { name: 'MuiDataGridToolbarFilterButton', defaultTheme },
 );
 
-export const GridFilterToolbarButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function GridFilterToolbarButton(props, ref) {
+export const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function GridToolbarFilterButton(props, ref) {
     const classes = useStyles();
     const apiRef = React.useContext(GridApiContext);
     const options = useGridSelector(apiRef, optionsSelector);

diff --git a/packages/grid/_modules_/grid/components/toolbar/index.ts b/packages/grid/_modules_/grid/components/toolbar/index.ts
@@ -1,5 +1,5 @@
-export * from './GridColumnsToolbarButton';
-export * from './GridDensitySelector';
-export * from './GridFilterToolbarButton';
-export * from './GridToolbarExport';
 export * from './GridToolbar';
+export * from './GridToolbarColumnsButton';
+export * from './GridToolbarDensitySelector';
+export * from './GridToolbarExport';
+export * from './GridToolbarFilterButton';