From 5cf9f36435ac82035036178ef9f04e2b6e054149 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wilfredo=20P=C3=A9rez?= Date: Thu, 15 Feb 2024 17:27:55 +0100 Subject: [PATCH] [DataGrid][FilterPanel] Fix styling grid filter input single select (#11520) Co-authored-by: Wilfredo Perez --- .codesandbox/ci.json | 4 +--- bug-reproductions/x-data-grid/public/index.html | 2 +- .../components/panel/filterPanel/GridFilterInputBoolean.tsx | 6 ++++-- .../panel/filterPanel/GridFilterInputSingleSelect.tsx | 6 ++++-- .../components/panel/filterPanel/GridFilterInputValue.tsx | 3 ++- test/e2e/template.html | 2 +- test/regressions/template.html | 2 +- 7 files changed, 14 insertions(+), 11 deletions(-) diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 3990a6567394..e08318b0ba92 100644 --- 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 index 9befde78ff8b..b92e86f27e04 100644 --- a/bug-reproductions/x-data-grid/public/index.html +++ b/bug-reproductions/x-data-grid/public/index.html @@ -1,4 +1,4 @@ - + DataGrid — MUI X diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx index f8dc457521aa..e9bdf86d06cc 100644 --- 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} @@ -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 index 230971be89b9..5ee0b5e7226a 100644 --- 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} @@ -138,7 +139,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { labelId={labelId} value={filterValue} onChange={onFilterChange} - variant="standard" + variant={variant} type={type || 'text'} inputProps={{ tabIndex, @@ -146,6 +147,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { 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 index b631712be637..6535b9420cfa 100644 --- 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 index 7d84cc7643ad..fe0f2392e57c 100644 --- a/test/e2e/template.html +++ b/test/e2e/template.html @@ -1,4 +1,4 @@ - + Playwright end-to-end test diff --git a/test/regressions/template.html b/test/regressions/template.html index 0f843cc28cdc..758782822fd2 100644 --- a/test/regressions/template.html +++ b/test/regressions/template.html @@ -1,4 +1,4 @@ - + vrtest