diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 32eb78e8966d16..aedc0b2125a9a7 100644 --- a/apps/pigment-css-next-app/package.json +++ b/apps/pigment-css-next-app/package.json @@ -12,6 +12,7 @@ "@pigment-css/react": "workspace:^", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", + "@mui/lab": "workspace:^", "@mui/material": "workspace:^", "@mui/system": "workspace:^", "@mui/material-nextjs": "workspace:^", diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx index 3907673a0fdf0a..4ae45924829e53 100644 --- a/apps/pigment-css-next-app/src/app/layout.tsx +++ b/apps/pigment-css-next-app/src/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from 'next'; +import { css } from '@pigment-css/react'; import { Inter } from 'next/font/google'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; import { ThemeProvider } from '@mui/material/styles'; @@ -18,8 +19,13 @@ export const metadata: Metadata = { export default function RootLayout(props: { children: React.ReactNode }) { return ( - - + t.vars.palette.background.default}; + color: ${({ theme: t }) => t.vars.palette.text.primary}; + `}`} + > + {props.children} diff --git a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx index 06afb2f9251928..0ee7bd13e9ec99 100644 --- a/apps/pigment-css-next-app/src/app/material-ui/layout.tsx +++ b/apps/pigment-css-next-app/src/app/material-ui/layout.tsx @@ -34,6 +34,12 @@ const Main = styled('div')(({ theme }) => ({ border: '1px solid rgb(229, 234, 242)', borderRadius: '12px', }, + ...theme.applyStyles('dark', { + '& .demo-container': { + backgroundColor: 'rgba(31, 38, 46, 0.1)', + border: '1px solid rgba(59, 74, 89, 0.2)', + }, + }), })); export default function MaterialUILayout({ children }: { children: React.ReactNode }) { diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-button/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-button/page.tsx new file mode 100644 index 00000000000000..a684ae0126c0ee --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-button/page.tsx @@ -0,0 +1,121 @@ +'use client'; +import * as React from 'react'; +import BasicButtons from '../../../../../../docs/data/material/components/buttons/BasicButtons'; +import ButtonBaseDemo from '../../../../../../docs/data/material/components/buttons/ButtonBaseDemo'; +import ButtonSizes from '../../../../../../docs/data/material/components/buttons/ButtonSizes'; +import ColorButtons from '../../../../../../docs/data/material/components/buttons/ColorButtons'; +import ContainedButtons from '../../../../../../docs/data/material/components/buttons/ContainedButtons'; +import CustomizedButtons from '../../../../../../docs/data/material/components/buttons/CustomizedButtons'; +import DisableElevation from '../../../../../../docs/data/material/components/buttons/DisableElevation'; +import IconButtonColors from '../../../../../../docs/data/material/components/buttons/IconButtonColors'; +import IconButtonSizes from '../../../../../../docs/data/material/components/buttons/IconButtonSizes'; +import IconButtons from '../../../../../../docs/data/material/components/buttons/IconButtons'; +import IconLabelButtons from '../../../../../../docs/data/material/components/buttons/IconLabelButtons'; +import InputFileUpload from '../../../../../../docs/data/material/components/buttons/InputFileUpload'; +import LoadingButtons from '../../../../../../docs/data/material/components/buttons/LoadingButtons'; +import LoadingButtonsTransition from '../../../../../../docs/data/material/components/buttons/LoadingButtonsTransition'; +import OutlinedButtons from '../../../../../../docs/data/material/components/buttons/OutlinedButtons'; +import TextButtons from '../../../../../../docs/data/material/components/buttons/TextButtons'; + +export default function Buttons() { + return ( + +
+

Basic Buttons

+
+ +
+
+
+

Button Base Demo

+
+ +
+
+
+

Button Sizes

+
+ +
+
+
+

Color Buttons

+
+ +
+
+
+

Contained Buttons

+
+ +
+
+
+

Customized Buttons

+
+ +
+
+
+

Disable Elevation

+
+ +
+
+
+

Icon Button Colors

+
+ +
+
+
+

Icon Button Sizes

+
+ +
+
+
+

Icon Buttons

+
+ +
+
+
+

Icon Label Buttons

+
+ +
+
+
+

Input File Upload

+
+ +
+
+
+

Loading Buttons

+
+ +
+
+
+

Loading Buttons Transition

+
+ +
+
+
+

Outlined Buttons

+
+ +
+
+
+

Text Buttons

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json index 144b6e3d2c92a7..649cbccadad4e6 100644 --- a/apps/pigment-css-vite-app/package.json +++ b/apps/pigment-css-vite-app/package.json @@ -12,6 +12,7 @@ "@pigment-css/react": "workspace:^", "@mui/utils": "workspace:^", "@mui/base": "workspace:^", + "@mui/lab": "workspace:^", "@mui/material": "workspace:^", "@mui/system": "workspace:^", "@mui/icons-material": "workspace:^", diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-button.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-button.tsx new file mode 100644 index 00000000000000..51affe28f44f0a --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-button.tsx @@ -0,0 +1,122 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BasicButtons from '../../../../../docs/data/material/components/buttons/BasicButtons.tsx'; +import ButtonBaseDemo from '../../../../../docs/data/material/components/buttons/ButtonBaseDemo.tsx'; +import ButtonSizes from '../../../../../docs/data/material/components/buttons/ButtonSizes.tsx'; +import ColorButtons from '../../../../../docs/data/material/components/buttons/ColorButtons.tsx'; +import ContainedButtons from '../../../../../docs/data/material/components/buttons/ContainedButtons.tsx'; +import CustomizedButtons from '../../../../../docs/data/material/components/buttons/CustomizedButtons.tsx'; +import DisableElevation from '../../../../../docs/data/material/components/buttons/DisableElevation.tsx'; +import IconButtonColors from '../../../../../docs/data/material/components/buttons/IconButtonColors.tsx'; +import IconButtonSizes from '../../../../../docs/data/material/components/buttons/IconButtonSizes.tsx'; +import IconButtons from '../../../../../docs/data/material/components/buttons/IconButtons.tsx'; +import IconLabelButtons from '../../../../../docs/data/material/components/buttons/IconLabelButtons.tsx'; +import InputFileUpload from '../../../../../docs/data/material/components/buttons/InputFileUpload.tsx'; +import LoadingButtons from '../../../../../docs/data/material/components/buttons/LoadingButtons.tsx'; +import LoadingButtonsTransition from '../../../../../docs/data/material/components/buttons/LoadingButtonsTransition.tsx'; +import OutlinedButtons from '../../../../../docs/data/material/components/buttons/OutlinedButtons.tsx'; +import TextButtons from '../../../../../docs/data/material/components/buttons/TextButtons.tsx'; + +export default function Buttons() { + return ( + +

Buttons

+
+

Basic Buttons

+
+ +
+
+
+

Button Base Demo

+
+ +
+
+
+

Button Sizes

+
+ +
+
+
+

Color Buttons

+
+ +
+
+
+

Contained Buttons

+
+ +
+
+
+

Customized Buttons

+
+ +
+
+
+

Disable Elevation

+
+ +
+
+
+

Icon Button Colors

+
+ +
+
+
+

Icon Button Sizes

+
+ +
+
+
+

Icon Buttons

+
+ +
+
+
+

Icon Label Buttons

+
+ +
+
+
+

Input File Upload

+
+ +
+
+
+

Loading Buttons

+
+ +
+
+
+

Loading Buttons Transition

+
+ +
+
+
+

Outlined Buttons

+
+ +
+
+
+

Text Buttons

+
+ +
+
+ + ); +} diff --git a/packages/mui-material/src/Button/Button.js b/packages/mui-material/src/Button/Button.js index 483ed0d99fe0e1..822a5a7ca3ad7d 100644 --- a/packages/mui-material/src/Button/Button.js +++ b/packages/mui-material/src/Button/Button.js @@ -5,14 +5,16 @@ import clsx from 'clsx'; import resolveProps from '@mui/utils/resolveProps'; import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; -import styled, { rootShouldForwardProp } from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { rootShouldForwardProp } from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import ButtonBase from '../ButtonBase'; import capitalize from '../utils/capitalize'; import buttonClasses, { getButtonUtilityClass } from './buttonClasses'; import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext'; import ButtonGroupButtonContext from '../ButtonGroup/ButtonGroupButtonContext'; +const useThemeProps = createUseThemeProps('MuiButton'); + const useUtilityClasses = (ownerState) => { const { color, disableElevation, fullWidth, size, variant, classes } = ownerState; @@ -40,23 +42,32 @@ const useUtilityClasses = (ownerState) => { }; }; -const commonIconStyles = (ownerState) => ({ - ...(ownerState.size === 'small' && { - '& > *:nth-of-type(1)': { - fontSize: 18, +const commonIconStyles = [ + { + props: { size: 'small' }, + style: { + '& > *:nth-of-type(1)': { + fontSize: 18, + }, }, - }), - ...(ownerState.size === 'medium' && { - '& > *:nth-of-type(1)': { - fontSize: 20, + }, + { + props: { size: 'medium' }, + style: { + '& > *:nth-of-type(1)': { + fontSize: 20, + }, }, - }), - ...(ownerState.size === 'large' && { - '& > *:nth-of-type(1)': { - fontSize: 22, + }, + { + props: { size: 'large' }, + style: { + '& > *:nth-of-type(1)': { + fontSize: 22, + }, }, - }), -}); + }, +]; const ButtonRoot = styled(ButtonBase, { shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes', @@ -76,189 +87,218 @@ const ButtonRoot = styled(ButtonBase, { ownerState.fullWidth && styles.fullWidth, ]; }, -})( - ({ theme, ownerState }) => { - const inheritContainedBackgroundColor = - theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800]; - - const inheritContainedHoverBackgroundColor = - theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700]; +})(({ theme }) => { + const inheritContainedBackgroundColor = + theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800]; - return { - ...theme.typography.button, - minWidth: 64, - padding: '6px 16px', - borderRadius: (theme.vars || theme).shape.borderRadius, - transition: theme.transitions.create( - ['background-color', 'box-shadow', 'border-color', 'color'], - { - duration: theme.transitions.duration.short, - }, - ), - '&:hover': { - textDecoration: 'none', - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` - : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - ...(ownerState.variant === 'text' && - ownerState.color !== 'inherit' && { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.hoverOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', - }, - }), - ...(ownerState.variant === 'outlined' && - ownerState.color !== 'inherit' && { - border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`, - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.hoverOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), + const inheritContainedHoverBackgroundColor = + theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700]; + return { + ...theme.typography.button, + minWidth: 64, + padding: '6px 16px', + border: 0, + borderRadius: (theme.vars || theme).shape.borderRadius, + transition: theme.transitions.create( + ['background-color', 'box-shadow', 'border-color', 'color'], + { + duration: theme.transitions.duration.short, + }, + ), + '&:hover': { + textDecoration: 'none', + }, + [`&.${buttonClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, + }, + variants: [ + { + props: { variant: 'contained' }, + style: { + color: `var(--variant-containedColor)`, + backgroundColor: `var(--variant-containedBg)`, + boxShadow: (theme.vars || theme).shadows[2], + '&:hover': { + boxShadow: (theme.vars || theme).shadows[4], // Reset on touch devices, it doesn't add specificity '@media (hover: none)': { - backgroundColor: 'transparent', + boxShadow: (theme.vars || theme).shadows[2], }, - }), - ...(ownerState.variant === 'contained' && { - backgroundColor: theme.vars - ? theme.vars.palette.Button.inheritContainedHoverBg - : inheritContainedHoverBackgroundColor, - boxShadow: (theme.vars || theme).shadows[4], - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - boxShadow: (theme.vars || theme).shadows[2], - backgroundColor: (theme.vars || theme).palette.grey[300], }, - }), - ...(ownerState.variant === 'contained' && - ownerState.color !== 'inherit' && { - backgroundColor: (theme.vars || theme).palette[ownerState.color].dark, - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - }, - }), + '&:active': { + boxShadow: (theme.vars || theme).shadows[8], + }, + [`&.${buttonClasses.focusVisible}`]: { + boxShadow: (theme.vars || theme).shadows[6], + }, + [`&.${buttonClasses.disabled}`]: { + color: (theme.vars || theme).palette.action.disabled, + boxShadow: (theme.vars || theme).shadows[0], + backgroundColor: (theme.vars || theme).palette.action.disabledBackground, + }, + }, }, - '&:active': { - ...(ownerState.variant === 'contained' && { - boxShadow: (theme.vars || theme).shadows[8], - }), + { + props: { variant: 'outlined' }, + style: { + padding: '5px 15px', + border: '1px solid currentColor', + borderColor: `var(--variant-outlinedBorder, currentColor)`, + backgroundColor: `var(--variant-outlinedBg)`, + color: `var(--variant-outlinedColor)`, + [`&.${buttonClasses.disabled}`]: { + border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`, + }, + }, }, - [`&.${buttonClasses.focusVisible}`]: { - ...(ownerState.variant === 'contained' && { - boxShadow: (theme.vars || theme).shadows[6], - }), + { + props: { variant: 'text' }, + style: { + padding: '6px 8px', + color: `var(--variant-textColor)`, + backgroundColor: `var(--variant-textBg)`, + }, }, - [`&.${buttonClasses.disabled}`]: { - color: (theme.vars || theme).palette.action.disabled, - ...(ownerState.variant === 'outlined' && { - border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`, - }), - ...(ownerState.variant === 'contained' && { - color: (theme.vars || theme).palette.action.disabled, - boxShadow: (theme.vars || theme).shadows[0], - backgroundColor: (theme.vars || theme).palette.action.disabledBackground, - }), + ...Object.entries(theme.palette) + .filter(([, palette]) => palette.main && palette.dark && palette.contrastText) + .map(([color]) => ({ + props: { color }, + style: { + '--variant-textColor': (theme.vars || theme).palette[color].main, + '--variant-outlinedColor': (theme.vars || theme).palette[color].main, + '--variant-outlinedBorder': theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` + : alpha(theme.palette[color].main, 0.5), + '--variant-containedColor': (theme.vars || theme).palette[color].contrastText, + '--variant-containedBg': (theme.vars || theme).palette[color].main, + '@media (hover: hover)': { + '&:hover': { + '--variant-containedBg': (theme.vars || theme).palette[color].dark, + '--variant-textBg': theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity), + '--variant-outlinedBorder': (theme.vars || theme).palette[color].main, + '--variant-outlinedBg': theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity), + }, + }, + }, + })), + { + props: { + color: 'inherit', + }, + style: { + '--variant-containedColor': theme.vars + ? // this is safe because grey does not change between default light/dark mode + theme.vars.palette.text.primary + : theme.palette.getContrastText?.(inheritContainedBackgroundColor), + '--variant-containedBg': theme.vars + ? theme.vars.palette.Button.inheritContainedBg + : inheritContainedBackgroundColor, + '@media (hover: hover)': { + '&:hover': { + '--variant-containedBg': theme.vars + ? theme.vars.palette.Button.inheritContainedHoverBg + : inheritContainedHoverBackgroundColor, + '--variant-textBg': theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), + '--variant-outlinedBg': theme.vars + ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity), + }, + }, + }, }, - ...(ownerState.variant === 'text' && { - padding: '6px 8px', - }), - ...(ownerState.variant === 'text' && - ownerState.color !== 'inherit' && { - color: (theme.vars || theme).palette[ownerState.color].main, - }), - ...(ownerState.variant === 'outlined' && { - padding: '5px 15px', - border: '1px solid currentColor', - }), - ...(ownerState.variant === 'outlined' && - ownerState.color !== 'inherit' && { - color: (theme.vars || theme).palette[ownerState.color].main, - border: theme.vars - ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` - : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`, - }), - ...(ownerState.variant === 'contained' && { - color: theme.vars - ? // this is safe because grey does not change between default light/dark mode - theme.vars.palette.text.primary - : theme.palette.getContrastText?.(theme.palette.grey[300]), - backgroundColor: theme.vars - ? theme.vars.palette.Button.inheritContainedBg - : inheritContainedBackgroundColor, - boxShadow: (theme.vars || theme).shadows[2], - }), - ...(ownerState.variant === 'contained' && - ownerState.color !== 'inherit' && { - color: (theme.vars || theme).palette[ownerState.color].contrastText, - backgroundColor: (theme.vars || theme).palette[ownerState.color].main, - }), - ...(ownerState.color === 'inherit' && { - color: 'inherit', - borderColor: 'currentColor', - }), - ...(ownerState.size === 'small' && - ownerState.variant === 'text' && { + { + props: { + size: 'small', + variant: 'text', + }, + style: { padding: '4px 5px', fontSize: theme.typography.pxToRem(13), - }), - ...(ownerState.size === 'large' && - ownerState.variant === 'text' && { + }, + }, + { + props: { + size: 'large', + variant: 'text', + }, + style: { padding: '8px 11px', fontSize: theme.typography.pxToRem(15), - }), - ...(ownerState.size === 'small' && - ownerState.variant === 'outlined' && { + }, + }, + { + props: { + size: 'small', + variant: 'outlined', + }, + style: { padding: '3px 9px', fontSize: theme.typography.pxToRem(13), - }), - ...(ownerState.size === 'large' && - ownerState.variant === 'outlined' && { + }, + }, + { + props: { + size: 'large', + variant: 'outlined', + }, + style: { padding: '7px 21px', fontSize: theme.typography.pxToRem(15), - }), - ...(ownerState.size === 'small' && - ownerState.variant === 'contained' && { + }, + }, + { + props: { + size: 'small', + variant: 'contained', + }, + style: { padding: '4px 10px', fontSize: theme.typography.pxToRem(13), - }), - ...(ownerState.size === 'large' && - ownerState.variant === 'contained' && { + }, + }, + { + props: { + size: 'large', + variant: 'contained', + }, + style: { padding: '8px 22px', fontSize: theme.typography.pxToRem(15), - }), - ...(ownerState.fullWidth && { - width: '100%', - }), - }; - }, - ({ ownerState }) => - ownerState.disableElevation && { - boxShadow: 'none', - '&:hover': { - boxShadow: 'none', - }, - [`&.${buttonClasses.focusVisible}`]: { - boxShadow: 'none', + }, }, - '&:active': { - boxShadow: 'none', + { + props: { + disableElevation: true, + }, + style: { + boxShadow: 'none', + '&:hover': { + boxShadow: 'none', + }, + [`&.${buttonClasses.focusVisible}`]: { + boxShadow: 'none', + }, + '&:active': { + boxShadow: 'none', + }, + [`&.${buttonClasses.disabled}`]: { + boxShadow: 'none', + }, + }, }, - [`&.${buttonClasses.disabled}`]: { - boxShadow: 'none', + { + props: { fullWidth: true }, + style: { width: '100%' }, }, - }, -); + ], + }; +}); const ButtonStartIcon = styled('span', { name: 'MuiButton', @@ -268,14 +308,19 @@ const ButtonStartIcon = styled('span', { return [styles.startIcon, styles[`iconSize${capitalize(ownerState.size)}`]]; }, -})(({ ownerState }) => ({ +})(() => ({ display: 'inherit', marginRight: 8, marginLeft: -4, - ...(ownerState.size === 'small' && { - marginLeft: -2, - }), - ...commonIconStyles(ownerState), + variants: [ + { + props: { size: 'small' }, + style: { + marginLeft: -2, + }, + }, + ...commonIconStyles, + ], })); const ButtonEndIcon = styled('span', { @@ -286,14 +331,19 @@ const ButtonEndIcon = styled('span', { return [styles.endIcon, styles[`iconSize${capitalize(ownerState.size)}`]]; }, -})(({ ownerState }) => ({ +})(() => ({ display: 'inherit', marginRight: -4, marginLeft: 8, - ...(ownerState.size === 'small' && { - marginRight: -2, - }), - ...commonIconStyles(ownerState), + variants: [ + { + props: { size: 'small' }, + style: { + marginRight: -2, + }, + }, + ...commonIconStyles, + ], })); const Button = React.forwardRef(function Button(inProps, ref) { diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js index bad1a0f69f2891..e023daddf594a6 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.js +++ b/packages/mui-material/src/ButtonBase/ButtonBase.js @@ -5,14 +5,15 @@ import clsx from 'clsx'; import refType from '@mui/utils/refType'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import useForkRef from '../utils/useForkRef'; import useEventCallback from '../utils/useEventCallback'; import useIsFocusVisible from '../utils/useIsFocusVisible'; import TouchRipple from './TouchRipple'; import buttonBaseClasses, { getButtonBaseUtilityClass } from './buttonBaseClasses'; +const useThemeProps = createUseThemeProps('MuiButtonBase'); + const useUtilityClasses = (ownerState) => { const { disabled, focusVisible, focusVisibleClassName, classes } = ownerState; diff --git a/packages/mui-material/src/ButtonBase/Ripple.js b/packages/mui-material/src/ButtonBase/Ripple.js index 7daadb96618fac..edcf4caddfa7d9 100644 --- a/packages/mui-material/src/ButtonBase/Ripple.js +++ b/packages/mui-material/src/ButtonBase/Ripple.js @@ -57,7 +57,7 @@ function Ripple(props) { ); } -Ripple.propTypes = { +Ripple.propTypes /* remove-proptypes */ = { /** * Override or extend the styles applied to the component. */ diff --git a/packages/mui-material/src/ButtonBase/TouchRipple.js b/packages/mui-material/src/ButtonBase/TouchRipple.js index 6834650d85fc06..0d4fc84c9aa6ac 100644 --- a/packages/mui-material/src/ButtonBase/TouchRipple.js +++ b/packages/mui-material/src/ButtonBase/TouchRipple.js @@ -3,13 +3,13 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { TransitionGroup } from 'react-transition-group'; import clsx from 'clsx'; -import { keyframes } from '@mui/system'; import useTimeout from '@mui/utils/useTimeout'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { keyframes, styled, createUseThemeProps } from '../zero-styled'; import Ripple from './Ripple'; import touchRippleClasses from './touchRippleClasses'; +const useThemeProps = createUseThemeProps('MuiTouchRipple'); + const DURATION = 550; export const DELAY_RIPPLE = 80; @@ -316,7 +316,7 @@ const TouchRipple = React.forwardRef(function TouchRipple(inProps, ref) { ); }); -TouchRipple.propTypes = { +TouchRipple.propTypes /* remove-proptypes */ = { /** * If `true`, the ripple starts at the center of the component * rather than at the point of interaction. diff --git a/packages/mui-material/src/zero-styled/index.ts b/packages/mui-material/src/zero-styled/index.ts index fc74b033f7d4a6..e36c2ac982e786 100644 --- a/packages/mui-material/src/zero-styled/index.ts +++ b/packages/mui-material/src/zero-styled/index.ts @@ -1,5 +1,7 @@ import useThemeProps from '../styles/useThemeProps'; +export { keyframes } from '@mui/system'; + export { default as styled } from '../styles/styled'; // eslint-disable-next-line @typescript-eslint/no-unused-vars diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ccdc319d95bb87..05602f7d0cfe08 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -371,6 +371,9 @@ importers: '@mui/icons-material': specifier: workspace:^ version: link:../../packages/mui-icons-material/build + '@mui/lab': + specifier: workspace:^ + version: link:../../packages/mui-lab/build '@mui/material': specifier: workspace:^ version: link:../../packages/mui-material/build @@ -426,6 +429,9 @@ importers: '@mui/icons-material': specifier: workspace:^ version: link:../../packages/mui-icons-material/build + '@mui/lab': + specifier: workspace:^ + version: link:../../packages/mui-lab/build '@mui/material': specifier: workspace:^ version: link:../../packages/mui-material/build