Skip to content

Commit

Permalink
[material-ui] Migrate components to support CSS extraction (#42001)
Browse files Browse the repository at this point in the history
  • Loading branch information
@siriwatknp
siriwatknp committed May 6, 2024
1 parent a8b1ce1 commit ad85002
Show file tree
Hide file tree
Showing 82 changed files with 2,547 additions and 1,372 deletions.
2 changes: 2 additions & 0 deletions .github/workflows/ci.yml
View file
Expand Up @@ -38,6 +38,8 @@ jobs:
cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
- run: pnpm install
- run: pnpm build:ci
env:
NODE_OPTIONS: --max_old_space_size=4096
- run: pnpm release:changelog
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Expand Down
27 changes: 27 additions & 0 deletions apps/pigment-css-next-app/next.config.js
View file
Expand Up @@ -96,6 +96,13 @@ theme.getColorSchemeSelector = (colorScheme) => {
return `@media (prefers-color-scheme: ${colorScheme})`;
};

function innerNoop() {
return null;
}
function outerNoop() {
return innerNoop;
}

/**
* @type {PigmentOptions}
*/
Expand All @@ -104,6 +111,26 @@ const pigmentOptions = {
transformLibraries: ['local-ui-lib'],
sourceMap: true,
displayName: true,
overrideContext: (context) => {
if (!context.$RefreshSig$) {
context.$RefreshSig$ = outerNoop;
}
return {
...context,
require: (id) => {
if (id === '@mui/styled-engine' || id === '@mui/styled-engine-sc') {
return {
__esModule: true,
default: () => () => () => null,
internal_processStyles: () => {},
keyframes: () => '',
css: () => '',
};
}
return context.require(id);
},
};
},
};

/** @type {import('next').NextConfig} */
Expand Down
4 changes: 2 additions & 2 deletions apps/pigment-css-next-app/package.json
View file
Expand Up @@ -9,7 +9,7 @@
"clean": "rimraf .next"
},
"dependencies": {
"@pigment-css/react": "^0.0.9",
"@pigment-css/react": "^0.0.10",
"@mui/utils": "workspace:^",
"@mui/base": "workspace:^",
"@mui/lab": "workspace:^",
Expand All @@ -24,7 +24,7 @@
"next": "latest"
},
"devDependencies": {
"@pigment-css/nextjs-plugin": "^0.0.9",
"@pigment-css/nextjs-plugin": "^0.0.10",
"@types/node": "^20.5.7",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.3.0",
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/material-ui/api/filled-input.json
View file
Expand Up @@ -19,7 +19,7 @@
},
"defaultValue": { "type": { "name": "any" } },
"disabled": { "type": { "name": "bool" } },
"disableUnderline": { "type": { "name": "bool" } },
"disableUnderline": { "type": { "name": "bool" }, "default": "false" },
"endAdornment": { "type": { "name": "node" } },
"error": { "type": { "name": "bool" } },
"fullWidth": { "type": { "name": "bool" }, "default": "false" },
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/material-ui/api/input.json
View file
Expand Up @@ -19,7 +19,7 @@
},
"defaultValue": { "type": { "name": "any" } },
"disabled": { "type": { "name": "bool" } },
"disableUnderline": { "type": { "name": "bool" } },
"disableUnderline": { "type": { "name": "bool" }, "default": "false" },
"endAdornment": { "type": { "name": "node" } },
"error": { "type": { "name": "bool" } },
"fullWidth": { "type": { "name": "bool" }, "default": "false" },
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -111,7 +111,7 @@
"@mui/utils": "workspace:^",
"@next/eslint-plugin-next": "^14.2.3",
"@octokit/rest": "^20.1.0",
"@pigment-css/react": "^0.0.9",
"@pigment-css/react": "^0.0.10",
"@playwright/test": "1.43.1",
"@types/enzyme": "^3.10.18",
"@types/fs-extra": "^11.0.4",
Expand Down
186 changes: 122 additions & 64 deletions packages/mui-lab/src/LoadingButton/LoadingButton.js
View file
Expand Up @@ -4,13 +4,15 @@ import PropTypes from 'prop-types';
import { chainPropTypes } from '@mui/utils';
import { capitalize, unstable_useId as useId } from '@mui/material/utils';
import { unstable_composeClasses as composeClasses } from '@mui/base';
import { styled, useThemeProps } from '@mui/material/styles';
import Button from '@mui/material/Button';
import { ButtonGroupContext } from '@mui/material/ButtonGroup';
import CircularProgress from '@mui/material/CircularProgress';
import resolveProps from '@mui/utils/resolveProps';
import { styled, createUseThemeProps } from '../zero-styled';
import loadingButtonClasses, { getLoadingButtonUtilityClass } from './loadingButtonClasses';

const useThemeProps = createUseThemeProps('MuiLoadingButton');

const useUtilityClasses = (ownerState) => {
const { loading, loadingPosition, classes } = ownerState;

Expand All @@ -32,7 +34,7 @@ const useUtilityClasses = (ownerState) => {
};
};

// TODO use `import { rootShouldForwardProp } from '../styles/styled';` once move to core
// TODO use `import rootShouldForwardProp from '../styles/rootShouldForwardProp';` once move to core
const rootShouldForwardProp = (prop) =>
prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as' && prop !== 'classes';
const LoadingButtonRoot = styled(Button, {
Expand All @@ -50,44 +52,55 @@ const LoadingButtonRoot = styled(Button, {
},
];
},
})(({ ownerState, theme }) => ({
})(({ theme }) => ({
[`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
{
transition: theme.transitions.create(['opacity'], {
duration: theme.transitions.duration.short,
}),
opacity: 0,
},
...(ownerState.loadingPosition === 'center' && {
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
duration: theme.transitions.duration.short,
}),
[`&.${loadingButtonClasses.loading}`]: {
color: 'transparent',
},
}),
...(ownerState.loadingPosition === 'start' &&
ownerState.fullWidth && {
[`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
{
transition: theme.transitions.create(['opacity'], {
duration: theme.transitions.duration.short,
}),
opacity: 0,
marginRight: -8,
},
}),
...(ownerState.loadingPosition === 'end' &&
ownerState.fullWidth && {
[`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
{
transition: theme.transitions.create(['opacity'], {
duration: theme.transitions.duration.short,
}),
opacity: 0,
marginLeft: -8,
variants: [
{
props: {
loadingPosition: 'center',
},
style: {
transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
duration: theme.transitions.duration.short,
}),
[`&.${loadingButtonClasses.loading}`]: {
color: 'transparent',
},
}),
},
},
{
props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
style: {
[`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
{
transition: theme.transitions.create(['opacity'], {
duration: theme.transitions.duration.short,
}),
opacity: 0,
marginRight: -8,
},
},
},
{
props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
style: {
[`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]:
{
transition: theme.transitions.create(['opacity'], {
duration: theme.transitions.duration.short,
}),
opacity: 0,
marginLeft: -8,
},
},
},
],
}));

const LoadingButtonLoadingIndicator = styled('span', {
Expand All @@ -100,41 +113,86 @@ const LoadingButtonLoadingIndicator = styled('span', {
styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`],
];
},
})(({ theme, ownerState }) => ({
})(({ theme }) => ({
position: 'absolute',
visibility: 'visible',
display: 'flex',
...(ownerState.loadingPosition === 'start' &&
(ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
left: ownerState.size === 'small' ? 10 : 14,
}),
...(ownerState.loadingPosition === 'start' &&
ownerState.variant === 'text' && {
left: 6,
}),
...(ownerState.loadingPosition === 'center' && {
left: '50%',
transform: 'translate(-50%)',
color: (theme.vars || theme).palette.action.disabled,
}),
...(ownerState.loadingPosition === 'end' &&
(ownerState.variant === 'outlined' || ownerState.variant === 'contained') && {
right: ownerState.size === 'small' ? 10 : 14,
}),
...(ownerState.loadingPosition === 'end' &&
ownerState.variant === 'text' && {
right: 6,
}),
...(ownerState.loadingPosition === 'start' &&
ownerState.fullWidth && {
position: 'relative',
left: -10,
}),
...(ownerState.loadingPosition === 'end' &&
ownerState.fullWidth && {
position: 'relative',
right: -10,
}),
variants: [
{
props: {
loadingPosition: 'start',
size: 'small',
},
style: {
left: 10,
},
},
{
props: ({ loadingPosition, ownerState }) =>
loadingPosition === 'start' && ownerState.size !== 'small',
style: {
left: 14,
},
},
{
props: {
variant: 'text',
loadingPosition: 'start',
},
style: {
left: 6,
},
},
{
props: {
loadingPosition: 'center',
},
style: {
left: '50%',
transform: 'translate(-50%)',
color: (theme.vars || theme).palette.action.disabled,
},
},
{
props: {
loadingPosition: 'end',
size: 'small',
},
style: {
right: 10,
},
},
{
props: ({ loadingPosition, ownerState }) =>
loadingPosition === 'end' && ownerState.size !== 'small',
style: {
right: 14,
},
},
{
props: {
variant: 'text',
loadingPosition: 'end',
},
style: {
right: 6,
},
},
{
props: ({ ownerState }) => ownerState.loadingPosition === 'start' && ownerState.fullWidth,
style: {
position: 'relative',
left: -10,
},
},
{
props: ({ ownerState }) => ownerState.loadingPosition === 'end' && ownerState.fullWidth,
style: {
position: 'relative',
right: -10,
},
},
],
}));

const LoadingButton = React.forwardRef(function LoadingButton(inProps, ref) {
Expand Down
8 changes: 8 additions & 0 deletions packages/mui-lab/src/zero-styled/index.ts
View file
@@ -0,0 +1,8 @@
import { useThemeProps } from '@mui/material/styles';

export { styled } from '@mui/material/styles';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
export function createUseThemeProps(name: string) {
return useThemeProps;
}
2 changes: 1 addition & 1 deletion packages/mui-material/src/Breadcrumbs/BreadcrumbCollapsed.js
View file
Expand Up @@ -2,7 +2,7 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { emphasize } from '@mui/system/colorManipulator';
import styled from '../styles/styled';
import { styled } from '../zero-styled';
import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
import ButtonBase from '../ButtonBase';

Expand Down
2 changes: 1 addition & 1 deletion packages/mui-material/src/Button/Button.js
View file
Expand Up @@ -5,7 +5,7 @@ import clsx from 'clsx';
import resolveProps from '@mui/utils/resolveProps';
import composeClasses from '@mui/utils/composeClasses';
import { alpha } from '@mui/system/colorManipulator';
import { rootShouldForwardProp } from '../styles/styled';
import rootShouldForwardProp from '../styles/rootShouldForwardProp';
import { styled, createUseThemeProps } from '../zero-styled';
import ButtonBase from '../ButtonBase';
import capitalize from '../utils/capitalize';
Expand Down
2 changes: 2 additions & 0 deletions packages/mui-material/src/Checkbox/Checkbox.js
View file
Expand Up @@ -117,6 +117,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {
indeterminateIcon: indeterminateIconProp = defaultIndeterminateIcon,
inputProps,
size = 'medium',
disableRipple = false,
className,
...other
} = props;
Expand All @@ -126,6 +127,7 @@ const Checkbox = React.forwardRef(function Checkbox(inProps, ref) {

const ownerState = {
...props,
disableRipple,
color,
indeterminate,
size,
Expand Down

0 comments on commit ad85002

Please sign in to comment.