Skip to content

Commit

Permalink
Revert "[core] Move SearchIcons to docs src folder (mui#34802)"
Browse files Browse the repository at this point in the history
This reverts commit 62af1d1.
  • Loading branch information
oliviertassinari authored and Daniel Rabe committed Nov 29, 2022
1 parent b4d62bb commit a21eb79
Show file tree
Hide file tree
Showing 4 changed files with 719 additions and 380 deletions.
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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"
Expand Down Expand Up @@ -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}
Expand All @@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -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".

0 comments on commit a21eb79

Please sign in to comment.