-
-
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][Button] Convert to support CSS extraction #41378
Merged
Merged
Changes from all commits
Commits
Show all changes
26 commits
Select commit
Hold shift + click to select a range
b484f4d
migrate button
siriwatknp 8b8396c
Merge branch 'master' of https://github.com/mui/material-ui into pigm…
siriwatknp 731e3b8
reexport keyframes from zero-styled
siriwatknp e8843e7
move default theme into a separate file
siriwatknp 39efacc
migrate ButtonBase
siriwatknp 3beb991
Merge branch 'next' of https://github.com/mui/material-ui into pigmen…
siriwatknp 7d980ac
revert lock file
siriwatknp 194e6ce
generate demo pages
siriwatknp 13e3ad7
revert defaultTheme
siriwatknp caa1b1a
adjust text and add dark styles
siriwatknp 6b4bae0
remove enableCssLayer
siriwatknp 305949a
fix boxShadow styles
siriwatknp 6934bed
use is-prop-valid for string tag and add rootShouldForwardProp
siriwatknp 985fb4e
fix lint
siriwatknp 72891b7
Merge branch 'next' of https://github.com/mui/material-ui into pigmen…
siriwatknp 007dcb6
iterate palette
siriwatknp 85dc9c6
fix fullWidth
siriwatknp 1c7eec9
add @mui/lab as dependency to apps
siriwatknp 8d5c677
fix inheritContained
siriwatknp 1dd7263
use previous version
siriwatknp 5a1a235
remove unnecessary directive
siriwatknp 12426c5
use commonIconStyles
siriwatknp 3af7b36
Merge branch 'next' of https://github.com/mui/material-ui into pigmen…
siriwatknp 94d5ff2
revert lock file
siriwatknp ab3f25a
revert unnecesary change
siriwatknp ca447ca
pnpm install
siriwatknp File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
121 changes: 121 additions & 0 deletions
121
apps/pigment-css-next-app/src/app/material-ui/react-button/page.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,121 @@ | ||
| 'use client'; | ||
| import * as React from 'react'; | ||
| import BasicButtons from '../../../../../../docs/data/material/components/buttons/BasicButtons'; | ||
| import ButtonBaseDemo from '../../../../../../docs/data/material/components/buttons/ButtonBaseDemo'; | ||
| import ButtonSizes from '../../../../../../docs/data/material/components/buttons/ButtonSizes'; | ||
| import ColorButtons from '../../../../../../docs/data/material/components/buttons/ColorButtons'; | ||
| import ContainedButtons from '../../../../../../docs/data/material/components/buttons/ContainedButtons'; | ||
| import CustomizedButtons from '../../../../../../docs/data/material/components/buttons/CustomizedButtons'; | ||
| import DisableElevation from '../../../../../../docs/data/material/components/buttons/DisableElevation'; | ||
| import IconButtonColors from '../../../../../../docs/data/material/components/buttons/IconButtonColors'; | ||
| import IconButtonSizes from '../../../../../../docs/data/material/components/buttons/IconButtonSizes'; | ||
| import IconButtons from '../../../../../../docs/data/material/components/buttons/IconButtons'; | ||
| import IconLabelButtons from '../../../../../../docs/data/material/components/buttons/IconLabelButtons'; | ||
| import InputFileUpload from '../../../../../../docs/data/material/components/buttons/InputFileUpload'; | ||
| import LoadingButtons from '../../../../../../docs/data/material/components/buttons/LoadingButtons'; | ||
| import LoadingButtonsTransition from '../../../../../../docs/data/material/components/buttons/LoadingButtonsTransition'; | ||
| import OutlinedButtons from '../../../../../../docs/data/material/components/buttons/OutlinedButtons'; | ||
| import TextButtons from '../../../../../../docs/data/material/components/buttons/TextButtons'; | ||
|
|
||
| export default function Buttons() { | ||
| return ( | ||
| <React.Fragment> | ||
| <section> | ||
| <h2> Basic Buttons</h2> | ||
| <div className="demo-container"> | ||
| <BasicButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Button Base Demo</h2> | ||
| <div className="demo-container"> | ||
| <ButtonBaseDemo /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Button Sizes</h2> | ||
| <div className="demo-container"> | ||
| <ButtonSizes /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Color Buttons</h2> | ||
| <div className="demo-container"> | ||
| <ColorButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Contained Buttons</h2> | ||
| <div className="demo-container"> | ||
| <ContainedButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Customized Buttons</h2> | ||
| <div className="demo-container"> | ||
| <CustomizedButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Disable Elevation</h2> | ||
| <div className="demo-container"> | ||
| <DisableElevation /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Button Colors</h2> | ||
| <div className="demo-container"> | ||
| <IconButtonColors /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Button Sizes</h2> | ||
| <div className="demo-container"> | ||
| <IconButtonSizes /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Buttons</h2> | ||
| <div className="demo-container"> | ||
| <IconButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Label Buttons</h2> | ||
| <div className="demo-container"> | ||
| <IconLabelButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Input File Upload</h2> | ||
| <div className="demo-container"> | ||
| <InputFileUpload /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Loading Buttons</h2> | ||
| <div className="demo-container"> | ||
| <LoadingButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Loading Buttons Transition</h2> | ||
| <div className="demo-container"> | ||
| <LoadingButtonsTransition /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Outlined Buttons</h2> | ||
| <div className="demo-container"> | ||
| <OutlinedButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Text Buttons</h2> | ||
| <div className="demo-container"> | ||
| <TextButtons /> | ||
| </div> | ||
| </section> | ||
| </React.Fragment> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
122 changes: 122 additions & 0 deletions
122
apps/pigment-css-vite-app/src/pages/material-ui/react-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,122 @@ | ||
| import * as React from 'react'; | ||
| import MaterialUILayout from '../../Layout'; | ||
| import BasicButtons from '../../../../../docs/data/material/components/buttons/BasicButtons.tsx'; | ||
| import ButtonBaseDemo from '../../../../../docs/data/material/components/buttons/ButtonBaseDemo.tsx'; | ||
| import ButtonSizes from '../../../../../docs/data/material/components/buttons/ButtonSizes.tsx'; | ||
| import ColorButtons from '../../../../../docs/data/material/components/buttons/ColorButtons.tsx'; | ||
| import ContainedButtons from '../../../../../docs/data/material/components/buttons/ContainedButtons.tsx'; | ||
| import CustomizedButtons from '../../../../../docs/data/material/components/buttons/CustomizedButtons.tsx'; | ||
| import DisableElevation from '../../../../../docs/data/material/components/buttons/DisableElevation.tsx'; | ||
| import IconButtonColors from '../../../../../docs/data/material/components/buttons/IconButtonColors.tsx'; | ||
| import IconButtonSizes from '../../../../../docs/data/material/components/buttons/IconButtonSizes.tsx'; | ||
| import IconButtons from '../../../../../docs/data/material/components/buttons/IconButtons.tsx'; | ||
| import IconLabelButtons from '../../../../../docs/data/material/components/buttons/IconLabelButtons.tsx'; | ||
| import InputFileUpload from '../../../../../docs/data/material/components/buttons/InputFileUpload.tsx'; | ||
| import LoadingButtons from '../../../../../docs/data/material/components/buttons/LoadingButtons.tsx'; | ||
| import LoadingButtonsTransition from '../../../../../docs/data/material/components/buttons/LoadingButtonsTransition.tsx'; | ||
| import OutlinedButtons from '../../../../../docs/data/material/components/buttons/OutlinedButtons.tsx'; | ||
| import TextButtons from '../../../../../docs/data/material/components/buttons/TextButtons.tsx'; | ||
|
|
||
| export default function Buttons() { | ||
| return ( | ||
| <MaterialUILayout> | ||
| <h1>Buttons</h1> | ||
| <section> | ||
| <h2> Basic Buttons</h2> | ||
| <div className="demo-container"> | ||
| <BasicButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Button Base Demo</h2> | ||
| <div className="demo-container"> | ||
| <ButtonBaseDemo /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Button Sizes</h2> | ||
| <div className="demo-container"> | ||
| <ButtonSizes /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Color Buttons</h2> | ||
| <div className="demo-container"> | ||
| <ColorButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Contained Buttons</h2> | ||
| <div className="demo-container"> | ||
| <ContainedButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Customized Buttons</h2> | ||
| <div className="demo-container"> | ||
| <CustomizedButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Disable Elevation</h2> | ||
| <div className="demo-container"> | ||
| <DisableElevation /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Button Colors</h2> | ||
| <div className="demo-container"> | ||
| <IconButtonColors /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Button Sizes</h2> | ||
| <div className="demo-container"> | ||
| <IconButtonSizes /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Buttons</h2> | ||
| <div className="demo-container"> | ||
| <IconButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Icon Label Buttons</h2> | ||
| <div className="demo-container"> | ||
| <IconLabelButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Input File Upload</h2> | ||
| <div className="demo-container"> | ||
| <InputFileUpload /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Loading Buttons</h2> | ||
| <div className="demo-container"> | ||
| <LoadingButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Loading Buttons Transition</h2> | ||
| <div className="demo-container"> | ||
| <LoadingButtonsTransition /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Outlined Buttons</h2> | ||
| <div className="demo-container"> | ||
| <OutlinedButtons /> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h2> Text Buttons</h2> | ||
| <div className="demo-container"> | ||
| <TextButtons /> | ||
| </div> | ||
| </section> | ||
| </MaterialUILayout> | ||
| ); | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
The demo contains LoadingButton from
@mui/lab