From 9ef911a6e036a69f8a03c398a76fe8ffe7e7afd8 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 29 Nov 2023 18:20:26 -0300
Subject: [PATCH] [docs][Data Grid] Adjust the demo page design (#11231)

Co-authored-by: Andrew Cherniavskii <andrew.cherniavskii@gmail.com>
---
 .../data-grid/demo/PopularFeaturesDemo.js     | 159 +++++++++++++-----
 .../data-grid/demo/PopularFeaturesDemo.tsx    | 159 +++++++++++++-----
 docs/data/data-grid/demo/demo.md              |   8 +-
 docs/public/static/x/community.svg            |   1 +
 4 files changed, 236 insertions(+), 91 deletions(-)
 create mode 100644 docs/public/static/x/community.svg

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js
index 650a75f6b272e..b30a71abeae74 100644
--- a/docs/data/data-grid/demo/PopularFeaturesDemo.js
+++ b/docs/data/data-grid/demo/PopularFeaturesDemo.js
@@ -12,7 +12,9 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import ArrowUp from '@mui/icons-material/KeyboardArrowUp';
 import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import { useTheme } from '@mui/material/styles';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import { useTheme, alpha } from '@mui/material/styles';
+import { yellow, blue, green } from '@mui/material/colors';
 import AggregationRowGrouping from '../aggregation/AggregationRowGrouping';
 import BasicColumnPinning from '../column-pinning/BasicColumnPinning';
 import ColumnSelectorGrid from '../column-visibility/ColumnSelectorGrid';
@@ -231,38 +233,71 @@ export const featuresSet = [
 function getChipProperties(plan) {
   switch (plan) {
     case 'Premium':
-      return { avatarLink: '/static/x/premium.svg', color: '#ffecc8' };
+      return { avatarLink: '/static/x/premium.svg' };
     case 'Pro':
-      return { avatarLink: '/static/x/pro.svg', color: '#c8e9ff' };
+      return { avatarLink: '/static/x/pro.svg' };
     default:
-      return { avatarLink: undefined, color: '#c8ffdb' };
+      return { avatarLink: '/static/x/community.svg' };
   }
 }
 
 function PlanTag(props) {
-  const chipPropperties = getChipProperties(props.plan);
-  const avatar = !chipPropperties.avatarLink ? undefined : (
-    <img src={chipPropperties.avatarLink} width={21} height={24} alt="" />
+  const theme = useTheme();
+  const chipProperties = getChipProperties(props.plan);
+  const avatar = !chipProperties.avatarLink ? undefined : (
+    <img src={chipProperties.avatarLink} width={21} height={24} alt="" />
   );
 
   return (
     <Chip
+      variant="outlined"
+      size="small"
       avatar={avatar}
+      label={props.plan}
       sx={{
-        backgroundColor: chipPropperties.color,
-        color: 'rgba(0, 0, 0, 0.87)',
+        pl: 0.5,
+        ...(props.plan === 'Premium' && {
+          backgroundColor:
+            theme.palette.mode === 'dark' ? alpha(yellow[900], 0.4) : yellow[50],
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? alpha(yellow[300], 0.4)
+              : alpha(yellow[900], 0.4),
+        }),
+        ...(props.plan === 'Pro' && {
+          backgroundColor:
+            theme.palette.mode === 'dark' ? alpha(blue[600], 0.4) : blue[50],
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? alpha(blue[300], 0.4)
+              : alpha(blue[900], 0.2),
+        }),
+        ...(props.plan === 'Community' && {
+          backgroundColor:
+            theme.palette.mode === 'dark' ? alpha(green[600], 0.4) : green[50],
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? alpha(green[300], 0.4)
+              : alpha(green[900], 0.2),
+        }),
+        '& .MuiChip-label': {
+          fontWeight: 'medium',
+          fontSize: theme.typography.pxToRem(12),
+          pl: 1,
+        },
         '& .MuiChip-avatar': {
-          width: 21,
+          width: 16,
         },
       }}
-      label={props.plan}
     />
   );
 }
 
 function CustomToolbar() {
   return (
-    <GridToolbarContainer sx={{ p: 1 }}>
+    <GridToolbarContainer
+      sx={{ p: 2.5, borderBottom: '1px solid', borderColor: 'divider' }}
+    >
       <GridToolbarQuickFilter />
     </GridToolbarContainer>
   );
@@ -271,19 +306,46 @@ function CustomToolbar() {
 function RowDemo(props) {
   const { row } = props;
   const theme = useTheme();
-  const gridBgColor = theme.palette.mode === 'dark' ? '#000' : '#fff';
-  const panelColor = theme.palette.mode === 'dark' ? 'transparent' : '#efefef';
 
   return (
-    <Box sx={{ py: 2, backgroundColor: panelColor }}>
+    <Box
+      sx={{
+        py: 6,
+        bgcolor: theme.palette.mode === 'dark' ? '#141A1F' : 'grey.50', // dark color is the branding theme's primaryDark.800
+        borderBottom: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
       <div style={{ width: '90%', margin: 'auto' }}>
-        <Box sx={{ backgroundColor: gridBgColor }}>{row.demo}</Box>
+        <Box
+          sx={{
+            backgroundColor: theme.palette.mode === 'dark' ? '#0B0D0E' : '#fff', // dark color is the branding theme's common black
+          }}
+        >
+          {row.demo}
+        </Box>
         {row.linkToCode ? (
-          <Typography sx={{ marginTop: 1 }} variant="body2">
-            <Link href={`/x/react-data-grid${row.linkToCode}`} target="_blank">
-              Open demo source
-            </Link>
-          </Typography>
+          <Link
+            href={`/x/react-data-grid${row.linkToCode}`}
+            target="_blank"
+            color="primary"
+            variant="body2"
+            sx={{
+              mt: 1.5,
+              fontWeight: 'bold',
+              fontFamily: 'IBM Plex Sans',
+              display: 'inline-flex',
+              alignItems: 'center',
+              '& > svg': { transition: '0.2s' },
+              '&:hover > svg': { transform: 'translateX(2px)' },
+            }}
+          >
+            View the demo source
+            <KeyboardArrowRightRounded
+              fontSize="small"
+              sx={{ mt: '1px', ml: '2px' }}
+            />
+          </Link>
         ) : null}
       </div>
     </Box>
@@ -323,7 +385,7 @@ const columns = [
             alignItems: 'center',
           }}
         >
-          <Typography sx={{ fontSize: '1rem', fontWeight: '500' }}>
+          <Typography variant="body2" fontWeight="medium" fontFamily="IBM Plex Sans">
             <Link
               href={`/x/react-data-grid${params.row.detailPage}`}
               target="_blank"
@@ -332,24 +394,23 @@ const columns = [
             </Link>
           </Typography>
           {params.row.newBadge && (
-            <Box
-              sx={{
-                width: 'fit-content',
-                height: 'fit-content',
-                fontSize: '0.8em',
-                fontWeight: 600,
-                position: 'absolute',
-                textAlign: 'center',
-                top: -13,
-                left: -20,
-                background: '#fcf0a0',
-                color: '#af5b00',
-                px: 1,
-                borderRadius: 10,
-              }}
-            >
-              New
-            </Box>
+            <Chip
+              label="New"
+              color="success"
+              size="small"
+              sx={(theme) => ({
+                ml: 1,
+                p: 0.2,
+                height: 'auto',
+                fontSize: theme.typography.pxToRem(10),
+                fontWeight: 'bold',
+                textTransform: 'uppercase',
+                letterSpacing: '.04rem',
+                '& .MuiChip-label': {
+                  px: '4px',
+                },
+              })}
+            />
           )}
         </Box>
       );
@@ -426,7 +487,15 @@ export default function PopularFeaturesDemo() {
   }, []);
 
   return (
-    <Box sx={{ minHeight: 1000, width: '100%' }}>
+    <Box
+      sx={{
+        minHeight: 1000,
+        width: '100%',
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 3,
+      }}
+    >
       <DataGridPremium
         apiRef={apiRef}
         autoHeight
@@ -449,11 +518,15 @@ export default function PopularFeaturesDemo() {
           },
         }}
         sx={{
+          fontFamily: 'IBM Plex Sans',
           [`& .${gridClasses.cell}`]: {
-            py: 2,
+            py: 1.5,
           },
           [`& .${gridClasses.columnHeaderTitle}`]: {
-            fontWeight: 400,
+            fontWeight: 'medium',
+          },
+          [`& .${gridClasses.withBorderColor}`]: {
+            borderColor: 'divider',
           },
           [`& .${gridClasses.detailPanel}`]: {
             background: 'transparent',
diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
index a1785921e1a0c..982e81055f7e2 100644
--- a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
+++ b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
@@ -17,7 +17,9 @@ import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import ArrowUp from '@mui/icons-material/KeyboardArrowUp';
 import ArrowDown from '@mui/icons-material/KeyboardArrowDown';
-import { useTheme } from '@mui/material/styles';
+import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
+import { useTheme, alpha } from '@mui/material/styles';
+import { yellow, blue, green } from '@mui/material/colors';
 import AggregationRowGrouping from '../aggregation/AggregationRowGrouping';
 import BasicColumnPinning from '../column-pinning/BasicColumnPinning';
 import ColumnSelectorGrid from '../column-visibility/ColumnSelectorGrid';
@@ -247,37 +249,70 @@ export const featuresSet: Row[] = [
 function getChipProperties(plan: string) {
   switch (plan) {
     case 'Premium':
-      return { avatarLink: '/static/x/premium.svg', color: '#ffecc8' };
+      return { avatarLink: '/static/x/premium.svg' };
     case 'Pro':
-      return { avatarLink: '/static/x/pro.svg', color: '#c8e9ff' };
+      return { avatarLink: '/static/x/pro.svg' };
     default:
-      return { avatarLink: undefined, color: '#c8ffdb' };
+      return { avatarLink: '/static/x/community.svg' };
   }
 }
 
 function PlanTag(props: { plan: string }) {
-  const chipPropperties = getChipProperties(props.plan);
-  const avatar = !chipPropperties.avatarLink ? undefined : (
-    <img src={chipPropperties.avatarLink} width={21} height={24} alt="" />
+  const theme = useTheme();
+  const chipProperties = getChipProperties(props.plan);
+  const avatar = !chipProperties.avatarLink ? undefined : (
+    <img src={chipProperties.avatarLink} width={21} height={24} alt="" />
   );
   return (
     <Chip
+      variant="outlined"
+      size="small"
       avatar={avatar}
+      label={props.plan}
       sx={{
-        backgroundColor: chipPropperties.color,
-        color: 'rgba(0, 0, 0, 0.87)',
+        pl: 0.5,
+        ...(props.plan === 'Premium' && {
+          backgroundColor:
+            theme.palette.mode === 'dark' ? alpha(yellow[900], 0.4) : yellow[50],
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? alpha(yellow[300], 0.4)
+              : alpha(yellow[900], 0.4),
+        }),
+        ...(props.plan === 'Pro' && {
+          backgroundColor:
+            theme.palette.mode === 'dark' ? alpha(blue[600], 0.4) : blue[50],
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? alpha(blue[300], 0.4)
+              : alpha(blue[900], 0.2),
+        }),
+        ...(props.plan === 'Community' && {
+          backgroundColor:
+            theme.palette.mode === 'dark' ? alpha(green[600], 0.4) : green[50],
+          borderColor:
+            theme.palette.mode === 'dark'
+              ? alpha(green[300], 0.4)
+              : alpha(green[900], 0.2),
+        }),
+        '& .MuiChip-label': {
+          fontWeight: 'medium',
+          fontSize: theme.typography.pxToRem(12),
+          pl: 1,
+        },
         '& .MuiChip-avatar': {
-          width: 21,
+          width: 16,
         },
       }}
-      label={props.plan}
     />
   );
 }
 
 function CustomToolbar() {
   return (
-    <GridToolbarContainer sx={{ p: 1 }}>
+    <GridToolbarContainer
+      sx={{ p: 2.5, borderBottom: '1px solid', borderColor: 'divider' }}
+    >
       <GridToolbarQuickFilter />
     </GridToolbarContainer>
   );
@@ -286,19 +321,46 @@ function CustomToolbar() {
 function RowDemo(props: { row: Row }) {
   const { row } = props;
   const theme = useTheme();
-  const gridBgColor = theme.palette.mode === 'dark' ? '#000' : '#fff';
-  const panelColor = theme.palette.mode === 'dark' ? 'transparent' : '#efefef';
 
   return (
-    <Box sx={{ py: 2, backgroundColor: panelColor }}>
+    <Box
+      sx={{
+        py: 6,
+        bgcolor: theme.palette.mode === 'dark' ? '#141A1F' : 'grey.50', // dark color is the branding theme's primaryDark.800
+        borderBottom: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
       <div style={{ width: '90%', margin: 'auto' }}>
-        <Box sx={{ backgroundColor: gridBgColor }}>{row.demo}</Box>
+        <Box
+          sx={{
+            backgroundColor: theme.palette.mode === 'dark' ? '#0B0D0E' : '#fff', // dark color is the branding theme's common black
+          }}
+        >
+          {row.demo}
+        </Box>
         {row.linkToCode ? (
-          <Typography sx={{ marginTop: 1 }} variant="body2">
-            <Link href={`/x/react-data-grid${row.linkToCode}`} target="_blank">
-              Open demo source
-            </Link>
-          </Typography>
+          <Link
+            href={`/x/react-data-grid${row.linkToCode}`}
+            target="_blank"
+            color="primary"
+            variant="body2"
+            sx={{
+              mt: 1.5,
+              fontWeight: 'bold',
+              fontFamily: 'IBM Plex Sans',
+              display: 'inline-flex',
+              alignItems: 'center',
+              '& > svg': { transition: '0.2s' },
+              '&:hover > svg': { transform: 'translateX(2px)' },
+            }}
+          >
+            View the demo source
+            <KeyboardArrowRightRounded
+              fontSize="small"
+              sx={{ mt: '1px', ml: '2px' }}
+            />
+          </Link>
         ) : null}
       </div>
     </Box>
@@ -338,7 +400,7 @@ const columns: GridColDef[] = [
             alignItems: 'center',
           }}
         >
-          <Typography sx={{ fontSize: '1rem', fontWeight: '500' }}>
+          <Typography variant="body2" fontWeight="medium" fontFamily="IBM Plex Sans">
             <Link
               href={`/x/react-data-grid${params.row.detailPage}`}
               target="_blank"
@@ -347,24 +409,23 @@ const columns: GridColDef[] = [
             </Link>
           </Typography>
           {params.row.newBadge && (
-            <Box
-              sx={{
-                width: 'fit-content',
-                height: 'fit-content',
-                fontSize: '0.8em',
-                fontWeight: 600,
-                position: 'absolute',
-                textAlign: 'center',
-                top: -13,
-                left: -20,
-                background: '#fcf0a0',
-                color: '#af5b00',
-                px: 1,
-                borderRadius: 10,
-              }}
-            >
-              New
-            </Box>
+            <Chip
+              label="New"
+              color="success"
+              size="small"
+              sx={(theme) => ({
+                ml: 1,
+                p: 0.2,
+                height: 'auto',
+                fontSize: theme.typography.pxToRem(10),
+                fontWeight: 'bold',
+                textTransform: 'uppercase',
+                letterSpacing: '.04rem',
+                '& .MuiChip-label': {
+                  px: '4px',
+                },
+              })}
+            />
           )}
         </Box>
       );
@@ -447,7 +508,15 @@ export default function PopularFeaturesDemo() {
   }, []);
 
   return (
-    <Box sx={{ minHeight: 1000, width: '100%' }}>
+    <Box
+      sx={{
+        minHeight: 1000,
+        width: '100%',
+        border: '1px solid',
+        borderColor: 'divider',
+        borderRadius: 3,
+      }}
+    >
       <DataGridPremium
         apiRef={apiRef}
         autoHeight
@@ -470,11 +539,15 @@ export default function PopularFeaturesDemo() {
           },
         }}
         sx={{
+          fontFamily: 'IBM Plex Sans',
           [`& .${gridClasses.cell}`]: {
-            py: 2,
+            py: 1.5,
           },
           [`& .${gridClasses.columnHeaderTitle}`]: {
-            fontWeight: 400,
+            fontWeight: 'medium',
+          },
+          [`& .${gridClasses.withBorderColor}`]: {
+            borderColor: 'divider',
           },
           [`& .${gridClasses.detailPanel}`]: {
             background: 'transparent',
diff --git a/docs/data/data-grid/demo/demo.md b/docs/data/data-grid/demo/demo.md
index 5ff5ffa15719c..5bb2101ffc593 100644
--- a/docs/data/data-grid/demo/demo.md
+++ b/docs/data/data-grid/demo/demo.md
@@ -1,11 +1,9 @@
-# Data Grid - Demo
+# Data Grid Demo
 
-<p class="description">Use the demo below to explore the most significant features and their respective plans.</p>
+<p class="description">Explore all of the Data Grid features and understand which plan they're available in.</p>
 
 :::info
-This demo uses the Data Grid to display a table of features.
-
-Filtering, sorting, and grouping (by plan) are at your disposal to help you explore the list.
+Note that this demo itself uses the Data Grid with features such as filtering, sorting, and grouping!
 :::
 
 {{"demo": "PopularFeaturesDemo.js", "defaultCodeOpen": false, "bg": "inline", "hideToolbar": true}}
diff --git a/docs/public/static/x/community.svg b/docs/public/static/x/community.svg
new file mode 100644
index 0000000000000..c6f705ea6f92f
--- /dev/null
+++ b/docs/public/static/x/community.svg
@@ -0,0 +1 @@
+<svg width="13" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="block-green" maskUnits="userSpaceOnUse" mask-type="alpha" x="0" y="0" width="13" height="15"><path d="M0 5.177a2.47 2.47 0 011.236-2.14L5.266.712a2.47 2.47 0 012.469 0l4.029 2.325A2.47 2.47 0 0113 5.177v4.646a2.47 2.47 0 01-1.236 2.14l-4.03 2.325a2.47 2.47 0 01-2.469 0l-4.029-2.325A2.47 2.47 0 010 9.823V5.177z" fill="#ED64A6"/></mask><g mask="url(#block-green)"><path d="M0 3.75L6.5 7.5 13 3.75 6.5 0 0 3.75z" fill="#9AEFBC"/><path d="M6.5 7.5V15l6.5-3.75v-7.5L6.5 7.5z" fill="#1AA251"/><path d="M0 11.25L6.5 15V7.5L0 3.75v7.5z" fill="#3EE07F"/></g></svg>
\ No newline at end of file