diff --git a/.eslintrc.js b/.eslintrc.js index ecb0897bb19702..970fd1def68304 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -226,7 +226,7 @@ module.exports = { rules: { 'material-ui/no-hardcoded-labels': [ 'error', - { allow: ['MUI', 'Twitter', 'GitHub', 'StackOverflow'] }, + { allow: ['MUI', 'Twitter', 'GitHub', 'Stack Overflow'] }, ], }, }, diff --git a/.github/workflows/support-stackoverflow.yml b/.github/workflows/support-stackoverflow.yml index 0f839c43657cd9..90c6915a2a5f3e 100644 --- a/.github/workflows/support-stackoverflow.yml +++ b/.github/workflows/support-stackoverflow.yml @@ -1,5 +1,5 @@ # Configuration for support-requests - https://github.com/dessant/support-requests -name: 'Support StackOverflow' +name: 'Support Stack Overflow' on: issues: @@ -16,7 +16,7 @@ jobs: with: github-token: ${{ secrets.GITHUB_TOKEN }} # Label used to mark issues as support requests - support-label: 'support: StackOverflow' + support-label: 'support: Stack Overflow' # Comment to post on issues marked as support requests. Add a link # to a support page, or set to `false` to disable issue-comment: | @@ -27,7 +27,7 @@ jobs: For support, please check out https://mui.com/getting-started/support/. Thanks! - If you have a question on StackOverflow, you are welcome to link to it here, it might help others. + If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened. close-issue: true lock-issue: false diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a3e53bb14821a..e225435d80b96e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,57 @@ # [Versions](https://mui.com/versions/) +## 5.9.1 + + + +_Jul 18, 2022_ + +A big thanks to the 17 contributors who made this release possible. This release is mainly about 🐛 bug fixes and 📚 documentation improvements + +### `@mui/material@5.9.1` + +- ​[Autocomplete] Fix disabling component crashing when focused (#31313) @mzedel +- ​[Grid] Avoid scrollbar in demo (#33527) @oliviertassinari +- ​[Slider] Fix transition of tooltips on vertical slider (#33009) @abhinav-22-tech +- ​[TouchRipple] Fix crash on android where `event.touches` are an empty array (#32974) @lukeggchapman + +### `@mui/system@5.9.1` + +- ​[system] Add flag to switch negative margin approach in Grid (#33484) @siriwatknp +- ​[system] Remove needless optional chaining check in `createEmptyBreakpointObject` method (#33482) @ZeeshanTamboli + +### `@mui/base@5.0.0-alpha.90` + +- ​[base] Export types used by components' props (#33522) @michaldudak +- ​[base] Add missing type definitions in useControllableReducer (#33496) @michaldudak +- ​[SelectUnstyled] Do not call onChange unnecessarily (#33408) @michaldudak + +### `@mui/lab@5.0.0-alpha.91` + +- ​[TimelineDot] Add TimelineDotPropsColorOverrides interface to extend color options (#33466) @lolaignatova + +### Docs + +- ​[docs] Add note about CssBaseline in the dark mode page (#33108) @GabrielaLokelani +- ​[docs] Fix typos in the Interoperability page (#33273) @HexM7 +- ​[docs] Improve the `useTheme` documentation (#33508) @rickstaa +- ​[docs] Fix 301 redirections (#33521) @oliviertassinari +- ​[docs] Link the same codesandbox as in the docs (#33472) @oliviertassinari +- ​[docs] Fix copy search false positives (#33438) @oliviertassinari +- ​[docs] Fix typo (#33520) @aravindpanicker +- ​[docs] Update Tailwind docs to include step about updating popover containers (#33315) @ajhenry +- ​[docs] Add yarn command for Roboto font in Material UI's typography.md (#33485) @anthonypz +- ​[docs] Add new community content to the Material UI Learn page (#32927) @Nikhilthadani +- ​[examples] Change createEmotionCache to use `insertionPoint` (#32104) @ANTARES-KOR +- ​[examples] Fix error in Next.js example with @mui/styles (#33456) @paustria + +### Core + +- ​[core] Cleanup experiments (#33547) @siriwatknp +- ​[core] Update CHANGELOG to include pickers breaking change (#33486) @siriwatknp + +All contributors of this release in alphabetical order: @abhinav-22-tech, @ajhenry, @ANTARES-KOR, @anthonypz, @aravindpanicker, @GabrielaLokelani, @HexM7, @lolaignatova, @lukeggchapman, @michaldudak, @mzedel, @Nikhilthadani, @oliviertassinari, @paustria, @rickstaa, @siriwatknp, @ZeeshanTamboli + ## 5.9.0 @@ -2012,7 +2064,7 @@ A big thanks to the 16 contributors who made this release possible. Here are som - ​[docs] Sync translations with Crowdin (#30067) @l10nbot - ​[docs] Fix link on "Custom variables" section in the Theming page #30100 @danilo-leal - ​[docs] Fix justifyContent option in the Grid interactive demo (#30117) @danilo-leal -- ​[docs] Add tip to help access the docs of a previous version when finding answers in StackOverflow (#30101) @danilo-leal +- ​[docs] Add tip to help access the docs of a previous version when finding answers in Stack Overflow (#30101) @danilo-leal - ​[docs] Fix import example inside Unstyled Backdrop section (#30098) @TheodosiouTh - ​[website] Column pinning and Tree data are out (#30136) @oliviertassinari - ​[survey] Remove survey promotion items (#30122) @danilo-leal @@ -2093,7 +2145,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som - ​[docs] Update nextjs-typescript-example (#29974) @huydhoang - ​[docs] Add missing global state classes to API docs generator (#29945) @michaldudak - ​[docs] Fix benchmarks folder link (#29981) @fourjr -- ​[docs] Improve wording in StackOverflow section of support page (#29956) @ronwarner +- ​[docs] Improve wording in Stack Overflow section of support page (#29956) @ronwarner - ​[docs] Remove Black Friday sale notification (#29936) @mbrookes - ​[examples] Fix typos in the Remix example (#30071) @MichaelDeBoey - ​[examples] Add Remix example (#29952) @mnajdova @@ -2106,7 +2158,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som ### Core - ​[core] Batch small changes (#30042) @oliviertassinari -- ​[core] Transition to a new StackOverflow tag (#29967) @oliviertassinari +- ​[core] Transition to a new Stack Overflow tag (#29967) @oliviertassinari All contributors of this release in alphabetical order: @chao813, @daniel-sachs, @danilo-leal, @Domino987, @eduardomcv, @flaviendelangle, @fourjr, @genzyy, @hbjORbj, @huydhoang, @jayeclark, @jonathanrtuck, @kkorach, @l10nbot, @mbrookes, @MichaelDeBoey, @michaldudak, @mnajdova, @oliviertassinari, @ronwarner, @Semigradsky, @siriwatknp, @tasugi, @ThewBear, @ZeeshanTamboli @@ -5792,7 +5844,7 @@ A big thanks to the 30 contributors who made this release possible. Here are som #### Breaking changes - ​[types] Rename the exported `Omit` type in `@material-ui/types`. (#24795) @petyosi - The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this StackOverflow answer for further details](https://stackoverflow.com/a/57103940/1009797). + The module is now called `DistributiveOmit`. The change removes the confusion with the built-in `Omit` helper introduced in TypeScript v3.5. The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. [See this Stack Overflow answer for further details](https://stackoverflow.com/a/57103940/1009797). ```diff -import { Omit } from '@material-ui/types'; diff --git a/benchmark/package.json b/benchmark/package.json index 8b438da439abb7..32a07eeb9c311b 100644 --- a/benchmark/package.json +++ b/benchmark/package.json @@ -15,9 +15,9 @@ "@emotion/react": "^11.9.3", "@emotion/styled": "^11.9.3", "@mdx-js/react": "^2.1.2", - "@mui/material": "^5.9.0", - "@mui/styles": "^5.9.0", - "@mui/system": "^5.9.0", + "@mui/material": "^5.9.1", + "@mui/styles": "^5.9.1", + "@mui/system": "^5.9.1", "@styled-system/css": "^5.1.5", "benchmark": "^2.1.4", "playwright": "^1.17.1", diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx index ff4af610dbe6a6..f997a818bc04d9 100644 --- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx +++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx @@ -1,7 +1,11 @@ import * as React from 'react'; -import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; +import ButtonUnstyled, { + buttonUnstyledClasses, + ButtonUnstyledTypeMap, +} from '@mui/base/ButtonUnstyled'; import { styled } from '@mui/system'; import Stack from '@mui/material/Stack'; +import { OverridableComponent } from '@mui/types'; const blue = { 500: '#007FFF', @@ -38,7 +42,7 @@ const CustomButton = styled(ButtonUnstyled)` opacity: 0.5; cursor: not-allowed; } -`; +` as OverridableComponent; export default function UnstyledButtonsDisabledFocusCustom() { return ( diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx index 231bd8922e1711..af6a1c714df2fc 100644 --- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx +++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx @@ -1,7 +1,11 @@ import * as React from 'react'; -import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled'; +import ButtonUnstyled, { + buttonUnstyledClasses, + ButtonUnstyledTypeMap, +} from '@mui/base/ButtonUnstyled'; import { styled } from '@mui/system'; import Stack from '@mui/material/Stack'; +import { OverridableComponent } from '@mui/types'; const blue = { 500: '#007FFF', @@ -38,7 +42,7 @@ const CustomButton = styled(ButtonUnstyled)` opacity: 0.5; cursor: not-allowed; } -`; +` as OverridableComponent; export default function UnstyledButtonsSpan() { return ( diff --git a/docs/data/base/components/input/InputAdornments.js b/docs/data/base/components/input/InputAdornments.js index 6f0cf8e7d2c596..745c367e8dd68f 100644 --- a/docs/data/base/components/input/InputAdornments.js +++ b/docs/data/base/components/input/InputAdornments.js @@ -150,7 +150,6 @@ export default function InputAdornments() { aria-label="toggle password visibility" onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword} - edge="end" > {values.showPassword ? : } diff --git a/docs/data/base/components/input/InputAdornments.tsx b/docs/data/base/components/input/InputAdornments.tsx index 673e595c0f33a9..b8f1ef38771c82 100644 --- a/docs/data/base/components/input/InputAdornments.tsx +++ b/docs/data/base/components/input/InputAdornments.tsx @@ -151,7 +151,6 @@ export default function InputAdornments() { aria-label="toggle password visibility" onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword} - edge="end" > {values.showPassword ? : } diff --git a/docs/data/base/components/select/UnstyledSelectSimple.tsx b/docs/data/base/components/select/UnstyledSelectSimple.tsx index 28cdc0baa39fa8..faa688904ff016 100644 --- a/docs/data/base/components/select/UnstyledSelectSimple.tsx +++ b/docs/data/base/components/select/UnstyledSelectSimple.tsx @@ -126,7 +126,7 @@ const StyledPopper = styled(PopperUnstyled)` const CustomSelect = React.forwardRef(function CustomSelect( props: SelectUnstyledProps, - ref: React.ForwardedRef, + ref: React.ForwardedRef, ) { const components: SelectUnstyledProps['components'] = { Root: StyledButton, @@ -137,7 +137,7 @@ const CustomSelect = React.forwardRef(function CustomSelect( return ; }) as ( - props: SelectUnstyledProps & React.RefAttributes, + props: SelectUnstyledProps & React.RefAttributes, ) => JSX.Element; export default function UnstyledSelectSimple() { diff --git a/docs/data/material/components/alert/alert.md b/docs/data/material/components/alert/alert.md index baae5e87dfdb5c..fa7f6fbc51cd94 100644 --- a/docs/data/material/components/alert/alert.md +++ b/docs/data/material/components/alert/alert.md @@ -69,7 +69,7 @@ You can prevent this by adding `bgcolor: 'background.paper'` to the[`sx` prop](/ ## Toast -You can use the Snackbar to [display a toast](/material-ui/react-snackbar/#customized-snackbars) with the Alert. +You can use the Snackbar to [display a toast](/material-ui/react-snackbar/#customization) with the Alert. ## Color diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md index 718b0ceed2773a..f15344e7da9d35 100644 --- a/docs/data/material/components/tooltips/tooltips.md +++ b/docs/data/material/components/tooltips/tooltips.md @@ -21,7 +21,7 @@ When activated, Tooltips display a text label identifying an element, such as a ## Positioned tooltips -The `Tooltip` has 12 **placements** choice. +The `Tooltip` has 12 **placement** choices. They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction. {{"demo": "PositionedTooltips.js"}} diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md index 260d851621e700..833f03ada499d2 100644 --- a/docs/data/material/customization/dark-mode/dark-mode.md +++ b/docs/data/material/customization/dark-mode/dark-mode.md @@ -7,7 +7,7 @@ You can make your application use the dark theme as the default—regardless of the user's preference—by adding `mode: 'dark'` to the `createTheme` helper: ```js -import { ThemeProvider, createTheme } from '@mui/material/styles'; +import { ThemeProvider, createTheme, CssBaseline } from '@mui/material/styles'; const darkTheme = createTheme({ palette: { @@ -18,6 +18,7 @@ const darkTheme = createTheme({ function App() { return ( +
This app is using the dark mode
 ); @@ -30,6 +31,8 @@ Adding `mode: 'dark'` to the `createTheme` helper modifies several palette value {{"demo": "DarkTheme.js", "bg": "inline", "hideToolbar": true}} +Adding `` inside of the `` component will also enable dark mode for the app's background. + :::info Note: setting the dark mode this way only works if you are using [the default palette](/material-ui/customization/default-theme/). If you have a custom palette, you need to make sure that you have the correct values based on the `mode`. The next section explain how to do this. ::: diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md index a41dc1d2beb4ea..a2014142297b08 100644 --- a/docs/data/material/customization/theming/theming.md +++ b/docs/data/material/customization/theming/theming.md @@ -77,7 +77,16 @@ The community has built great tools to build a theme: ## Accessing the theme in a component -You [can access](/system/styles/advanced/#accessing-the-theme-in-a-component) the theme variables inside your React components. +You can access the theme variables inside your functional React components using the `useTheme` hook: + +```jsx +import { useTheme } from '@mui/material/styles'; + +function DeepChild() { + const theme = useTheme(); + return {`spacing ${theme.spacing}`}; +} +``` ## Nesting the theme diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md index c9916f4fb260c9..48ce3bbee60f3b 100644 --- a/docs/data/material/getting-started/faq/faq.md +++ b/docs/data/material/getting-started/faq/faq.md @@ -12,7 +12,7 @@ There are many ways to support MUI: Follow us on [Twitter](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends. - **Give us feedback**. Tell us what we're doing well or where we can improve. Please upvote (👍) the issues that you are the most interested in seeing solved. - **Help new users**. You can answer questions on - [StackOverflow](https://stackoverflow.com/questions/tagged/mui). + [Stack Overflow](https://stackoverflow.com/questions/tagged/mui). - **Make changes happen**. - Edit the documentation. Every page has an "EDIT THIS PAGE" link in the top right. - Report bugs or missing features by [creating an issue](https://github.com/mui/material-ui/issues/new). diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index 39086fe1582bc8..b067f9869a2ca7 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -27,7 +27,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293 The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. - **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. - You can count on community's support for years to come (e.g. [StackOverflow](https://insights.stackoverflow.com/trends?tags=material-ui)). + You can count on community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). ## Material UI vs. MUI Base diff --git a/docs/data/material/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md index 66cb042eb23522..da0b8908e5137d 100644 --- a/docs/data/material/getting-started/support/support.md +++ b/docs/data/material/getting-started/support/support.md @@ -6,17 +6,17 @@ The community is your first stop for questions and advice about the framework. Welcome to the community! -### StackOverflow +### Stack Overflow For crowdsourced answers from expert MUI developers in our community. -StackOverflow is also visited from time to time by the maintainers of MUI. +Stack Overflow is also visited from time to time by the maintainers of MUI. [Post a question](https://stackoverflow.com/questions/tagged/mui) :::info 💡 **Tip**: -If you're using an older version and use external resources (such as StackOverflow) for help with it, you may find answers with links that direct you to content that no longer exists in the latest version of the documentation. To easily access any previous version of the docs, simply add `v[number]` at the beginning of the URL, like so: [v4.mui.com](https://v4.mui.com/). +If you're using an older version and use external resources (such as Stack Overflow) for help with it, you may find answers with links that direct you to content that no longer exists in the latest version of the documentation. To easily access any previous version of the docs, simply add `v[number]` at the beginning of the URL, like so: [v4.mui.com](https://v4.mui.com/). ::: @@ -59,19 +59,24 @@ Receive the latest news on MUI. Find details on the [supported versions](/versions/#supported-versions). -## Professional support (premium) +## Paid support ### Pro/Premium plans MUI X comes in [three plans](https://mui.com/pricing/). -The support available on the Community plan is mostly made possible thanks to people like you: the community. It's described in more detail in the above section. The maintainers of MUI focuses on solving the root issues, not direct support. +The support available under the Community plan is made possible thanks to people like you: the community. +This is described in more detail in the section above. +MUI X maintainers focus on solving root issues rather than offering direct support to the community at large. -The Pro plan allows developers to license extra features that are challenging to find in the OSS space. -The maintainers of MUI provide support for these paid features. -They aim for a similar quality of experience to the one provided by the community on the open-source modules -however no SLAs are provided. +The paid plans offer developers advanced components and extra features that are challenging to find in OSS. +To provide a similar quality of experience to the one provided by the community for MIT licensed code, +the developers of MUI X provide support for the advanced components only. +Technical support for MUI Core components is **not** included. -The Premium plan goes one step further by providing SLAs on the quality of the support. +The Premium plan provides developers with the highest priority for support tickets. +No SLAs are provided yet; it's coming. + +Please visit [the MUI X Support page](https://mui.com/x/introduction/support/#technical-support) for more detailed information on technical support. ### Tidelift subscription diff --git a/docs/data/material/guides/interoperability/interoperability.md b/docs/data/material/guides/interoperability/interoperability.md index cf97928d877f02..1006f9b7761ad0 100644 --- a/docs/data/material/guides/interoperability/interoperability.md +++ b/docs/data/material/guides/interoperability/interoperability.md @@ -885,7 +885,6 @@ it's a peer dependency of `@mui/material`. ::: :::warning -⚠️ For [Storybook](https://storybook.js.org): As of writing this lines storybook still uses by default emotion 10. -Material UI and TSS runs emotion 11 so there is [some changes](https://github.com/InseeFrLab/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32) -to be made to your `.storybook/main.js` to make it uses emotion 11. +For [Storybook](https://storybook.js.org): At the time of this writing, Storybook still uses Emotion 10 by default. +Material UI and TSS use Emotion 11, so you must make [some changes](https://github.com/InseeFrLab/onyxia-ui/blob/324de62248074582b227e584c53fb2e123f5325f/.storybook/main.js#L31-L32) to `.storybook/main.js` in order to use Storybook with Material UI. ::: diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md index 9802223d147e95..e33af63a922a7a 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes.md @@ -1962,7 +1962,7 @@ This change removes the confusion with the built-in `Omit` helper introduced in The built-in `Omit`, while similar, is non-distributive. This leads to differences when applied to union types. -[See this StackOverflow answer for further details](https://stackoverflow.com/a/57103940/1009797). +[See this Stack Overflow answer for further details](https://stackoverflow.com/a/57103940/1009797). ```diff -import { Omit } from '@mui/types'; diff --git a/docs/data/system/components/grid/grid.md b/docs/data/system/components/grid/grid.md index 56bba283544414..84a4be28f6620c 100644 --- a/docs/data/system/components/grid/grid.md +++ b/docs/data/system/components/grid/grid.md @@ -128,8 +128,8 @@ If you specify custom breakpoints to the theme, you can use those names as grid The custom breakpoints affect both the size and offset props: ```diff -- -+ +- ++ ``` ::: diff --git a/docs/package.json b/docs/package.json index 0dec3e48b54d76..5ffb15fc196cc9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -31,17 +31,17 @@ "@fortawesome/fontawesome-svg-core": "^6.1.1", "@fortawesome/free-solid-svg-icons": "^6.1.1", "@fortawesome/react-fontawesome": "^0.2.0", - "@mui/base": "5.0.0-alpha.89", - "@mui/docs": "^5.9.0", + "@mui/base": "5.0.0-alpha.90", + "@mui/docs": "^5.9.1", "@mui/icons-material": "^5.8.4", - "@mui/joy": "5.0.0-alpha.36", - "@mui/lab": "5.0.0-alpha.90", - "@mui/material": "^5.9.0", - "@mui/material-next": "6.0.0-alpha.44", + "@mui/joy": "5.0.0-alpha.37", + "@mui/lab": "5.0.0-alpha.91", + "@mui/material": "^5.9.1", + "@mui/material-next": "6.0.0-alpha.45", "@mui/styled-engine": "^5.8.7", "@mui/styled-engine-sc": "^5.8.0", - "@mui/styles": "^5.9.0", - "@mui/system": "^5.9.0", + "@mui/styles": "^5.9.1", + "@mui/system": "^5.9.1", "@mui/types": "^7.1.4", "@mui/x-data-grid": "^5.13.0", "@mui/x-data-grid-generator": "^5.13.0", diff --git a/docs/pages/about.tsx b/docs/pages/about.tsx index 93022fd7b1b4ac..5cf11db08108ca 100644 --- a/docs/pages/about.tsx +++ b/docs/pages/about.tsx @@ -764,7 +764,7 @@ function AboutContent() {
  • Answer questions on{' '} - StackOverflow. + Stack Overflow.
    • - ); -}; - -const props = { - size: ['sm', 'md', 'lg'], - color: ['primary', 'danger', 'info', 'success', 'warning', 'neutral'], - variant: ['solid', 'outlined', 'soft'], -} as const; - -export default function JoyAvatar() { - const [anchorEl, setAnchorEl] = React.useState(null); - return ( - - - - - - - - - - - +3 - - - +3 - - - - - - - - - +3 - - - - - - +3 - - - +3 - - - - - - - - - - - +3 - - - - - - +3 - - - - - - - - alert('clicked')} - sx={{ - borderRadius: '50%', - marginInlineStart: 'var(--Avatar-marginInlineStart)', - boxShadow: 'var(--Avatar-ring)', - }} - > - - - - - - - - setAnchorEl(event.currentTarget)} - onMouseLeave={() => setAnchorEl(null)} - > - - - - - - Show all - - - Add more people - - - Go to settings - - - - - - - - - - - - - - alert('clicked')} - sx={{ - borderRadius: '50%', - marginInlineStart: 'var(--Avatar-marginInlineStart)', - boxShadow: 'var(--Avatar-ring)', - }} - > - - - - - - - - - - +99 - - - - - - - - +99 - - - - - {Object.entries(props).map(([propName, propValue]) => ( - - {propName} - {propValue.map((value) => ( - - - {value && ( - - {value} - - )} - - ))} - - ))} - - - - ); -} diff --git a/docs/pages/experiments/joy/badge.tsx b/docs/pages/experiments/joy/badge.tsx deleted file mode 100644 index 342b3a0adf3461..00000000000000 --- a/docs/pages/experiments/joy/badge.tsx +++ /dev/null @@ -1,321 +0,0 @@ -import * as React from 'react'; -import Moon from '@mui/icons-material/DarkMode'; -import Favorite from '@mui/icons-material/Favorite'; -import Sun from '@mui/icons-material/LightMode'; -import MailIcon from '@mui/icons-material/Mail'; -import MoreHoriz from '@mui/icons-material/MoreHoriz'; -import Share from '@mui/icons-material/Share'; -import Avatar from '@mui/joy/Avatar'; -import Badge from '@mui/joy/Badge'; -import Box from '@mui/joy/Box'; -import Button from '@mui/joy/Button'; -import List from '@mui/joy/List'; -import ListItem from '@mui/joy/ListItem'; -import ListItemButton from '@mui/joy/ListItemButton'; -import ListItemDecorator from '@mui/joy/ListItemDecorator'; -import IconButton from '@mui/joy/IconButton'; -import Sheet from '@mui/joy/Sheet'; -import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; -import Typography from '@mui/joy/Typography'; -import Redeem from '@mui/icons-material/Redeem'; -import Notifications from '@mui/icons-material/Notifications'; -import ViewCompact from '@mui/icons-material/ViewCompact'; -import ViewKanban from '@mui/icons-material/ViewKanban'; -import ArrowDropDown from '@mui/icons-material/ArrowDropDown'; - -const ColorSchemePicker = () => { - const { mode, setMode } = useColorScheme(); - const [mounted, setMounted] = React.useState(false); - React.useEffect(() => { - setMounted(true); - }, []); - if (!mounted) { - return null; - } - - return ( - - ); -}; - -const props = { - size: ['sm', 'md', 'lg'], - color: ['primary', 'danger', 'info', 'success', 'warning', 'neutral'], - variant: ['solid', 'outlined', 'soft'], -} as const; - -const InvisibleBadgeButton = () => { - const [invisible, setInvisible] = React.useState(true); - return ( - - setInvisible((bool) => !bool)}> - - - - ); -}; - -const InvisibleBadgeIcon = () => { - const [invisible, setInvisible] = React.useState(true); - return ( - setInvisible((bool) => !bool)}> - - - - - ); -}; - -export default function JoyBadge() { - return ( - - - - - - {/* Examples */} - - {(['primary', 'danger', 'info', 'success', 'warning', 'neutral'] as const).map( - (color) => ( - - - - ), - )} - - - - {[{ badgeContent: '1', name: 'Jon Doe' }].map(({ badgeContent, name }) => ( - - - - - {name} - - - - - - - - - - - - - - - ))} - - theme.vars.palette.background.level1, - }} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Backlog - - - - - - - - - - - - - View 2 - - - - - - - {/* Props */} - - {Object.entries(props).map(([propName, propValue]) => ( - - {propName} - {propValue.map((value, index) => ( - - - - - {value !== undefined && ( - - {`${value}`} - - )} - - ))} - - ))} - - {'anchorOrigin'} - {( - [ - { vertical: 'top', horizontal: 'right' }, - { vertical: 'top', horizontal: 'left' }, - { vertical: 'bottom', horizontal: 'right' }, - { vertical: 'bottom', horizontal: 'left' }, - ] as const - ).map((value, index) => ( - - - - - {value !== undefined && ( - - {`vertical: ${value.vertical}, horizontal: ${value.horizontal}`} - - )} - - ))} - - - Invisible - - - - - Dot - - - - - - - - - - - - - - ); -} diff --git a/docs/pages/experiments/joy/button.tsx b/docs/pages/experiments/joy/button.tsx deleted file mode 100644 index 070c4252c1d581..00000000000000 --- a/docs/pages/experiments/joy/button.tsx +++ /dev/null @@ -1,700 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/joy/Box'; -import Button from '@mui/joy/Button'; -// import IconButton from '@mui/joy/IconButton'; -// import Typography from '@mui/joy/Typography'; -import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; -import Moon from '@mui/icons-material/DarkMode'; -import Sun from '@mui/icons-material/LightMode'; -// import Add from '@mui/icons-material/Add'; -// import DeleteForever from '@mui/icons-material/DeleteForeverOutlined'; -// import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; -// import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown'; -// import ThumbUp from '@mui/icons-material/ThumbUp'; -// import ArrowDropDown from '@mui/icons-material/ArrowDropDown'; - -const ColorSchemePicker = () => { - const { mode, setMode } = useColorScheme(); - const [mounted, setMounted] = React.useState(false); - React.useEffect(() => { - setMounted(true); - }, []); - if (!mounted) { - return null; - } - - return ( - - ); -}; - -export default function JoyButton() { - // const buttonProps = { - // variant: ['plain', 'outlined', 'soft', 'solid'], - // color: ['primary', 'neutral', 'danger', 'info', 'success', 'warning'], - // size: ['sm', 'md', 'lg'], - // } as const; - return ( - - - - - - {/* - {Object.entries(buttonProps).map(([propName, propValue]) => ( - - - {propName} - - {propValue.map((value) => ( - - - - {value || 'default'} - - - ))} - - ))} - - - icon - - - - - - - 40x40 - - - - - - - - 32x32 - - - - - - - - 48x48 - - - - - - - - - - - - start & end icon - - - - - - - - - - */} - {/* Danilo's not smart iteration below 😅 - wanted to see each color with every variant. */} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/pages/experiments/joy/card.tsx b/docs/pages/experiments/joy/card.tsx deleted file mode 100644 index 26228896d0c9c6..00000000000000 --- a/docs/pages/experiments/joy/card.tsx +++ /dev/null @@ -1,795 +0,0 @@ -import * as React from 'react'; -import { GlobalStyles } from '@mui/system'; -import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; -import AspectRatio from '@mui/joy/AspectRatio'; -import AvatarGroup from '@mui/joy/AvatarGroup'; -import Avatar from '@mui/joy/Avatar'; -import Box from '@mui/joy/Box'; -import Button from '@mui/joy/Button'; -import Chip from '@mui/joy/Chip'; -import Card from '@mui/joy/Card'; -import CardCover from '@mui/joy/CardCover'; -import CardContent from '@mui/joy/CardContent'; -import CardOverflow from '@mui/joy/CardOverflow'; -import IconButton from '@mui/joy/IconButton'; -import Typography from '@mui/joy/Typography'; -import Sheet from '@mui/joy/Sheet'; -import Link from '@mui/joy/Link'; -import Moon from '@mui/icons-material/DarkMode'; -import Sun from '@mui/icons-material/LightMode'; -import BookmarkAdd from '@mui/icons-material/BookmarkAddOutlined'; -import Add from '@mui/icons-material/AddOutlined'; -import StarBorder from '@mui/icons-material/StarBorder'; -import MoreHoriz from '@mui/icons-material/MoreHoriz'; -import LinkIcon from '@mui/icons-material/Link'; -import Comment from '@mui/icons-material/Comment'; -import PlayArrow from '@mui/icons-material/PlayArrow'; -import Download from '@mui/icons-material/Download'; -import Favorite from '@mui/icons-material/Favorite'; -import Share from '@mui/icons-material/Share'; -import Apps from '@mui/icons-material/Apps'; -import DateRange from '@mui/icons-material/DateRange'; -import LocationOn from '@mui/icons-material/LocationOnOutlined'; -import Visibility from '@mui/icons-material/Visibility'; -import CallMade from '@mui/icons-material/CallMade'; -import CreateNewFolder from '@mui/icons-material/CreateNewFolder'; -import Info from '@mui/icons-material/Info'; - -const ColorSchemePicker = () => { - const { mode, setMode } = useColorScheme(); - const [mounted, setMounted] = React.useState(false); - React.useEffect(() => { - setMounted(true); - }, []); - if (!mounted) { - return null; - } - - return ( - - ); -}; - -const Covers = () => { - const TYPES = ['image', 'nextjs', 'video']; - const [type, setType] = React.useState(TYPES[1]); - return ( - - - { - { - image: ( - - ), - nextjs: ( - - Mountains - - ), - video: ( - - - {TYPES.map((t) => ( - - ))} - - - ); -}; - -export default function JoySvgIcon() { - return ( - - - - - - - - - - - Bahamas Islands - - - - - 24 April - 02 May, 2021 - Category/Ocean - Avarage Temperature - - } - sx={{ fontWeight: 'md' }} - > - +18°C - - - - - -
    - Total Price - - $2950 - -
    - -     -     -     - - - - - - - - - The Beach - - - - } sx={{ color: 'neutral.300' }}> - Tarifa, Spain - - } sx={{ color: 'neutral.300' }}> - 4.8 - - - - - - - - - - - - - - - - Renders IMAGE - - - Renders VIDEO - - - - - - - Research - - - - - - - - - - - - - Quality Assurance - - - - - - - } level="body3" sx={{ ml: 'auto' }}> - 4 Comments - - } level="body3"> - 1 Files - - - - - - - - - 04:26 - - - - - - - - - Minimal photography - - - - By Sujith - - - - 6.3k views - - - - 1 hour ago - - - - - - - - - - - - - - - - - - - - - - - - - -
    - robert_ford - Robert F. Ford -
    - - Lifestyle coach and photographer delivering best images onli... - - - -
    - 1.2K - Media -
    -
    - 489.2K - Followers -
    -
    - 987K - Following -
    -     -     -     - - - 01 - - - - - Bubble pop - - - Kim Huyn A - - Kim hyunna - - - - - - - - - - - - - - - - - - - - - - - - - - 👩‍✈️ - - Friendly painters - - - Within the exercises, we design a room in a Scandinavian style - - }> - Task: Practice - - - } - > - Date: 01.07.2020 - - - - - - - - - - - -
    - Ooki Crypto Trade Platform 3d animation branding crypto cryptocurrency design illustration motion motion design trading ui web design zajno -
    - - - - - - - - Ooki Crypto Trade Platform - - - - - - - - - - - -     - - - Zajno Crew - - TEAM - - } - sx={{ ml: 'auto', color: 'text.secondary' }} - > - 117 - - } - sx={{ color: 'text.secondary' }} - > - 10.4k - - -     - ({ - gridColumn: 'span 2', - flexDirection: 'row', - flexWrap: 'wrap', - resize: 'horizontal', - overflow: 'hidden', - gap: 'clamp(0px, (100% - 360px + 32px) * 999, 16px)', - transition: 'transform 0.3s, border 0.3s', - '&:hover': { - borderColor: theme.vars.palette.text.primary, - transform: 'translateY(-2px)', - }, - '& > *': { minWidth: 'clamp(0px, (360px - 100%) * 999,100%)' }, - })} - > - - - - - -
    - - - Showcase - - - A description of this widget. -
    - - - -     - - - - - - S - -
    - - CREATOR - - siriwatknp -
    -     -     -     - - - - - - - - - - - - - - 123 Main St, Phoenix, AZ - - - - $280k - $310k - - - } - size="sm" - sx={{ pointerEvents: 'none' }} - > - Confidence score of 85% - - - -     -     -     - ); -} diff --git a/docs/pages/experiments/joy/checkbox.tsx b/docs/pages/experiments/joy/checkbox.tsx deleted file mode 100644 index 4f1c9c7a7b45db..00000000000000 --- a/docs/pages/experiments/joy/checkbox.tsx +++ /dev/null @@ -1,461 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import Avatar from '@mui/joy/Avatar'; -import Box from '@mui/joy/Box'; -import Button from '@mui/joy/Button'; -import Checkbox, { checkboxClasses } from '@mui/joy/Checkbox'; -import List from '@mui/joy/List'; -import ListItem from '@mui/joy/ListItem'; -import Sheet from '@mui/joy/Sheet'; -import Typography from '@mui/joy/Typography'; -import { CssVarsProvider, useColorScheme } from '@mui/joy/styles'; -import Moon from '@mui/icons-material/DarkMode'; -import Sun from '@mui/icons-material/LightMode'; -import Close from '@mui/icons-material/Close'; -import Done from '@mui/icons-material/Done'; - -const ColorSchemePicker = () => { - const { mode, setMode } = useColorScheme(); - const [mounted, setMounted] = React.useState(false); - React.useEffect(() => { - setMounted(true); - }, []); - if (!mounted) { - return null; - } - - return ( - - ); -}; - -const props = { - size: ['sm', 'md', 'lg'], - color: ['primary', 'danger', 'info', 'success', 'warning'], - variant: ['plain', 'outlined', 'soft', 'solid'], -} as const; - -const Rank = () => { - const [value, setValue] = React.useState([]); - return ( - - - Rank - - - - {['Freshman', 'Sophomore', 'Junior', 'Senior'].map((item, index) => ( - - {value.includes(item) && } - { - if (event.target.checked) { - setValue((val) => [...val, item]); - } else { - setValue((val) => val.filter((text) => text !== item)); - } - }} - sx={{ - '&.Mui-checked': { - '& .MuiCheckbox-action': { - borderColor: 'primary.500', - }, - }, - }} - /> - - ))} - - - - ); -}; - -const Pattern = () => { - const [value, setValue] = React.useState([]); - return ( - - - Pattern - - - - {['Colors', 'Shapes', 'Textures'].map((item, index) => ( - - {value.includes(item) && } - { - if (event.target.checked) { - setValue((val) => [...val, item]); - } else { - setValue((val) => val.filter((text) => text !== item)); - } - }} - sx={{ - fontWeight: 'md', - '&.Mui-checked': { - '& .MuiCheckbox-action': { - boxShadow: 'md', - borderColor: 'primary.500', - }, - }, - }} - /> - - ))} - - - - ); -}; - -export default function JoyCheckbox() { - return ( - - -