From 5ad7d527780cb6d34f8a589330f91310313f75b4 Mon Sep 17 00:00:00 2001 From: SeyyedMahdi Date: Fri, 3 Nov 2023 22:36:47 +0330 Subject: [PATCH] [Snackbar][Material You] apply md3 designs --- docs/pages/base-ui/api/snackbar.json | 2 +- docs/pages/joy-ui/api/snackbar.json | 2 +- .../components/MaterialYouUsageDemo.tsx | 249 +++++++++--------- .../src/Snackbar/Snackbar.test.js | 3 + .../src/Snackbar/Snackbar.types.ts | 3 +- .../SnackbarContent/SnackbarContent.test.js | 3 + .../src/SnackbarContent/SnackbarContent.tsx | 32 +-- .../SnackbarContent/SnackbarContent.types.ts | 11 +- 8 files changed, 151 insertions(+), 154 deletions(-) diff --git a/docs/pages/base-ui/api/snackbar.json b/docs/pages/base-ui/api/snackbar.json index 709e8a25b5dde2..ef0ba821f06570 100644 --- a/docs/pages/base-ui/api/snackbar.json +++ b/docs/pages/base-ui/api/snackbar.json @@ -6,7 +6,7 @@ "onClose": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent | Event, reason: string) => void", + "type": "function(event: React.SyntheticEvent | Event | null, reason: string) => void", "describedArgs": ["event", "reason"] } }, diff --git a/docs/pages/joy-ui/api/snackbar.json b/docs/pages/joy-ui/api/snackbar.json index 30f37cd03097cf..4ea3a45486d20e 100644 --- a/docs/pages/joy-ui/api/snackbar.json +++ b/docs/pages/joy-ui/api/snackbar.json @@ -26,7 +26,7 @@ "onClose": { "type": { "name": "func" }, "signature": { - "type": "function(event: React.SyntheticEvent | Event, reason: string) => void", + "type": "function(event: React.SyntheticEvent | Event | null, reason: string) => void", "describedArgs": ["event", "reason"] } }, diff --git a/docs/src/modules/components/MaterialYouUsageDemo.tsx b/docs/src/modules/components/MaterialYouUsageDemo.tsx index 6f42e405dfcc02..a3a349fd696d8a 100644 --- a/docs/src/modules/components/MaterialYouUsageDemo.tsx +++ b/docs/src/modules/components/MaterialYouUsageDemo.tsx @@ -114,7 +114,7 @@ interface MaterialYouUsageDemoProps { /** * Configuration */ - data: Array<{ + data?: Array<{ /** * Name of the prop, e.g. 'children' */ @@ -170,7 +170,7 @@ interface MaterialYouUsageDemoProps { export default function MaterialYouUsageDemo({ componentName, childrenAccepted = false, - data, + data = [], renderDemo, getCodeBlock = defaultGetCodeBlock, }: MaterialYouUsageDemoProps) { @@ -240,138 +240,141 @@ export default function MaterialYouUsageDemo - ({ - flexShrink: 0, - gap: 2, - borderLeft: '1px solid', - borderColor: theme.palette.grey[200], - background: alpha(theme.palette.grey[50], 0.5), - minWidth: '250px', - [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { - borderColor: alpha(theme.palette.grey[900], 0.8), - backgroundColor: alpha(theme.palette.grey[900], 0.3), - }, - })} - > + + {data.length > 0 && ( ({ + flexShrink: 0, + gap: 2, + borderLeft: '1px solid', + borderColor: theme.palette.grey[200], + background: alpha(theme.palette.grey[50], 0.5), + minWidth: '250px', + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + borderColor: alpha(theme.palette.grey[900], 0.8), + backgroundColor: alpha(theme.palette.grey[900], 0.3), + }, + })} > - - Playground - - setProps(initialProps as T)} + + Playground + + setProps(initialProps as T)} + sx={{ + visibility: !shallowEqual(props, initialProps) ? 'visible' : 'hidden', + }} + > + + + + + - - - - - - {data.map(({ propName, knob, options = [], defaultValue, onChange }) => { - const resolvedValue = props[propName] ?? defaultValue; - if (!knob) { - return null; - } - if (knob === 'switch') { - return ( - - - {propName} - - { + const resolvedValue = props[propName] ?? defaultValue; + if (!knob) { + return null; + } + if (knob === 'switch') { + return ( + { - setProps((latestProps) => ({ - ...latestProps, - [propName]: event.target.checked, - })); - onChange?.(event); - }} - /> - - ); - } - if (knob === 'select') { - return ( - - - {propName} - - - - ); - } - return null; - })} + + {propName} + + { + setProps((latestProps) => ({ + ...latestProps, + [propName]: event.target.checked, + })); + onChange?.(event); + }} + /> + + ); + } + if (knob === 'select') { + return ( + + + {propName} + + + + ); + } + return null; + })} + - + )} ); } diff --git a/packages/mui-material-next/src/Snackbar/Snackbar.test.js b/packages/mui-material-next/src/Snackbar/Snackbar.test.js index 9dc3fafe426c6c..a2b9fe25dfa1f5 100644 --- a/packages/mui-material-next/src/Snackbar/Snackbar.test.js +++ b/packages/mui-material-next/src/Snackbar/Snackbar.test.js @@ -4,6 +4,7 @@ import { spy } from 'sinon'; import { describeConformance, act, createRenderer, fireEvent } from '@mui-internal/test-utils'; import Snackbar, { snackbarClasses as classes } from '@mui/material-next/Snackbar'; import { ThemeProvider, createTheme } from '@mui/material/styles'; +import { CssVarsProvider, extendTheme } from '@mui/material-next/styles'; describe('', () => { const { clock, render: clientRender } = createRenderer({ clock: 'fake' }); @@ -26,6 +27,8 @@ describe('', () => { describeConformance(, () => ({ classes, inheritComponent: 'div', + ThemeProvider: CssVarsProvider, + createTheme: extendTheme, render, refInstanceof: window.HTMLDivElement, muiName: 'MuiSnackbar', diff --git a/packages/mui-material-next/src/Snackbar/Snackbar.types.ts b/packages/mui-material-next/src/Snackbar/Snackbar.types.ts index 66a3c85242e34c..bd44cc174a1637 100644 --- a/packages/mui-material-next/src/Snackbar/Snackbar.types.ts +++ b/packages/mui-material-next/src/Snackbar/Snackbar.types.ts @@ -3,10 +3,11 @@ import { SxProps } from '@mui/system'; import { ClickAwayListenerProps } from '@mui/base/ClickAwayListener'; // eslint-disable-next-line no-restricted-imports import { InternalStandardProps as StandardProps } from '@mui/material'; -import { SnackbarContentProps } from '@mui/material/SnackbarContent'; +// TODO v6: port to material-next import { TransitionProps } from '@mui/material/transitions'; import { Theme } from '../styles'; import { SnackbarClasses } from './snackbarClasses'; +import { SnackbarContentProps } from '../SnackbarContent/SnackbarContent.types'; export interface SnackbarOwnerState extends SnackbarProps { anchorOrigin: NonNullable; diff --git a/packages/mui-material-next/src/SnackbarContent/SnackbarContent.test.js b/packages/mui-material-next/src/SnackbarContent/SnackbarContent.test.js index a342e72fa08676..43aa16d8b9ab9c 100644 --- a/packages/mui-material-next/src/SnackbarContent/SnackbarContent.test.js +++ b/packages/mui-material-next/src/SnackbarContent/SnackbarContent.test.js @@ -5,12 +5,15 @@ import Paper from '@mui/material/Paper'; import SnackbarContent, { snackbarContentClasses as classes, } from '@mui/material-next/SnackbarContent'; +import { CssVarsProvider, extendTheme } from '@mui/material-next/styles'; describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ classes, + ThemeProvider: CssVarsProvider, + createTheme: extendTheme, inheritComponent: Paper, render, muiName: 'MuiSnackbarContent', diff --git a/packages/mui-material-next/src/SnackbarContent/SnackbarContent.tsx b/packages/mui-material-next/src/SnackbarContent/SnackbarContent.tsx index c4f303e4531128..b7f7b7884c3099 100644 --- a/packages/mui-material-next/src/SnackbarContent/SnackbarContent.tsx +++ b/packages/mui-material-next/src/SnackbarContent/SnackbarContent.tsx @@ -3,11 +3,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses'; -import { emphasize } from '@mui/system'; +import Paper from '@mui/material/Paper'; import useThemeProps from '../styles/useThemeProps'; import { getSnackbarContentUtilityClass } from './snackbarContentClasses'; -import { CssVarsTheme, Paper, styled } from '@mui/material'; import { SnackbarContentOwnerState, SnackbarContentProps } from './SnackbarContent.types'; +import { styled } from '../styles'; const useUtilityClasses = (ownerState: SnackbarContentOwnerState) => { const { classes } = ownerState; @@ -25,22 +25,20 @@ const SnackbarContentRoot = styled(Paper, { name: 'MuiSnackbarContent', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})<{ ownerState: SnackbarContentOwnerState; theme?: CssVarsTheme }>(({ theme }) => { - const emphasis = theme.palette.mode === 'light' ? 0.8 : 0.98; - const backgroundColor = emphasize(theme.palette.background.default, emphasis); +})<{ ownerState: SnackbarContentOwnerState }>(({ theme }) => { + const { vars: tokens } = theme; return { ...theme.typography.body2, - color: theme.vars - ? theme.vars.palette.SnackbarContent.color - : theme.palette.getContrastText(backgroundColor), - backgroundColor: theme.vars ? theme.vars.palette.SnackbarContent.bg : backgroundColor, + color: tokens.sys.color.inverseOnSurface, + backgroundColor: tokens.sys.color.inverseSurface, display: 'flex', - alignItems: 'center', flexWrap: 'wrap', + alignItems: 'center', padding: '6px 16px', borderRadius: (theme.vars || theme).shape.borderRadius, flexGrow: 1, + boxShadow: tokens.sys.elevation[3], [theme.breakpoints.up('sm')]: { flexGrow: 'initial', minWidth: 288, @@ -64,7 +62,7 @@ const SnackbarContentAction = styled('div', { display: 'flex', alignItems: 'center', marginLeft: 'auto', - paddingLeft: 16, + paddingLeft: 4, marginRight: -8, }); @@ -102,7 +100,7 @@ const SnackbarContent = React.forwardRef(function SnackbarContent( SnackbarContent.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | + // | To update them edit TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** * The action to display. It renders after the message, at the end of the snackbar. @@ -125,14 +123,6 @@ SnackbarContent.propTypes /* remove-proptypes */ = { * @default 'alert' */ role: PropTypes /* @typescript-to-proptypes-ignore */.string, - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), -}; +} as any; export default SnackbarContent; diff --git a/packages/mui-material-next/src/SnackbarContent/SnackbarContent.types.ts b/packages/mui-material-next/src/SnackbarContent/SnackbarContent.types.ts index 43533304aab956..ac7b74854ccce1 100644 --- a/packages/mui-material-next/src/SnackbarContent/SnackbarContent.types.ts +++ b/packages/mui-material-next/src/SnackbarContent/SnackbarContent.types.ts @@ -1,10 +1,11 @@ import * as React from 'react'; -import { SxProps } from '@mui/system'; -import { InternalStandardProps as StandardProps, PaperProps, Theme } from '@mui/material'; +// eslint-disable-next-line no-restricted-imports +import { InternalStandardProps as StandardProps, PaperProps } from '@mui/material'; import { SnackbarContentClasses } from './snackbarContentClasses'; export interface SnackbarContentOwnerState extends SnackbarContentProps {} +// TODO v6: Add the 'sx' type after migrating the Paper Component. export interface SnackbarContentProps extends StandardProps { /** * The action to display. It renders after the message, at the end of the snackbar. @@ -22,9 +23,5 @@ export interface SnackbarContentProps extends StandardProps; + role?: React.AriaRole; }