-
-
Notifications
You must be signed in to change notification settings - Fork 32.1k
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.
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
[material-ui][Alert] Convert to support zero runtime #41230
Changes from 16 commits
2f21ebc
635482e
1f8e0ea
b6f3ed3
d17ab03
aacd7b9
9b1de9e
16655aa
4cc4324
336cb50
514c651
b4782e9
37842c1
1addb4f
8975ea5
2397c77
1c615dd
cd57f5a
f6910df
eb39558
0689c63
b4b8cb1
9bf53e2
75c758b
bcb07aa
df1c916
df00cea
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,22 +1,26 @@ | ||
* { | ||
box-sizing: border-box; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
@layer reset, mui; | ||
|
||
html, | ||
body { | ||
max-width: 100vw; | ||
overflow-x: hidden; | ||
} | ||
@layer reset { | ||
* { | ||
box-sizing: border-box; | ||
padding: 0; | ||
margin: 0; | ||
} | ||
|
||
a { | ||
color: inherit; | ||
text-decoration: none; | ||
} | ||
html, | ||
body { | ||
max-width: 100vw; | ||
overflow-x: hidden; | ||
} | ||
|
||
a { | ||
color: inherit; | ||
text-decoration: none; | ||
} | ||
|
||
@media (prefers-color-scheme: dark) { | ||
html { | ||
color-scheme: dark; | ||
@media (prefers-color-scheme: dark) { | ||
html { | ||
color-scheme: dark; | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add an index page that links to each demo page. |
||
import * as React from 'react'; | ||
import Link from 'next/link'; | ||
import fs from 'fs/promises'; | ||
import path from 'path'; | ||
import { css } from '@mui/zero-runtime'; | ||
|
||
export default async function MaterialUIPage() { | ||
const rootPaths = await fs.readdir(path.join(process.cwd(), `src/app/material-ui`)); | ||
return ( | ||
<div> | ||
<h1>Material UI Components</h1> | ||
<nav> | ||
<ul | ||
className={css({ | ||
margin: 0, | ||
marginBlock: '1rem', | ||
padding: 0, | ||
paddingLeft: '1.5rem', | ||
display: 'flex', | ||
flexDirection: 'column', | ||
gap: '0.5rem', | ||
})} | ||
> | ||
{rootPaths | ||
.filter((item) => !item.match(/\.(js|tsx)$/)) | ||
.map((file) => ( | ||
<li key={file}> | ||
<Link | ||
href={`/material-ui/${file.replace(/\.[jt]sx?$/, '')}`} | ||
className={css({ | ||
textDecoration: 'underline', | ||
fontSize: '17px', | ||
})} | ||
> | ||
{file} | ||
</Link> | ||
</li> | ||
))} | ||
</ul> | ||
</nav> | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
'use client'; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Generated from |
||
import * as React from 'react'; | ||
import ActionAlerts from '../../../../../../docs/data/material/components/alert/ActionAlerts'; | ||
import BasicAlerts from '../../../../../../docs/data/material/components/alert/BasicAlerts'; | ||
import ColorAlerts from '../../../../../../docs/data/material/components/alert/ColorAlerts'; | ||
import DescriptionAlerts from '../../../../../../docs/data/material/components/alert/DescriptionAlerts'; | ||
import FilledAlerts from '../../../../../../docs/data/material/components/alert/FilledAlerts'; | ||
import IconAlerts from '../../../../../../docs/data/material/components/alert/IconAlerts'; | ||
import OutlinedAlerts from '../../../../../../docs/data/material/components/alert/OutlinedAlerts'; | ||
import SimpleAlert from '../../../../../../docs/data/material/components/alert/SimpleAlert'; | ||
import TransitionAlerts from '../../../../../../docs/data/material/components/alert/TransitionAlerts'; | ||
|
||
export default function Alert() { | ||
return ( | ||
<React.Fragment> | ||
<section> | ||
<h2> Action Alerts</h2> | ||
<div className="demo-container"> | ||
<ActionAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Basic Alerts</h2> | ||
<div className="demo-container"> | ||
<BasicAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Color Alerts</h2> | ||
<div className="demo-container"> | ||
<ColorAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Description Alerts</h2> | ||
<div className="demo-container"> | ||
<DescriptionAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Filled Alerts</h2> | ||
<div className="demo-container"> | ||
<FilledAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Icon Alerts</h2> | ||
<div className="demo-container"> | ||
<IconAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Outlined Alerts</h2> | ||
<div className="demo-container"> | ||
<OutlinedAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Simple Alert</h2> | ||
<div className="demo-container"> | ||
<SimpleAlert /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Transition Alerts</h2> | ||
<div className="demo-container"> | ||
<TransitionAlerts /> | ||
</div> | ||
</section> | ||
</React.Fragment> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import * as React from 'react'; | ||
import MaterialUILayout from '../../Layout'; | ||
import ActionAlerts from '../../../../../docs/data/material/components/alert/ActionAlerts.tsx'; | ||
import BasicAlerts from '../../../../../docs/data/material/components/alert/BasicAlerts.tsx'; | ||
import ColorAlerts from '../../../../../docs/data/material/components/alert/ColorAlerts.tsx'; | ||
import DescriptionAlerts from '../../../../../docs/data/material/components/alert/DescriptionAlerts.tsx'; | ||
import FilledAlerts from '../../../../../docs/data/material/components/alert/FilledAlerts.tsx'; | ||
import IconAlerts from '../../../../../docs/data/material/components/alert/IconAlerts.tsx'; | ||
import OutlinedAlerts from '../../../../../docs/data/material/components/alert/OutlinedAlerts.tsx'; | ||
import SimpleAlert from '../../../../../docs/data/material/components/alert/SimpleAlert.tsx'; | ||
import TransitionAlerts from '../../../../../docs/data/material/components/alert/TransitionAlerts.tsx'; | ||
|
||
export default function Alert() { | ||
return ( | ||
<MaterialUILayout> | ||
<h1>Alert</h1> | ||
<section> | ||
<h2> Action Alerts</h2> | ||
<div className="demo-container"> | ||
<ActionAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Basic Alerts</h2> | ||
<div className="demo-container"> | ||
<BasicAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Color Alerts</h2> | ||
<div className="demo-container"> | ||
<ColorAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Description Alerts</h2> | ||
<div className="demo-container"> | ||
<DescriptionAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Filled Alerts</h2> | ||
<div className="demo-container"> | ||
<FilledAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Icon Alerts</h2> | ||
<div className="demo-container"> | ||
<IconAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Outlined Alerts</h2> | ||
<div className="demo-container"> | ||
<OutlinedAlerts /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Simple Alert</h2> | ||
<div className="demo-container"> | ||
<SimpleAlert /> | ||
</div> | ||
</section> | ||
<section> | ||
<h2> Transition Alerts</h2> | ||
<div className="demo-container"> | ||
<TransitionAlerts /> | ||
</div> | ||
</section> | ||
</MaterialUILayout> | ||
); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Mistake from other PR.