search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.06k stars 1.25k forks source link

[data grid] Focus outline has multiple visual bugs #5783

Open aaarichter opened 2 years ago

aaarichter commented 2 years ago

Current behavior 😯

on https://mui.com/x/react-data-grid/layout/ when clicking into a cell of the column header, an outline is shown. This outline has multiple visual bugs:

  1. the data-grid has by default a border-radius, which cuts off the outline (see screenshot)
  2. the outline is below the header dividers (see screenshot)
  3. the top outline is missing due to outline-offset: -1px; set to the .MuiDataGrid-columnHeader:focus-within Screenshot 2022-08-13 at 19 21 51

Expected behavior 🤔

  1. those visual bugs should be fixed
  2. an API way to turn off the outline. ( I overwrote the styles in my theme but that should be configurable )

Steps to reproduce 🕹

Link to live example: https://mui.com/x/react-data-grid/layout/#flex-layout

Steps:

  1. click on the left header cell

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo ``` System: OS: macOS 12.5 Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node Yarn: 1.22.19 - ~/.yarn/bin/yarn npm: 8.15.0 - ~/.nvm/versions/node/v16.16.0/bin/npm Browsers: Chrome: 104.0.5112.79 Edge: Not Found Firefox: 101.0.1 Safari: 15.6 npmPackages: @emotion/react: ^11.9.3 => 11.9.3 @emotion/styled: 11.9.3 @mui/base: 5.0.0-alpha.91 @mui/icons-material: ^5.8.4 => 5.8.4 @mui/lab: ^5.0.0-alpha.92 => 5.0.0-alpha.92 @mui/material: ^5.9.2 => 5.9.2 @mui/private-theming: 5.9.1 @mui/styled-engine: 5.8.7 @mui/system: ^5.9.2 => 5.9.2 @mui/types: 7.1.5 @mui/utils: 5.9.1 @mui/x-data-grid: ^5.14.0 => 5.15.0 @types/react: 17.0.45 => 17.0.45 react: 17.0.2 => 17.0.2 react-dom: 17.0.2 => 17.0.2 styled-components: ^5.3.5 => 5.3.5 typescript: ^4.7.4 => 4.7.4 ```

Order ID 💳 (optional)

No response

m4theushw commented 2 years ago

Some items we can only do in v6 because they are visual breaking changes.

the data-grid has by default a border-radius, which cuts off the outline (see screenshot)

Nobody complained about that so far but we can fix it by applying the same border-radius to only the very first and very last column header. This way we create the impression that the column headers react to the grid's radius.

the outline is below the header dividers (see screenshot)

In v6 we want to hide the column separators. See #1623

the top outline is missing due to outline-offset: -1px; set to the .MuiDataGrid-columnHeader:focus-within

Actually it's because .MuiDataGrid-columnHeaders has overflow: hidden. We need overflow: hidden for the virtualization.

Instead of outline you can use box-shadow: inset ... to achieve the "outline" effect. We have outline-offset: -1px to simulate the inset shadow.

aaarichter commented 2 years ago

Some items we can only do in v6 because they are visual breaking changes.

the data-grid has by default a border-radius, which cuts off the outline (see screenshot)

Nobody complained about that so far but we can fix it by applying the same border-radius to only the very first and very last column header. This way we create the impression that the column headers react to the grid's radius.

that would be great @m4theushw

LumaKernel commented 11 months ago

Little upvote with Pro plan (order id = 67619) 👍