From a1ff1a7fb0feebc9ddcd2475a7d67187c63b06b0 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 26 Mar 2024 14:18:00 -0300 Subject: [PATCH 1/7] Remove ownerstate from ButtonGroup --- .../src/ButtonGroup/ButtonGroup.js | 277 +++++++++++------- 1 file changed, 170 insertions(+), 107 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index 7153a43d09ded9..d53595dd6cc6ee 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,185 @@ 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', - }), + { + props: { fullWidth: true }, + style: { + width: '100%', + }, + }, + { + props: { orientation: 'vertical' }, + style: { + flexDirection: 'column', + }, + }, + ], + [`& .${buttonGroupClasses.grouped}`]: { + minWidth: 40, + variants: [ + { + props: { variant: 'contained' }, + style: { + boxShadow: 'none', + '&:hover': { + 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}`, + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + borderTopRightRadius: 0, + borderBottomRightRadius: 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}`, + }, + { + props: { orientation: 'vertical' }, + style: { + borderTopRightRadius: 0, + borderBottomRightRadius: 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: { variant: 'text', orientation: 'horizontal' }, + style: { + 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}`, + }, }, - }), - ...(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}`, + }, + { + props: { variant: 'text', orientation: 'vertical' }, + style: { + 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}`, + }, }, - }), - ...(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: 'vertical' }, + style: { + 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}`, + }, + }, + }, + { + props: (props) => props.variant === 'text' && props.color !== 'inherit', + style: { + borderColor: theme.vars + ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` + : alpha(theme.palette[ownerState.color].main, 0.5), + }, + }, + { + props: { variant: 'outlined', orientation: 'horizontal' }, + style: { + borderRightColor: 'transparent', + '&:hover': { + borderRightColor: 'currentColor', + }, + }, + }, + { + props: { variant: 'outlined', orientation: 'vertical' }, + style: { + borderBottomColor: 'transparent', + '&:hover': { + borderBottomColor: 'currentColor', + }, + }, + }, + { + props: { variant: 'contained', orientation: 'horizontal' }, + style: { + 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: { + borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`, + [`&.${buttonGroupClasses.disabled}`]: { + borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`, + }, + }, + }, + { + props: (props) => props.variant === 'contained' && props.color !== 'inherit', + style: { + borderColor: (theme.vars || theme).palette[ownerState.color].dark, + }, + }, + ], }, [`& .${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, - }), + variants: [ + { + props: { orientation: 'horizontal' }, + style: { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, + }, + { + props: { orientation: 'vertical' }, + style: { + borderTopRightRadius: 0, + borderTopLeftRadius: 0, + }, + }, + { + props: { variant: 'outlined', orientation: 'horizontal' }, + style: { + marginLeft: -1, + }, + }, + { + props: { variant: 'outlined', orientation: 'vertical' }, + style: { + marginTop: -1, + }, + }, + ], }, })); From 244e74f2e61fc303cd0cbe3e2a4a9ba6a1d79b01 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 26 Mar 2024 14:32:37 -0300 Subject: [PATCH 2/7] Run node scripts/pigmentcss-render-mui-demos.mjs react-button-group --- .../material-ui/react-button-group/page.tsx | 58 ++++++++++++++++++ .../pages/material-ui/react-button-group.tsx | 59 +++++++++++++++++++ 2 files changed, 117 insertions(+) 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/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/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

+
+ +
+
+ + ); +} From db6e576c7335c62106502cf68eb8c073718383e8 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 26 Mar 2024 15:18:02 -0300 Subject: [PATCH 3/7] Fix errors --- .../src/ButtonGroup/ButtonGroup.js | 50 ++++++++++--------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index d53595dd6cc6ee..bc1b30b9df874c 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -111,17 +111,13 @@ const ButtonGroupRoot = styled('div', { ], [`& .${buttonGroupClasses.grouped}`]: { minWidth: 40, - variants: [ - { - props: { variant: 'contained' }, - style: { - boxShadow: 'none', - '&:hover': { - boxShadow: 'none', - }, - }, + props: { variant: 'contained' }, + style: { + boxShadow: 'none', + '&:hover': { + boxShadow: 'none', }, - ], + }, }, [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { variants: [ @@ -178,14 +174,18 @@ const ButtonGroupRoot = styled('div', { }, }, }, - { - props: (props) => props.variant === 'text' && props.color !== 'inherit', - style: { - borderColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` - : alpha(theme.palette[ownerState.color].main, 0.5), - }, - }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.dark) + .flatMap(([color]) => [ + { + props: { variant: 'text', color: color }, + style: { + borderColor: theme.vars + ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` + : alpha(theme.palette[color].main, 0.5), + }, + }, + ]), { props: { variant: 'outlined', orientation: 'horizontal' }, style: { @@ -222,12 +222,14 @@ const ButtonGroupRoot = styled('div', { }, }, }, - { - props: (props) => props.variant === 'contained' && props.color !== 'inherit', - style: { - borderColor: (theme.vars || theme).palette[ownerState.color].dark, - }, - }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.dark) + .map(([color]) => ({ + props: { variant: 'contained', color }, + style: { + borderColor: theme.vars ? theme.vars.palette[color].dark : theme.palette[color].dark, + }, + })), ], }, [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { From 57e50b17cb0fe8fd5c436125037f34c5b15c7237 Mon Sep 17 00:00:00 2001 From: zanivan Date: Tue, 26 Mar 2024 17:57:50 -0300 Subject: [PATCH 4/7] Fix Argos --- .../src/ButtonGroup/ButtonGroup.js | 170 ++++++++---------- 1 file changed, 76 insertions(+), 94 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index bc1b30b9df874c..e904e824509294 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -106,38 +106,33 @@ const ButtonGroupRoot = styled('div', { props: { orientation: 'vertical' }, style: { flexDirection: 'column', - }, - }, - ], - [`& .${buttonGroupClasses.grouped}`]: { - minWidth: 40, - props: { variant: 'contained' }, - style: { - boxShadow: 'none', - '&:hover': { - boxShadow: 'none', - }, - }, - }, - [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { - variants: [ - { - props: { orientation: 'horizontal' }, - style: { + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { borderTopRightRadius: 0, + borderTopLeftRadius: 0, + }, + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { borderBottomRightRadius: 0, + borderBottomLeftRadius: 0, }, }, - { - props: { orientation: 'vertical' }, - style: { + }, + { + props: { orientation: 'horizontal' }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { borderTopRightRadius: 0, borderBottomRightRadius: 0, }, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + borderTopLeftRadius: 0, + borderBottomLeftRadius: 0, + }, }, - { - props: { variant: 'text', orientation: 'horizontal' }, - style: { + }, + { + 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 ${ @@ -148,22 +143,11 @@ const ButtonGroupRoot = styled('div', { }, }, }, - { - props: { variant: 'text', orientation: 'vertical' }, - style: { - 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}`, - }, - }, - }, - { - props: { variant: 'text', orientation: 'vertical' }, - style: { + }, + { + 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 ${ @@ -174,93 +158,91 @@ const ButtonGroupRoot = styled('div', { }, }, }, - ...Object.entries(theme.palette) - .filter(([, value]) => value.main && value.dark) - .flatMap(([color]) => [ - { - props: { variant: 'text', color: color }, - style: { + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.main && value.dark) + .flatMap(([color]) => [ + { + props: { variant: 'text', color: 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: { + }, + ]), + { + 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: { + }, + { + 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: { + }, + { + 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: { + }, + { + 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: { + }, + ...Object.entries(theme.palette) + .filter(([, value]) => value.dark) + .map(([color]) => ({ + props: { variant: 'contained', color }, + style: { + [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { borderColor: theme.vars ? theme.vars.palette[color].dark : theme.palette[color].dark, }, - })), - ], - }, - [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { - variants: [ - { - props: { orientation: 'horizontal' }, - style: { - borderTopLeftRadius: 0, - borderBottomLeftRadius: 0, - }, - }, - { - props: { orientation: 'vertical' }, - style: { - borderTopRightRadius: 0, - borderTopLeftRadius: 0, - }, - }, - { - props: { variant: 'outlined', orientation: 'horizontal' }, - style: { - marginLeft: -1, - }, - }, - { - props: { variant: 'outlined', orientation: 'vertical' }, - style: { - marginTop: -1, }, + })), + ], + [`& .${buttonGroupClasses.grouped}`]: { + minWidth: 40, + props: { variant: 'contained' }, + style: { + boxShadow: 'none', + '&:hover': { + boxShadow: 'none', }, - ], + }, }, })); From 16c12ac4c72536ee118e0181292143360411af92 Mon Sep 17 00:00:00 2001 From: zanivan Date: Wed, 27 Mar 2024 18:27:01 -0300 Subject: [PATCH 5/7] Tiny tweaks to styles --- .../mui-material/src/ButtonGroup/ButtonGroup.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index e904e824509294..ff4e90466dce6f 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -181,9 +181,9 @@ const ButtonGroupRoot = styled('div', { '&:hover': { borderRightColor: 'currentColor', }, - [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { - marginLeft: -1, - }, + }, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + marginLeft: -1, }, }, }, @@ -195,9 +195,9 @@ const ButtonGroupRoot = styled('div', { '&:hover': { borderBottomColor: 'currentColor', }, - [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { - marginTop: -1, - }, + }, + [`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: { + marginTop: -1, }, }, }, @@ -236,9 +236,9 @@ const ButtonGroupRoot = styled('div', { ], [`& .${buttonGroupClasses.grouped}`]: { minWidth: 40, + boxShadow: 'none', props: { variant: 'contained' }, style: { - boxShadow: 'none', '&:hover': { boxShadow: 'none', }, From e6db6afe4c0e0d37a4a64e794f4ccdf31fa410e2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 28 Mar 2024 14:48:30 +0700 Subject: [PATCH 6/7] minor adjustment --- packages/mui-material/src/ButtonGroup/ButtonGroup.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/ButtonGroup/ButtonGroup.js b/packages/mui-material/src/ButtonGroup/ButtonGroup.js index ff4e90466dce6f..179dec4ae71074 100644 --- a/packages/mui-material/src/ButtonGroup/ButtonGroup.js +++ b/packages/mui-material/src/ButtonGroup/ButtonGroup.js @@ -160,10 +160,10 @@ const ButtonGroupRoot = styled('div', { }, }, ...Object.entries(theme.palette) - .filter(([, value]) => value.main && value.dark) + .filter(([, value]) => value.main) .flatMap(([color]) => [ { - props: { variant: 'text', color: color }, + props: { variant: 'text', color }, style: { [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { borderColor: theme.vars @@ -229,7 +229,7 @@ const ButtonGroupRoot = styled('div', { props: { variant: 'contained', color }, style: { [`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: { - borderColor: theme.vars ? theme.vars.palette[color].dark : theme.palette[color].dark, + borderColor: (theme.vars || theme).palette[color].dark, }, }, })), From b2957342ef5d7b5f0c896a56e5214acdf935f6ba Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 29 Mar 2024 10:13:22 +0700 Subject: [PATCH 7/7] add @mui/lab --- apps/pigment-css-next-app/package.json | 1 + apps/pigment-css-vite-app/package.json | 1 + pnpm-lock.yaml | 6 ++++++ 3 files changed, 8 insertions(+) diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json index 77076aa8f18b36..b06570604a8d5e 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-vite-app/package.json b/apps/pigment-css-vite-app/package.json index d5b27d3d64f135..66be1b0201d160 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/pnpm-lock.yaml b/pnpm-lock.yaml index 233ae22f48ead7..8e3727a33e520a 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