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.

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

DataGrid ColumnHeader Border Changed from v6 to v7 #13694

Closed
avalyons-wk opened this issue Jun 28, 2024 · 4 comments
Closed

DataGrid ColumnHeader Border Changed from v6 to v7 #13694

avalyons-wk opened this issue Jun 28, 2024 · 4 comments
Labels
component: data grid This is the name of the generic UI component, not the React module!

Comments

@avalyons-wk
Copy link

avalyons-wk commented Jun 28, 2024

Steps to reproduce

Link to live example:
v7 example: https://codesandbox.io/s/dfntjc?file=/src/Demo.tsx
v6 example: https://codesandbox.io/s/9vpynd?file=/src/Demo.tsx

Steps:

  1. Open the link
  2. Look at the difference of the columnHeader border of each example

Current behavior

v6's DataGrid columnHeaders had a border that was around every edge of the cell. v7 has a border that touches the sides and the top of the cell.

Expected behavior

There either should be a border around the whole cell for a columnHeader for v7 or documentation of the change of the border.

Context

There was no documentation of this change from v6 to v7 for the columnHeader border changing. Is this an expected change?

Your environment

npx @mui/envinfo
  System:
    OS: macOS 13.6.3
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.8.1 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 126.0.6478.127

Search keywords: DataGrid Column Header

Search keywords:

@avalyons-wk avalyons-wk added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 28, 2024
@Tabish8756
Copy link

@avalyons-wk in the sand box not able to see any difference can you please elaborate more on this or if you can put comparison screen shot it would be better.

@zannager zannager transferred this issue from mui/material-ui Jul 1, 2024
@zannager zannager added the component: data grid This is the name of the generic UI component, not the React module! label Jul 1, 2024
@avalyons-wk
Copy link
Author

avalyons-wk commented Jul 2, 2024

v6 v7

v7's border doesn't have the bottom part to it.

@KenanYusuf
Copy link
Contributor

Thanks for reporting the issue @avalyons-wk, there are a few glitches related to the focus outline on column headers that we are aware of. This one specifically is also noted on this issue: #11225

I will close this issue for now, and we can prioritise and track the progress of this on the other issue.

Copy link

github-actions bot commented Jul 4, 2024

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@avalyons-wk: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

@KenanYusuf KenanYusuf removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jul 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

4 participants