-
-
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][docs] Open Material UI template with CodeSandbox/StackBlitz #43604
Merged
+2,045
−6,856
Merged
Changes from 16 commits
Commits
Show all changes
43 commits
Select commit
Hold shift + click to select a range
b48eb9e
poc AppTheme + TemplateFrame
siriwatknp c982bbf
add codesandbox button
siriwatknp 033443d
move AppTheme to
siriwatknp 0e236e1
update TemplateFrame to use button
siriwatknp 52ee07e
fix dark mode flicker issue
siriwatknp f2ef7f2
switch back to TemplateName
siriwatknp 63baeff
use branding theme
siriwatknp e6eb4a1
replace file with module
siriwatknp b12cbf6
run docs:format
siriwatknp 411a832
Merge branch 'master' of https://github.com/mui/material-ui into poc/…
siriwatknp 8b59da7
add StackBlitz
siriwatknp 0e98e5c
move ToggleColorMode to shared-theme
siriwatknp 39ed005
fix tests
siriwatknp fa891f7
fix typo
siriwatknp eefecad
remove updateTemplates check
siriwatknp 7b8a931
fix dark mode flicker at the toolbar
siriwatknp 20cfc8e
remove unnecessary comment
siriwatknp bfc116a
Merge branch 'master' of https://github.com/mui/material-ui into poc/…
siriwatknp 1c377a9
fix the toolbar
siriwatknp ad00393
comment commitRef
siriwatknp 0385f86
make Dashboard work with new structure
siriwatknp 16b2e23
remove unused files
siriwatknp 2d0ce45
add contributing guide
siriwatknp cb7823e
typescript format
siriwatknp d080e3f
fix experiment dashboard
siriwatknp a269533
fix non-breaking space
siriwatknp bb3e39f
Merge branch 'master' of https://github.com/mui/material-ui into poc/…
siriwatknp 494bc92
Add visual separator between items
zanivan f3a1537
Fix layout shift
zanivan 8dd2969
wip
siriwatknp 3cb513f
Merge branch 'master' of https://github.com/mui/material-ui into poc/…
siriwatknp 469338c
make the generateTemplate works with the new structure
siriwatknp eac95f9
Merge branch 'poc/template-theme' of github.com:siriwatknp/material-u…
siriwatknp 63778ad
switch back to headless mode
siriwatknp 185cbfd
move contributing to faq
siriwatknp f4e1ae9
Merge branch 'master' of https://github.com/mui/material-ui into poc/…
siriwatknp 046339e
add disableTransitionOnChange
siriwatknp 5f501ea
docs:ts format
siriwatknp 3361f4a
Add link to contribution guide
zanivan dd74af9
Merge branch 'poc/template-theme' of https://github.com/siriwatknp/ma…
zanivan b01d202
Tweaks to the text
zanivan 9dd82c4
fix non-breaking space
siriwatknp 8c64407
fix data-screenshot="toggle-mode"
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
59 changes: 59 additions & 0 deletions
59
docs/data/material/getting-started/templates/shared-theme/AppTheme.js
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,59 @@ | ||
| /** | ||
| * TODO: need to update the `updateTemplatesTheme.ts` script to include the components that are used in the template. | ||
| * Generated by a script. | ||
| */ | ||
| import * as React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { ThemeProvider, createTheme } from '@mui/material/styles'; | ||
|
|
||
| import { inputsCustomizations } from './customizations/inputs'; | ||
| import { dataDisplayCustomizations } from './customizations/dataDisplay'; | ||
| import { feedbackCustomizations } from './customizations/feedback'; | ||
| import { navigationCustomizations } from './customizations/navigation'; | ||
| import { surfacesCustomizations } from './customizations/surfaces'; | ||
| import { colorSchemes, typography, shadows, shape } from './themePrimitives'; | ||
|
|
||
| function AppTheme({ children, disableCustomTheme, themeComponents }) { | ||
| const theme = React.useMemo(() => { | ||
| return disableCustomTheme | ||
| ? {} | ||
| : createTheme({ | ||
| // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/ | ||
| cssVariables: { | ||
| colorSchemeSelector: 'data-mui-color-scheme', | ||
| cssVarPrefix: 'template', | ||
| }, | ||
| colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes | ||
| typography, | ||
| shadows, | ||
| shape, | ||
| components: { | ||
| ...inputsCustomizations, | ||
| ...dataDisplayCustomizations, | ||
| ...feedbackCustomizations, | ||
| ...navigationCustomizations, | ||
| ...surfacesCustomizations, | ||
| ...themeComponents, | ||
| }, | ||
| }); | ||
| }, [disableCustomTheme, themeComponents]); | ||
| if (disableCustomTheme) { | ||
| return <React.Fragment>{children}</React.Fragment>; | ||
| } | ||
| return ( | ||
| <ThemeProvider theme={theme} disableTransitionOnChange> | ||
| {children} | ||
| </ThemeProvider> | ||
| ); | ||
| } | ||
|
|
||
| AppTheme.propTypes = { | ||
| children: PropTypes.node, | ||
| /** | ||
| * This is for the docs site. You can ignore it or remove it. | ||
| */ | ||
| disableCustomTheme: PropTypes.bool, | ||
| themeComponents: PropTypes.object, | ||
| }; | ||
|
|
||
| export default AppTheme; |
60 changes: 60 additions & 0 deletions
60
docs/data/material/getting-started/templates/shared-theme/AppTheme.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,60 @@ | ||
| /** | ||
| * TODO: need to update the `updateTemplatesTheme.ts` script to include the components that are used in the template. | ||
| * Generated by a script. | ||
| */ | ||
| import * as React from 'react'; | ||
| import { ThemeProvider, createTheme } from '@mui/material/styles'; | ||
| import type { ThemeOptions } from '@mui/material/styles'; | ||
| import { inputsCustomizations } from './customizations/inputs'; | ||
| import { dataDisplayCustomizations } from './customizations/dataDisplay'; | ||
| import { feedbackCustomizations } from './customizations/feedback'; | ||
| import { navigationCustomizations } from './customizations/navigation'; | ||
| import { surfacesCustomizations } from './customizations/surfaces'; | ||
| import { colorSchemes, typography, shadows, shape } from './themePrimitives'; | ||
|
|
||
| interface AppThemeProps { | ||
| children: React.ReactNode; | ||
| /** | ||
| * This is for the docs site. You can ignore it or remove it. | ||
| */ | ||
| disableCustomTheme?: boolean; | ||
| themeComponents?: ThemeOptions['components']; | ||
| } | ||
|
|
||
| export default function AppTheme({ | ||
| children, | ||
| disableCustomTheme, | ||
| themeComponents, | ||
| }: AppThemeProps) { | ||
| const theme = React.useMemo(() => { | ||
| return disableCustomTheme | ||
| ? {} | ||
| : createTheme({ | ||
| // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/ | ||
| cssVariables: { | ||
| colorSchemeSelector: 'data-mui-color-scheme', | ||
| cssVarPrefix: 'template', | ||
| }, | ||
| colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes | ||
| typography, | ||
| shadows, | ||
| shape, | ||
| components: { | ||
| ...inputsCustomizations, | ||
| ...dataDisplayCustomizations, | ||
| ...feedbackCustomizations, | ||
| ...navigationCustomizations, | ||
| ...surfacesCustomizations, | ||
| ...themeComponents, | ||
| }, | ||
| }); | ||
| }, [disableCustomTheme, themeComponents]); | ||
| if (disableCustomTheme) { | ||
| return <React.Fragment>{children}</React.Fragment>; | ||
| } | ||
| return ( | ||
| <ThemeProvider theme={theme} disableTransitionOnChange> | ||
| {children} | ||
| </ThemeProvider> | ||
| ); | ||
| } |
23 changes: 23 additions & 0 deletions
23
docs/data/material/getting-started/templates/shared-theme/ToggleColorMode.js
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,23 @@ | ||
| import * as React from 'react'; | ||
| import { useColorScheme } from '@mui/material/styles'; | ||
| import MenuItem from '@mui/material/MenuItem'; | ||
| import Select from '@mui/material/Select'; | ||
|
|
||
| export default function ToggleColorMode() { | ||
| const { mode, setMode } = useColorScheme(); | ||
| if (!mode) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Select | ||
| data-template-mode-trigger="" | ||
| value={mode} | ||
| onChange={(e) => setMode(e.target.value)} | ||
| sx={{ position: 'fixed', top: '1rem', right: '1rem' }} | ||
| > | ||
| <MenuItem value="system">System</MenuItem> | ||
| <MenuItem value="light">Light</MenuItem> | ||
| <MenuItem value="dark">Dark</MenuItem> | ||
| </Select> | ||
| ); | ||
| } |
23 changes: 23 additions & 0 deletions
23
docs/data/material/getting-started/templates/shared-theme/ToggleColorMode.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,23 @@ | ||
| import * as React from 'react'; | ||
| import { useColorScheme } from '@mui/material/styles'; | ||
| import MenuItem from '@mui/material/MenuItem'; | ||
| import Select from '@mui/material/Select'; | ||
|
|
||
| export default function ToggleColorMode() { | ||
| const { mode, setMode } = useColorScheme(); | ||
| if (!mode) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Select | ||
| data-template-mode-trigger="" | ||
| value={mode} | ||
| onChange={(e) => setMode(e.target.value as 'system' | 'light' | 'dark')} | ||
| sx={{ position: 'fixed', top: '1rem', right: '1rem' }} | ||
| > | ||
| <MenuItem value="system">System</MenuItem> | ||
| <MenuItem value="light">Light</MenuItem> | ||
| <MenuItem value="dark">Dark</MenuItem> | ||
| </Select> | ||
| ); | ||
| } |
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
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
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.
No longer need to run the script. The shared theme is the source of truth and it will be bundled with the template when users open CodeSandbox or StackBlitz.