Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AppBar] Convert to support CSS extraction #41247

Merged
merged 15 commits into from
Apr 1, 2024
Merged

[AppBar] Convert to support CSS extraction #41247

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
4cd3877
[AppBar] Convert to support zero-runtime
mnajdova Feb 23, 2024
84d4201
transparent fix
mnajdova Feb 23, 2024
ecf8547
Merge branch 'master' into appbar/convert-to-zero-runtime
mnajdova Mar 6, 2024
ae17100
add demos, verious fixes
mnajdova Mar 6, 2024
e4144ae
fix readme, run pnpm install
mnajdova Mar 6, 2024
ad6e7df
use pascalCase
mnajdova Mar 6, 2024
5bc44c0
Update apps/pigment-next-app/README.md
mnajdova Mar 7, 2024
52064ec
Update apps/pigment-next-app/README.md
mnajdova Mar 7, 2024
4d880d4
revert pnpm-lock.yaml changes
mnajdova Mar 7, 2024
fbe01cf
Merge branch 'master' into appbar/convert-to-zero-runtime
mnajdova Mar 13, 2024
cdf15f4
Merge branch 'next' of https://github.com/mui/material-ui into appbar…
siriwatknp Mar 28, 2024
6f7a349
regenerate pages
mnajdova Mar 13, 2024
80004ff
Merge branch 'next' into appbar/convert-to-zero-runtime
mnajdova Mar 29, 2024
1da33c9
fix style bug, simplify styles
mnajdova Mar 29, 2024
feb064a
prettier
mnajdova Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/pigment-next-app/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ pnpm build:zero
Then start the Next.js development server:

```bash
cd apps/
pnpm install
pnpm run --filter=@app/next-app dev
```

Expand All @@ -37,5 +39,7 @@ You might have to restart the next.js server.
To build the project, run the `build` command in this package:

```bash
cd apps/
pnpm install
pnpm run --filter=@app/next-app build
```
100 changes: 100 additions & 0 deletions apps/pigment-next-app/src/app/material-ui/react-app-bar/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
101 changes: 101 additions & 0 deletions apps/pigment-vite-app/src/pages/material-ui/react-app-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
24 changes: 12 additions & 12 deletions apps/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/data/material/components/app-bar/BackToTop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/app-bar/BackToTop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ interface Props {
* You won't need it on your project.
*/
window?: () => Window;
children: React.ReactElement;
children?: React.ReactElement;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Converted the demos to not require children.

}

function ScrollTop(props: Props) {
Expand Down
10 changes: 6 additions & 4 deletions docs/data/material/components/app-bar/ElevateAppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
10 changes: 6 additions & 4 deletions docs/data/material/components/app-bar/ElevateAppBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/components/app-bar/HideAppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/data/material/components/app-bar/HideAppBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -28,7 +28,7 @@ function HideOnScroll(props: Props) {

return (
<Slide appear={false} direction="down" in={!trigger}>
{children}
{children ?? <div />}
</Slide>
);
}
Expand Down
Loading
Loading