Add more demos and improve

docs/data/joy/components/sheet/SheetColors.js

@@ -0,0 +1,73 @@
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet, { sheetClasses } from '@mui/joy/Sheet';
+
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function SheetColors() {
+  const [variant, setVariant] = React.useState('plain');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 2,
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        [`& > .${sheetClasses.root}`]: {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          mb: 2,
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography fontWeight="lg" mr={2} id="variant-label">
+          Variant:
+        </Typography>
+        <RadioGroup
+          aria-labelledby="variant-label"
+          name="variant"
+          row
+          value={variant}
+          onChange={(event) => setVariant(event.target.value)}
+        >
+          <Radio label="Plain" value="plain" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Solid" value="solid" />
+        </RadioGroup>
+      </Box>
+      <Sheet variant={variant} color="primary">
+        Primary
+      </Sheet>
+      <Sheet variant={variant} color="neutral">
+        Neutral
+      </Sheet>
+      <Sheet variant={variant} color="danger">
+        Danger
+      </Sheet>
+      <Sheet variant={variant} color="info">
+        Info
+      </Sheet>
+      <Sheet variant={variant} color="success">
+        Success
+      </Sheet>
+      <Sheet variant={variant} color="warning">
+        Warning
+      </Sheet>
+    </Box>
+  );
+}

docs/data/joy/components/sheet/SheetColors.tsx

@@ -0,0 +1,73 @@
+import Box from '@mui/joy/Box';
+import Radio from '@mui/joy/Radio';
+import RadioGroup from '@mui/joy/RadioGroup';
+import Sheet, { sheetClasses } from '@mui/joy/Sheet';
+import { VariantProp } from '@mui/joy/styles';
+import Typography from '@mui/joy/Typography';
+import * as React from 'react';
+
+export default function SheetColors() {
+  const [variant, setVariant] = React.useState<VariantProp>('plain');
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: 2,
+        justifyContent: 'center',
+        flexWrap: 'wrap',
+        [`& > .${sheetClasses.root}`]: {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          mb: 2,
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Typography fontWeight="lg" mr={2} id="variant-label">
+          Variant:
+        </Typography>
+        <RadioGroup
+          aria-labelledby="variant-label"
+          name="variant"
+          row
+          value={variant}
+          onChange={(event) => setVariant(event.target.value as VariantProp)}
+        >
+          <Radio label="Plain" value="plain" />
+          <Radio label="Outlined" value="outlined" />
+          <Radio label="Soft" value="soft" />
+          <Radio label="Solid" value="solid" />
+        </RadioGroup>
+      </Box>
+      <Sheet variant={variant} color="primary">
+        Primary
+      </Sheet>
+      <Sheet variant={variant} color="neutral">
+        Neutral
+      </Sheet>
+      <Sheet variant={variant} color="danger">
+        Danger
+      </Sheet>
+      <Sheet variant={variant} color="info">
+        Info
+      </Sheet>
+      <Sheet variant={variant} color="success">
+        Success
+      </Sheet>
+      <Sheet variant={variant} color="warning">
+        Warning
+      </Sheet>
+    </Box>
+  );
+}

docs/data/joy/components/sheet/SimpleSheet.js → docs/data/joy/components/sheet/SheetElevations.js

@@ -2,12 +2,11 @@ import Box from '@mui/joy/Box';
 import Sheet from '@mui/joy/Sheet';
 import * as React from 'react';
 
-export default function SimpleSheet() {
+export default function SheetElevations() {
   return (
     <Box
       sx={{
         display: 'flex',
-        flexWrap: 'wrap',
         '& > div': {
           m: 2,
           width: 128,

docs/data/joy/components/sheet/SimpleSheet.tsx → docs/data/joy/components/sheet/SheetElevations.tsx

@@ -2,12 +2,11 @@ import Box from '@mui/joy/Box';
 import Sheet from '@mui/joy/Sheet';
 import * as React from 'react';
 
-export default function SimpleSheet() {
+export default function SheetElevations() {
   return (
     <Box
       sx={{
         display: 'flex',
-        flexWrap: 'wrap',
         '& > div': {
           m: 2,
           width: 128,

docs/data/joy/components/sheet/SheetElevations.tsx.preview

@@ -0,0 +1,3 @@
+<Sheet elevation="sm" />
+<Sheet elevation="md" />
+<Sheet elevation="lg" />

docs/data/joy/components/sheet/SheetVariants.js

@@ -0,0 +1,28 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SheetElevations() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        '& > div': {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Sheet variant="plain">Plain</Sheet>
+      <Sheet variant="solid">Solid</Sheet>
+      <Sheet variant="outlined">Outlined</Sheet>
+      <Sheet variant="soft">Soft</Sheet>
+    </Box>
+  );
+}

docs/data/joy/components/sheet/SheetVariants.tsx

@@ -0,0 +1,28 @@
+import Box from '@mui/joy/Box';
+import Sheet from '@mui/joy/Sheet';
+import * as React from 'react';
+
+export default function SheetElevations() {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+        '& > div': {
+          m: 2,
+          width: 128,
+          height: 128,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+      }}
+    >
+      <Sheet variant="plain">Plain</Sheet>
+      <Sheet variant="solid">Solid</Sheet>
+      <Sheet variant="outlined">Outlined</Sheet>
+      <Sheet variant="soft">Soft</Sheet>
+    </Box>
+  );
+}

docs/data/joy/components/sheet/SheetVariants.tsx.preview

@@ -0,0 +1,4 @@
+<Sheet variant="plain">Plain</Sheet>
+<Sheet variant="solid">Solid</Sheet>
+<Sheet variant="outlined">Outlined</Sheet>
+<Sheet variant="soft">Soft</Sheet>

docs/data/joy/components/sheet/sheet.md

@@ -11,15 +11,25 @@ unstyled: /base/react-sheet/
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-## Basic
-
 Use the `Sheet` component as a generic container for your components.
 You can play around with variants, color, and elevation to achieve the desired result.
 
 {{"demo": "SheetUsage.js", "hideToolbar": true}}
 
-## Elevation
+## Variants
+
+The `Sheet` comes with four global variants: `plain` (default), `outlined`, `soft` and `solid`.
+
+{{"demo": "SheetVariants.js"}}
+
+## Colors
+
+All theme palettes are available via the `color` prop which can be combined with the `variant` prop.
+
+{{"demo": "SheetColors.js"}}
+
+## Elevations
 
-`Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
+The `Sheet` comes with three predefined elevation values: `sm`, `md`, and `lg`.
 
-{{"demo": "SimpleSheet.js"}}
+{{"demo": "SheetElevations.js"}}