From 5a289ebf06775904005686bc638aa52c419969af Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Fri, 29 Mar 2024 00:56:54 -0300 Subject: [PATCH] [material-ui][ButtonGroup] Convert to support CSS extraction (#41666) --- apps/pigment-css-next-app/package.json | 1 + .../material-ui/react-button-group/page.tsx | 58 ++++ apps/pigment-css-vite-app/package.json | 1 + .../pages/material-ui/react-button-group.tsx | 59 ++++ .../src/ButtonGroup/ButtonGroup.js | 267 ++++++++++-------- pnpm-lock.yaml | 6 + 6 files changed, 282 insertions(+), 110 deletions(-) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx 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/material-ui/react-button-group/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx new file mode 100644 index 00000000000000..73eeddd9668ec6 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-button-group/page.tsx @@ -0,0 +1,58 @@ +'use client'; +import * as React from 'react'; +import BasicButtonGroup from '../../../../../../docs/data/material/components/button-group/BasicButtonGroup'; +import DisableElevation from '../../../../../../docs/data/material/components/button-group/DisableElevation'; +import GroupOrientation from '../../../../../../docs/data/material/components/button-group/GroupOrientation'; +import GroupSizesColors from '../../../../../../docs/data/material/components/button-group/GroupSizesColors'; +import LoadingButtonGroup from '../../../../../../docs/data/material/components/button-group/LoadingButtonGroup'; +import SplitButton from '../../../../../../docs/data/material/components/button-group/SplitButton'; +import VariantButtonGroup from '../../../../../../docs/data/material/components/button-group/VariantButtonGroup'; + +export default function ButtonGroup() { + return ( + +
+

Basic Button Group

+
+ +
+
+
+

Disable Elevation

+
+ +
+
+
+

Group Orientation

+
+ +
+
+
+

Group Sizes Colors

+
+ +
+
+
+

Loading Button Group

+
+ +
+
+
+

Split Button

+
+ +
+
+
+

Variant Button Group

+
+ +
+
+ + ); +} 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-group.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx new file mode 100644 index 00000000000000..9c320eaeb63a15 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-button-group.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BasicButtonGroup from '../../../../../docs/data/material/components/button-group/BasicButtonGroup.tsx'; +import DisableElevation from '../../../../../docs/data/material/components/button-group/DisableElevation.tsx'; +import GroupOrientation from '../../../../../docs/data/material/components/button-group/GroupOrientation.tsx'; +import GroupSizesColors from '../../../../../docs/data/material/components/button-group/GroupSizesColors.tsx'; +import LoadingButtonGroup from '../../../../../docs/data/material/components/button-group/LoadingButtonGroup.tsx'; +import SplitButton from '../../../../../docs/data/material/components/button-group/SplitButton.tsx'; +import VariantButtonGroup from '../../../../../docs/data/material/components/button-group/VariantButtonGroup.tsx'; + +export default function ButtonGroup() { + return ( + +

Button-group

+
+

Basic Button Group

+
+ +
+
+
+

Disable Elevation

+
+ +
+
+
+

Group Orientation

+
+ +
+
+
+

Group Sizes Colors

+
+ +
+
+
+

Loading Button Group

+
+ +
+
+
+

Split Button

+
+ +
+
+
+

Variant Button Group

+
+ +
+
+ + ); +} diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 7153a43d09ded9..179dec4ae71074 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -6,12 +6,13 @@ import composeClasses from '@mui/utils/composeClasses'; import { alpha } from '@mui/system/colorManipulator'; import getValidReactChildren from '@mui/utils/getValidReactChildren'; import capitalize from '../utils/capitalize'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses'; import ButtonGroupContext from './ButtonGroupContext'; import ButtonGroupButtonContext from './ButtonGroupButtonContext'; +const useThemeProps = createUseThemeProps('MuiButtonGroup'); + const overridesResolver = (props, styles) => { const { ownerState } = props; @@ -79,123 +80,169 @@ const ButtonGroupRoot = styled('div', { name: 'MuiButtonGroup', slot: 'Root', overridesResolver, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ display: 'inline-flex', borderRadius: (theme.vars || theme).shape.borderRadius, - ...(ownerState.variant === 'contained' && { - boxShadow: (theme.vars || theme).shadows[2], - }), - ...(ownerState.disableElevation && { - boxShadow: 'none', - }), - ...(ownerState.fullWidth && { - width: '100%', - }), - ...(ownerState.orientation === 'vertical' && { - flexDirection: 'column', - }), - [`& .${buttonGroupClasses.grouped}`]: { - minWidth: 40, - '&:hover': { - ...(ownerState.variant === 'contained' && { + variants: [ + { + props: { variant: 'contained' }, + style: { + boxShadow: (theme.vars || theme).shadows[2], + }, + }, + { + props: { disableElevation: true }, + style: { boxShadow: 'none', - }), + }, }, - ...(ownerState.variant === 'contained' && { - boxShadow: 'none', - }), - }, - [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { - ...(ownerState.orientation === 'horizontal' && { - borderTopRightRadius: 0, - borderBottomRightRadius: 0, - }), - ...(ownerState.orientation === 'vertical' && { - borderBottomRightRadius: 0, - borderBottomLeftRadius: 0, - }), - ...(ownerState.variant === 'text' && - ownerState.orientation === 'horizontal' && { - borderRight: theme.vars - ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` - : `1px solid ${ - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, - [`&.${buttonGroupClasses.disabled}`]: { - borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + { + props: { fullWidth: true }, + style: { + width: '100%', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + flexDirection: 'column', + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + borderTopRightRadius: 0, + borderTopLeftRadius: 0, }, - }), - ...(ownerState.variant === 'text' && - ownerState.orientation === 'vertical' && { - borderBottom: theme.vars - ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` - : `1px solid ${ - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' - }`, - [`&.${buttonGroupClasses.disabled}`]: { - borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderBottomRightRadius: 0, + borderBottomLeftRadius: 0, }, - }), - ...(ownerState.variant === 'text' && - ownerState.color !== 'inherit' && { - borderColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` - : alpha(theme.palette[ownerState.color].main, 0.5), - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'horizontal' && { - borderRightColor: 'transparent', - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'vertical' && { - borderBottomColor: 'transparent', - }), - ...(ownerState.variant === 'contained' && - ownerState.orientation === 'horizontal' && { - borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`, - [`&.${buttonGroupClasses.disabled}`]: { - borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + { + props: { orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderTopRightRadius: 0, + borderBottomRightRadius: 0, }, - }), - ...(ownerState.variant === 'contained' && - ownerState.orientation === 'vertical' && { - borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`, - [`&.${buttonGroupClasses.disabled}`]: { - borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, }, - }), - ...(ownerState.variant === 'contained' && - ownerState.color !== 'inherit' && { - borderColor: (theme.vars || theme).palette[ownerState.color].dark, - }), - '&:hover': { - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'horizontal' && { - borderRightColor: 'currentColor', - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'vertical' && { - borderBottomColor: 'currentColor', - }), + }, + }, + { + props: { variant: 'text', orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderRight: theme.vars + ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : `1px solid ${ + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, + [`&.${buttonGroupClasses.disabled}`]: { + borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + }, + { + props: { variant: 'text', orientation: 'vertical' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderBottom: theme.vars + ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` + : `1px solid ${ + theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)' + }`, + [`&.${buttonGroupClasses.disabled}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.main) + .flatMap(([color]) => [ + { + props: { variant: 'text', color }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` + : alpha(theme.palette[color].main, 0.5), + }, + }, + }, + ]), + { + props: { variant: 'outlined', orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderRightColor: 'transparent', + '&:hover': { + borderRightColor: 'currentColor', + }, + }, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + marginLeft: -1, + }, + }, + }, + { + props: { variant: 'outlined', orientation: 'vertical' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderBottomColor: 'transparent', + '&:hover': { + borderBottomColor: 'currentColor', + }, + }, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + marginTop: -1, + }, + }, + }, + { + props: { variant: 'contained', orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`, + [`&.${buttonGroupClasses.disabled}`]: { + borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + }, + { + props: { variant: 'contained', orientation: 'vertical' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`, + [`&.${buttonGroupClasses.disabled}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.dark) + .map(([color]) => ({ + props: { variant: 'contained', color }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { + borderColor: (theme.vars || theme).palette[color].dark, + }, + }, + })), + ], + [`& .${buttonGroupClasses.grouped}`]: { + minWidth: 40, + boxShadow: 'none', + props: { variant: 'contained' }, + style: { + '&:hover': { + boxShadow: 'none', + }, }, - }, - [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { - ...(ownerState.orientation === 'horizontal' && { - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - }), - ...(ownerState.orientation === 'vertical' && { - borderTopRightRadius: 0, - borderTopLeftRadius: 0, - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'horizontal' && { - marginLeft: -1, - }), - ...(ownerState.variant === 'outlined' && - ownerState.orientation === 'vertical' && { - marginTop: -1, - }), }, })); 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