[DataGrid][FilterPanel] Fix styling grid filter input single select (#…

…11520) Co-authored-by: Wilfredo Perez <[email protected]>
mui · Feb 15, 2024 · 5cf9f36 · 5cf9f36
1 parent d246a1f
commit 5cf9f36
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 11 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -24,8 +24,6 @@
     "@mui/x-charts": "packages/x-charts/build",
     "@mui/x-tree-view": "packages/x-tree-view/build"
   },
-  "sandboxes": [
-    "/bug-reproductions/x-data-grid"
-  ],
+  "sandboxes": ["/bug-reproductions/x-data-grid"],
   "silent": true
 }
diff --git a/bug-reproductions/x-data-grid/public/index.html b/bug-reproductions/x-data-grid/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <title>DataGrid — MUI X</title>

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
@@ -35,6 +35,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
     clearButton,
     tabIndex,
     label: labelProp,
+    variant = 'standard',
     InputLabelProps,
     ...others
   } = props;
@@ -71,7 +72,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           {...rootProps.slotProps?.baseInputLabel}
           id={labelId}
           shrink
-          variant="standard"
+          variant={variant}
         >
           {label}
         </rootProps.slots.baseInputLabel>
@@ -81,7 +82,8 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
           label={label}
           value={filterValueState}
           onChange={onFilterChange}
-          variant="standard"
+          variant={variant}
+          notched={variant === 'outlined' ? true : undefined}
           native={isSelectNative}
           displayEmpty
           inputProps={{ ref: focusElementRef, tabIndex }}

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
@@ -76,6 +76,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
     placeholder,
     tabIndex,
     label: labelProp,
+    variant = 'standard',
     isFilterActive,
     clearButton,
     InputLabelProps,
@@ -128,7 +129,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
           id={labelId}
           htmlFor={id}
           shrink
-          variant="standard"
+          variant={variant}
         >
           {label}
         </rootProps.slots.baseInputLabel>
@@ -138,14 +139,15 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
           labelId={labelId}
           value={filterValue}
           onChange={onFilterChange}
-          variant="standard"
+          variant={variant}
           type={type || 'text'}
           inputProps={{
             tabIndex,
             ref: focusElementRef,
             placeholder: placeholder ?? apiRef.current.getLocaleText('filterPanelInputPlaceholder'),
           }}
           native={isSelectNative}
+          notched={variant === 'outlined' ? true : undefined}
           {
             ...(others as any) /* FIXME: typing error */
           }

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
@@ -32,6 +32,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
     isFilterActive,
     clearButton,
     InputProps,
+    variant = 'standard',
     ...others
   } = props;
   const filterTimeout = useTimeout();
@@ -69,7 +70,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
       placeholder={apiRef.current.getLocaleText('filterPanelInputPlaceholder')}
       value={filterValueState}
       onChange={onFilterChange}
-      variant="standard"
+      variant={variant}
       type={type || 'text'}
       InputProps={{
         ...(applying || clearButton

diff --git a/test/e2e/template.html b/test/e2e/template.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Playwright end-to-end test</title>

diff --git a/test/regressions/template.html b/test/regressions/template.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>vrtest</title>