Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 11 commits into from
Feb 15, 2024
Merged

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

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
42ee0c4
Fixing: https://github.com/mui/mui-x/issues/8703
Dec 26, 2023
be2a472
Fixing: https://github.com/mui/mui-x/issues/8703
Dec 26, 2023
687eaf3
Fixing: https://github.com/mui/mui-x/issues/8703
Dec 26, 2023
483e5c4
Merge remote-tracking branch 'origin/fix-styling-gridFilterInputSingl…
Dec 26, 2023
0cdfe8c
Fixing: mui#8703
Dec 26, 2023
554e7b0
Merge branch 'next-mui-main' into fix-styling-gridFilterInputSingleSe…
Feb 14, 2024
20cc8ed
Fixing: mui#8703
Feb 15, 2024
b8554e4
Fixing: mui#8703
Feb 15, 2024
eecfa4a
Fixing: mui#8703
Feb 15, 2024
979759c
Fixing: mui#8703
Feb 15, 2024
a0dacb2
Fixing: mui#8703
Feb 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions .codesandbox/ci.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
2 changes: 1 addition & 1 deletion bug-reproductions/x-data-grid/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<title>DataGrid — MUI X</title>
Expand Down
6 changes: 4 additions & 2 deletions packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
clearButton,
tabIndex,
label: labelProp,
variant = 'standard',
InputLabelProps,
...others
} = props;
Expand Down Expand Up @@ -71,7 +72,7 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
{...rootProps.slotProps?.baseInputLabel}
id={labelId}
shrink
variant="standard"
variant={variant}
>
{label}
</rootProps.slots.baseInputLabel>
Expand All @@ -81,7 +82,8 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) {
label={label}
value={filterValueState}
onChange={onFilterChange}
variant="standard"
variant={variant}
notched={variant === 'outlined' ? true : undefined}
Comment on lines +85 to +86
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mui/xgrid Now that I look at this, I realized that the outlined variant of MUI TextField is actually a better choice for UX, because it looks much more like a text input than the standard variant. What do we think about using the outlined variant by default?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't if this comment is for me. Basically, I think that it is better to have standard by default because all the examples are using this variant.

native={isSelectNative}
displayEmpty
inputProps={{ ref: focusElementRef, tabIndex }}
Expand Down
7 changes: 5 additions & 2 deletions packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import * as React from 'react';
import PropTypes from 'prop-types';
// import { InputLabelProps } from '@mui/material/InputLabel';
FreakDroid marked this conversation as resolved.
Show resolved Hide resolved
import { TextFieldProps } from '@mui/material/TextField';
import { SelectChangeEvent } from '@mui/material/Select';
import { unstable_useId as useId } from '@mui/utils';
Expand Down Expand Up @@ -76,6 +77,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
placeholder,
tabIndex,
label: labelProp,
variant = 'standard',
isFilterActive,
clearButton,
InputLabelProps,
Expand Down Expand Up @@ -128,7 +130,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) {
id={labelId}
htmlFor={id}
shrink
variant="standard"
variant={variant}
>
{label}
</rootProps.slots.baseInputLabel>
Expand All @@ -138,14 +140,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 */
}
Expand Down
3 changes: 2 additions & 1 deletion packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputValue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ function GridFilterInputValue(props: GridTypeFilterInputValueProps) {
isFilterActive,
clearButton,
InputProps,
variant = 'standard',
...others
} = props;
const filterTimeout = useTimeout();
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion test/e2e/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<title>Playwright end-to-end test</title>
Expand Down
2 changes: 1 addition & 1 deletion test/regressions/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<title>vrtest</title>
Expand Down
Loading