[docs] Fix warning mode pass to React.Fragment (#32729)

mui · May 11, 2022 · 7028a34 · 7028a34
1 parent 2c4f912
commit 7028a34
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -248,6 +248,7 @@ export default function Demo(props) {
 
   const [showAd, setShowAd] = React.useState(false);
 
+  const isJoy = asPathWithoutLang.startsWith('/joy-ui');
   const DemoRoot = asPathWithoutLang.startsWith('/joy-ui') ? DemoRootJoy : DemoRootMaterial;
   const Wrapper = asPathWithoutLang.startsWith('/joy-ui') ? BrandingProvider : React.Fragment;
 
@@ -261,7 +262,7 @@ export default function Demo(props) {
         onMouseEnter={handleDemoHover}
         onMouseLeave={handleDemoHover}
       >
-        <Wrapper mode={mode}>
+        <Wrapper {...(isJoy && { mode })}>
           <InitialFocus
             aria-label={t('initialFocusLabel')}
             action={initialFocusRef}
@@ -279,7 +280,7 @@ export default function Demo(props) {
       </DemoRoot>
       <AnchorLink id={`${demoName}.js`} />
       <AnchorLink id={`${demoName}.tsx`} />
-      <Wrapper mode={mode}>
+      <Wrapper {...(isJoy && { mode })}>
         {demoOptions.hideToolbar ? null : (
           <NoSsr defer fallback={<DemoToolbarFallback />}>
             <React.Suspense fallback={<DemoToolbarFallback />}>

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -41,8 +41,9 @@ function MarkdownDocs(props) {
 
   const { description, location, rendered, title, toc, headers } = docs[userLanguage] || docs.en;
 
-  const Provider = asPathWithoutLang.startsWith('/joy-ui') ? CssVarsProvider : React.Fragment;
-  const Wrapper = asPathWithoutLang.startsWith('/joy-ui') ? BrandingProvider : React.Fragment;
+  const isJoy = asPathWithoutLang.startsWith('/joy-ui');
+  const Provider = isJoy ? CssVarsProvider : React.Fragment;
+  const Wrapper = isJoy ? BrandingProvider : React.Fragment;
 
   return (
     <AppLayoutDocs
@@ -54,11 +55,11 @@ function MarkdownDocs(props) {
       toc={toc}
     >
       <Provider>
-        {asPathWithoutLang.startsWith('/joy-ui') && <JoyModeObserver mode={theme.palette.mode} />}
+        {isJoy && <JoyModeObserver mode={theme.palette.mode} />}
         {rendered.map((renderedMarkdownOrDemo, index) => {
           if (typeof renderedMarkdownOrDemo === 'string') {
             return (
-              <Wrapper key={index} mode={theme.palette.mode}>
+              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
                 <MarkdownElement renderedMarkdown={renderedMarkdownOrDemo} />
               </Wrapper>
             );
@@ -67,7 +68,7 @@ function MarkdownDocs(props) {
           if (renderedMarkdownOrDemo.component) {
             const Component = markdownComponents[renderedMarkdownOrDemo.component];
             return (
-              <Wrapper key={index} mode={theme.palette.mode}>
+              <Wrapper key={index} {...(isJoy && { mode: theme.palette.mode })}>
                 <Component headers={headers} options={renderedMarkdownOrDemo} />
               </Wrapper>
             );