[docs] Add recipe showing how to remove cell focus outline (#10843)

Signed-off-by: Michel Engelen <[email protected]>
Co-authored-by: Andrew Cherniavskii <[email protected]>

docs/data/data-grid/style-recipes/CellFocusNoOutline.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function CellFocusNoOutline() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        sx={{
+          [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
+            outline: 'none',
+          },
+          [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:
+            {
+              outline: 'none',
+            },
+        }}
+        {...data}
+      />
+    </div>
+  );
+}

docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { DataGridPro, gridClasses } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+export default function CellFocusNoOutline() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        sx={{
+          [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
+            outline: 'none',
+          },
+          [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:
+            {
+              outline: 'none',
+            },
+        }}
+        {...data}
+      />
+    </div>
+  );
+}

docs/data/data-grid/style-recipes/CellFocusNoOutline.tsx.preview

@@ -0,0 +1,12 @@
+<DataGridPro
+  sx={{
+    [`& .${gridClasses.cell}:focus, & .${gridClasses.cell}:focus-within`]: {
+      outline: 'none',
+    },
+    [`& .${gridClasses.columnHeader}:focus, & .${gridClasses.columnHeader}:focus-within`]:
+      {
+        outline: 'none',
+      },
+  }}
+  {...data}
+/>

docs/data/data-grid/style-recipes/style-recipes.md

@@ -0,0 +1,14 @@
+# Data Grid - Styling recipes
+
+<p class="description">Advanced grid styling recipes.</p>
+
+## Remove cell focus outline
+
+The data grid cells are actionable elements and visually indicate the `focus` state by default.
+You can remove the focus outline by overriding the `:focus` and `:focus-within` styles for the cells and header cells.
+
+:::warning
+Removing the visible `focus` state hurts the accessibility of the grid.
+:::
+
+{{"demo": "CellFocusNoOutline.js", "bg": "inline", "defaultCodeOpen": false}}

docs/data/pages.ts

@@ -88,7 +88,14 @@ const pages: MuiPage[] = [
       { pathname: '/x/react-data-grid/export' },
       { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste', newFeature: true },
       { pathname: '/x/react-data-grid/components', title: 'Custom subcomponents' },
-      { pathname: '/x/react-data-grid/style' },
+      {
+        pathname: '/x/react-data-grid/style-group',
+        title: 'Style',
+        children: [
+          { pathname: '/x/react-data-grid/style', title: 'Overview' },
+          { pathname: '/x/react-data-grid/style-recipes', title: 'Recipes' },
+        ],
+      },
       { pathname: '/x/react-data-grid/localization' },
       { pathname: '/x/react-data-grid/scrolling' },
       { pathname: '/x/react-data-grid/virtualization' },

docs/pages/x/react-data-grid/style-recipes.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import * as pageProps from 'docsx/data/data-grid/style-recipes/style-recipes.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs {...pageProps} />;
+}