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.02k stars 32.3k forks source link

[material-ui][Divider] Add "wavy" variant #42354

Open TheOneTheOnlyJJ opened 6 months ago

TheOneTheOnlyJJ commented 6 months ago

Summary

In the official MD3 docs, on the Customizing Material page, a "wavy" variant of the Divider component is shown. Such a Divider variant is not currently supported in MUI. Given how it is not mentioned in the specs at all, maybe it could be wrapped in a separate component that offers specialised customization (wavelength function parameter customization?).

Examples

Here are the images from the official website: MD3_wavy_divider MD3_wavy_divider_in_title There's even a GIF where it can be seen how it reacts to theme colour changes: MD3_wavy_divider_GIF

Motivation

Given that such a variant of a Divider is showcased in the official documentation, I believe that it should also be supported in MUI once v7 (MD3 support) launches. It would make for more friendly/playful content breaks.

Search keywords: wavy divider variant material design 3 MD3

DiegoAndai commented 6 months ago

Thanks for the report @TheOneTheOnlyJJ. I added it to the v7 milestone 😊.