From e0f85347149f4c17ef97bbe5ccf3e38b031d5f1f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 9 Jun 2024 15:55:02 +0700 Subject: [PATCH 01/12] migrate SwipeableDrawer --- packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js index 71e6f51c2932ae..5a83f8d6d6bfc8 100644 --- a/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js +++ b/packages/mui-material/src/SwipeableDrawer/SwipeableDrawer.js @@ -3,7 +3,6 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import PropTypes from 'prop-types'; import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef'; -import useThemeProps from '@mui/system/useThemeProps'; import { NoSsr } from '@mui/base'; import Drawer, { getAnchor, isHorizontal } from '../Drawer/Drawer'; import useForkRef from '../utils/useForkRef'; @@ -12,9 +11,12 @@ import ownerWindow from '../utils/ownerWindow'; import useEventCallback from '../utils/useEventCallback'; import useEnhancedEffect from '../utils/useEnhancedEffect'; import useTheme from '../styles/useTheme'; +import { createUseThemeProps } from '../zero-styled'; import { getTransitionProps } from '../transitions/utils'; import SwipeArea from './SwipeArea'; +const useThemeProps = createUseThemeProps('MuiSwipeableDrawer'); + // This value is closed to what browsers are using internally to // trigger a native scroll. const UNCERTAINTY_THRESHOLD = 3; // px From a2eeb20b81ce23edff514f41760c2325c4c763e1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 9 Jun 2024 15:56:11 +0700 Subject: [PATCH 02/12] migrate Popper --- packages/mui-material/src/Popper/Popper.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx index ea1ee028a96a75..f58ca02898e6dd 100644 --- a/packages/mui-material/src/Popper/Popper.tsx +++ b/packages/mui-material/src/Popper/Popper.tsx @@ -6,7 +6,10 @@ import refType from '@mui/utils/refType'; import HTMLElementType from '@mui/utils/HTMLElementType'; import PropTypes from 'prop-types'; import * as React from 'react'; -import { styled, Theme, useThemeProps } from '../styles'; +import { Theme } from '../styles'; +import { styled, createUseThemeProps } from '../zero-styled'; + +const useThemeProps = createUseThemeProps('MuiPopper'); export interface PopperProps extends Omit { /** From 64042cd54a9fefded01377d084f909cac302d633 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 14 Jun 2024 10:17:19 +0700 Subject: [PATCH 03/12] replace useTheme with useRtl --- packages/mui-material/src/Popper/Popper.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx index f58ca02898e6dd..74b08cc418ed57 100644 --- a/packages/mui-material/src/Popper/Popper.tsx +++ b/packages/mui-material/src/Popper/Popper.tsx @@ -1,7 +1,7 @@ 'use client'; import { Popper as BasePopper, PopperProps as BasePopperProps } from '@mui/base/Popper'; -import { Direction, SxProps } from '@mui/system'; -import useTheme from '@mui/system/useThemeWithoutDefault'; +import { SxProps } from '@mui/system'; +import { useRtl } from '@mui/system/RtlProvider'; import refType from '@mui/utils/refType'; import HTMLElementType from '@mui/utils/HTMLElementType'; import PropTypes from 'prop-types'; @@ -62,7 +62,7 @@ const Popper = React.forwardRef(function Popper( inProps: PopperProps, ref: React.ForwardedRef, ) { - const theme = useTheme<{ direction?: Direction }>(); + const isRtl = useRtl(); const props = useThemeProps({ props: inProps, name: 'MuiPopper', @@ -104,7 +104,7 @@ const Popper = React.forwardRef(function Popper( return ( Date: Fri, 14 Jun 2024 10:48:23 +0700 Subject: [PATCH 04/12] make CssBaseline supports Pigment --- .../src/CssBaseline/CssBaseline.js | 27 ++++++++++++------- .../mui-material/src/zero-styled/index.tsx | 9 ++++--- 2 files changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 12d16875e3f984..bf36a75a676b8d 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -1,10 +1,14 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import useThemeProps from '../styles/useThemeProps'; -import GlobalStyles from '../GlobalStyles'; +import { createUseThemeProps, globalCss } from '../zero-styled'; -export const html = (theme, enableColorScheme) => ({ +const useThemeProps = createUseThemeProps('MuiCssBaseline'); + +// `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better. +const SELECTOR = 'mui-ecs'; + +export const html = (theme) => ({ WebkitFontSmoothing: 'antialiased', // Antialiasing. MozOsxFontSmoothing: 'grayscale', // Antialiasing. // Change from `box-sizing: content-box` so that `width` @@ -13,7 +17,7 @@ export const html = (theme, enableColorScheme) => ({ // Fix font resize problem in iOS WebkitTextSizeAdjust: '100%', // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications. - ...(enableColorScheme && !theme.vars && { colorScheme: theme.palette.mode }), + ...(!theme.vars && { [`&:has(.${SELECTOR})`]: { colorScheme: theme.palette.mode } }), }); export const body = (theme) => ({ @@ -26,17 +30,19 @@ export const body = (theme) => ({ }, }); -export const styles = (theme, enableColorScheme = false) => { +export const styles = (theme) => { const colorSchemeStyles = {}; - if (enableColorScheme && theme.colorSchemes) { + if (theme.colorSchemes) { Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = { - colorScheme: scheme.palette?.mode, + [`&:has(.${SELECTOR})`]: { + colorScheme: scheme.palette?.mode, + }, }; }); } let defaultStyles = { - html: html(theme, enableColorScheme), + html: html(theme), '*, *::before, *::after': { boxSizing: 'inherit', }, @@ -63,6 +69,8 @@ export const styles = (theme, enableColorScheme = false) => { return defaultStyles; }; +const GlobalStyles = globalCss(({ theme }) => styles(theme)); + /** * Kickstart an elegant, consistent, and simple baseline to build upon. */ @@ -71,7 +79,8 @@ function CssBaseline(inProps) { const { children, enableColorScheme = false } = props; return ( - styles(theme, enableColorScheme)} /> + + {children} ); diff --git a/packages/mui-material/src/zero-styled/index.tsx b/packages/mui-material/src/zero-styled/index.tsx index fa7a468615daba..bc844123d88b8f 100644 --- a/packages/mui-material/src/zero-styled/index.tsx +++ b/packages/mui-material/src/zero-styled/index.tsx @@ -2,15 +2,18 @@ import * as React from 'react'; import { extendSxProp } from '@mui/system/styleFunctionSx'; import useThemeProps from '../styles/useThemeProps'; import useTheme from '../styles/useTheme'; -import GlobalStyles, { GlobalStylesProps } from '../GlobalStyles'; +import GlobalStyles from '../GlobalStyles'; export { css, keyframes } from '@mui/system'; export { default as styled } from '../styles/styled'; -export function globalCss(styles: GlobalStylesProps['styles']) { +export function globalCss(styles: any) { return function GlobalStylesWrapper() { - return ; + return ( + // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value. + styles({ theme }) : styles} /> + ); }; } From 9f90b2962318aa6208e978fcb431bfdd31ec0fca Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 14 Jun 2024 10:55:56 +0700 Subject: [PATCH 05/12] make ScopedCssBaseline support Pigment --- .../src/CssBaseline/CssBaseline.js | 9 +++++---- .../src/ScopedCssBaseline/ScopedCssBaseline.js | 18 ++++++++++++------ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index bf36a75a676b8d..11b66de1ffb04f 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -8,7 +8,7 @@ const useThemeProps = createUseThemeProps('MuiCssBaseline'); // `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better. const SELECTOR = 'mui-ecs'; -export const html = (theme) => ({ +export const html = (theme, enableColorScheme) => ({ WebkitFontSmoothing: 'antialiased', // Antialiasing. MozOsxFontSmoothing: 'grayscale', // Antialiasing. // Change from `box-sizing: content-box` so that `width` @@ -17,7 +17,8 @@ export const html = (theme) => ({ // Fix font resize problem in iOS WebkitTextSizeAdjust: '100%', // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications. - ...(!theme.vars && { [`&:has(.${SELECTOR})`]: { colorScheme: theme.palette.mode } }), + ...(enableColorScheme && + !theme.vars && { [`&:has(.${SELECTOR})`]: { colorScheme: theme.palette.mode } }), }); export const body = (theme) => ({ @@ -42,7 +43,7 @@ export const styles = (theme) => { }); } let defaultStyles = { - html: html(theme), + html: html(theme, true), '*, *::before, *::after': { boxSizing: 'inherit', }, @@ -80,7 +81,7 @@ function CssBaseline(inProps) { return ( - + {enableColorScheme && } {children} ); diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js index e061f697005ec3..b0d84f248b04e4 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js @@ -3,11 +3,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import useThemeProps from '../styles/useThemeProps'; -import styled from '../styles/styled'; +import { styled, createUseThemeProps } from '../zero-styled'; import { html, body } from '../CssBaseline/CssBaseline'; import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses'; +const useThemeProps = createUseThemeProps('MuiScopedCssBaseline'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -22,9 +23,9 @@ const ScopedCssBaselineRoot = styled('div', { name: 'MuiScopedCssBaseline', slot: 'Root', overridesResolver: (props, styles) => styles.root, -})(({ theme, ownerState }) => { +})(({ theme }) => { const colorSchemeStyles = {}; - if (ownerState.enableColorScheme && theme.colorSchemes) { + if (theme.colorSchemes) { Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = { colorScheme: scheme.palette?.mode, @@ -32,7 +33,7 @@ const ScopedCssBaselineRoot = styled('div', { }); } return { - ...html(theme, ownerState.enableColorScheme), + ...html(theme, false), ...body(theme), '& *, & *::before, & *::after': { boxSizing: 'inherit', @@ -40,7 +41,12 @@ const ScopedCssBaselineRoot = styled('div', { '& strong, & b': { fontWeight: theme.typography.fontWeightBold, }, - ...colorSchemeStyles, + variants: [ + { + props: { enableColorScheme: true }, + style: theme.vars ? colorSchemeStyles : { colorScheme: theme.palette.mode }, + }, + ], }; }); From 61ca07d4865219c4303f3c67233ff1c76032cea1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 19 Jun 2024 11:24:35 +0700 Subject: [PATCH 06/12] update types --- packages/mui-material/src/zero-styled/index.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/zero-styled/index.tsx b/packages/mui-material/src/zero-styled/index.tsx index bc844123d88b8f..c1975fc2aff620 100644 --- a/packages/mui-material/src/zero-styled/index.tsx +++ b/packages/mui-material/src/zero-styled/index.tsx @@ -1,18 +1,26 @@ import * as React from 'react'; +import { Interpolation } from '@mui/system'; import { extendSxProp } from '@mui/system/styleFunctionSx'; +import { Theme } from '../styles/createTheme'; import useThemeProps from '../styles/useThemeProps'; import useTheme from '../styles/useTheme'; -import GlobalStyles from '../GlobalStyles'; +import GlobalStyles, { GlobalStylesProps } from '../GlobalStyles'; export { css, keyframes } from '@mui/system'; export { default as styled } from '../styles/styled'; -export function globalCss(styles: any) { +export function globalCss(styles: Interpolation<{ theme: Theme }>) { return function GlobalStylesWrapper() { return ( // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value. - styles({ theme }) : styles} /> + styles({ theme }) + : styles) as GlobalStylesProps['styles'] + } + /> ); }; } From 17dd4742ca7417c90435de818b90e5e4730c919a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 20 Jun 2024 17:18:31 +0700 Subject: [PATCH 07/12] add popper demo --- .../src/app/material-ui/react-popper/page.tsx | 51 ++++++++++++++++++ .../src/pages/material-ui/react-popper.tsx | 52 +++++++++++++++++++ 2 files changed, 103 insertions(+) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-popper/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-popper.tsx diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-popper/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-popper/page.tsx new file mode 100644 index 00000000000000..99197dba12699d --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-popper/page.tsx @@ -0,0 +1,51 @@ +'use client'; +import * as React from 'react'; +import PopperPopupState from '../../../../../../docs/data/material/components/popper/PopperPopupState'; +import PositionedPopper from '../../../../../../docs/data/material/components/popper/PositionedPopper'; +import SimplePopper from '../../../../../../docs/data/material/components/popper/SimplePopper'; +import SpringPopper from '../../../../../../docs/data/material/components/popper/SpringPopper'; +import TransitionsPopper from '../../../../../../docs/data/material/components/popper/TransitionsPopper'; +import VirtualElementPopper from '../../../../../../docs/data/material/components/popper/VirtualElementPopper'; + +export default function Popper() { + return ( + +
+

Popper Popup State

+
+ +
+
+
+

Positioned Popper

+
+ +
+
+
+

Simple Popper

+
+ +
+
+
+

Spring Popper

+
+ +
+
+
+

Transitions Popper

+
+ +
+
+
+

Virtual Element Popper

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-popper.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-popper.tsx new file mode 100644 index 00000000000000..29dccd4a30a793 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-popper.tsx @@ -0,0 +1,52 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import PopperPopupState from '../../../../../docs/data/material/components/popper/PopperPopupState.tsx'; +import PositionedPopper from '../../../../../docs/data/material/components/popper/PositionedPopper.tsx'; +import SimplePopper from '../../../../../docs/data/material/components/popper/SimplePopper.tsx'; +import SpringPopper from '../../../../../docs/data/material/components/popper/SpringPopper.tsx'; +import TransitionsPopper from '../../../../../docs/data/material/components/popper/TransitionsPopper.tsx'; +import VirtualElementPopper from '../../../../../docs/data/material/components/popper/VirtualElementPopper.tsx'; + +export default function Popper() { + return ( + +

Popper

+
+

Popper Popup State

+
+ +
+
+
+

Positioned Popper

+
+ +
+
+
+

Simple Popper

+
+ +
+
+
+

Spring Popper

+
+ +
+
+
+

Transitions Popper

+
+ +
+
+
+

Virtual Element Popper

+
+ +
+
+ + ); +} From 1d7cc3bc9f6af3e3228e03c1d7d7a51723d3ea03 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 20 Jun 2024 17:21:56 +0700 Subject: [PATCH 08/12] add css-baseline page --- .../material-ui/react-css-baseline/page.tsx | 24 +++++++++++++++++++ .../pages/material-ui/react-css-baseline.tsx | 24 +++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-css-baseline/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-css-baseline.tsx diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-css-baseline/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-css-baseline/page.tsx new file mode 100644 index 00000000000000..ba513ac0612826 --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-css-baseline/page.tsx @@ -0,0 +1,24 @@ +'use client'; +import * as React from 'react'; +import CssBaseline from '@mui/material/CssBaseline'; +import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; + +export default function CssBaselinePage() { + return ( + + +
+

CSS Baseline

+
+

Hello world

+
+
+
+

Positioned Popper

+
+ Hello world +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-css-baseline.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-css-baseline.tsx new file mode 100644 index 00000000000000..14caca148fca49 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-css-baseline.tsx @@ -0,0 +1,24 @@ +import * as React from 'react'; +import CssBaseline from '@mui/material/CssBaseline'; +import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; +import MaterialUILayout from '../../Layout'; + +export default function CssBaselinePage() { + return ( + + +
+

CSS Baseline

+
+

Hello world

+
+
+
+

Positioned Popper

+
+ Hello world +
+
+ + ); +} From 7c630ada52daa408c68750777dd101def8708e7f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 21 Jun 2024 15:33:24 +0700 Subject: [PATCH 09/12] make CssBaseline works --- apps/pigment-css-next-app/src/app/layout.tsx | 17 +- .../app/material-ui/react-text-field/page.tsx | 163 +++++++++++++++++ .../pages/material-ui/react-text-field.tsx | 164 ++++++++++++++++++ .../src/CssBaseline/CssBaseline.js | 76 ++++++-- .../ScopedCssBaseline/ScopedCssBaseline.js | 13 +- .../mui-material/src/zero-styled/index.tsx | 4 +- 6 files changed, 403 insertions(+), 34 deletions(-) create mode 100644 apps/pigment-css-next-app/src/app/material-ui/react-text-field/page.tsx create mode 100644 apps/pigment-css-vite-app/src/pages/material-ui/react-text-field.tsx diff --git a/apps/pigment-css-next-app/src/app/layout.tsx b/apps/pigment-css-next-app/src/app/layout.tsx index 77126c9b714539..b232ba291a9f28 100644 --- a/apps/pigment-css-next-app/src/app/layout.tsx +++ b/apps/pigment-css-next-app/src/app/layout.tsx @@ -1,9 +1,7 @@ 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'; -import CssBaseline from '@mui/material/CssBaseline'; import '@pigment-css/react/styles.css'; import theme from './theme'; @@ -19,20 +17,9 @@ 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}; - background-image: url('@/assets/mui.svg'); - background-repeat: no-repeat; - background-position: 1rem 1rem; - `}`} - > + - - - {props.children} - + {props.children} diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-text-field/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-text-field/page.tsx new file mode 100644 index 00000000000000..f3d627bd2944ce --- /dev/null +++ b/apps/pigment-css-next-app/src/app/material-ui/react-text-field/page.tsx @@ -0,0 +1,163 @@ +'use client'; +import * as React from 'react'; +import BasicTextFields from '../../../../../../docs/data/material/components/text-fields/BasicTextFields'; +import ColorTextFields from '../../../../../../docs/data/material/components/text-fields/ColorTextFields'; +import ComposedTextField from '../../../../../../docs/data/material/components/text-fields/ComposedTextField'; +import CustomizedInputBase from '../../../../../../docs/data/material/components/text-fields/CustomizedInputBase'; +import CustomizedInputsStyleOverrides from '../../../../../../docs/data/material/components/text-fields/CustomizedInputsStyleOverrides'; +import CustomizedInputsStyled from '../../../../../../docs/data/material/components/text-fields/CustomizedInputsStyled'; +import FormPropsTextFields from '../../../../../../docs/data/material/components/text-fields/FormPropsTextFields'; +import FormattedInputs from '../../../../../../docs/data/material/components/text-fields/FormattedInputs'; +import FullWidthTextField from '../../../../../../docs/data/material/components/text-fields/FullWidthTextField'; +import HelperTextAligned from '../../../../../../docs/data/material/components/text-fields/HelperTextAligned'; +import HelperTextMisaligned from '../../../../../../docs/data/material/components/text-fields/HelperTextMisaligned'; +import InputAdornments from '../../../../../../docs/data/material/components/text-fields/InputAdornments'; +import InputWithIcon from '../../../../../../docs/data/material/components/text-fields/InputWithIcon'; +import Inputs from '../../../../../../docs/data/material/components/text-fields/Inputs'; +import LayoutTextFields from '../../../../../../docs/data/material/components/text-fields/LayoutTextFields'; +import MultilineTextFields from '../../../../../../docs/data/material/components/text-fields/MultilineTextFields'; +import SelectTextFields from '../../../../../../docs/data/material/components/text-fields/SelectTextFields'; +import StateTextFields from '../../../../../../docs/data/material/components/text-fields/StateTextFields'; +import TextFieldHiddenLabel from '../../../../../../docs/data/material/components/text-fields/TextFieldHiddenLabel'; +import TextFieldSizes from '../../../../../../docs/data/material/components/text-fields/TextFieldSizes'; +import UseFormControl from '../../../../../../docs/data/material/components/text-fields/UseFormControl'; +import ValidationTextFields from '../../../../../../docs/data/material/components/text-fields/ValidationTextFields'; + +export default function TextFields() { + return ( + +
+

Basic Text Fields

+
+ +
+
+
+

Color Text Fields

+
+ +
+
+
+

Composed Text Field

+
+ +
+
+
+

Customized Input Base

+
+ +
+
+
+

Customized Inputs Style Overrides

+
+ +
+
+
+

Customized Inputs Styled

+
+ +
+
+
+

Form Props Text Fields

+
+ +
+
+
+

Formatted Inputs

+
+ +
+
+
+

Full Width Text Field

+
+ +
+
+
+

Helper Text Aligned

+
+ +
+
+
+

Helper Text Misaligned

+
+ +
+
+
+

Input Adornments

+
+ +
+
+
+

Input With Icon

+
+ +
+
+
+

Inputs

+
+ +
+
+
+

Layout Text Fields

+
+ +
+
+
+

Multiline Text Fields

+
+ +
+
+
+

Select Text Fields

+
+ +
+
+
+

State Text Fields

+
+ +
+
+
+

Text Field Hidden Label

+
+ +
+
+
+

Text Field Sizes

+
+ +
+
+
+

Use Form Control

+
+ +
+
+
+

Validation Text Fields

+
+ +
+
+ + ); +} diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-text-field.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-text-field.tsx new file mode 100644 index 00000000000000..bdd998a45605f0 --- /dev/null +++ b/apps/pigment-css-vite-app/src/pages/material-ui/react-text-field.tsx @@ -0,0 +1,164 @@ +import * as React from 'react'; +import MaterialUILayout from '../../Layout'; +import BasicTextFields from '../../../../../docs/data/material/components/text-fields/BasicTextFields.tsx'; +import ColorTextFields from '../../../../../docs/data/material/components/text-fields/ColorTextFields.tsx'; +import ComposedTextField from '../../../../../docs/data/material/components/text-fields/ComposedTextField.tsx'; +import CustomizedInputBase from '../../../../../docs/data/material/components/text-fields/CustomizedInputBase.tsx'; +import CustomizedInputsStyleOverrides from '../../../../../docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx'; +import CustomizedInputsStyled from '../../../../../docs/data/material/components/text-fields/CustomizedInputsStyled.tsx'; +import FormPropsTextFields from '../../../../../docs/data/material/components/text-fields/FormPropsTextFields.tsx'; +import FormattedInputs from '../../../../../docs/data/material/components/text-fields/FormattedInputs.tsx'; +import FullWidthTextField from '../../../../../docs/data/material/components/text-fields/FullWidthTextField.tsx'; +import HelperTextAligned from '../../../../../docs/data/material/components/text-fields/HelperTextAligned.tsx'; +import HelperTextMisaligned from '../../../../../docs/data/material/components/text-fields/HelperTextMisaligned.tsx'; +import InputAdornments from '../../../../../docs/data/material/components/text-fields/InputAdornments.tsx'; +import InputWithIcon from '../../../../../docs/data/material/components/text-fields/InputWithIcon.tsx'; +import Inputs from '../../../../../docs/data/material/components/text-fields/Inputs.tsx'; +import LayoutTextFields from '../../../../../docs/data/material/components/text-fields/LayoutTextFields.tsx'; +import MultilineTextFields from '../../../../../docs/data/material/components/text-fields/MultilineTextFields.tsx'; +import SelectTextFields from '../../../../../docs/data/material/components/text-fields/SelectTextFields.tsx'; +import StateTextFields from '../../../../../docs/data/material/components/text-fields/StateTextFields.tsx'; +import TextFieldHiddenLabel from '../../../../../docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx'; +import TextFieldSizes from '../../../../../docs/data/material/components/text-fields/TextFieldSizes.tsx'; +import UseFormControl from '../../../../../docs/data/material/components/text-fields/UseFormControl.tsx'; +import ValidationTextFields from '../../../../../docs/data/material/components/text-fields/ValidationTextFields.tsx'; + +export default function TextFields() { + return ( + +

TextFields

+
+

Basic Text Fields

+
+ +
+
+
+

Color Text Fields

+
+ +
+
+
+

Composed Text Field

+
+ +
+
+
+

Customized Input Base

+
+ +
+
+
+

Customized Inputs Style Overrides

+
+ +
+
+
+

Customized Inputs Styled

+
+ +
+
+
+

Form Props Text Fields

+
+ +
+
+
+

Formatted Inputs

+
+ +
+
+
+

Full Width Text Field

+
+ +
+
+
+

Helper Text Aligned

+
+ +
+
+
+

Helper Text Misaligned

+
+ +
+
+
+

Input Adornments

+
+ +
+
+
+

Input With Icon

+
+ +
+
+
+

Inputs

+
+ +
+
+
+

Layout Text Fields

+
+ +
+
+
+

Multiline Text Fields

+
+ +
+
+
+

Select Text Fields

+
+ +
+
+
+

State Text Fields

+
+ +
+
+
+

Text Field Hidden Label

+
+ +
+
+
+

Text Field Sizes

+
+ +
+
+
+

Use Form Control

+
+ +
+
+
+

Validation Text Fields

+
+ +
+
+ + ); +} diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 11b66de1ffb04f..5be512c226f0a9 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -5,8 +5,8 @@ import { createUseThemeProps, globalCss } from '../zero-styled'; const useThemeProps = createUseThemeProps('MuiCssBaseline'); -// `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better. -const SELECTOR = 'mui-ecs'; +// to determine if the global styles are static or dynamic +const isDynamicSupport = typeof globalCss({}) === 'function'; export const html = (theme, enableColorScheme) => ({ WebkitFontSmoothing: 'antialiased', // Antialiasing. @@ -17,8 +17,7 @@ export const html = (theme, enableColorScheme) => ({ // Fix font resize problem in iOS WebkitTextSizeAdjust: '100%', // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications. - ...(enableColorScheme && - !theme.vars && { [`&:has(.${SELECTOR})`]: { colorScheme: theme.palette.mode } }), + ...(enableColorScheme && !theme.vars && { colorScheme: theme.palette.mode }), }); export const body = (theme) => ({ @@ -31,19 +30,28 @@ export const body = (theme) => ({ }, }); -export const styles = (theme) => { +export const styles = (theme, enableColorScheme = false) => { const colorSchemeStyles = {}; - if (theme.colorSchemes) { + if (enableColorScheme && theme.colorSchemes) { Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { - colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = { - [`&:has(.${SELECTOR})`]: { + const selector = theme.getColorSchemeSelector(key); + if (selector.startsWith('@')) { + // for @media (prefers-color-scheme), we need to target :root + colorSchemeStyles[selector] = { + ':root': { + colorScheme: scheme.palette?.mode, + }, + }; + } else { + // else, it's likely that the selector already target an element with a class or data attribute + colorSchemeStyles[selector.replace(/\s*&/, '')] = { colorScheme: scheme.palette?.mode, - }, - }; + }; + } }); } let defaultStyles = { - html: html(theme, true), + html: html(theme, enableColorScheme), '*, *::before, *::after': { boxSizing: 'inherit', }, @@ -70,7 +78,42 @@ export const styles = (theme) => { return defaultStyles; }; -const GlobalStyles = globalCss(({ theme }) => styles(theme)); +// `ecs` stands for enableColorScheme. This is internal logic to make it work with Pigment CSS, so shorter is better. +const SELECTOR = 'mui-ecs'; +const staticStyles = (theme) => { + const result = styles(theme, false); + const baseStyles = Array.isArray(result) ? result[0] : result; + if (!theme.vars && baseStyles) { + baseStyles.html[`:root:has(${SELECTOR})`] = { colorScheme: theme.palette.mode }; + } + if (theme.colorSchemes) { + Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { + const selector = theme.getColorSchemeSelector(key); + if (selector.startsWith('@')) { + // for @media (prefers-color-scheme), we need to target :root + baseStyles[selector] = { + [`:root:has(.${SELECTOR})`]: { + colorScheme: scheme.palette?.mode, + }, + }; + } else { + // else, it's likely that the selector already target an element with a class or data attribute + baseStyles[selector.replace(/\s*&/, '')] = { + [`&:has(.${SELECTOR})`]: { + colorScheme: scheme.palette?.mode, + }, + }; + } + }); + } + return result; +}; + +const GlobalStyles = globalCss( + isDynamicSupport + ? ({ theme, enableColorScheme }) => styles(theme, enableColorScheme) + : ({ theme }) => staticStyles(theme), +); /** * Kickstart an elegant, consistent, and simple baseline to build upon. @@ -80,8 +123,13 @@ function CssBaseline(inProps) { const { children, enableColorScheme = false } = props; return ( - - {enableColorScheme && } + {/* Emotion */} + {isDynamicSupport && } + + {/* Pigment CSS */} + {!isDynamicSupport && enableColorScheme && ( + + )} {children} ); diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js index b0d84f248b04e4..33c8b288135fde 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js @@ -27,9 +27,16 @@ const ScopedCssBaselineRoot = styled('div', { const colorSchemeStyles = {}; if (theme.colorSchemes) { Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { - colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = { - colorScheme: scheme.palette?.mode, - }; + const selector = theme.getColorSchemeSelector(key); + if (selector.startsWith('@')) { + colorSchemeStyles[selector] = { + colorScheme: scheme.palette?.mode, + }; + } else { + colorSchemeStyles[`&${selector.replace(/\s*&/, '')}`] = { + colorScheme: scheme.palette?.mode, + }; + } }); } return { diff --git a/packages/mui-material/src/zero-styled/index.tsx b/packages/mui-material/src/zero-styled/index.tsx index c1975fc2aff620..095714d912e87c 100644 --- a/packages/mui-material/src/zero-styled/index.tsx +++ b/packages/mui-material/src/zero-styled/index.tsx @@ -11,13 +11,13 @@ export { css, keyframes } from '@mui/system'; export { default as styled } from '../styles/styled'; export function globalCss(styles: Interpolation<{ theme: Theme }>) { - return function GlobalStylesWrapper() { + return function GlobalStylesWrapper(props: Record) { return ( // Pigment CSS `globalCss` support callback with theme inside an object but `GlobalStyles` support theme as a callback value. styles({ theme }) + ? (theme) => styles({ theme, ...props }) : styles) as GlobalStylesProps['styles'] } /> From a5b8290159a606b17e16ac49f1b7fb81c0076698 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 21 Jun 2024 15:45:26 +0700 Subject: [PATCH 10/12] flip the logic of showing span --- packages/mui-material/src/CssBaseline/CssBaseline.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 5be512c226f0a9..fd37fb0febde39 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -92,14 +92,14 @@ const staticStyles = (theme) => { if (selector.startsWith('@')) { // for @media (prefers-color-scheme), we need to target :root baseStyles[selector] = { - [`:root:has(.${SELECTOR})`]: { + [`:root:not(:has(.${SELECTOR}))`]: { colorScheme: scheme.palette?.mode, }, }; } else { // else, it's likely that the selector already target an element with a class or data attribute baseStyles[selector.replace(/\s*&/, '')] = { - [`&:has(.${SELECTOR})`]: { + [`&:not(:has(.${SELECTOR}))`]: { colorScheme: scheme.palette?.mode, }, }; @@ -127,7 +127,7 @@ function CssBaseline(inProps) { {isDynamicSupport && } {/* Pigment CSS */} - {!isDynamicSupport && enableColorScheme && ( + {!isDynamicSupport && !enableColorScheme && ( )} {children} From 525a4c9115288f8d1976a58fbe4ac0da1cf7d919 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 21 Jun 2024 15:51:15 +0700 Subject: [PATCH 11/12] useDefaultProps --- packages/mui-material/src/CssBaseline/CssBaseline.js | 7 +++---- packages/mui-material/src/Popper/Popper.tsx | 7 +++---- .../src/ScopedCssBaseline/ScopedCssBaseline.js | 7 +++---- 3 files changed, 9 insertions(+), 12 deletions(-) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index fd37fb0febde39..8f47803a27dd88 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -1,9 +1,8 @@ 'use client'; import * as React from 'react'; import PropTypes from 'prop-types'; -import { createUseThemeProps, globalCss } from '../zero-styled'; - -const useThemeProps = createUseThemeProps('MuiCssBaseline'); +import { globalCss } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; // to determine if the global styles are static or dynamic const isDynamicSupport = typeof globalCss({}) === 'function'; @@ -119,7 +118,7 @@ const GlobalStyles = globalCss( * Kickstart an elegant, consistent, and simple baseline to build upon. */ function CssBaseline(inProps) { - const props = useThemeProps({ props: inProps, name: 'MuiCssBaseline' }); + const props = useDefaultProps({ props: inProps, name: 'MuiCssBaseline' }); const { children, enableColorScheme = false } = props; return ( diff --git a/packages/mui-material/src/Popper/Popper.tsx b/packages/mui-material/src/Popper/Popper.tsx index 74b08cc418ed57..565559630ff4b8 100644 --- a/packages/mui-material/src/Popper/Popper.tsx +++ b/packages/mui-material/src/Popper/Popper.tsx @@ -7,9 +7,8 @@ import HTMLElementType from '@mui/utils/HTMLElementType'; import PropTypes from 'prop-types'; import * as React from 'react'; import { Theme } from '../styles'; -import { styled, createUseThemeProps } from '../zero-styled'; - -const useThemeProps = createUseThemeProps('MuiPopper'); +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; export interface PopperProps extends Omit { /** @@ -63,7 +62,7 @@ const Popper = React.forwardRef(function Popper( ref: React.ForwardedRef, ) { const isRtl = useRtl(); - const props = useThemeProps({ + const props = useDefaultProps({ props: inProps, name: 'MuiPopper', }); diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js index 33c8b288135fde..dc550061daf163 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js @@ -3,12 +3,11 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../zero-styled'; +import { styled } from '../zero-styled'; +import { useDefaultProps } from '../DefaultPropsProvider'; import { html, body } from '../CssBaseline/CssBaseline'; import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses'; -const useThemeProps = createUseThemeProps('MuiScopedCssBaseline'); - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -58,7 +57,7 @@ const ScopedCssBaselineRoot = styled('div', { }); const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiScopedCssBaseline' }); + const props = useDefaultProps({ props: inProps, name: 'MuiScopedCssBaseline' }); const { className, component = 'div', enableColorScheme, ...other } = props; const ownerState = { From f3075f6d26ac136920bfff0c5126b5e08621037b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 21 Jun 2024 16:15:59 +0700 Subject: [PATCH 12/12] proptypes --- packages/mui-material/src/CssBaseline/CssBaseline.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 8f47803a27dd88..9caadb2ba5efb3 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -129,6 +129,7 @@ function CssBaseline(inProps) { {!isDynamicSupport && !enableColorScheme && ( )} + {children} );