diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-app-bar/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-app-bar/page.tsx
new file mode 100644
index 00000000000000..cf15589d8cab32
--- /dev/null
+++ b/apps/pigment-css-next-app/src/app/material-ui/react-app-bar/page.tsx
@@ -0,0 +1,100 @@
+'use client';
+import * as React from 'react';
+import BackToTop from '../../../../../../docs/data/material/components/app-bar/BackToTop';
+import BottomAppBar from '../../../../../../docs/data/material/components/app-bar/BottomAppBar';
+import ButtonAppBar from '../../../../../../docs/data/material/components/app-bar/ButtonAppBar';
+import DenseAppBar from '../../../../../../docs/data/material/components/app-bar/DenseAppBar';
+import DrawerAppBar from '../../../../../../docs/data/material/components/app-bar/DrawerAppBar';
+import ElevateAppBar from '../../../../../../docs/data/material/components/app-bar/ElevateAppBar';
+import EnableColorOnDarkAppBar from '../../../../../../docs/data/material/components/app-bar/EnableColorOnDarkAppBar';
+import HideAppBar from '../../../../../../docs/data/material/components/app-bar/HideAppBar';
+import MenuAppBar from '../../../../../../docs/data/material/components/app-bar/MenuAppBar';
+import PrimarySearchAppBar from '../../../../../../docs/data/material/components/app-bar/PrimarySearchAppBar';
+import ProminentAppBar from '../../../../../../docs/data/material/components/app-bar/ProminentAppBar';
+import ResponsiveAppBar from '../../../../../../docs/data/material/components/app-bar/ResponsiveAppBar';
+import SearchAppBar from '../../../../../../docs/data/material/components/app-bar/SearchAppBar';
+
+export default function AppBar() {
+ return (
+
+
+
+
+
+
+
+ Elevate App Bar
+
+
+
+
+
+ Enable Color On Dark App Bar
+
+
+
+
+
+
+
+ Primary Search App Bar
+
+
+
+
+ Responsive App Bar
+
+
+
+
+
+
+ );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-app-bar.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-app-bar.tsx
new file mode 100644
index 00000000000000..57b41d25804b34
--- /dev/null
+++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-app-bar.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import BackToTop from '../../../../../docs/data/material/components/app-bar/BackToTop.tsx';
+import BottomAppBar from '../../../../../docs/data/material/components/app-bar/BottomAppBar.tsx';
+import ButtonAppBar from '../../../../../docs/data/material/components/app-bar/ButtonAppBar.tsx';
+import DenseAppBar from '../../../../../docs/data/material/components/app-bar/DenseAppBar.tsx';
+import DrawerAppBar from '../../../../../docs/data/material/components/app-bar/DrawerAppBar.tsx';
+import ElevateAppBar from '../../../../../docs/data/material/components/app-bar/ElevateAppBar.tsx';
+import EnableColorOnDarkAppBar from '../../../../../docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx';
+import HideAppBar from '../../../../../docs/data/material/components/app-bar/HideAppBar.tsx';
+import MenuAppBar from '../../../../../docs/data/material/components/app-bar/MenuAppBar.tsx';
+import PrimarySearchAppBar from '../../../../../docs/data/material/components/app-bar/PrimarySearchAppBar.tsx';
+import ProminentAppBar from '../../../../../docs/data/material/components/app-bar/ProminentAppBar.tsx';
+import ResponsiveAppBar from '../../../../../docs/data/material/components/app-bar/ResponsiveAppBar.tsx';
+import SearchAppBar from '../../../../../docs/data/material/components/app-bar/SearchAppBar.tsx';
+
+export default function AppBar() {
+ return (
+
+ AppBar
+
+
+
+
+
+
+ Elevate App Bar
+
+
+
+
+
+ Enable Color On Dark App Bar
+
+
+
+
+
+
+
+ Primary Search App Bar
+
+
+
+
+ Responsive App Bar
+
+
+
+
+
+
+ );
+}
diff --git a/docs/data/material/components/app-bar/BackToTop.js b/docs/data/material/components/app-bar/BackToTop.js
index ea7f7c46ef194c..6e454039aa54a8 100644
--- a/docs/data/material/components/app-bar/BackToTop.js
+++ b/docs/data/material/components/app-bar/BackToTop.js
@@ -48,7 +48,7 @@ function ScrollTop(props) {
}
ScrollTop.propTypes = {
- children: PropTypes.element.isRequired,
+ children: PropTypes.element,
/**
* Injected by the documentation to work in an iframe.
* You won't need it on your project.
diff --git a/docs/data/material/components/app-bar/BackToTop.tsx b/docs/data/material/components/app-bar/BackToTop.tsx
index 567ba0f51abe12..87eca489bf5c9f 100644
--- a/docs/data/material/components/app-bar/BackToTop.tsx
+++ b/docs/data/material/components/app-bar/BackToTop.tsx
@@ -16,7 +16,7 @@ interface Props {
* You won't need it on your project.
*/
window?: () => Window;
- children: React.ReactElement;
+ children?: React.ReactElement;
}
function ScrollTop(props: Props) {
diff --git a/docs/data/material/components/app-bar/ElevateAppBar.js b/docs/data/material/components/app-bar/ElevateAppBar.js
index 38c700c1f25447..1679f75e66c806 100644
--- a/docs/data/material/components/app-bar/ElevateAppBar.js
+++ b/docs/data/material/components/app-bar/ElevateAppBar.js
@@ -19,13 +19,15 @@ function ElevationScroll(props) {
target: window ? window() : undefined,
});
- return React.cloneElement(children, {
- elevation: trigger ? 4 : 0,
- });
+ return children
+ ? React.cloneElement(children, {
+ elevation: trigger ? 4 : 0,
+ })
+ : null;
}
ElevationScroll.propTypes = {
- children: PropTypes.element.isRequired,
+ children: PropTypes.element,
/**
* Injected by the documentation to work in an iframe.
* You won't need it on your project.
diff --git a/docs/data/material/components/app-bar/ElevateAppBar.tsx b/docs/data/material/components/app-bar/ElevateAppBar.tsx
index 2f077ee6723d20..195908dcaf13fe 100644
--- a/docs/data/material/components/app-bar/ElevateAppBar.tsx
+++ b/docs/data/material/components/app-bar/ElevateAppBar.tsx
@@ -13,7 +13,7 @@ interface Props {
* You won't need it on your project.
*/
window?: () => Window;
- children: React.ReactElement;
+ children?: React.ReactElement;
}
function ElevationScroll(props: Props) {
@@ -27,9 +27,11 @@ function ElevationScroll(props: Props) {
target: window ? window() : undefined,
});
- return React.cloneElement(children, {
- elevation: trigger ? 4 : 0,
- });
+ return children
+ ? React.cloneElement(children, {
+ elevation: trigger ? 4 : 0,
+ })
+ : null;
}
export default function ElevateAppBar(props: Props) {
diff --git a/docs/data/material/components/app-bar/HideAppBar.js b/docs/data/material/components/app-bar/HideAppBar.js
index ce03ed56243c08..0753b6dd25b77b 100644
--- a/docs/data/material/components/app-bar/HideAppBar.js
+++ b/docs/data/material/components/app-bar/HideAppBar.js
@@ -20,13 +20,13 @@ function HideOnScroll(props) {
return (
- {children}
+ {children ?? }
);
}
HideOnScroll.propTypes = {
- children: PropTypes.element.isRequired,
+ children: PropTypes.element,
/**
* Injected by the documentation to work in an iframe.
* You won't need it on your project.
diff --git a/docs/data/material/components/app-bar/HideAppBar.tsx b/docs/data/material/components/app-bar/HideAppBar.tsx
index 907ebfe124a2aa..4bc84bfc663305 100644
--- a/docs/data/material/components/app-bar/HideAppBar.tsx
+++ b/docs/data/material/components/app-bar/HideAppBar.tsx
@@ -14,7 +14,7 @@ interface Props {
* You won't need it on your project.
*/
window?: () => Window;
- children: React.ReactElement;
+ children?: React.ReactElement;
}
function HideOnScroll(props: Props) {
@@ -28,7 +28,7 @@ function HideOnScroll(props: Props) {
return (
- {children}
+ {children ?? }
);
}
diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
index fec36c2e635a3d..ddc0befd8e9286 100644
--- a/packages/mui-material/src/AppBar/AppBar.js
+++ b/packages/mui-material/src/AppBar/AppBar.js
@@ -3,12 +3,13 @@ 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 capitalize from '../utils/capitalize';
import Paper from '../Paper';
import { getAppBarUtilityClass } from './appBarClasses';
+const useThemeProps = createUseThemeProps('MuiAppBar');
+
const useUtilityClasses = (ownerState) => {
const { color, position, classes } = ownerState;
@@ -35,107 +36,134 @@ const AppBarRoot = styled(Paper, {
styles[`color${capitalize(ownerState.color)}`],
];
},
-})(({ theme, ownerState }) => {
- const backgroundColorDefault =
- theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-
- return {
- display: 'flex',
- flexDirection: 'column',
- width: '100%',
- boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
- flexShrink: 0,
- ...(ownerState.position === 'fixed' && {
- position: 'fixed',
- zIndex: (theme.vars || theme).zIndex.appBar,
- top: 0,
- left: 'auto',
- right: 0,
- '@media print': {
- // Prevent the app bar to be visible on each printed page.
+})(({ theme }) => ({
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ boxSizing: 'border-box', // Prevent padding issue with the Modal and fixed positioned AppBar.
+ flexShrink: 0,
+ variants: [
+ {
+ props: { position: 'fixed' },
+ style: {
+ position: 'fixed',
+ zIndex: (theme.vars || theme).zIndex.appBar,
+ top: 0,
+ left: 'auto',
+ right: 0,
+ '@media print': {
+ // Prevent the app bar to be visible on each printed page.
+ position: 'absolute',
+ },
+ },
+ },
+ {
+ props: { position: 'absolute' },
+ style: {
position: 'absolute',
+ zIndex: (theme.vars || theme).zIndex.appBar,
+ top: 0,
+ left: 'auto',
+ right: 0,
+ },
+ },
+ {
+ props: { position: 'sticky' },
+ style: {
+ // ⚠️ sticky is not supported by IE11.
+ position: 'sticky',
+ zIndex: (theme.vars || theme).zIndex.appBar,
+ top: 0,
+ left: 'auto',
+ right: 0,
},
- }),
- ...(ownerState.position === 'absolute' && {
- position: 'absolute',
- zIndex: (theme.vars || theme).zIndex.appBar,
- top: 0,
- left: 'auto',
- right: 0,
- }),
- ...(ownerState.position === 'sticky' && {
- // ⚠️ sticky is not supported by IE11.
- position: 'sticky',
- zIndex: (theme.vars || theme).zIndex.appBar,
- top: 0,
- left: 'auto',
- right: 0,
- }),
- ...(ownerState.position === 'static' && {
- position: 'static',
- }),
- ...(ownerState.position === 'relative' && {
- position: 'relative',
- }),
- ...(!theme.vars && {
- ...(ownerState.color === 'default' && {
- backgroundColor: backgroundColorDefault,
- color: theme.palette.getContrastText(backgroundColorDefault),
- }),
- ...(ownerState.color &&
- ownerState.color !== 'default' &&
- ownerState.color !== 'inherit' &&
- ownerState.color !== 'transparent' && {
- backgroundColor: theme.palette[ownerState.color].main,
- color: theme.palette[ownerState.color].contrastText,
+ },
+ {
+ props: { position: 'static' },
+ style: {
+ position: 'static',
+ },
+ },
+ {
+ props: { position: 'relative' },
+ style: {
+ position: 'relative',
+ },
+ },
+ {
+ props: { color: 'inherit' },
+ style: {
+ '--AppBar-color': 'inherit',
+ },
+ },
+ {
+ props: { color: 'default' },
+ style: {
+ '--AppBar-background': theme.vars
+ ? theme.vars.palette.AppBar.defaultBg
+ : theme.palette.grey[100],
+ '--AppBar-color': theme.vars
+ ? theme.vars.palette.text.primary
+ : theme.palette.getContrastText(theme.palette.grey[100]),
+ ...theme.applyStyles('dark', {
+ '--AppBar-background': theme.vars
+ ? theme.vars.palette.AppBar.defaultBg
+ : theme.palette.grey[900],
+ '--AppBar-color': theme.vars
+ ? theme.vars.palette.text.primary
+ : theme.palette.getContrastText(theme.palette.grey[900]),
}),
- ...(ownerState.color === 'inherit' && {
- color: 'inherit',
- }),
- ...(theme.palette.mode === 'dark' &&
- !ownerState.enableColorOnDark && {
- backgroundColor: null,
- color: null,
+ },
+ },
+ ...Object.keys((theme.vars ?? theme).palette)
+ .filter(
+ (key) =>
+ (theme.vars ?? theme).palette[key].main &&
+ (theme.vars ?? theme).palette[key].contrastText,
+ )
+ .map((color) => ({
+ props: { color },
+ style: {
+ '--AppBar-background': (theme.vars ?? theme).palette[color].main,
+ '--AppBar-color': (theme.vars ?? theme).palette[color].contrastText,
+ },
+ })),
+ {
+ props: { enableColorOnDark: true },
+ style: {
+ backgroundColor: 'var(--AppBar-background)',
+ color: 'var(--AppBar-color)',
+ },
+ },
+ {
+ props: { enableColorOnDark: false },
+ style: {
+ backgroundColor: 'var(--AppBar-background)',
+ color: 'var(--AppBar-color)',
+ ...theme.applyStyles('dark', {
+ backgroundColor: theme.vars
+ ? joinVars(theme.vars.palette.AppBar.darkBg, 'var(--AppBar-background)')
+ : null,
+ color: theme.vars
+ ? joinVars(theme.vars.palette.AppBar.darkColor, 'var(--AppBar-color)')
+ : null,
}),
- ...(ownerState.color === 'transparent' && {
- backgroundColor: 'transparent',
- color: 'inherit',
- ...(theme.palette.mode === 'dark' && {
+ },
+ },
+ {
+ props: { color: 'transparent' },
+ style: {
+ '--AppBar-background': 'transparent',
+ '--AppBar-color': 'inherit',
+ backgroundColor: 'var(--AppBar-background)',
+ color: 'var(--AppBar-color)',
+ ...theme.applyStyles('dark', {
backgroundImage: 'none',
}),
- }),
- }),
- ...(theme.vars && {
- ...(ownerState.color === 'default' && {
- '--AppBar-background': ownerState.enableColorOnDark
- ? theme.vars.palette.AppBar.defaultBg
- : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
- '--AppBar-color': ownerState.enableColorOnDark
- ? theme.vars.palette.text.primary
- : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary),
- }),
- ...(ownerState.color &&
- !ownerState.color.match(/^(default|inherit|transparent)$/) && {
- '--AppBar-background': ownerState.enableColorOnDark
- ? theme.vars.palette[ownerState.color].main
- : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
- '--AppBar-color': ownerState.enableColorOnDark
- ? theme.vars.palette[ownerState.color].contrastText
- : joinVars(
- theme.vars.palette.AppBar.darkColor,
- theme.vars.palette[ownerState.color].contrastText,
- ),
- }),
- backgroundColor: 'var(--AppBar-background)',
- color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)',
- ...(ownerState.color === 'transparent' && {
- backgroundImage: 'none',
- backgroundColor: 'transparent',
- color: 'inherit',
- }),
- }),
- };
-});
+ },
+ },
+ ],
+}));
const AppBar = React.forwardRef(function AppBar(inProps, ref) {
const props = useThemeProps({ props: inProps, name: 'MuiAppBar' });
diff --git a/scripts/pigmentcss-render-mui-demos.mjs b/scripts/pigmentcss-render-mui-demos.mjs
index 0a982601803a37..e40244f0588b46 100644
--- a/scripts/pigmentcss-render-mui-demos.mjs
+++ b/scripts/pigmentcss-render-mui-demos.mjs
@@ -2,20 +2,14 @@ import path from 'path';
import fse from 'fs-extra';
import * as prettier from 'prettier';
-function capitalize(string) {
+function pascalCase(string) {
if (typeof string !== 'string') {
- throw new Error('`capitalize(string)` expects a string argument.');
+ throw new Error('`pascalCase(string)` expects a string argument.');
}
- return string.charAt(0).toUpperCase() + string.slice(1);
-}
+ const result = string.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-function toPascalCase(string) {
- if (typeof string !== 'string') {
- throw new Error('`toPascalCase(string)` expects a string argument.');
- }
-
- return capitalize(string).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+ return result.charAt(0).toUpperCase() + result.slice(1);
}
function titleCase(str) {
@@ -65,7 +59,7 @@ async function run() {
return `import ${componentName} from '../../../../../../docs/data/material/components/${dataFolderName}/${componentName}';`;
});
- const functionName = toPascalCase(dataFolderName);
+ const functionName = pascalCase(dataFolderName);
const nextFileContent = `'use client';
import * as React from 'react';
@@ -106,7 +100,7 @@ ${viteImports.join('\n')}
export default function ${functionName}() {
return (
- ${capitalize(dataFolderName)}
+ ${functionName}
${renders.join('\n')}
);