Skip to content

Commit 2b50b0f

Browse files
m4theushwm4theushw
authored
[Hidden] Remove component (#26135)
1 parent 48c53d1 commit 2b50b0f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+199
-2380
lines changed

‎docs/pages/api-docs/hidden.js‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎docs/pages/api-docs/hidden.json‎

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎docs/pages/components/hidden.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎docs/src/modules/branding/ComparisonTable.tsx‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
2-
import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
2+
import { experimentalStyled as styled, alpha, useTheme } from '@material-ui/core/styles';
3+
import useMediaQuery from '@material-ui/core/useMediaQuery';
34
import Table from '@material-ui/core/Table';
45
import Box from '@material-ui/core/Box';
56
import TableBody from '@material-ui/core/TableBody';
@@ -10,7 +11,6 @@ import Button from '@material-ui/core/Button';
1011
import Link from 'docs/src/modules/components/Link';
1112
import Typography from '@material-ui/core/Typography';
1213
import NavigateNextIcon from '@material-ui/icons/NavigateNext';
13-
import Hidden from '@material-ui/core/Hidden';
1414
import Grid from '@material-ui/core/Grid';
1515
import CheckIcon from 'docs/src/modules/branding/icons/Check';
1616
import CloseIcon from 'docs/src/modules/branding/icons/Close';
@@ -301,42 +301,39 @@ const rows = [
301301
variant="body3"
302302
sx={{ color: 'grey87' }}
303303
/>,
304-
<Hidden mdDown>
305-
<Button
306-
component={Link}
307-
noLinkStyle
308-
href="/getting-started/usage/"
309-
size="medium"
310-
variant="contained"
311-
endIcon={<NavigateNextIcon />}
312-
>
313-
Get started
314-
</Button>
315-
</Hidden>,
316-
<Hidden mdDown>
317-
<Button
318-
component={Link}
319-
noLinkStyle
320-
href="/components/data-grid/"
321-
size="medium"
322-
variant="contained"
323-
endIcon={<NavigateNextIcon />}
324-
>
325-
Learn more
326-
</Button>
327-
</Hidden>,
328-
<Hidden mdDown>
329-
<Button
330-
component={Link}
331-
noLinkStyle
332-
disabled
333-
href="/getting-started/usage/"
334-
variant="contained"
335-
endIcon={<NavigateNextIcon />}
336-
>
337-
Learn more
338-
</Button>
339-
</Hidden>,
304+
<Button
305+
component={Link}
306+
noLinkStyle
307+
href="/getting-started/usage/"
308+
size="medium"
309+
variant="contained"
310+
endIcon={<NavigateNextIcon />}
311+
sx={{ display: { md: 'inline-flex', xs: 'none' } }}
312+
>
313+
Get started
314+
</Button>,
315+
<Button
316+
component={Link}
317+
noLinkStyle
318+
href="/components/data-grid/"
319+
size="medium"
320+
variant="contained"
321+
endIcon={<NavigateNextIcon />}
322+
sx={{ display: { md: 'inline-flex', xs: 'none' } }}
323+
>
324+
Learn more
325+
</Button>,
326+
<Button
327+
component={Link}
328+
noLinkStyle
329+
disabled
330+
href="/getting-started/usage/"
331+
variant="contained"
332+
endIcon={<NavigateNextIcon />}
333+
sx={{ display: { md: 'inline-flex', xs: 'none' } }}
334+
>
335+
Learn more
336+
</Button>,
340337
),
341338
];
342339

@@ -355,9 +352,12 @@ const tableHeader = [
355352
];
356353

357354
export default function ComparisonTable() {
355+
const theme = useTheme();
356+
const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));
357+
358358
return (
359359
<Box sx={{ mx: 'auto', maxWidth: 1440 }}>
360-
<Hidden smUp implementation="js">
360+
{isSmUp ? null : (
361361
<Grid container sx={{ textAlign: 'center', pt: 5, pb: 3 }}>
362362
{tableHeader.map((header) => (
363363
<Grid item xs={4} key={header.heading}>
@@ -368,7 +368,7 @@ export default function ComparisonTable() {
368368
</Grid>
369369
))}
370370
</Grid>
371-
</Hidden>
371+
)}
372372
<StyledTable aria-label="comparison table">
373373
<TableHead>
374374
<TableRow>

‎docs/src/modules/components/AppNavDrawer.js‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import List from '@material-ui/core/List';
66
import Drawer from '@material-ui/core/Drawer';
77
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
88
import Divider from '@material-ui/core/Divider';
9-
import Hidden from '@material-ui/core/Hidden';
109
import useMediaQuery from '@material-ui/core/useMediaQuery';
1110
import Box from '@material-ui/core/Box';
1211
import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/utils';
@@ -207,19 +206,18 @@ function AppNavDrawer(props) {
207206
</SwipeableDrawer>
208207
) : null}
209208
{disablePermanent || mobile ? null : (
210-
<Hidden lgDown implementation="css">
211-
<Drawer
212-
classes={{
213-
paper: classes.paper,
214-
}}
215-
variant="permanent"
216-
open
217-
>
218-
<PersistScroll slot="side" enabled>
219-
{drawer}
220-
</PersistScroll>
221-
</Drawer>
222-
</Hidden>
209+
<Drawer
210+
classes={{
211+
paper: classes.paper,
212+
}}
213+
variant="permanent"
214+
sx={{ display: { xs: 'none', lg: 'block' } }}
215+
open
216+
>
217+
<PersistScroll slot="side" enabled>
218+
{drawer}
219+
</PersistScroll>
220+
</Drawer>
223221
)}
224222
</nav>
225223
);

‎docs/src/pages/components/drawers/ResponsiveDrawer.js‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import AppBar from '@material-ui/core/AppBar';
44
import CssBaseline from '@material-ui/core/CssBaseline';
55
import Divider from '@material-ui/core/Divider';
66
import Drawer from '@material-ui/core/Drawer';
7-
import Hidden from '@material-ui/core/Hidden';
87
import IconButton from '@material-ui/core/IconButton';
98
import InboxIcon from '@material-ui/icons/MoveToInbox';
109
import List from '@material-ui/core/List';
@@ -113,33 +112,31 @@ function ResponsiveDrawer(props) {
113112
</AppBar>
114113
<nav className={classes.drawer} aria-label="mailbox folders">
115114
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
116-
<Hidden smUp implementation="css">
117-
<Drawer
118-
container={container}
119-
variant="temporary"
120-
open={mobileOpen}
121-
onClose={handleDrawerToggle}
122-
classes={{
123-
paper: classes.drawerPaper,
124-
}}
125-
ModalProps={{
126-
keepMounted: true, // Better open performance on mobile.
127-
}}
128-
>
129-
{drawer}
130-
</Drawer>
131-
</Hidden>
132-
<Hidden smDown implementation="css">
133-
<Drawer
134-
classes={{
135-
paper: classes.drawerPaper,
136-
}}
137-
variant="permanent"
138-
open
139-
>
140-
{drawer}
141-
</Drawer>
142-
</Hidden>
115+
<Drawer
116+
container={container}
117+
variant="temporary"
118+
open={mobileOpen}
119+
onClose={handleDrawerToggle}
120+
classes={{
121+
paper: classes.drawerPaper,
122+
}}
123+
ModalProps={{
124+
keepMounted: true, // Better open performance on mobile.
125+
}}
126+
sx={{ display: { xs: 'block', sm: 'none' } }}
127+
>
128+
{drawer}
129+
</Drawer>
130+
<Drawer
131+
classes={{
132+
paper: classes.drawerPaper,
133+
}}
134+
variant="permanent"
135+
sx={{ display: { xs: 'none', sm: 'block' } }}
136+
open
137+
>
138+
{drawer}
139+
</Drawer>
143140
</nav>
144141
<main className={classes.content}>
145142
<div className={classes.toolbar} />

‎docs/src/pages/components/drawers/ResponsiveDrawer.tsx‎

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import AppBar from '@material-ui/core/AppBar';
33
import CssBaseline from '@material-ui/core/CssBaseline';
44
import Divider from '@material-ui/core/Divider';
55
import Drawer from '@material-ui/core/Drawer';
6-
import Hidden from '@material-ui/core/Hidden';
76
import IconButton from '@material-ui/core/IconButton';
87
import InboxIcon from '@material-ui/icons/MoveToInbox';
98
import List from '@material-ui/core/List';
@@ -120,33 +119,31 @@ export default function ResponsiveDrawer(props: Props) {
120119
</AppBar>
121120
<nav className={classes.drawer} aria-label="mailbox folders">
122121
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
123-
<Hidden smUp implementation="css">
124-
<Drawer
125-
container={container}
126-
variant="temporary"
127-
open={mobileOpen}
128-
onClose={handleDrawerToggle}
129-
classes={{
130-
paper: classes.drawerPaper,
131-
}}
132-
ModalProps={{
133-
keepMounted: true, // Better open performance on mobile.
134-
}}
135-
>
136-
{drawer}
137-
</Drawer>
138-
</Hidden>
139-
<Hidden smDown implementation="css">
140-
<Drawer
141-
classes={{
142-
paper: classes.drawerPaper,
143-
}}
144-
variant="permanent"
145-
open
146-
>
147-
{drawer}
148-
</Drawer>
149-
</Hidden>
122+
<Drawer
123+
container={container}
124+
variant="temporary"
125+
open={mobileOpen}
126+
onClose={handleDrawerToggle}
127+
classes={{
128+
paper: classes.drawerPaper,
129+
}}
130+
ModalProps={{
131+
keepMounted: true, // Better open performance on mobile.
132+
}}
133+
sx={{ display: { xs: 'block', sm: 'none' } }}
134+
>
135+
{drawer}
136+
</Drawer>
137+
<Drawer
138+
classes={{
139+
paper: classes.drawerPaper,
140+
}}
141+
variant="permanent"
142+
sx={{ display: { xs: 'none', sm: 'block' } }}
143+
open
144+
>
145+
{drawer}
146+
</Drawer>
150147
</nav>
151148
<main className={classes.content}>
152149
<div className={classes.toolbar} />

0 commit comments

Comments
 (0)