[DataGrid] Add prop to override search input props in `GridColumnsManagement` #15347

k-rajat19 · 2024-11-08T16:19:54Z

I have followed (at least) the PR section of the contributing guide.

Closes #15055

Preview: https://codesandbox.io/p/sandbox/mui-mui-x-x-data-grid-forked-rw7shs

mui-bot · 2024-11-08T16:24:18Z

Localization writing tips ✍️

Seems you are updating localization 🌍 files.

Thank you for contributing to the localization! 🎉 To make your PR perfect, here is a list of elements to check: ✔️

Verify if the PR title respects the release format. Here are two examples (depending if you update or add a locale file)

[l10n] Improve Swedish (sv-SE) locale
[l10n] Add Danish (da-DK) locale
Update the documentation of supported locales by running pnpm l10n
Clean files with pnpm prettier.

Deploy preview: https://deploy-preview-15347--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 369e2a2

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx

k-rajat19 · 2024-11-10T07:19:19Z

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx

          }}
+          autoComplete="off"


to get rid of suggestions
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#html.elements.input.autocomplete

k-rajat19 · 2024-11-10T07:19:51Z

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx

+                        visibility: 'hidden',
+                      },
+                ]}
+                tabIndex={-1}


to align with #14587

KenanYusuf · 2024-11-13T10:31:16Z

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx

+                <rootProps.slots.quickFilterClearIcon fontSize="small" />
+              </rootProps.slots.baseIconButton>
+            ),
+            sx: {


I think we try to avoid the sx prop where possible in the grid - could we use the styled util for these styles instead?

I have shifted those styles to its parent which uses styled, it selects the input with type="search" and applies the styles to it.

I think it would be better in it's own styled for the input itself, it's clearer that the styles belong to that element.

I've added it,
also tried using styled only for input in inputComponent prop inside InputProps but it didn't seem to work well.
followed this section of docs https://mui.com/material-ui/react-text-field/#using-the-styled-api
do we also need to add a class for style overrides?

Yeah, I think we should have a class on it for overrides.

Seems ok for me - I have pushed the changes it generated.

thanks, I have resolved the merge conflicts
would you like to give it a final look before merging

Looks like there is a slight size difference in the panel now 🤔

Shouldn't be a big problem, but any idea why? https://app.argos-ci.com/mui/mui-x/builds/26671/119787928

this is due to the addition of endAdornment property, mui text field internally adds a different class which brings the right padding. I've set equal padding to the left and right both 12px.

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx

github-actions · 2024-11-14T08:30:40Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx

github-actions · 2024-11-15T17:50:23Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

…5055

KenanYusuf

Thanks a lot for working on this 🎉

…agement` (mui#15347) Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>

add new prop

1f6bb4c

k-rajat19 commented Nov 8, 2024

View reviewed changes

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx Show resolved Hide resolved

k-rajat19 marked this pull request as ready for review November 8, 2024 16:54

make input type search

59a256b

k-rajat19 force-pushed the issue-15055 branch from c4bea42 to 59a256b Compare November 10, 2024 07:10

k-rajat19 commented Nov 10, 2024

View reviewed changes

fix test

e8f9ce5

zannager added the component: data grid This is the name of the generic UI component, not the React module! label Nov 11, 2024

KenanYusuf reviewed Nov 13, 2024

View reviewed changes

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx Outdated Show resolved Hide resolved

review

a0e82e6

k-rajat19 force-pushed the issue-15055 branch from 7611262 to a0e82e6 Compare November 13, 2024 13:50

k-rajat19 added 2 commits November 13, 2024 19:20

Merge branch 'master' into issue-15055

ec2cfc2

fix styling

48b9e7f

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 14, 2024

KenanYusuf reviewed Nov 14, 2024

View reviewed changes

packages/x-data-grid/src/components/columnsManagement/GridColumnsManagement.tsx Outdated Show resolved Hide resolved

review

b1ccc35

k-rajat19 force-pushed the issue-15055 branch from eb5cea8 to b1ccc35 Compare November 14, 2024 19:43

k-rajat19 added 2 commits November 15, 2024 01:18

Merge branch 'master' of github.com:k-rajat19/mui-x into issue-15055

fcc99d6

resolve conflict

aa1a8c1

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 14, 2024

k-rajat19 added 2 commits November 15, 2024 01:47

fix

67a14d8

add className

321b95f

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 15, 2024

KenanYusuf and others added 2 commits November 18, 2024 09:31

docs:api

4da5e27

Merge branch 'master' of github.com:k-rajat19/mui-x into issue-15055

a14063f

k-rajat19 added 2 commits November 18, 2024 15:29

Merge branch 'issue-15055' of github.com:k-rajat19/mui-x into issue-1…

7583d76

…5055

fix i10n

2584cb7

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 18, 2024

k-rajat19 added 3 commits November 18, 2024 16:41

remove right padding

5c622b4

Merge branch 'master' into issue-15055

1c6e8c0

fix padding

4cd8981

KenanYusuf approved these changes Nov 18, 2024

View reviewed changes

Merge branch 'master' into issue-15055

369e2a2

KenanYusuf enabled auto-merge (squash) November 18, 2024 15:35

KenanYusuf merged commit 09a70a7 into mui:master Nov 18, 2024
18 checks passed

KenanYusuf added needs cherry-pick The PR should be cherry-picked to master after merge v7.x labels Nov 18, 2024

KenanYusuf added a commit to KenanYusuf/mui-x that referenced this pull request Nov 19, 2024

[DataGrid] Add prop to override search input props in `GridColumnsMan…

1c58661

…agement` (mui#15347) Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>

KenanYusuf mentioned this pull request Nov 19, 2024

[DataGrid] Add prop to override search input props in GridColumnsManagement #15476

Merged

k-rajat19 deleted the issue-15055 branch November 19, 2024 10:28

LukasTy pushed a commit to LukasTy/mui-x that referenced this pull request Dec 19, 2024

[DataGrid] Add prop to override search input props in `GridColumnsMan…

edb8713

…agement` (mui#15347) Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Add prop to override search input props in `GridColumnsManagement` #15347

[DataGrid] Add prop to override search input props in `GridColumnsManagement` #15347

k-rajat19 commented Nov 8, 2024 •

edited

Loading

mui-bot commented Nov 8, 2024 •

edited

Loading

k-rajat19 Nov 10, 2024

k-rajat19 Nov 10, 2024

KenanYusuf Nov 13, 2024

k-rajat19 Nov 13, 2024

KenanYusuf Nov 13, 2024

k-rajat19 Nov 13, 2024 •

edited

Loading

KenanYusuf Nov 14, 2024

KenanYusuf Nov 18, 2024

k-rajat19 Nov 18, 2024

KenanYusuf Nov 18, 2024

k-rajat19 Nov 18, 2024 •

edited

Loading

k-rajat19 Nov 18, 2024

github-actions bot commented Nov 14, 2024

github-actions bot commented Nov 15, 2024

KenanYusuf left a comment

[DataGrid] Add prop to override search input props in GridColumnsManagement #15347

[DataGrid] Add prop to override search input props in GridColumnsManagement #15347

Conversation

k-rajat19 commented Nov 8, 2024 • edited Loading

mui-bot commented Nov 8, 2024 • edited Loading

Localization writing tips ✍️

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

k-rajat19 Nov 13, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

k-rajat19 Nov 18, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 14, 2024

github-actions bot commented Nov 15, 2024

KenanYusuf left a comment

Choose a reason for hiding this comment

[DataGrid] Add prop to override search input props in `GridColumnsManagement` #15347

[DataGrid] Add prop to override search input props in `GridColumnsManagement` #15347

k-rajat19 commented Nov 8, 2024 •

edited

Loading

mui-bot commented Nov 8, 2024 •

edited

Loading

k-rajat19 Nov 13, 2024 •

edited

Loading

k-rajat19 Nov 18, 2024 •

edited

Loading