[material-next][Snackbar] apply MD3 designs #39631

Best-Sardar · 2023-10-27T11:28:45Z

I have followed (at least) the PR section of the contributing guide.

related to: #39207

In this PR, I have converted the Snackbar files from JavaScript to TypeScript.
Furthermore, to apply the Material Design 3 specs, I also need to migrate the SnackbarContent component to mui-material-next. I will submit the changes for SnackbarContent in a separate PR.

mui-bot · 2023-10-27T11:32:10Z

Netlify deploy preview

https://deploy-preview-39631--material-ui.netlify.app/

@mui/material-next: parsed: +1.38% , gzip: +1.24%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 5ad7d52

ZeeshanTamboli · 2023-10-30T08:33:52Z

I'd like @DiegoAndai to review this. I am not aware of the Snackbar MD3 plan.

DiegoAndai · 2023-10-31T12:25:45Z

@Best-Sardar is this ready for review?

Best-Sardar · 2023-11-01T06:25:37Z

Hi @DiegoAndai,
In this PR, I have only converted the files to TypeScript (ts). I needed SnackbarContent to implement the MD3 designs, which was separated into a separate PR.
I can draft this PR and send you all the necessary changes for implementing the MD3 designs in this PR in different commits.
which one do you prefere?

Best-Sardar · 2023-11-02T13:20:44Z

Hi @DiegoAndai,
Considering the design of the action button in MD3 and the fact that these actions are sent from outside to the component as actions, what approach do you suggest for implementing the designs of material?
i need to change the action button colors to inverse-primary

DiegoAndai · 2023-11-02T13:57:13Z

In this PR, I have only converted the files to TypeScript

That's good 👍🏼 let's keep this PR only for TypeScript and have a separate one for MD3 design.

Considering the design of the action button in MD3 and the fact that these actions are sent from outside to the component as actions, what approach do you suggest for implementing the designs of material?

I didn't understand the question. The Snackbar's button is the text Button variant, right?

Best-Sardar · 2023-11-02T14:24:08Z

In Figma designs, the action button has an inverse-primary text color. In the API designed for the snackbar, the actions are received as a ReactNode through props. Since these buttons are passed as props to the SnackbarContent from the outside, I can't modify their colors (without forcing that).
The question I have is how should I proceed to implement the correct color for the action button? It seems to me that we can assign a specific color to the button for the inverse such as color="inversePrimary" (as per the Figma designs, this color is only used in this case).

Actually, the actions button are not text button with primary color.
@DiegoAndai

DiegoAndai · 2023-11-03T13:43:17Z

In the API designed for the snackbar, the actions are received as a ReactNode through props. Since these buttons are passed as props to the SnackbarContent from the outside, I can't modify their colors (without forcing that).

I understand now, thanks!

Let's leave that for the user. As they provide the Button, they can choose the color they use. So, we shouldn't add the color in the SnackbarContent.

We could create an issue to add this inverse-primary color to the theme though, could you do that?

Regarding this Typescript PR, should we review it already?

Best-Sardar · 2023-11-03T19:51:18Z

Hi @DiegoAndai,
Considering the relatively small size of the changes required to implement the MD3 design, I have sent you the rest changes in this PR in deferent commits. Since the changes are interdependent, I believe it would be easier for you to review them together.

There are a few things I need to tell you:

To create the SnackBar documentation (Experimental APIs section), it was necessary to hide the playground section (there was nothing there). I tried to remove that section from the display with minimal changes (if you agree, I can perform some refactoring on this component). In GitHub, there are many changes displayed, but in reality, I added a condition data.length > 0 for the playground section only.
For the onClose type in the SnackBar, it was necessary to add null because this value was being passed to onClose as a reason during autoHide. This change affected other parts besides material-next.

The overall changes have been made and are ready for review.
If you prefer, I can create separate PRs for each change.

docs/data/material/components/snackbars/SnackbarMaterialYouPlayground.js

mj12albert · 2023-11-07T07:42:03Z

packages/mui-material-next/src/SnackbarContent/SnackbarContent.tsx

@@ -3,13 +3,13 @@ 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 styled from '@mui/material/styles/styled';
-import useThemeProps from '@mui/material/styles/useThemeProps';
 import Paper from '@mui/material/Paper';


This component depends on Paper, I wonder if this will be a blocker for implementing the MD3 design 👀

mj12albert

@Best-Sardar Thanks for working on this ~ I have left some comments

mj12albert · 2023-11-07T07:42:54Z

packages/mui-material-next/src/SnackbarContent/SnackbarContent.types.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';


Suggested change

import { SxProps } from '@mui/system';

import { SxProps } from '../styles/Theme.types';

BTW this one doesn't need the Theme parameter to be passed manually: https://github.com/mui/material-ui/blob/master/packages/mui-material-next/src/Chip/Chip.types.ts#L78

With this change, I should Omit the sx props from Paper as follows:
export interface SnackbarContentProps extends Omit<StandardProps<PaperProps, 'children'>, 'sx'>
Is it ok?

Yes ~ it makes sense

Considering that 'sx' has been passed to Paper and that mui-material is used for Paper, we are required to use the Paper 'sx' type until Paper is migrated to material-next.
I have added a TODO for this section.

packages/mui-material-next/src/SnackbarContent/SnackbarContent.types.ts

packages/mui-material-next/src/Snackbar/Snackbar.types.ts

Best-Sardar · 2023-11-19T12:19:09Z

Hi @mj12albert,
Could you give me an update about this PR?

mj12albert · 2023-11-20T09:16:59Z

Hi @mj12albert, Could you give me an update about this PR?

Hey ~ I was out for several days, will review the latest changes in the next couple of days!

mj12albert · 2023-11-20T09:23:09Z

docs/src/modules/components/MaterialYouUsageDemo.tsx

-        })}
-      >
+
+      {data.length > 0 && (


@Best-Sardar Are the changes to this file still necessary?

mj12albert · 2023-11-20T10:45:54Z

packages/mui-material-next/src/SnackbarContent/SnackbarContent.tsx

    flexWrap: 'wrap',
+    alignItems: 'center',
    padding: '6px 16px',
    borderRadius: (theme.vars || theme).shape.borderRadius,


Suggested change

borderRadius: (theme.vars || theme).shape.borderRadius,

borderRadius: tokens.shape.borderRadius,

mj12albert · 2023-11-20T10:49:54Z

packages/mui-material-next/src/SnackbarContent/SnackbarContent.tsx

-  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,


@Best-Sardar We can break up this spread to use theme.vars as well, you can use https://github.com/mui/material-ui/blob/master/packages/mui-material-next/src/FormLabel/FormLabel.tsx#L49-L53 as a reference

mj12albert · 2023-11-20T10:55:00Z

packages/mui-material-next/src/Snackbar/Snackbar.tsx

-    additionalProps: {
-      ref,
-    },
+    additionalProps: { ref },
    className: [classes.root, className],


Suggested change

className: [classes.root, className],

className: [classes.root],

We don't need to manually destructure this className from props and pass it here anymore, it's ok to leave it in other and let it get passed to externalForwardedProps if you are not doing anything else with it, see #39601 for background!

mj12albert · 2023-11-20T11:54:15Z

packages/mui-material-next/src/SnackbarContent/SnackbarContent.tsx

  marginRight: -8,
 });

-const SnackbarContent = React.forwardRef(function SnackbarContent(inProps, ref) {
+const SnackbarContent = React.forwardRef(function SnackbarContent(


@Best-Sardar Let's implement useSlotProps here for the three slots: root, message and action!

DiegoAndai · 2024-12-13T19:17:30Z

Closing as stale. This implementation of MD3 is one that we probably won't follow.

Best-Sardar force-pushed the material-you-add-snackbar-component branch from 2a9538c to 3dea297 Compare October 27, 2023 12:43

zannager added the component: snackbar This is the name of the generic UI component, not the React module! label Oct 27, 2023

zannager requested a review from ZeeshanTamboli October 27, 2023 15:02

samuelsycamore changed the title ~~[Snackbar][Material You] convert .js files to .ts~~ [material-next][Snackbar] convert .js files to .ts Oct 28, 2023

ZeeshanTamboli requested review from DiegoAndai and removed request for ZeeshanTamboli October 30, 2023 08:34

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 30, 2023

[Snackbar][Material You] convert .js files to .ts

c4f19f3

Best-Sardar force-pushed the material-you-add-snackbar-component branch from 3dea297 to c4f19f3 Compare November 2, 2023 11:39

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 2, 2023

[SnackbarContent][Material You] convert .js files to .ts

2f18792

Best-Sardar force-pushed the material-you-add-snackbar-component branch from 0a1090b to 65d4200 Compare November 3, 2023 19:44

mj12albert self-assigned this Nov 7, 2023

mj12albert self-requested a review November 7, 2023 07:26

mj12albert reviewed Nov 7, 2023

View reviewed changes

docs/data/material/components/snackbars/SnackbarMaterialYouPlayground.js Outdated Show resolved Hide resolved

mj12albert reviewed Nov 7, 2023

View reviewed changes

Best-Sardar force-pushed the material-you-add-snackbar-component branch from 65d4200 to 24b3794 Compare November 9, 2023 15:16

[Snackbar][Material You] apply md3 designs

5ad7d52

Best-Sardar force-pushed the material-you-add-snackbar-component branch from 24b3794 to 5ad7d52 Compare November 10, 2023 13:11

Best-Sardar requested a review from mj12albert November 10, 2023 13:17

Best-Sardar changed the title ~~[material-next][Snackbar] convert .js files to .ts~~ [material-next][Snackbar] apply MD3 designs Nov 16, 2023

mj12albert reviewed Nov 20, 2023

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Jan 3, 2024

DiegoAndai closed this Dec 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-next][Snackbar] apply MD3 designs #39631

[material-next][Snackbar] apply MD3 designs #39631

Best-Sardar commented Oct 27, 2023

mui-bot commented Oct 27, 2023 •

edited

Loading

ZeeshanTamboli commented Oct 30, 2023

DiegoAndai commented Oct 31, 2023

Best-Sardar commented Nov 1, 2023 •

edited

Loading

Best-Sardar commented Nov 2, 2023

DiegoAndai commented Nov 2, 2023

Best-Sardar commented Nov 2, 2023

DiegoAndai commented Nov 3, 2023

Best-Sardar commented Nov 3, 2023

mj12albert Nov 7, 2023

mj12albert left a comment

mj12albert Nov 7, 2023

mj12albert Nov 7, 2023

Best-Sardar Nov 9, 2023

mj12albert Nov 10, 2023

Best-Sardar Nov 10, 2023

Best-Sardar commented Nov 19, 2023

mj12albert commented Nov 20, 2023

mj12albert Nov 20, 2023 •

edited

Loading

mj12albert Nov 20, 2023

mj12albert Nov 20, 2023

mj12albert Nov 20, 2023 •

edited

Loading

mj12albert Nov 20, 2023

DiegoAndai commented Dec 13, 2024

		@@ -1,8 +1,11 @@
		import * as React from 'react';
		import { SxProps } from '@mui/system';

	import { SxProps } from '@mui/system';
	import { SxProps } from '../styles/Theme.types';

	borderRadius: (theme.vars \|\| theme).shape.borderRadius,
	borderRadius: tokens.shape.borderRadius,

	className: [classes.root, className],
	className: [classes.root],

[material-next][Snackbar] apply MD3 designs #39631

[material-next][Snackbar] apply MD3 designs #39631

Conversation

Best-Sardar commented Oct 27, 2023

mui-bot commented Oct 27, 2023 • edited Loading

Netlify deploy preview

Bundle size report

ZeeshanTamboli commented Oct 30, 2023

DiegoAndai commented Oct 31, 2023

Best-Sardar commented Nov 1, 2023 • edited Loading

Best-Sardar commented Nov 2, 2023

DiegoAndai commented Nov 2, 2023

Best-Sardar commented Nov 2, 2023

DiegoAndai commented Nov 3, 2023

Best-Sardar commented Nov 3, 2023

Choose a reason for hiding this comment

mj12albert left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Best-Sardar commented Nov 19, 2023

mj12albert commented Nov 20, 2023

mj12albert Nov 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mj12albert Nov 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DiegoAndai commented Dec 13, 2024

mui-bot commented Oct 27, 2023 •

edited

Loading

Best-Sardar commented Nov 1, 2023 •

edited

Loading

mj12albert Nov 20, 2023 •

edited

Loading

mj12albert Nov 20, 2023 •

edited

Loading