[DataGrid] Update quick filter input variant (#15909)

mui · Dec 17, 2024 · 4724c64 · 4724c64
1 parent fd31143
commit 4724c64
Showing 1 changed file with 30 additions and 26 deletions.
diff --git a/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx b/packages/x-data-grid/src/components/toolbar/GridToolbarQuickFilter.tsx
@@ -5,6 +5,7 @@ import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { styled } from '@mui/material/styles';
 import { unstable_debounce as debounce } from '@mui/utils';
 import composeClasses from '@mui/utils/composeClasses';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
 import { getDataGridUtilityClass } from '../../constants';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -31,13 +32,8 @@ const GridToolbarQuickFilterRoot = styled(TextField, {
   slot: 'ToolbarQuickFilter',
   overridesResolver: (props, styles) => styles.toolbarQuickFilter,
 })<{ ownerState: OwnerState }>(({ theme }) => ({
-  width: 'auto',
-  paddingBottom: theme.spacing(0.5),
-  '& input': {
-    marginLeft: theme.spacing(0.5),
-  },
-  '& .MuiInput-underline:before': {
-    borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+  [`.${outlinedInputClasses.root}`]: {
+    fontSize: theme.typography.body2.fontSize,
   },
   [`& input[type="search"]::-webkit-search-decoration,
   & input[type="search"]::-webkit-search-cancel-button,
@@ -144,7 +140,8 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
     <GridToolbarQuickFilterRoot
       as={rootProps.slots.baseTextField}
       ownerState={rootProps}
-      variant="standard"
+      variant="outlined"
+      size="small"
       value={searchValue}
       onChange={handleSearchValueChange}
       className={clsx(classes.root, className)}
@@ -153,25 +150,32 @@ function GridToolbarQuickFilter(props: GridToolbarQuickFilterProps) {
       type="search"
       {...other}
       InputProps={{
-        startAdornment: <rootProps.slots.quickFilterIcon fontSize="small" />,
+        startAdornment: (
+          <rootProps.slots.baseInputAdornment position="start">
+            <rootProps.slots.quickFilterIcon fontSize="small" />
+          </rootProps.slots.baseInputAdornment>
+        ),
         endAdornment: (
-          <rootProps.slots.baseIconButton
-            aria-label={apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel')}
-            size="small"
-            sx={[
-              searchValue
-                ? {
-                    visibility: 'visible',
-                  }
-                : {
-                    visibility: 'hidden',
-                  },
-            ]}
-            onClick={handleSearchReset}
-            {...rootProps.slotProps?.baseIconButton}
-          >
-            <rootProps.slots.quickFilterClearIcon fontSize="small" />
-          </rootProps.slots.baseIconButton>
+          <rootProps.slots.baseInputAdornment position="end">
+            <rootProps.slots.baseIconButton
+              aria-label={apiRef.current.getLocaleText('toolbarQuickFilterDeleteIconLabel')}
+              size="small"
+              edge="end"
+              sx={[
+                searchValue
+                  ? {
+                      visibility: 'visible',
+                    }
+                  : {
+                      visibility: 'hidden',
+                    },
+              ]}
+              onClick={handleSearchReset}
+              {...rootProps.slotProps?.baseIconButton}
+            >
+              <rootProps.slots.quickFilterClearIcon fontSize="small" />
+            </rootProps.slots.baseIconButton>
+          </rootProps.slots.baseInputAdornment>
         ),
         ...other.InputProps,
       }}