[AppBar] Convert to support CSS extraction (#41247)

mui · Apr 1, 2024 · 67663dd · 67663dd
1 parent b338f3f
commit 67663dd
Show file tree

Hide file tree

Showing 10 changed files with 350 additions and 123 deletions.
diff --git a/apps/pigment-css-next-app/src/app/material-ui/react-app-bar/page.tsx b/apps/pigment-css-next-app/src/app/material-ui/react-app-bar/page.tsx
@@ -0,0 +1,100 @@
+'use client';
+import * as React from 'react';
+import BackToTop from '../../../../../../docs/data/material/components/app-bar/BackToTop';
+import BottomAppBar from '../../../../../../docs/data/material/components/app-bar/BottomAppBar';
+import ButtonAppBar from '../../../../../../docs/data/material/components/app-bar/ButtonAppBar';
+import DenseAppBar from '../../../../../../docs/data/material/components/app-bar/DenseAppBar';
+import DrawerAppBar from '../../../../../../docs/data/material/components/app-bar/DrawerAppBar';
+import ElevateAppBar from '../../../../../../docs/data/material/components/app-bar/ElevateAppBar';
+import EnableColorOnDarkAppBar from '../../../../../../docs/data/material/components/app-bar/EnableColorOnDarkAppBar';
+import HideAppBar from '../../../../../../docs/data/material/components/app-bar/HideAppBar';
+import MenuAppBar from '../../../../../../docs/data/material/components/app-bar/MenuAppBar';
+import PrimarySearchAppBar from '../../../../../../docs/data/material/components/app-bar/PrimarySearchAppBar';
+import ProminentAppBar from '../../../../../../docs/data/material/components/app-bar/ProminentAppBar';
+import ResponsiveAppBar from '../../../../../../docs/data/material/components/app-bar/ResponsiveAppBar';
+import SearchAppBar from '../../../../../../docs/data/material/components/app-bar/SearchAppBar';
+
+export default function AppBar() {
+  return (
+    <React.Fragment>
+      <section>
+        <h2> Back To Top</h2>
+        <div className="demo-container">
+          <BackToTop />
+        </div>
+      </section>
+      <section>
+        <h2> Bottom App Bar</h2>
+        <div className="demo-container">
+          <BottomAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Button App Bar</h2>
+        <div className="demo-container">
+          <ButtonAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Dense App Bar</h2>
+        <div className="demo-container">
+          <DenseAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Drawer App Bar</h2>
+        <div className="demo-container">
+          <DrawerAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Elevate App Bar</h2>
+        <div className="demo-container">
+          <ElevateAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Enable Color On Dark App Bar</h2>
+        <div className="demo-container">
+          <EnableColorOnDarkAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Hide App Bar</h2>
+        <div className="demo-container">
+          <HideAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Menu App Bar</h2>
+        <div className="demo-container">
+          <MenuAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Primary Search App Bar</h2>
+        <div className="demo-container">
+          <PrimarySearchAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Prominent App Bar</h2>
+        <div className="demo-container">
+          <ProminentAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Responsive App Bar</h2>
+        <div className="demo-container">
+          <ResponsiveAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Search App Bar</h2>
+        <div className="demo-container">
+          <SearchAppBar />
+        </div>
+      </section>
+    </React.Fragment>
+  );
+}
diff --git a/apps/pigment-css-vite-app/src/pages/material-ui/react-app-bar.tsx b/apps/pigment-css-vite-app/src/pages/material-ui/react-app-bar.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import MaterialUILayout from '../../Layout';
+import BackToTop from '../../../../../docs/data/material/components/app-bar/BackToTop.tsx';
+import BottomAppBar from '../../../../../docs/data/material/components/app-bar/BottomAppBar.tsx';
+import ButtonAppBar from '../../../../../docs/data/material/components/app-bar/ButtonAppBar.tsx';
+import DenseAppBar from '../../../../../docs/data/material/components/app-bar/DenseAppBar.tsx';
+import DrawerAppBar from '../../../../../docs/data/material/components/app-bar/DrawerAppBar.tsx';
+import ElevateAppBar from '../../../../../docs/data/material/components/app-bar/ElevateAppBar.tsx';
+import EnableColorOnDarkAppBar from '../../../../../docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx';
+import HideAppBar from '../../../../../docs/data/material/components/app-bar/HideAppBar.tsx';
+import MenuAppBar from '../../../../../docs/data/material/components/app-bar/MenuAppBar.tsx';
+import PrimarySearchAppBar from '../../../../../docs/data/material/components/app-bar/PrimarySearchAppBar.tsx';
+import ProminentAppBar from '../../../../../docs/data/material/components/app-bar/ProminentAppBar.tsx';
+import ResponsiveAppBar from '../../../../../docs/data/material/components/app-bar/ResponsiveAppBar.tsx';
+import SearchAppBar from '../../../../../docs/data/material/components/app-bar/SearchAppBar.tsx';
+
+export default function AppBar() {
+  return (
+    <MaterialUILayout>
+      <h1>AppBar</h1>
+      <section>
+        <h2> Back To Top</h2>
+        <div className="demo-container">
+          <BackToTop />
+        </div>
+      </section>
+      <section>
+        <h2> Bottom App Bar</h2>
+        <div className="demo-container">
+          <BottomAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Button App Bar</h2>
+        <div className="demo-container">
+          <ButtonAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Dense App Bar</h2>
+        <div className="demo-container">
+          <DenseAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Drawer App Bar</h2>
+        <div className="demo-container">
+          <DrawerAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Elevate App Bar</h2>
+        <div className="demo-container">
+          <ElevateAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Enable Color On Dark App Bar</h2>
+        <div className="demo-container">
+          <EnableColorOnDarkAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Hide App Bar</h2>
+        <div className="demo-container">
+          <HideAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Menu App Bar</h2>
+        <div className="demo-container">
+          <MenuAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Primary Search App Bar</h2>
+        <div className="demo-container">
+          <PrimarySearchAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Prominent App Bar</h2>
+        <div className="demo-container">
+          <ProminentAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Responsive App Bar</h2>
+        <div className="demo-container">
+          <ResponsiveAppBar />
+        </div>
+      </section>
+      <section>
+        <h2> Search App Bar</h2>
+        <div className="demo-container">
+          <SearchAppBar />
+        </div>
+      </section>
+    </MaterialUILayout>
+  );
+}
diff --git a/docs/data/material/components/app-bar/BackToTop.js b/docs/data/material/components/app-bar/BackToTop.js
@@ -48,7 +48,7 @@ function ScrollTop(props) {
 }
 
 ScrollTop.propTypes = {
-  children: PropTypes.element.isRequired,
+  children: PropTypes.element,
   /**
    * Injected by the documentation to work in an iframe.
    * You won't need it on your project.

diff --git a/docs/data/material/components/app-bar/BackToTop.tsx b/docs/data/material/components/app-bar/BackToTop.tsx
@@ -16,7 +16,7 @@ interface Props {
    * You won't need it on your project.
    */
   window?: () => Window;
-  children: React.ReactElement;
+  children?: React.ReactElement;
 }
 
 function ScrollTop(props: Props) {

diff --git a/docs/data/material/components/app-bar/ElevateAppBar.js b/docs/data/material/components/app-bar/ElevateAppBar.js
@@ -19,13 +19,15 @@ function ElevationScroll(props) {
     target: window ? window() : undefined,
   });
 
-  return React.cloneElement(children, {
-    elevation: trigger ? 4 : 0,
-  });
+  return children
+    ? React.cloneElement(children, {
+        elevation: trigger ? 4 : 0,
+      })
+    : null;
 }
 
 ElevationScroll.propTypes = {
-  children: PropTypes.element.isRequired,
+  children: PropTypes.element,
   /**
    * Injected by the documentation to work in an iframe.
    * You won't need it on your project.

diff --git a/docs/data/material/components/app-bar/ElevateAppBar.tsx b/docs/data/material/components/app-bar/ElevateAppBar.tsx
@@ -13,7 +13,7 @@ interface Props {
    * You won't need it on your project.
    */
   window?: () => Window;
-  children: React.ReactElement;
+  children?: React.ReactElement;
 }
 
 function ElevationScroll(props: Props) {
@@ -27,9 +27,11 @@ function ElevationScroll(props: Props) {
     target: window ? window() : undefined,
   });
 
-  return React.cloneElement(children, {
-    elevation: trigger ? 4 : 0,
-  });
+  return children
+    ? React.cloneElement(children, {
+        elevation: trigger ? 4 : 0,
+      })
+    : null;
 }
 
 export default function ElevateAppBar(props: Props) {

diff --git a/docs/data/material/components/app-bar/HideAppBar.js b/docs/data/material/components/app-bar/HideAppBar.js
@@ -20,13 +20,13 @@ function HideOnScroll(props) {
 
   return (
     <Slide appear={false} direction="down" in={!trigger}>
-      {children}
+      {children ?? <div />}
     </Slide>
   );
 }
 
 HideOnScroll.propTypes = {
-  children: PropTypes.element.isRequired,
+  children: PropTypes.element,
   /**
    * Injected by the documentation to work in an iframe.
    * You won't need it on your project.

diff --git a/docs/data/material/components/app-bar/HideAppBar.tsx b/docs/data/material/components/app-bar/HideAppBar.tsx
@@ -14,7 +14,7 @@ interface Props {
    * You won't need it on your project.
    */
   window?: () => Window;
-  children: React.ReactElement;
+  children?: React.ReactElement;
 }
 
 function HideOnScroll(props: Props) {
@@ -28,7 +28,7 @@ function HideOnScroll(props: Props) {
 
   return (
     <Slide appear={false} direction="down" in={!trigger}>
-      {children}
+      {children ?? <div />}
     </Slide>
   );
 }