Revert "[core] Move SearchIcons to docs src folder (mui#34802)"

This reverts commit 62af1d1.
daniel-rabe · Nov 29, 2022 · a21eb79 · a21eb79
1 parent b4d62bb
commit a21eb79
Show file tree

Hide file tree

Showing 4 changed files with 719 additions and 380 deletions.
diff --git a/docs/src/modules/components/SearchIcons.js → .../components/material-icons/SearchIcons.js b/docs/src/modules/components/SearchIcons.js → .../components/material-icons/SearchIcons.js
@@ -1,4 +1,3 @@
-/* eslint-disable material-ui/no-hardcoded-labels */
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import MuiPaper from '@mui/material/Paper';
@@ -304,7 +303,11 @@ const DialogDetails = React.memo(function DialogDetails(props) {
               language="js"
             />
           </Tooltip>
-          <ImportLink color="text.secondary" href="/material-ui/icons/" variant="caption">
+          <ImportLink
+            color="text.secondary"
+            href="/material-ui/icons/"
+            variant="caption"
+          >
             {t('searchIcons.learnMore')}
           </ImportLink>
           <DialogContent>
@@ -318,7 +321,10 @@ const DialogDetails = React.memo(function DialogDetails(props) {
                 <Grid container alignItems="flex-end" justifyContent="center">
                   <Grid item>
                     <Tooltip title="fontSize small">
-                      <FontSizeComponent as={selectedIcon.Component} fontSize="small" />
+                      <FontSizeComponent
+                        as={selectedIcon.Component}
+                        fontSize="small"
+                      />
                     </Tooltip>
                   </Grid>
                   <Grid item>
@@ -328,19 +334,28 @@ const DialogDetails = React.memo(function DialogDetails(props) {
                   </Grid>
                   <Grid item>
                     <Tooltip title="fontSize large">
-                      <FontSizeComponent as={selectedIcon.Component} fontSize="large" />
+                      <FontSizeComponent
+                        as={selectedIcon.Component}
+                        fontSize="large"
+                      />
                     </Tooltip>
                   </Grid>
                 </Grid>
                 <Grid container justifyContent="center">
-                  <ContextComponent component={selectedIcon.Component} contextColor="primary" />
+                  <ContextComponent
+                    component={selectedIcon.Component}
+                    contextColor="primary"
+                  />
                   <ContextComponent
                     component={selectedIcon.Component}
                     contextColor="primaryInverse"
                   />
                 </Grid>
                 <Grid container justifyContent="center">
-                  <ContextComponent component={selectedIcon.Component} contextColor="textPrimary" />
+                  <ContextComponent
+                    component={selectedIcon.Component}
+                    contextColor="textPrimary"
+                  />
                   <ContextComponent
                     component={selectedIcon.Component}
                     contextColor="textPrimaryInverse"
@@ -506,24 +521,17 @@ export default function SearchIcons() {
     [theme, keys],
   );
 
-  const dialogSelectedIcon = useLatest(selectedIcon ? allIconsMap[selectedIcon] : null);
+  const dialogSelectedIcon = useLatest(
+    selectedIcon ? allIconsMap[selectedIcon] : null,
+  );
 
   return (
-    <Box
-      sx={{
-        pt: 1,
-        pb: 3,
-        px: 3,
-        mb: 3,
-        borderRadius: '10px',
-        bgcolor: (t) => (t.palette.mode === 'dark' ? 'grey.900' : 'grey.100'),
-      }}
-    >
-      <Grid container sx={{ minHeight: 500 }}>
-        <Grid item xs={12} sm={3}>
-          <Form>
-            <RadioGroup>
-              {['Filled', 'Outlined', 'Rounded', 'Two tone', 'Sharp'].map((currentTheme) => {
+    <Grid container sx={{ minHeight: 500 }}>
+      <Grid item xs={12} sm={3}>
+        <Form>
+          <RadioGroup>
+            {['Filled', 'Outlined', 'Rounded', 'Two tone', 'Sharp'].map(
+              (currentTheme) => {
                 return (
                   <FormControlLabel
                     key={currentTheme}
@@ -537,32 +545,34 @@ export default function SearchIcons() {
                     label={currentTheme}
                   />
                 );
-              })}
-            </RadioGroup>
-          </Form>
-        </Grid>
-        <Grid item xs={12} sm={9}>
-          <Paper>
-            <IconButton sx={{ padding: '10px' }} aria-label="search">
-              <SearchIcon />
-            </IconButton>
-            <Input
-              autoFocus
-              value={query}
-              onChange={(event) => setQuery(event.target.value)}
-              placeholder="Search icons…"
-              inputProps={{ 'aria-label': 'search icons' }}
-            />
-          </Paper>
-          <Typography sx={{ mb: 1 }}>{`${formatNumber(icons.length)} matching results`}</Typography>
-          <Icons icons={icons} handleOpenClick={handleOpenClick} />
-        </Grid>
-        <DialogDetails
-          open={!!selectedIcon}
-          selectedIcon={dialogSelectedIcon}
-          handleClose={handleClose}
-        />
+              },
+            )}
+          </RadioGroup>
+        </Form>
+      </Grid>
+      <Grid item xs={12} sm={9}>
+        <Paper>
+          <IconButton sx={{ padding: '10px' }} aria-label="search">
+            <SearchIcon />
+          </IconButton>
+          <Input
+            autoFocus
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder="Search icons…"
+            inputProps={{ 'aria-label': 'search icons' }}
+          />
+        </Paper>
+        <Typography sx={{ mb: 1 }}>{`${formatNumber(
+          icons.length,
+        )} matching results`}</Typography>
+        <Icons icons={icons} handleOpenClick={handleOpenClick} />
       </Grid>
-    </Box>
+      <DialogDetails
+        open={!!selectedIcon}
+        selectedIcon={dialogSelectedIcon}
+        handleClose={handleClose}
+      />
+    </Grid>
   );
 }
diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md
@@ -24,6 +24,6 @@ See the [Installation](/material-ui/getting-started/installation/) page for addi
 
 {{"component": "modules/components/ComponentLinkHeader.js"}}
 
-{{"component": "modules/components/SearchIcons.js"}}
+{{"demo": "SearchIcons.js", "hideToolbar": true, "bg": true}}
 
 ℹ️ The search supports synonyms. Try searching for "hamburger" or "logout".