add snackbar with decorators demo

docs/data/joy/components/snackbar/SnackbarWithDecorators.js

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@mui/joy/Button';
+import Snackbar from '@mui/joy/Snackbar';
+import PlaylistAddCheckCircleRoundedIcon from '@mui/icons-material/PlaylistAddCheckCircleRounded';
+
+function CloseButton(props) {
+  const { onClose } = props;
+  return (
+    <Button onClick={onClose} size="sm" variant="solid" color="success">
+      Close
+    </Button>
+  );
+}
+
+CloseButton.propTypes = {
+  onClose: PropTypes.func.isRequired,
+};
+
+export default function SnackbarWithDecorators() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => setOpen(true);
+
+  const handleClose = () => setOpen(false);
+
+  return (
+    <React.Fragment>
+      <Button onClick={handleOpen}>Show Snackbar</Button>
+      <Snackbar
+        variant="soft"
+        color="success"
+        open={open}
+        onClose={handleClose}
+        slots={{
+          startDecorator: PlaylistAddCheckCircleRoundedIcon,
+          endDecorator: CloseButton,
+        }}
+        slotProps={{
+          endDecorator: {
+            onClose: handleClose,
+          },
+        }}
+      >
+        Your message was sent successfully.
+      </Snackbar>
+    </React.Fragment>
+  );
+}

docs/data/joy/components/snackbar/SnackbarWithDecorators.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import Button from '@mui/joy/Button';
+import Snackbar from '@mui/joy/Snackbar';
+import PlaylistAddCheckCircleRoundedIcon from '@mui/icons-material/PlaylistAddCheckCircleRounded';
+
+interface CloseButtonProps {
+  onClose: () => React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+function CloseButton(props: CloseButtonProps) {
+  const { onClose } = props;
+  return (
+    <Button onClick={onClose} size="sm" variant="solid" color="success">
+      Close
+    </Button>
+  );
+}
+
+export default function SnackbarWithDecorators() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpen = () => setOpen(true);
+
+  const handleClose = () => setOpen(false);
+
+  return (
+    <React.Fragment>
+      <Button onClick={handleOpen}>Show Snackbar</Button>
+      <Snackbar
+        variant="soft"
+        color="success"
+        open={open}
+        onClose={handleClose}
+        slots={{
+          startDecorator: PlaylistAddCheckCircleRoundedIcon,
+          endDecorator: CloseButton,
+        }}
+        slotProps={{
+          endDecorator: {
+            onClose: handleClose,
+          },
+        }}
+      >
+        Your message was sent successfully.
+      </Snackbar>
+    </React.Fragment>
+  );
+}

docs/data/joy/components/snackbar/snackbar.md

@@ -26,3 +26,11 @@ In wide layouts, snackbars can be left-aligned or center-aligned if they are con
 You can control the position of the snackbar by specifying the `anchorOrigin` prop.
 
 {{"demo": "PositionedSnackbar.js"}}
+
+## Customization
+
+### Decorators
+
+Use the `slots.startDecorator` and `slots.endDecorator` props to append actions and icons to either side of the Snackbar:
+
+{{"demo": "SnackbarWithDecorators.js"}}

packages/mui-joy/src/Snackbar/Snackbar.tsx

@@ -71,18 +71,28 @@ const SnackbarRoot = styled('div', {
         }),
       },
       '--Snackbar-radius': theme.vars.radius.sm,
+      '--Snackbar-decoratorChildRadius':
+        'max((var(--Snackbar-radius) - var(--variant-borderWidth, 0px)) - var(--Snackbar-padding), min(var(--Snackbar-padding) + var(--variant-borderWidth, 0px), var(--Snackbar-radius) / 2))',
+      '--Button-minHeight': 'var(--Snackbar-decoratorChildHeight)',
+      '--IconButton-size': 'var(--Snackbar-decoratorChildHeight)',
+      '--Button-radius': 'var(--Snackbar-decoratorChildRadius)',
+      '--IconButton-radius': 'var(--Snackbar-decoratorChildRadius)',
+      '--Icon-color': 'currentColor',
       ...(ownerState.size === 'sm' && {
         '--Snackbar-padding': '0.5rem',
+        '--Snackbar-decoratorChildHeight': '1.5rem',
         '--Icon-fontSize': theme.vars.fontSize.xl,
         gap: '0.5rem',
       }),
       ...(ownerState.size === 'md' && {
         '--Snackbar-padding': '0.75rem',
+        '--Snackbar-decoratorChildHeight': '2rem',
         '--Icon-fontSize': theme.vars.fontSize.xl,
         gap: '0.625rem',
       }),
       ...(ownerState.size === 'lg' && {
         '--Snackbar-padding': '1rem',
+        '--Snackbar-decoratorChildHeight': '2.375rem',
         '--Icon-fontSize': theme.vars.fontSize.xl2,
         gap: '0.875rem',
       }),
@@ -205,14 +215,12 @@ const Snackbar = React.forwardRef(function Snackbar(inProps, ref) {
       <SlotRoot {...rootProps}>
         {slots.startDecorator && (
           <SlotStartDecorator {...startDecoratorProps}>
-            {slots.startDecorator as React.ReactNode}
+            {<slots.startDecorator />}
           </SlotStartDecorator>
         )}
         {children}
         {slots.endDecorator && (
-          <SlotEndDecorator {...endDecoratorProps}>
-            {slots.endDecorator as React.ReactNode}
-          </SlotEndDecorator>
+          <SlotEndDecorator {...endDecoratorProps}>{<slots.endDecorator />}</SlotEndDecorator>
         )}
       </SlotRoot>
     </ClickAwayListener>