From 348538284a1143245d062e5adfc2eadeb60bbad5 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Mon, 4 Mar 2024 11:34:15 +0700 Subject: [PATCH] [material-ui][Alert] Convert to support zero runtime (#41230) --- apps/pigment-next-app/src/app/globals.css | 38 +++--- .../src/app/material-ui/page.tsx | 44 +++++++ .../src/app/material-ui/react-alert/page.tsx | 72 +++++++++++ apps/pigment-vite-app/package.json | 1 - .../src/pages/material-ui/react-alert.tsx | 73 ++++++++++++ apps/pnpm-lock.yaml | 95 +++++++-------- package.json | 1 + packages/mui-material/src/Alert/Alert.js | 112 ++++++++++-------- .../mui-material/src/AlertTitle/AlertTitle.js | 5 +- .../test-utils/src/describeConformance.tsx | 26 ++++ pnpm-lock.yaml | 3 + scripts/zero-render-mui-demos.mjs | 40 +++++-- 12 files changed, 373 insertions(+), 137 deletions(-) create mode 100644 apps/pigment-next-app/src/app/material-ui/page.tsx create mode 100644 apps/pigment-next-app/src/app/material-ui/react-alert/page.tsx create mode 100644 apps/pigment-vite-app/src/pages/material-ui/react-alert.tsx diff --git a/apps/pigment-next-app/src/app/globals.css b/apps/pigment-next-app/src/app/globals.css index f986282c43ac47..7f5569579ba220 100644 --- a/apps/pigment-next-app/src/app/globals.css +++ b/apps/pigment-next-app/src/app/globals.css @@ -1,22 +1,26 @@ -* { - box-sizing: border-box; - padding: 0; - margin: 0; -} +@layer reset, mui; -html, -body { - max-width: 100vw; - overflow-x: hidden; -} +@layer reset { + * { + box-sizing: border-box; + padding: 0; + margin: 0; + } -a { - color: inherit; - text-decoration: none; -} + html, + body { + max-width: 100vw; + overflow-x: hidden; + } + + a { + color: inherit; + text-decoration: none; + } -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; + @media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } } } diff --git a/apps/pigment-next-app/src/app/material-ui/page.tsx b/apps/pigment-next-app/src/app/material-ui/page.tsx new file mode 100644 index 00000000000000..2efa665178404a --- /dev/null +++ b/apps/pigment-next-app/src/app/material-ui/page.tsx @@ -0,0 +1,44 @@ +// eslint-disable-next-line @typescript-eslint/no-unused-vars +import * as React from 'react'; +import Link from 'next/link'; +import fs from 'fs/promises'; +import path from 'path'; +import { css } from '@pigmentcss/react'; + +export default async function MaterialUIPage() { + const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`)); + return ( +
+

Material UI Components

+ +
+ ); +} diff --git a/apps/pigment-next-app/src/app/material-ui/react-alert/page.tsx b/apps/pigment-next-app/src/app/material-ui/react-alert/page.tsx new file mode 100644 index 00000000000000..35a5714870939b --- /dev/null +++ b/apps/pigment-next-app/src/app/material-ui/react-alert/page.tsx @@ -0,0 +1,72 @@ +'use client'; +import * as React from 'react'; +import ActionAlerts from '../../../../../../docs/data/material/components/alert/ActionAlerts'; +import BasicAlerts from '../../../../../../docs/data/material/components/alert/BasicAlerts'; +import ColorAlerts from '../../../../../../docs/data/material/components/alert/ColorAlerts'; +import DescriptionAlerts from '../../../../../../docs/data/material/components/alert/DescriptionAlerts'; +import FilledAlerts from '../../../../../../docs/data/material/components/alert/FilledAlerts'; +import IconAlerts from '../../../../../../docs/data/material/components/alert/IconAlerts'; +import OutlinedAlerts from '../../../../../../docs/data/material/components/alert/OutlinedAlerts'; +import SimpleAlert from '../../../../../../docs/data/material/components/alert/SimpleAlert'; +import TransitionAlerts from '../../../../../../docs/data/material/components/alert/TransitionAlerts'; + +export default function Alert() { + return ( + +
+

Action Alerts

+
+ +
+
+
+

Basic Alerts

+
+ +
+
+
+

Color Alerts

+
+ +
+
+
+

Description Alerts

+
+ +
+
+
+

Filled Alerts

+
+ +
+
+
+

Icon Alerts

+
+ +
+
+
+

Outlined Alerts

+
+ +
+
+
+

Simple Alert

+
+ +
+
+
+

Transition Alerts

+
+ +
+
+ + ); +} diff --git a/apps/pigment-vite-app/package.json b/apps/pigment-vite-app/package.json index 7499c0a565f8a0..a1274aa9c98270 100644 --- a/apps/pigment-vite-app/package.json +++ b/apps/pigment-vite-app/package.json @@ -14,7 +14,6 @@ "@mui/base": "file:../../packages/mui-base/build", "@mui/material": "file:../../packages/mui-material/build", "@mui/system": "file:../../packages/mui-system/build", - "@mui/material-nextjs": "file:../../packages/mui-material-nextjs/build", "@mui/icons-material": "file:../../packages/mui-icons-material/build", "clsx": "^2.1.0", "local-ui-lib": "workspace:^", diff --git a/apps/pigment-vite-app/src/pages/material-ui/react-alert.tsx b/apps/pigment-vite-app/src/pages/material-ui/react-alert.tsx new file mode 100644 index 00000000000000..830003ff827170 --- /dev/null +++ b/apps/pigment-vite-app/src/pages/material-ui/react-alert.tsx @@ -0,0 +1,73 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import ActionAlerts from '../../../../../docs/data/material/components/alert/ActionAlerts.tsx'; +import BasicAlerts from '../../../../../docs/data/material/components/alert/BasicAlerts.tsx'; +import ColorAlerts from '../../../../../docs/data/material/components/alert/ColorAlerts.tsx'; +import DescriptionAlerts from '../../../../../docs/data/material/components/alert/DescriptionAlerts.tsx'; +import FilledAlerts from '../../../../../docs/data/material/components/alert/FilledAlerts.tsx'; +import IconAlerts from '../../../../../docs/data/material/components/alert/IconAlerts.tsx'; +import OutlinedAlerts from '../../../../../docs/data/material/components/alert/OutlinedAlerts.tsx'; +import SimpleAlert from '../../../../../docs/data/material/components/alert/SimpleAlert.tsx'; +import TransitionAlerts from '../../../../../docs/data/material/components/alert/TransitionAlerts.tsx'; + +export default function Alert() { + return ( + +

Alert

+
+

Action Alerts

+
+ +
+
+
+

Basic Alerts

+
+ +
+
+
+

Color Alerts

+
+ +
+
+
+

Description Alerts

+
+ +
+
+
+

Filled Alerts

+
+ +
+
+
+

Icon Alerts

+
+ +
+
+
+

Outlined Alerts

+
+ +
+
+
+

Simple Alert

+
+ +
+
+
+

Transition Alerts

+
+ +
+
+ + ); +} diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml index eda05ad8846c0f..8872d494255bb2 100644 --- a/apps/pnpm-lock.yaml +++ b/apps/pnpm-lock.yaml @@ -46,7 +46,7 @@ importers: specifier: ^7.20.5 version: 7.20.5 '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/doctrine': specifier: ^0.0.9 @@ -110,7 +110,7 @@ importers: specifier: ^3.1.3 version: 3.1.3 '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/mocha': specifier: ^10.0.6 @@ -162,7 +162,7 @@ importers: specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@9.3.4) '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/prop-types': specifier: ^15.7.11 @@ -214,17 +214,17 @@ importers: specifier: ^1.0.10 version: 1.0.10(jscodeshift@0.13.1) postcss: - specifier: ^8.4.33 + specifier: ^8.4.35 version: 8.4.35 postcss-cli: - specifier: ^8.0.0 + specifier: ^8.3.1 version: 8.3.1(postcss@8.4.35) yargs: specifier: ^17.7.2 version: 17.7.2 devDependencies: '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/jscodeshift': specifier: 0.11.5 @@ -272,7 +272,7 @@ importers: version: 18.2.55 next: specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -285,7 +285,7 @@ importers: version: 7.11.1 devDependencies: '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 chai: specifier: ^4.4.1 @@ -310,7 +310,7 @@ importers: specifier: workspace:^ version: link:../mui-material/build '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/react': specifier: ^18.2.55 @@ -393,7 +393,7 @@ importers: specifier: workspace:^ version: link:../mui-material/build '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/prop-types': specifier: ^15.7.11 @@ -418,7 +418,7 @@ importers: version: 4.17.21 next: specifier: ^13.4.19 - version: 13.5.1(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -467,7 +467,7 @@ importers: specifier: workspace:^ version: link:../test-utils '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/prop-types': specifier: ^15.7.11 @@ -559,7 +559,7 @@ importers: specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@9.3.4) '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/prop-types': specifier: ^15.7.11 @@ -678,7 +678,7 @@ importers: specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@9.3.4) '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/prop-types': specifier: ^15.7.11 @@ -738,7 +738,7 @@ importers: version: 18.2.55 next: specifier: 13.5.1 - version: 13.5.1(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -763,7 +763,7 @@ importers: specifier: workspace:^ version: link:../mui-types/build '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/react': specifier: ^18.2.55 @@ -804,7 +804,7 @@ importers: specifier: workspace:* version: link:build '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/react': specifier: ^18.2.55 @@ -839,7 +839,7 @@ importers: specifier: workspace:* version: link:build '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/hoist-non-react-statics': specifier: ^3.3.5 @@ -919,7 +919,7 @@ importers: specifier: workspace:^ version: link:../mui-material/build '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/react': specifier: ^18.2.55 @@ -987,7 +987,7 @@ importers: specifier: workspace:* version: link:build '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/prop-types': specifier: ^15.7.11 @@ -1053,7 +1053,7 @@ importers: specifier: workspace:^ version: link:../mui-types/build '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/mocha': specifier: ^10.0.6 @@ -1095,7 +1095,7 @@ importers: devDependencies: next: specifier: ^13.5.1 - version: 13.5.1(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) + version: 13.5.1(react-dom@18.2.0)(react@18.2.0) ../packages/pigment-react: dependencies: @@ -1292,7 +1292,7 @@ importers: specifier: ^4.17.21 version: 4.17.21 mocha: - specifier: ^10.2.0 + specifier: ^10.3.0 version: 10.3.0 playwright: specifier: ^1.41.2 @@ -1314,7 +1314,7 @@ importers: version: 15.2.0 devDependencies: '@types/chai': - specifier: ^4.3.11 + specifier: ^4.3.12 version: 4.3.12 '@types/chai-dom': specifier: ^1.11.3 @@ -1424,9 +1424,6 @@ importers: '@mui/material': specifier: file:../../packages/mui-material/build version: file:../packages/mui-material/build(@emotion/react@11.11.3)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@mui/material-nextjs': - specifier: file:../../packages/mui-material-nextjs/build - version: file:../packages/mui-material-nextjs/build(@mui/material@5.15.11)(@types/react@18.2.55)(next@13.5.1)(react@18.2.0) '@mui/system': specifier: file:../../packages/mui-system/build version: file:../packages/mui-system/build(@emotion/react@11.11.3)(@types/react@18.2.55)(react@18.2.0) @@ -3257,6 +3254,7 @@ packages: /@next/env@13.5.1: resolution: {integrity: sha512-CIMWiOTyflFn/GFx33iYXkgLSQsMQZV4jB91qaj/TfxGaGOXxn8C1j72TaUSPIyN7ziS/AYG46kGmnvuk1oOpg==} + dev: true /@next/env@14.1.0: resolution: {integrity: sha512-Py8zIo+02ht82brwwhTg36iogzFqGLPXlRGKQw5s+qP/kMNc4MAyDeEwBKDijk6zTIbegEgu8Qy7C1LboslQAw==} @@ -3267,6 +3265,7 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true + dev: true optional: true /@next/swc-darwin-arm64@14.1.0: @@ -3283,6 +3282,7 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true + dev: true optional: true /@next/swc-darwin-x64@14.1.0: @@ -3299,6 +3299,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: true optional: true /@next/swc-linux-arm64-gnu@14.1.0: @@ -3315,6 +3316,7 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: true optional: true /@next/swc-linux-arm64-musl@14.1.0: @@ -3331,6 +3333,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: true optional: true /@next/swc-linux-x64-gnu@14.1.0: @@ -3347,6 +3350,7 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: true optional: true /@next/swc-linux-x64-musl@14.1.0: @@ -3363,6 +3367,7 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true + dev: true optional: true /@next/swc-win32-arm64-msvc@14.1.0: @@ -3379,6 +3384,7 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true + dev: true optional: true /@next/swc-win32-ia32-msvc@14.1.0: @@ -3395,6 +3401,7 @@ packages: cpu: [x64] os: [win32] requiresBuild: true + dev: true optional: true /@next/swc-win32-x64-msvc@14.1.0: @@ -5660,6 +5667,7 @@ packages: /glob-to-regexp@0.4.1: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} + dev: true /glob@10.3.10: resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==} @@ -6805,7 +6813,7 @@ packages: resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==} dev: false - /next@13.5.1(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0): + /next@13.5.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-GIudNR7ggGUZoIL79mSZcxbXK9f5pwAIPZxEM8+j2yLqv5RODg4TkmUlaKSYVqE1bPQueamXSqdC3j7axiTSEg==} engines: {node: '>=16.14.0'} hasBin: true @@ -6843,6 +6851,7 @@ packages: transitivePeerDependencies: - '@babel/core' - babel-plugin-macros + dev: true /next@14.1.0(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==} @@ -7298,6 +7307,7 @@ packages: nanoid: 3.3.7 picocolors: 1.0.0 source-map-js: 1.0.2 + dev: true /postcss@8.4.31: resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==} @@ -8680,6 +8690,7 @@ packages: dependencies: glob-to-regexp: 0.4.1 graceful-fs: 4.2.11 + dev: true /webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} @@ -8899,6 +8910,7 @@ packages: /zod@3.21.4: resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==} + dev: true file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): resolution: {directory: ../packages/mui-base/build, type: directory} @@ -8972,33 +8984,6 @@ packages: react: 18.2.0 dev: false - file:../packages/mui-material-nextjs/build(@mui/material@5.15.11)(@types/react@18.2.55)(next@13.5.1)(react@18.2.0): - resolution: {directory: ../packages/mui-material-nextjs/build, type: directory} - id: file:../packages/mui-material-nextjs/build - name: '@mui/material-nextjs' - engines: {node: '>=12.0.0'} - peerDependencies: - '@emotion/cache': ^11.11.0 - '@emotion/server': ^11.11.0 - '@mui/material': ^5.0.0 - '@types/react': ^17.0.0 || ^18.0.0 - next: ^13.0.0 || ^14.0.0 - react: ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - '@emotion/cache': - optional: true - '@emotion/server': - optional: true - '@types/react': - optional: true - dependencies: - '@babel/runtime': 7.23.9 - '@mui/material': file:../packages/mui-material/build(@emotion/react@11.11.3)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 18.2.55 - next: 13.5.1(@babel/core@7.23.9)(react-dom@18.2.0)(react@18.2.0) - react: 18.2.0 - dev: false - file:../packages/mui-material/build(@emotion/react@11.11.3)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0): resolution: {directory: ../packages/mui-material/build, type: directory} id: file:../packages/mui-material/build diff --git a/package.json b/package.json index 28f474cdab7a85..1b35f2ffcf138f 100644 --- a/package.json +++ b/package.json @@ -112,6 +112,7 @@ "@mui/joy": "workspace:*", "@mui/material": "workspace:^", "@mui/utils": "workspace:^", + "@pigmentcss/react": "workspace:^", "@next/eslint-plugin-next": "^14.1.0", "@octokit/rest": "^20.0.2", "@playwright/test": "1.41.2", diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js index e9d5b3f5a0647b..c908118889da52 100644 --- a/packages/mui-material/src/Alert/Alert.js +++ b/packages/mui-material/src/Alert/Alert.js @@ -2,10 +2,9 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { unstable_composeClasses as composeClasses } from '@mui/base'; -import { darken, lighten } from '@mui/system'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import composeClasses from '@mui/utils/composeClasses'; +import { darken, lighten } from '@mui/system/colorManipulator'; +import { styled, createUseThemeProps } from '../zero-styled'; import useSlot from '../utils/useSlot'; import capitalize from '../utils/capitalize'; import Paper from '../Paper'; @@ -17,6 +16,8 @@ import ErrorOutlineIcon from '../internal/svg-icons/ErrorOutline'; import InfoOutlinedIcon from '../internal/svg-icons/InfoOutlined'; import CloseIcon from '../internal/svg-icons/Close'; +const useThemeProps = createUseThemeProps('MuiAlert'); + const useUtilityClasses = (ownerState) => { const { variant, color, severity, classes } = ownerState; @@ -47,58 +48,70 @@ const AlertRoot = styled(Paper, { styles[`${ownerState.variant}${capitalize(ownerState.color || ownerState.severity)}`], ]; }, -})(({ theme, ownerState }) => { +})(({ theme }) => { const getColor = theme.palette.mode === 'light' ? darken : lighten; const getBackgroundColor = theme.palette.mode === 'light' ? lighten : darken; - const color = ownerState.color || ownerState.severity; - return { ...theme.typography.body2, backgroundColor: 'transparent', display: 'flex', padding: '6px 16px', - ...(color && - ownerState.variant === 'standard' && { - color: theme.vars - ? theme.vars.palette.Alert[`${color}Color`] - : getColor(theme.palette[color].light, 0.6), - backgroundColor: theme.vars - ? theme.vars.palette.Alert[`${color}StandardBg`] - : getBackgroundColor(theme.palette[color].light, 0.9), - [`& .${alertClasses.icon}`]: theme.vars - ? { color: theme.vars.palette.Alert[`${color}IconColor`] } - : { - color: theme.palette[color].main, - }, - }), - ...(color && - ownerState.variant === 'outlined' && { - color: theme.vars - ? theme.vars.palette.Alert[`${color}Color`] - : getColor(theme.palette[color].light, 0.6), - border: `1px solid ${(theme.vars || theme).palette[color].light}`, - [`& .${alertClasses.icon}`]: theme.vars - ? { color: theme.vars.palette.Alert[`${color}IconColor`] } - : { - color: theme.palette[color].main, - }, - }), - ...(color && - ownerState.variant === 'filled' && { - fontWeight: theme.typography.fontWeightMedium, - ...(theme.vars - ? { - color: theme.vars.palette.Alert[`${color}FilledColor`], - backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`], - } - : { - backgroundColor: - theme.palette.mode === 'dark' - ? theme.palette[color].dark - : theme.palette[color].main, - color: theme.palette.getContrastText(theme.palette[color].main), - }), - }), + variants: [ + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.light) + .map(([color]) => ({ + props: { colorSeverity: color, variant: 'standard' }, + style: { + color: theme.vars + ? theme.vars.palette.Alert[`${color}Color`] + : getColor(theme.palette[color].light, 0.6), + backgroundColor: theme.vars + ? theme.vars.palette.Alert[`${color}StandardBg`] + : getBackgroundColor(theme.palette[color].light, 0.9), + [`& .${alertClasses.icon}`]: theme.vars + ? { color: theme.vars.palette.Alert[`${color}IconColor`] } + : { + color: theme.palette[color].main, + }, + }, + })), + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.light) + .map(([color]) => ({ + props: { colorSeverity: color, variant: 'outlined' }, + style: { + color: theme.vars + ? theme.vars.palette.Alert[`${color}Color`] + : getColor(theme.palette[color].light, 0.6), + border: `1px solid ${(theme.vars || theme).palette[color].light}`, + [`& .${alertClasses.icon}`]: theme.vars + ? { color: theme.vars.palette.Alert[`${color}IconColor`] } + : { + color: theme.palette[color].main, + }, + }, + })), + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.dark) + .map(([color]) => ({ + props: { colorSeverity: color, variant: 'filled' }, + style: { + fontWeight: theme.typography.fontWeightMedium, + ...(theme.vars + ? { + color: theme.vars.palette.Alert[`${color}FilledColor`], + backgroundColor: theme.vars.palette.Alert[`${color}FilledBg`], + } + : { + backgroundColor: + theme.palette.mode === 'dark' + ? theme.palette[color].dark + : theme.palette[color].main, + color: theme.palette.getContrastText(theme.palette[color].main), + }), + }, + })), + ], }; }); @@ -169,6 +182,7 @@ const Alert = React.forwardRef(function Alert(inProps, ref) { color, severity, variant, + colorSeverity: color || severity, }; const classes = useUtilityClasses(ownerState); diff --git a/packages/mui-material/src/AlertTitle/AlertTitle.js b/packages/mui-material/src/AlertTitle/AlertTitle.js index 8889812510d73f..01d427e93b9a91 100644 --- a/packages/mui-material/src/AlertTitle/AlertTitle.js +++ b/packages/mui-material/src/AlertTitle/AlertTitle.js @@ -3,11 +3,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import Typography from '../Typography'; import { getAlertTitleUtilityClass } from './alertTitleClasses'; +const useThemeProps = createUseThemeProps('MuiAlertTitle'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; diff --git a/packages/test-utils/src/describeConformance.tsx b/packages/test-utils/src/describeConformance.tsx index 09297cd1ffad00..3063749ac0d095 100644 --- a/packages/test-utils/src/describeConformance.tsx +++ b/packages/test-utils/src/describeConformance.tsx @@ -978,6 +978,31 @@ function testThemeVariants(element: React.ReactElement, getOptions: () => Confor }); } +/** + * MUI theme supports custom palettes. + * The components that iterate over the palette via `variants` should be able to render with or without applying the custom palette styles. + */ +function testThemeCustomPalette(element: React.ReactElement, getOptions: () => ConformanceOptions) { + describe('theme extended palette:', () => { + it('should render without errors', function test() { + const { render, ThemeProvider, createTheme } = getOptions(); + if (!/jsdom/.test(window.navigator.userAgent) || !render || !ThemeProvider || !createTheme) { + this.skip(); + } + + const theme = createTheme({ + palette: { + custom: { + main: '#ff5252', + }, + }, + }); + + expect(() => render({element})).not.to.throw(); + }); + }); +} + const fullSuite = { componentProp: testComponentProp, componentsProp: testComponentsProp, @@ -992,6 +1017,7 @@ const fullSuite = { themeDefaultProps: testThemeDefaultProps, themeStyleOverrides: testThemeStyleOverrides, themeVariants: testThemeVariants, + themeCustomPalette: testThemeCustomPalette, }; /** diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 85ad08c990d63a..a83bbe4e701cfe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -122,6 +122,9 @@ importers: '@octokit/rest': specifier: ^20.0.2 version: 20.0.2 + '@pigmentcss/react': + specifier: workspace:^ + version: link:packages/pigment-react '@playwright/test': specifier: 1.41.2 version: 1.41.2 diff --git a/scripts/zero-render-mui-demos.mjs b/scripts/zero-render-mui-demos.mjs index 6954ca0bcc359f..ffbdb75963ede7 100644 --- a/scripts/zero-render-mui-demos.mjs +++ b/scripts/zero-render-mui-demos.mjs @@ -1,5 +1,6 @@ import path from 'path'; import fse from 'fs-extra'; +import * as prettier from 'prettier'; function capitalize(string) { if (typeof string !== 'string') { @@ -22,6 +23,9 @@ async function run() { 'Please provide a string of `react-` from the `docs/pages/material-ui/*` directory.', ); } + const prettierConfig = await prettier.resolveConfig(process.cwd(), { + config: path.join(process.cwd(), 'prettier.config.js'), + }); // Find the demos of the component const docSource = await fse.readFile( @@ -39,11 +43,11 @@ async function run() { const renders = tsFiles.map((filename) => { const componentName = filename.replace('.tsx', ''); return `
-

${titleCase(componentName)}

-
- <${componentName} /> -
-
`; +

${titleCase(componentName)}

+
+ <${componentName} /> +
+ `; }); /** * Zero-Runtime Next.js App @@ -67,11 +71,16 @@ ${renders.join('\n')} `; // Create the page in zero-runtime apps - await fse.mkdirp(`apps/zero-runtime-next-app/src/app/material-ui/${args[0]}`); - await fse.writeFile( - path.join(process.cwd(), `apps/zero-runtime-next-app/src/app/material-ui/${args[0]}/page.tsx`), - nextFileContent, + const nextFilepath = path.join( + process.cwd(), + `apps/zero-runtime-next-app/src/app/material-ui/${args[0]}/page.tsx`, ); + const prettiedNextFileContent = await prettier.format(nextFileContent, { + ...prettierConfig, + filepath: nextFilepath, + }); + await fse.mkdirp(`apps/zero-runtime-next-app/src/app/material-ui/${args[0]}`); + await fse.writeFile(nextFilepath, prettiedNextFileContent); /** * Zero-Runtime Vite App @@ -94,11 +103,16 @@ ${renders.join('\n')} } `; // Create the page in zero-runtime apps - await fse.mkdirp(`apps/zero-runtime-vite-app/src/pages/material-ui`); - await fse.writeFile( - path.join(process.cwd(), `apps/zero-runtime-vite-app/src/pages/material-ui/${args[0]}.tsx`), - viteFileContent, + const viteFilepath = path.join( + process.cwd(), + `apps/zero-runtime-vite-app/src/pages/material-ui/${args[0]}.tsx`, ); + const prettiedViteFileContent = await prettier.format(viteFileContent, { + ...prettierConfig, + filepath: viteFilepath, + }); + await fse.mkdirp(`apps/zero-runtime-vite-app/src/pages/material-ui`); + await fse.writeFile(viteFilepath, prettiedViteFileContent); } run();