[material-ui] Support Pigment CSS for CssBaseline, `ScopedCssBaseli…

…ne` and `Popper` (mui#42640)
joserodolfofreitas · Jul 29, 2024 · 59b7181 · 59b7181
1 parent 3861042
commit 59b7181
Show file tree

Hide file tree

Showing 11 changed files with 589 additions and 41 deletions.
diff --git 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 (
     <html lang="en">
-      <body
-        className={`${inter.className} ${css`
-          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;
-        `}`}
-      >
+      <body className={`${inter.className}`}>
         <AppRouterCacheProvider>
-          <ThemeProvider theme={theme}>
-            <CssBaseline />
-            {props.children}
-          </ThemeProvider>
+          <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
         </AppRouterCacheProvider>
       </body>
     </html>

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
@@ -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 (
+    <React.Fragment>
+      <CssBaseline />
+      <section>
+        <h2> CSS Baseline</h2>
+        <div className="demo-container">
+          <p>Hello world</p>
+        </div>
+      </section>
+      <section>
+        <h2> Positioned Popper</h2>
+        <div className="demo-container">
+          <ScopedCssBaseline>Hello world</ScopedCssBaseline>
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
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
@@ -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 (
+    <React.Fragment>
+      <section>
+        <h2> Popper Popup State</h2>
+        <div className="demo-container">
+          <PopperPopupState />
+        </div>
+      </section>
+      <section>
+        <h2> Positioned Popper</h2>
+        <div className="demo-container">
+          <PositionedPopper />
+        </div>
+      </section>
+      <section>
+        <h2> Simple Popper</h2>
+        <div className="demo-container">
+          <SimplePopper />
+        </div>
+      </section>
+      <section>
+        <h2> Spring Popper</h2>
+        <div className="demo-container">
+          <SpringPopper />
+        </div>
+      </section>
+      <section>
+        <h2> Transitions Popper</h2>
+        <div className="demo-container">
+          <TransitionsPopper />
+        </div>
+      </section>
+      <section>
+        <h2> Virtual Element Popper</h2>
+        <div className="demo-container">
+          <VirtualElementPopper />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
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
@@ -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 (
+    <React.Fragment>
+      <section>
+        <h2> Basic Text Fields</h2>
+        <div className="demo-container">
+          <BasicTextFields />
+        </div>
+      </section>
+      <section>
+        <h2> Color Text Fields</h2>
+        <div className="demo-container">
+          <ColorTextFields />
+        </div>
+      </section>
+      <section>
+        <h2> Composed Text Field</h2>
+        <div className="demo-container">
+          <ComposedTextField />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Input Base</h2>
+        <div className="demo-container">
+          <CustomizedInputBase />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Inputs Style Overrides</h2>
+        <div className="demo-container">
+          <CustomizedInputsStyleOverrides />
+        </div>
+      </section>
+      <section>
+        <h2> Customized Inputs Styled</h2>
+        <div className="demo-container">
+          <CustomizedInputsStyled />
+        </div>
+      </section>
+      <section>
+        <h2> Form Props Text Fields</h2>
+        <div className="demo-container">
+          <FormPropsTextFields />
+        </div>
+      </section>
+      <section>
+        <h2> Formatted Inputs</h2>
+        <div className="demo-container">
+          <FormattedInputs />
+        </div>
+      </section>
+      <section>
+        <h2> Full Width Text Field</h2>
+        <div className="demo-container">
+          <FullWidthTextField />
+        </div>
+      </section>
+      <section>
+        <h2> Helper Text Aligned</h2>
+        <div className="demo-container">
+          <HelperTextAligned />
+        </div>
+      </section>
+      <section>
+        <h2> Helper Text Misaligned</h2>
+        <div className="demo-container">
+          <HelperTextMisaligned />
+        </div>
+      </section>
+      <section>
+        <h2> Input Adornments</h2>
+        <div className="demo-container">
+          <InputAdornments />
+        </div>
+      </section>
+      <section>
+        <h2> Input With Icon</h2>
+        <div className="demo-container">
+          <InputWithIcon />
+        </div>
+      </section>
+      <section>
+        <h2> Inputs</h2>
+        <div className="demo-container">
+          <Inputs />
+        </div>
+      </section>
+      <section>
+        <h2> Layout Text Fields</h2>
+        <div className="demo-container">
+          <LayoutTextFields />
+        </div>
+      </section>
+      <section>
+        <h2> Multiline Text Fields</h2>
+        <div className="demo-container">
+          <MultilineTextFields />
+        </div>
+      </section>
+      <section>
+        <h2> Select Text Fields</h2>
+        <div className="demo-container">
+          <SelectTextFields />
+        </div>
+      </section>
+      <section>
+        <h2> State Text Fields</h2>
+        <div className="demo-container">
+          <StateTextFields />
+        </div>
+      </section>
+      <section>
+        <h2> Text Field Hidden Label</h2>
+        <div className="demo-container">
+          <TextFieldHiddenLabel />
+        </div>
+      </section>
+      <section>
+        <h2> Text Field Sizes</h2>
+        <div className="demo-container">
+          <TextFieldSizes />
+        </div>
+      </section>
+      <section>
+        <h2> Use Form Control</h2>
+        <div className="demo-container">
+          <UseFormControl />
+        </div>
+      </section>
+      <section>
+        <h2> Validation Text Fields</h2>
+        <div className="demo-container">
+          <ValidationTextFields />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
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
@@ -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 (
+    <MaterialUILayout>
+      <CssBaseline />
+      <section>
+        <h2> CSS Baseline</h2>
+        <div className="demo-container">
+          <p>Hello world</p>
+        </div>
+      </section>
+      <section>
+        <h2> Positioned Popper</h2>
+        <div className="demo-container">
+          <ScopedCssBaseline>Hello world</ScopedCssBaseline>
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
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
@@ -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 (
+    <MaterialUILayout>
+      <h1>Popper</h1>
+      <section>
+        <h2> Popper Popup State</h2>
+        <div className="demo-container">
+          <PopperPopupState />
+        </div>
+      </section>
+      <section>
+        <h2> Positioned Popper</h2>
+        <div className="demo-container">
+          <PositionedPopper />
+        </div>
+      </section>
+      <section>
+        <h2> Simple Popper</h2>
+        <div className="demo-container">
+          <SimplePopper />
+        </div>
+      </section>
+      <section>
+        <h2> Spring Popper</h2>
+        <div className="demo-container">
+          <SpringPopper />
+        </div>
+      </section>
+      <section>
+        <h2> Transitions Popper</h2>
+        <div className="demo-container">
+          <TransitionsPopper />
+        </div>
+      </section>
+      <section>
+        <h2> Virtual Element Popper</h2>
+        <div className="demo-container">
+          <VirtualElementPopper />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}