Skip to content

Commit

Permalink
[material-ui][ToggleButton] Convert to support CSS extraction (#41782)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lhilgert9
lhilgert9 authored Apr 10, 2024
1 parent b621730 commit 3cde1e7
Show file tree
Hide file tree
Showing 5 changed files with 274 additions and 110 deletions.
2 changes: 2 additions & 0 deletions apps/pigment-css-next-app/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ export default function RootLayout(props: { children: React.ReactNode }) {
background-color: ${({ theme: t }) => t.vars.palette.background.default};
color: ${({ theme: t }) => t.vars.palette.text.primary};
background-image: url('@/assets/mui.svg');
background-repeat: no-repeat;
background-position: 1rem 1rem;
`}`}
>
<AppRouterCacheProvider>
Expand Down
65 changes: 65 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/react-toggle-button/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
'use client';
import * as React from 'react';
import ColorToggleButton from '../../../../../../docs/data/material/components/toggle-button/ColorToggleButton';
import CustomizedDividers from '../../../../../../docs/data/material/components/toggle-button/CustomizedDividers';
import StandaloneToggleButton from '../../../../../../docs/data/material/components/toggle-button/StandaloneToggleButton';
import ToggleButtonNotEmpty from '../../../../../../docs/data/material/components/toggle-button/ToggleButtonNotEmpty';
import ToggleButtonSizes from '../../../../../../docs/data/material/components/toggle-button/ToggleButtonSizes';
import ToggleButtons from '../../../../../../docs/data/material/components/toggle-button/ToggleButtons';
import ToggleButtonsMultiple from '../../../../../../docs/data/material/components/toggle-button/ToggleButtonsMultiple';
import VerticalToggleButtons from '../../../../../../docs/data/material/components/toggle-button/VerticalToggleButtons';

export default function ToggleButton() {
return (
<React.Fragment>
<section>
<h2> Color Toggle Button</h2>
<div className="demo-container">
<ColorToggleButton />
</div>
</section>
<section>
<h2> Customized Dividers</h2>
<div className="demo-container">
<CustomizedDividers />
</div>
</section>
<section>
<h2> Standalone Toggle Button</h2>
<div className="demo-container">
<StandaloneToggleButton />
</div>
</section>
<section>
<h2> Toggle Button Not Empty</h2>
<div className="demo-container">
<ToggleButtonNotEmpty />
</div>
</section>
<section>
<h2> Toggle Button Sizes</h2>
<div className="demo-container">
<ToggleButtonSizes />
</div>
</section>
<section>
<h2> Toggle Buttons</h2>
<div className="demo-container">
<ToggleButtons />
</div>
</section>
<section>
<h2> Toggle Buttons Multiple</h2>
<div className="demo-container">
<ToggleButtonsMultiple />
</div>
</section>
<section>
<h2> Vertical Toggle Buttons</h2>
<div className="demo-container">
<VerticalToggleButtons />
</div>
</section>
</React.Fragment>
);
}
66 changes: 66 additions & 0 deletions apps/pigment-css-vite-app/src/pages/material-ui/react-toggle-button.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import * as React from 'react';
import MaterialUILayout from '../../Layout';
import ColorToggleButton from '../../../../../docs/data/material/components/toggle-button/ColorToggleButton.tsx';
import CustomizedDividers from '../../../../../docs/data/material/components/toggle-button/CustomizedDividers.tsx';
import StandaloneToggleButton from '../../../../../docs/data/material/components/toggle-button/StandaloneToggleButton.tsx';
import ToggleButtonNotEmpty from '../../../../../docs/data/material/components/toggle-button/ToggleButtonNotEmpty.tsx';
import ToggleButtonSizes from '../../../../../docs/data/material/components/toggle-button/ToggleButtonSizes.tsx';
import ToggleButtons from '../../../../../docs/data/material/components/toggle-button/ToggleButtons.tsx';
import ToggleButtonsMultiple from '../../../../../docs/data/material/components/toggle-button/ToggleButtonsMultiple.tsx';
import VerticalToggleButtons from '../../../../../docs/data/material/components/toggle-button/VerticalToggleButtons.tsx';

export default function ToggleButton() {
return (
<MaterialUILayout>
<h1>ToggleButton</h1>
<section>
<h2> Color Toggle Button</h2>
<div className="demo-container">
<ColorToggleButton />
</div>
</section>
<section>
<h2> Customized Dividers</h2>
<div className="demo-container">
<CustomizedDividers />
</div>
</section>
<section>
<h2> Standalone Toggle Button</h2>
<div className="demo-container">
<StandaloneToggleButton />
</div>
</section>
<section>
<h2> Toggle Button Not Empty</h2>
<div className="demo-container">
<ToggleButtonNotEmpty />
</div>
</section>
<section>
<h2> Toggle Button Sizes</h2>
<div className="demo-container">
<ToggleButtonSizes />
</div>
</section>
<section>
<h2> Toggle Buttons</h2>
<div className="demo-container">
<ToggleButtons />
</div>
</section>
<section>
<h2> Toggle Buttons Multiple</h2>
<div className="demo-container">
<ToggleButtonsMultiple />
</div>
</section>
<section>
<h2> Vertical Toggle Buttons</h2>
<div className="demo-container">
<VerticalToggleButtons />
</div>
</section>
</MaterialUILayout>
);
}
164 changes: 97 additions & 67 deletions packages/mui-material/src/ToggleButton/ToggleButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ import PropTypes from 'prop-types';
import clsx from 'clsx';
import resolveProps from '@mui/utils/resolveProps';
import composeClasses from '@mui/utils/composeClasses';
import { alpha } from '../styles';
import { alpha } from '@mui/system/colorManipulator';
import ButtonBase from '../ButtonBase';
import capitalize from '../utils/capitalize';
import useThemeProps from '../styles/useThemeProps';
import styled from '../styles/styled';
import { createUseThemeProps, styled } from '../zero-styled';
import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses';
import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext';
import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext';
import isValueSelected from '../ToggleButtonGroup/isValueSelected';

const useThemeProps = createUseThemeProps('MuiToggleButton');

const useUtilityClasses = (ownerState) => {
const { classes, fullWidth, selected, disabled, size, color } = ownerState;

Expand All @@ -40,76 +41,105 @@ const ToggleButtonRoot = styled(ButtonBase, {

return [styles.root, styles[`size${capitalize(ownerState.size)}`]];
},
})(({ theme, ownerState }) => {
let selectedColor =
ownerState.color === 'standard'
? theme.palette.text.primary
: theme.palette[ownerState.color].main;
let selectedColorChannel;
if (theme.vars) {
selectedColor =
ownerState.color === 'standard'
? theme.vars.palette.text.primary
: theme.vars.palette[ownerState.color].main;
selectedColorChannel =
ownerState.color === 'standard'
? theme.vars.palette.text.primaryChannel
: theme.vars.palette[ownerState.color].mainChannel;
}

return {
...theme.typography.button,
borderRadius: (theme.vars || theme).shape.borderRadius,
padding: 11,
border: `1px solid ${(theme.vars || theme).palette.divider}`,
color: (theme.vars || theme).palette.action.active,
...(ownerState.fullWidth && {
width: '100%',
}),
[`&.${toggleButtonClasses.disabled}`]: {
color: (theme.vars || theme).palette.action.disabled,
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
})(({ theme }) => ({
...theme.typography.button,
borderRadius: (theme.vars || theme).shape.borderRadius,
padding: 11,
border: `1px solid ${(theme.vars || theme).palette.divider}`,
color: (theme.vars || theme).palette.action.active,
[`&.${toggleButtonClasses.disabled}`]: {
color: (theme.vars || theme).palette.action.disabled,
border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`,
},
'&:hover': {
textDecoration: 'none',
// Reset on mouse devices
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})`
: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
'@media (hover: none)': {
backgroundColor: 'transparent',
},
'&:hover': {
textDecoration: 'none',
// Reset on mouse devices
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})`
: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
'@media (hover: none)': {
backgroundColor: 'transparent',
},
variants: [
{
props: { color: 'standard' },
style: {
[`&.${toggleButtonClasses.selected}`]: {
color: (theme.vars || theme).palette.text.primary,
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
'&:hover': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
: alpha(
theme.palette.text.primary,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
},
},
},
},
},
[`&.${toggleButtonClasses.selected}`]: {
color: selectedColor,
backgroundColor: theme.vars
? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(selectedColor, theme.palette.action.selectedOpacity),
'&:hover': {
backgroundColor: theme.vars
? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
: alpha(
selectedColor,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.vars
? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(selectedColor, theme.palette.action.selectedOpacity),
...Object.keys((theme.vars || theme).palette)
.filter((key) =>
theme.vars
? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
: theme.palette[key].main,
)
.map((color) => ({
props: { color },
style: {
[`&.${toggleButtonClasses.selected}`]: {
color: (theme.vars || theme).palette[color].main,
backgroundColor: theme.vars
? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(theme.palette[color].main, theme.palette.action.selectedOpacity),
'&:hover': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))`
: alpha(
theme.palette[color].main,
theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity,
),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})`
: alpha(theme.palette[color].main, theme.palette.action.selectedOpacity),
},
},
},
},
})),
{
props: { fullWidth: true },
style: {
width: '100%',
},
},
...(ownerState.size === 'small' && {
padding: 7,
fontSize: theme.typography.pxToRem(13),
}),
...(ownerState.size === 'large' && {
padding: 15,
fontSize: theme.typography.pxToRem(15),
}),
};
});
{
props: { size: 'small' },
style: {
padding: 7,
fontSize: theme.typography.pxToRem(13),
},
},
{
props: { size: 'large' },
style: {
padding: 15,
fontSize: theme.typography.pxToRem(15),
},
},
],
}));

const ToggleButton = React.forwardRef(function ToggleButton(inProps, ref) {
// props priority: `inProps` > `contextProps` > `themeDefaultProps`
Expand Down
Loading

0 comments on commit 3cde1e7

Please sign in to comment.