Adjust DashboardLayout documentation to link to AppProvider more clea…

…rly (#4083)
mui · Sep 13, 2024 · ba998a7 · ba998a7
1 parent 6b7e22e
commit ba998a7
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 44 deletions.
diff --git a/docs/data/toolpad/core/components/app-provider/app-provider.md b/docs/data/toolpad/core/components/app-provider/app-provider.md
@@ -10,8 +10,6 @@ components: AppProvider
 
 By wrapping an application at the root level with an `AppProvider` component, many of Toolpad's features (such as routing, navigation and theming) can be automatically enabled to their fullest extent, abstracting away complexity and helping you focus on the details that matter.
 
-It is not mandatory that every application is wrapped in an `AppProvider`, but it is highly recommended for most apps that use Toolpad.
-
 ## Basic
 
 Wrap an application page with the `AppProvider` component.

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
@@ -64,25 +65,41 @@ DemoPageContent.propTypes = {
   pathname: PropTypes.string.isRequired,
 };
 
-function SearchBar() {
+function Search() {
   return (
-    <TextField
-      id="search"
-      label="Search"
-      variant="outlined"
-      size="small"
-      slotProps={{
-        input: {
-          endAdornment: (
-            <IconButton type="button" aria-label="search" size="small">
-              <SearchIcon />
-            </IconButton>
-          ),
-          sx: { pr: 0.5 },
-        },
-      }}
-      sx={{ mr: 1 }}
-    />
+    <React.Fragment>
+      <Tooltip title="Search" enterDelay={1000}>
+        <div>
+          <IconButton
+            type="button"
+            aria-label="search"
+            size="small"
+            sx={{
+              display: { xs: 'inline-block', md: 'none' },
+            }}
+          >
+            <SearchIcon />
+          </IconButton>
+        </div>
+      </Tooltip>
+      <TextField
+        id="search"
+        label="Search"
+        variant="outlined"
+        size="small"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <IconButton type="button" aria-label="search" size="small">
+                <SearchIcon />
+              </IconButton>
+            ),
+            sx: { pr: 0.5 },
+          },
+        }}
+        sx={{ display: { xs: 'none', md: 'inline-block' }, mr: 1 }}
+      />
+    </React.Fragment>
   );
 }
 
@@ -109,7 +126,7 @@ function DashboardLayoutSlots(props) {
       theme={demoTheme}
       window={demoWindow}
     >
-      <DashboardLayout slots={{ toolbarActions: SearchBar }}>
+      <DashboardLayout slots={{ toolbarActions: Search }}>
         <DemoPageContent pathname={pathname} />
       </DashboardLayout>
     </AppProvider>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
@@ -59,25 +60,41 @@ function DemoPageContent({ pathname }: { pathname: string }) {
   );
 }
 
-function SearchBar() {
+function Search() {
   return (
-    <TextField
-      id="search"
-      label="Search"
-      variant="outlined"
-      size="small"
-      slotProps={{
-        input: {
-          endAdornment: (
-            <IconButton type="button" aria-label="search" size="small">
-              <SearchIcon />
-            </IconButton>
-          ),
-          sx: { pr: 0.5 },
-        },
-      }}
-      sx={{ mr: 1 }}
-    />
+    <React.Fragment>
+      <Tooltip title="Search" enterDelay={1000}>
+        <div>
+          <IconButton
+            type="button"
+            aria-label="search"
+            size="small"
+            sx={{
+              display: { xs: 'inline-block', md: 'none' },
+            }}
+          >
+            <SearchIcon />
+          </IconButton>
+        </div>
+      </Tooltip>
+      <TextField
+        id="search"
+        label="Search"
+        variant="outlined"
+        size="small"
+        slotProps={{
+          input: {
+            endAdornment: (
+              <IconButton type="button" aria-label="search" size="small">
+                <SearchIcon />
+              </IconButton>
+            ),
+            sx: { pr: 0.5 },
+          },
+        }}
+        sx={{ display: { xs: 'none', md: 'inline-block' }, mr: 1 }}
+      />
+    </React.Fragment>
   );
 }
 
@@ -112,7 +129,7 @@ export default function DashboardLayoutSlots(props: DemoProps) {
       theme={demoTheme}
       window={demoWindow}
     >
-      <DashboardLayout slots={{ toolbarActions: SearchBar }}>
+      <DashboardLayout slots={{ toolbarActions: Search }}>
         <DemoPageContent pathname={pathname} />
       </DashboardLayout>
     </AppProvider>

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSlots.tsx.preview
@@ -1,3 +1,3 @@
-<DashboardLayout slots={{ toolbarActions: SearchBar }}>
+<DashboardLayout slots={{ toolbarActions: Search }}>
   <DemoPageContent pathname={pathname} />
 </DashboardLayout>
diff --git a/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md b/docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md
@@ -10,7 +10,11 @@ components: AppProvider, DashboardLayout, Account
 
 The `DashboardLayout` component is a quick, easy way to provide a standard full-screen layout with a header and sidebar to any dashboard page, as well as ready-to-use and easy to customize navigation and branding.
 
-Many features of this component are configurable through the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) component that should wrap it.
+Many features of this component are configurable through the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) component that must wrap it to provide the necessary context.
+
+:::info
+For more information on the `AppProvider` component that must wrap this `DashboardLayout`, please check out the [AppProvider](https://mui.com/toolpad/core/react-app-provider/) component documentation.
+:::
 
 ## Demo
 
@@ -108,6 +112,6 @@ The use of an `iframe` may cause some spacing issues in the following demo.
 ## Customization
 
 Some areas of the layout can be replaced with custom components by using the `slots` and `slotProps` props.
-For example, this allows you to add new items to the toolbar in the header, such as a search bar.
+For example, this allows you to add new items to the toolbar in the header, such as a search bar or a button.
 
 {{"demo": "DashboardLayoutSlots.js", "height": 400, "iframe": true}}
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.