search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
94.13k stars 32.35k forks source link

[discussion] Preparing v6 #30660

Closed oliviertassinari closed 3 months ago

oliviertassinari commented 2 years ago

Edited by @DiegoAndai: Moved accepted ideas/issues into either the v6 milestone, the v7 milestone, or this list of brainstorm ideas

This is an umbrella issue that centralizes and lists all the potential improvements that we can consider in MUI Core v6. The potential improvements being listed here require breaking changes. We do not intend to ship v6 in 2022. We plan, as much as possible, to release the next major features in minor versions without breaking changes.

Big features

Other changes

For a detailed list of changes, please visit the Material UI: v6 milestone. If you're looking for a particular change, you can also search issues filtering by that milestone.

Promotions

MitchTalmadge commented 2 years ago

What change does this fall under?

https://github.com/mui/material-ui/blob/97427f0ca0ef29fd5f942080c959f6827ccb641f/packages/mui-material/src/Tooltip/Tooltip.js#L232

I'm curious for the reason behind removing PopperProps

Edit: It looks like it was added in https://github.com/mui/material-ui/commit/f98d52b1fcf9ab91b3e8d760bf59906c860fca49 so I believe the reason must be that componentsProps will consume both PopperProps and TransitionProps.

jeromeSH26 commented 1 year ago

Hi everyone, not sure this is the best place to post my request, but it seems to me that V6 of MUI should also bring some "standardization" in a way to manipulate the styles. Let me give you an example. Do not hesitate to move my comment elsewhere

I spent a couple of hours to find how to style the "a.active" in the theme (I'm using the Link of MUI and NavLink of react-router for your reference)

I came up with this solution for the "MuiLink" component in the createTheme:

     styleOverrides: {
        root: () => {
          return {
            borderColor: themePalette.SECONDARY_COLOR,
            "&:hover": { //<--- :hover is also working. the & is not mandatory
              borderColor: themePalette.SECONDARY_COLOR,
              color: "white",
            },
            "&.active": { // <--- .active is not working... Need the & 
              background: themePalette.THIRD_COLOR,
              color: themePalette.SECONDARY_COLOR,
              fontWeight: "bold",
            },
          };
        },
      },

That might be obvious for you BUT here is the trick: for hover, the & at the beginning of "&:hover" can be omitted, ":hover"is also applying the style correctly. however for the .active, the & is mandatory, ".active" doesn't apply the style, whereas "&.active" works as expected

I'm not very familiar with pure CSS, maybe in a CSS file this is also working this way, but for TS or JS, a standardization might be really powerful.

Anyway, your library is so great. Thks for your job and happy new year.

o-alexandrov commented 1 year ago

It would be great to know your thoughts and to know whether you consider:

  1. to attempt to make MUI framework agnostic or at least a layer that would be agnostic

    • Idk and don't have a clear proposal on how to achieve this
    • maybe, the way Material Web currently builds with lit (and lit having generators to create react/vue/etc. components) could prompt to similar approaches
      • at best, there would be no performance degradation between the current react components and generated ones

  2. use of CSS Modules w/ variables for the styles, instead of emotion (and/or other CSS-in-JS). This point could be a plan B for the point 1 or initial work in this direction

BrendanMayHRB commented 1 year ago

Removing all IE11 support is premature because it is still the one and only required browser for all Outlook Web Add-in for Outlook 2016 and Outlook 2019 volume licensed version.

According to Microsoft there is no alternative browser or way to move to edge for Outlook 2016 and for volume licensed Outlook 2019.

oliviertassinari commented 1 year ago

It would be great to know your thoughts and to know whether you consider:

@o-alexandrov I have added a new section for big feature ideas for v6.

  1. Considering https://twitter.com/olivtassinari/status/1619858999943516160, if we ever do this, I think that it will be by wrapping the React components into a light runtime, e.g. Preact. (I don't think that it would make sense to use web components inside or even expose them, I think that web component was invented to solve a problem that existed 10 years ago but doesn't really exist anymore).
  2. It's part of the list :)
o-alexandrov commented 1 year ago

How about simplifying MUI's codebase on how you do animation by adopting framer-motion, Transitions in particular?

chrisweb commented 1 year ago

@o-alexandrov I saw few days ago that the Chakra UI team noted in their 3.0 roadmap that they want to remove the framer motion dependency:

Remove dependency on framer-motion: We'll redesign the components to fit any motion library or native css animation.

their roadmap post is here: https://github.com/chakra-ui/chakra-ui/issues/7180

so maybe doing that would actually be the best solution, allow framer motion or any other motion library to replace (mui) motion, similar to how it is done for date libraries and probably similar to the idea of removing the dependency on emotion to allow other css-in-js libraries as alternatives (see style engine discussion https://github.com/mui/material-ui/issues/34826 that emerged after the nextjs / server components discussion started: https://github.com/mui/material-ui/issues/34896)

KasimAhmic commented 1 year ago

With regard to static CSS extraction, would/could this cover use cases where theme configs are loaded dynamically at runtime?

For example, I have an app that has a different color scheme based on the customer that it's deployed for and the theme config is fetched on page load and applied to the app. Would it be possible to fetch the theme configs at build time? Or maybe export the theme config variables as global CSS variables that can then be overridden at runtime?

andrei9669 commented 1 year ago

@KasimAhmic I don't see a reason why this couldn't work with CSS variables.

o-alexandrov commented 1 year ago

@oliviertassinari you might like to consider switching from MUI’s sx prop to UnoCSS’ attributify.

UnoCSS has build-time transformers such as the above and optimizations, such as this one.

CodAffection commented 1 year ago

When will v6's stable version be available? @oliviertassinari

nunesunil commented 1 year ago

Hi @oliviertassinari now the Next Js 13 app Routing is Stable, I cannot implement MUI 5 fully even if I use "Use Client". I am eagerly waiting for the MUI to get full support otherwise I have to go with Tailwind Css for my upcoming Project. So same question what all are asking as mine "When will MUI V6 will come with Next JS 13.4 Support".

oliviertassinari commented 1 year ago

I cannot implement MUI 5 fully even if I use "Use Client".

@nunesunil What prevents you to do such? I haven't experienced issues so far.

nunesunil commented 1 year ago

@oliviertassinari reply to above, I had a custom Theming for entire app and I want to wrap the entire tree in ThemeProvider. Where Can I apply It? as in RootLayout if we apply ThemeProvider by converting to Client side using "Use Client", MetaTag is not supported in Client side of Next 13. Is there any alternative?

rodrigonzalz commented 1 year ago

@nunesunil The recommended way is to wrap your ThemeProvider and make that one Client component, then place it on the RootLayout, which remains as RSC. I have done it for my ThemeProvider and any other providers that I had at the root and it works.

BitwiseAndrea commented 1 year ago

https://github.com/mui/material-ui/pull/31885 How is support for Gap looking?

MartinXPN commented 1 year ago

Are there plans to support server components (primarily with Next.js) in the initial v6.0 release (things like static CSS extraction)? Would be great to reduce the bundled javascript in some static pages.

deki23 commented 11 months ago

@MartinXPN

There is this: https://github.com/mui/material-ui/issues/38137

It is added to the v6 milestone

DiegoAndai commented 11 months ago

Hello everyone,

For a much smoother migration experience, we’ve decided to split the next year’s major into two releases. Generally speaking, it’s a new release strategy we’re adopting after hearing feedback from many of you about the v4 → v5 migration—more frequent and less breaking majors seem like the way to go. With that, here’s what you can expect for Material UI v6 and v7:

Check out the public Material UI GitHub project for an overview of this plan and the respective GitHub milestones for a detailed list of what will be included in each release. We also put out this announcement as a blog post!

As always, feel free to continue the discussion here or on a specific issue. Let us know if there’s anything else you’d like to see included in each major!

o-alexandrov commented 11 months ago

Can you please consider to drop React 17 support?

React 18 is released in May 2022, so it will be more than two years since the release of the last React's major by the time Material UI v6 is released.

ahmed-saber commented 11 months ago

Can you please consider adding the select options to accept any value <Option value=''>&nbsp;</Option> string | number | readonly string[] | undefined to <Option value=''>&nbsp;</Option> string | number | readonly string[] | undefined | null | boolean

To fix the issue we are facing with other libraries like react-hook-form

DiegoAndai commented 11 months ago

@o-alexandrov hi! Could you please open an RFC for that so we can discuss it? Please point out the benefits of removing support. We would also have to analyze the ratio of downloads between both versions.

@ahmed-saber hi! Is there a GitHub issue describing the issue you're facing?

Paul6552 commented 10 months ago

It would be great if mui could implement a component for numbers. I know there is already a github issue for that but this is already open for years: Number input component.

I don't know how a web application can be done without entering numbers. Therefore, I find this component to be one of the most important missing things from mui.

Besides: I'm in favor of keeping the name mui in the packages. Just because it doesn't "feel" like it fits, I don't think it's a legitimate reason to change it. Because of this change, every class would have to be attacked.

Thank you for your work

nameer commented 8 months ago

As of now, there is no way to globally set a scale factor in MUI. Material-UI supports this from Material-UI 3 (uncertain about versions earlier than 3).

I have been searching for a solution in MUI for a while, hoping for at least a one-time set workaround, but have not found anything that would apply the change to the entire theme.

I believe this could be a valuable addition that would assist in maintaining consistent website design across various displays.

DiegoAndai commented 8 months ago

Hey @nameer, thanks for reaching out!

Your suggestion seems to align with #29345, which we're doing for v7. Would you be willing to open an issue so we can add it to that milestone? That way, we can track the progress.

nameer commented 8 months ago

Hey @nameer, thanks for reaching out!

Your suggestion seems to align with #29345, which we're doing for v7. Would you be willing to open an issue so we can add it to that milestone? That way, we can track the progress.

Created https://github.com/mui/material-ui/issues/41579

JoseVSeb commented 4 months ago

Is the compatibility of pigment-css with MUI-X planned for the initial release of v6?

oliviertassinari commented 4 months ago

Is the compatibility of pigment-css with MUI-X planned for the initial release of v6?

@JoseVSeb This isn't really in our target. MUI X has about 20% of the use relative to Material UI. It's also almost has much work as in Material UI to support. So it makes more sense for us to first prove that the model works with Material UI before expending.

Studio384 commented 4 months ago

Will it be possible to use Material UI v6 in combination with MUI X at all (with or without MUI being on Pigment while MUI X still uses emotion) when it launches? From looking at the MUI X repository there doesn't seem to be any effort right now to support MUI v6. MUI X is currently a blocking issue for testing out the v6 release. We used to follow along with alphas and betas in a test branch to not have all breaking changes come in at once, but that hasn't been possible with v6 in combination with MUI X.

oliviertassinari commented 4 months ago

But that hasn't been possible with Material UI v6 in combination with MUI X

@Studio384 What issue did you face?

Will it be possible to use Material UI v6 in combination with MUI X when it launches?

I don't know. The interdependency rules we have between projects https://mui-org.notion.site/Introduction-5933bc8bccf544c7aca78d0033ded787 won't really answer your question. We say "Upstream (Material UI) and Downstream (MUI X) are responsible for Downstream adoption of upstream" and "In the short-term, Downstream (MUI X) decides when they adopt the upstream changes (Material UI) but it can't take more than one major cycle".

Studio384 commented 4 months ago

@Studio384 What issue did you face?

MUI X v7 currently requires MUI v5 and only v5. So from what I get here, you're saying it might take until MUI v7 before MUI X supports MUI v6?

endaquigley commented 4 months ago

Is MUI v6 with Pigment CSS compatible with Remix?

It's not listed as a supported framework even though Remix is just a Vite plugin these days: https://next.mui.com/material-ui/migration/migrating-to-pigment-css

I can only seem to get Pigment CSS working when SSR is disabled: https://stackblitz.com/edit/remix-run-remix-aroqz5

DanailH commented 4 months ago

Hi, @Studio384 I'm confirming that MUI X v7 will support Material UI v6 once there is a stable release.

gaetansnl commented 4 months ago

hello @oliviertassinari , just tried the beta and followed the upgrade guide on a new nextjs project. Seems pigment is working but all material ui components are still using emotion. I also built material-ui repo and looked at the demo app, it works and mui uses pigment. So I'm probably missing something. Is there a way to completely remove emotion and prevent it from being loaded unintentionally?

JoseVSeb commented 4 months ago

Seems pigment is working but all material ui components are still using emotion.

I have been facing this as well. pigment works fine. but it's not being used for mui components. they still rely on emotion at runtime. an example would be nice.

rossipedia commented 3 months ago

This is what I had to do to get things working with @mui/material and Pigment and vite:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    pigment({
      theme: extendTheme(...),
      transformLibraries: ['@mui/material'],
    }),
    react(),
  ],
});

After that the MUI components would start picking up the Theme customizations using Pigment.

Sorry, I don't use NextJS so I don't know what the same approach there would look like.

JoseVSeb commented 3 months ago 
transformLibraries: ['@mui/material'],

That's what I was missing. Thanks.

DiegoAndai commented 3 months ago

Thanks, @gaetansnl, @rossipedia, and @JoseVSeb, for pointing out this issue; this was indeed missing in the guide. We're adding it: https://github.com/mui/material-ui/pull/43217

xml commented 3 months ago

Thanks all for this amazing project. Possible I'm doing something wrong, but when I add that transformLibraries config to a new project, with Vite 5.4 and MUI beta 5, the server drowns in hundreds of errors, such as:

[vite] Pre-transform error: /node_modules/@mui/material/StepConnector/StepConnector.js: Cannot read properties of undefined (reading 'palette')

I removed the ThemeProvider first. I have not customized a theme, so that's not present.

If any additional information would be helpful, I'm happy to provide.

sdriffill-tm commented 3 months ago

I'm having issues using MUI v6 Beta w/ Pigment CSS in a Remix project. I'm getting error:

[vite] Error when evaluating SSR module /app/root.tsx: failed to import "@mui/material"
|- /home/projects/github-ctaqne-71kwv1/node_modules/@mui/material/index.js:9
import * as colors from './colors';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I've taken a popular template kiliman/remix-vite-mui and followed all steps in the migration path to replace emotion with pigment, including using the updated instructions for the next beta release

Here's my upgraded version of the template - hopefully something I've just done wrong, and if so any pointers on how to fix would be greatly appreciated!

endaquigley commented 3 months ago

I'm having issues using MUI v6 Beta w/ Pigment CSS in a Remix project. I'm getting error:

[vite] Error when evaluating SSR module /app/root.tsx: failed to import "@mui/material"
|- /home/projects/github-ctaqne-71kwv1/node_modules/@mui/material/index.js:9
import * as colors from './colors';
^^^^^^

SyntaxError: Cannot use import statement outside a module

I've taken a popular template kiliman/remix-vite-mui and followed all steps in the migration path to replace emotion with pigment, including using the updated instructions for the next beta release

Here's my upgraded version of the template - hopefully something I've just done wrong, and if so any pointers on how to fix would be greatly appreciated!

Same error with my Remix app. I wasn't sure if it was a Remix or Vite issue at the time.

rossipedia commented 3 months ago

@sdriffill-tm @endaquigley I dunno if you can call this a full fledged "starter", but here's a Remix repo I set up where I got MUI6 and Pigment working:

https://github.com/rossipedia/remix-mui-6

Maybe it can help get y'all unstuck :+1:

endaquigley commented 3 months ago

@rossipedia thanks for your help. I noticed that your components aren't rendering as expected either:

Screenshot 2024-08-19 at 14 56 10

I'm guessing that's related to this comment https://github.com/mui/material-ui/issues/30660#issuecomment-2267596805

DiegoAndai commented 3 months ago

Hey @xml, @sdriffill-tm, and @endaquigley! Thanks for the reports. May I ask you to create separate issues for these? This way, it will be easier to track, debug, and respond to 😊

rossipedia commented 3 months ago

@endaquigley wow you're right. it was working perfectly with beta 2 🤔. It also works as expected in Production, it's just npm run dev that's not working right. Hmmm....

DiegoAndai commented 3 months ago

Material UI v6 is stable! 🚀

Thanks, everyone, for contributing to the discussion. Hopefully, you can try the new major and provide feedback. If you have any issues or suggestions, please create separate issues to track those 😊.

github-actions[bot] commented 3 months ago

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.