From 446851f23dd1957a1fadf53acb545069ecd4a92a Mon Sep 17 00:00:00 2001 From: anhpt Date: Wed, 20 Sep 2023 22:09:34 +0700 Subject: [PATCH 1/3] Update markdownDocs --- docs/src/modules/components/MarkdownDocs.js | 36 +++++++++++++++++---- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 285f5634485137..6a0b4b875f663f 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -3,7 +3,14 @@ import PropTypes from 'prop-types'; import { useRouter } from 'next/router'; import { useTheme } from '@mui/system'; import { exactProp } from '@mui/utils'; -import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles'; +import { + CssVarsProvider as JoyCssVarsProvider, + useColorScheme as useJoyColorScheme, +} from '@mui/joy/styles'; +import { + Experimental_CssVarsProvider as MuiCssVarsProvider, + useColorScheme as useMuiColorScheme, +} from '@mui/material/styles'; import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; @@ -12,7 +19,7 @@ import BrandingProvider from 'docs/src/BrandingProvider'; import Ad from 'docs/src/modules/components/Ad'; import AdGuest from 'docs/src/modules/components/AdGuest'; -function JoyModeObserver({ mode }) { +function ModeObserver({ mode, useColorScheme }) { const { setMode } = useColorScheme(); React.useEffect(() => { setMode(mode); @@ -20,8 +27,9 @@ function JoyModeObserver({ mode }) { return null; } -JoyModeObserver.propTypes = { +ModeObserver.propTypes = { mode: PropTypes.oneOf(['light', 'dark']), + useColorScheme: PropTypes.func, }; export default function MarkdownDocs(props) { @@ -46,10 +54,22 @@ export default function MarkdownDocs(props) { const localizedDoc = docs[userLanguage] || docs.en; const isJoy = canonicalAs.startsWith('/joy-ui/') && !disableCssVarsProvider; - const CssVarsProvider = isJoy ? JoyCssVarsProvider : React.Fragment; - const Wrapper = isJoy ? BrandingProvider : React.Fragment; + const isMui = canonicalAs.startsWith('/material-ui/') && !disableCssVarsProvider; + let CssVarsProvider = React.Fragment; + let useColorScheme; + if (isJoy) { + CssVarsProvider = JoyCssVarsProvider; + useColorScheme = useJoyColorScheme; + } + + if (isMui) { + CssVarsProvider = MuiCssVarsProvider; + useColorScheme = useMuiColorScheme; + } + + const Wrapper = isJoy || isMui ? BrandingProvider : React.Fragment; const wrapperProps = { - ...(isJoy && { mode: theme.palette.mode }), + ...((isJoy || isMui) && { mode: theme.palette.mode }), }; return ( @@ -69,7 +89,9 @@ export default function MarkdownDocs(props) { )} - {isJoy && } + {(isJoy || isMui) && ( + + )} {localizedDoc.rendered.map((renderedMarkdownOrDemo, index) => ( Date: Thu, 21 Sep 2023 15:06:29 +0700 Subject: [PATCH 2/3] revert using cssprovider --- .../modules/components/AppSettingsDrawer.js | 1 + docs/src/modules/components/MarkdownDocs.js | 36 ++++--------------- 2 files changed, 8 insertions(+), 29 deletions(-) diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js index d2489cbad4fa43..51d6b8d4258e59 100644 --- a/docs/src/modules/components/AppSettingsDrawer.js +++ b/docs/src/modules/components/AppSettingsDrawer.js @@ -77,6 +77,7 @@ function AppSettingsDrawer(props) { } catch (error) { // thrown when cookies are disabled. } + document.documentElement.dataset.muiColorScheme = paletteMode; changeTheme({ paletteMode }); } }; diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js index 6a0b4b875f663f..285f5634485137 100644 --- a/docs/src/modules/components/MarkdownDocs.js +++ b/docs/src/modules/components/MarkdownDocs.js @@ -3,14 +3,7 @@ import PropTypes from 'prop-types'; import { useRouter } from 'next/router'; import { useTheme } from '@mui/system'; import { exactProp } from '@mui/utils'; -import { - CssVarsProvider as JoyCssVarsProvider, - useColorScheme as useJoyColorScheme, -} from '@mui/joy/styles'; -import { - Experimental_CssVarsProvider as MuiCssVarsProvider, - useColorScheme as useMuiColorScheme, -} from '@mui/material/styles'; +import { CssVarsProvider as JoyCssVarsProvider, useColorScheme } from '@mui/joy/styles'; import RichMarkdownElement from 'docs/src/modules/components/RichMarkdownElement'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; @@ -19,7 +12,7 @@ import BrandingProvider from 'docs/src/BrandingProvider'; import Ad from 'docs/src/modules/components/Ad'; import AdGuest from 'docs/src/modules/components/AdGuest'; -function ModeObserver({ mode, useColorScheme }) { +function JoyModeObserver({ mode }) { const { setMode } = useColorScheme(); React.useEffect(() => { setMode(mode); @@ -27,9 +20,8 @@ function ModeObserver({ mode, useColorScheme }) { return null; } -ModeObserver.propTypes = { +JoyModeObserver.propTypes = { mode: PropTypes.oneOf(['light', 'dark']), - useColorScheme: PropTypes.func, }; export default function MarkdownDocs(props) { @@ -54,22 +46,10 @@ export default function MarkdownDocs(props) { const localizedDoc = docs[userLanguage] || docs.en; const isJoy = canonicalAs.startsWith('/joy-ui/') && !disableCssVarsProvider; - const isMui = canonicalAs.startsWith('/material-ui/') && !disableCssVarsProvider; - let CssVarsProvider = React.Fragment; - let useColorScheme; - if (isJoy) { - CssVarsProvider = JoyCssVarsProvider; - useColorScheme = useJoyColorScheme; - } - - if (isMui) { - CssVarsProvider = MuiCssVarsProvider; - useColorScheme = useMuiColorScheme; - } - - const Wrapper = isJoy || isMui ? BrandingProvider : React.Fragment; + const CssVarsProvider = isJoy ? JoyCssVarsProvider : React.Fragment; + const Wrapper = isJoy ? BrandingProvider : React.Fragment; const wrapperProps = { - ...((isJoy || isMui) && { mode: theme.palette.mode }), + ...(isJoy && { mode: theme.palette.mode }), }; return ( @@ -89,9 +69,7 @@ export default function MarkdownDocs(props) { )} - {(isJoy || isMui) && ( - - )} + {isJoy && } {localizedDoc.rendered.map((renderedMarkdownOrDemo, index) => ( Date: Thu, 21 Sep 2023 15:08:52 +0700 Subject: [PATCH 3/3] use setAttribute --- docs/src/modules/components/AppSettingsDrawer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/modules/components/AppSettingsDrawer.js b/docs/src/modules/components/AppSettingsDrawer.js index 51d6b8d4258e59..4a8718cc1abd9b 100644 --- a/docs/src/modules/components/AppSettingsDrawer.js +++ b/docs/src/modules/components/AppSettingsDrawer.js @@ -77,7 +77,7 @@ function AppSettingsDrawer(props) { } catch (error) { // thrown when cookies are disabled. } - document.documentElement.dataset.muiColorScheme = paletteMode; + document.documentElement.setAttribute('data-mui-color-scheme', paletteMode); changeTheme({ paletteMode }); } };