[Hidden] Remove component

mui · May 4, 2021 · fe85f27 · fe85f27
1 parent 2936ff7
commit fe85f27
Show file tree

Hide file tree

Showing 45 changed files with 199 additions and 2,161 deletions.
diff --git a/docs/pages/components/hidden.js b/docs/pages/components/hidden.js
diff --git a/docs/src/modules/branding/ComparisonTable.tsx b/docs/src/modules/branding/ComparisonTable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { experimentalStyled as styled, alpha } from '@material-ui/core/styles';
+import { experimentalStyled as styled, alpha, useTheme } from '@material-ui/core/styles';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Table from '@material-ui/core/Table';
 import Box from '@material-ui/core/Box';
 import TableBody from '@material-ui/core/TableBody';
@@ -10,7 +11,6 @@ import Button from '@material-ui/core/Button';
 import Link from 'docs/src/modules/components/Link';
 import Typography from '@material-ui/core/Typography';
 import NavigateNextIcon from '@material-ui/icons/NavigateNext';
-import Hidden from '@material-ui/core/Hidden';
 import Grid from '@material-ui/core/Grid';
 import CheckIcon from 'docs/src/modules/branding/icons/Check';
 import CloseIcon from 'docs/src/modules/branding/icons/Close';
@@ -301,42 +301,39 @@ const rows = [
       variant="body3"
       sx={{ color: 'grey87' }}
     />,
-    <Hidden mdDown>
-      <Button
-        component={Link}
-        noLinkStyle
-        href="/getting-started/usage/"
-        size="medium"
-        variant="contained"
-        endIcon={<NavigateNextIcon />}
-      >
-        Get started
-      </Button>
-    </Hidden>,
-    <Hidden mdDown>
-      <Button
-        component={Link}
-        noLinkStyle
-        href="/components/data-grid/"
-        size="medium"
-        variant="contained"
-        endIcon={<NavigateNextIcon />}
-      >
-        Learn more
-      </Button>
-    </Hidden>,
-    <Hidden mdDown>
-      <Button
-        component={Link}
-        noLinkStyle
-        disabled
-        href="/getting-started/usage/"
-        variant="contained"
-        endIcon={<NavigateNextIcon />}
-      >
-        Learn more
-      </Button>
-    </Hidden>,
+    <Button
+      component={Link}
+      noLinkStyle
+      href="/getting-started/usage/"
+      size="medium"
+      variant="contained"
+      endIcon={<NavigateNextIcon />}
+      sx={{ display: { md: 'inline-flex', xs: 'none' } }}
+    >
+      Get started
+    </Button>,
+    <Button
+      component={Link}
+      noLinkStyle
+      href="/components/data-grid/"
+      size="medium"
+      variant="contained"
+      endIcon={<NavigateNextIcon />}
+      sx={{ display: { md: 'inline-flex', xs: 'none' } }}
+    >
+      Learn more
+    </Button>,
+    <Button
+      component={Link}
+      noLinkStyle
+      disabled
+      href="/getting-started/usage/"
+      variant="contained"
+      endIcon={<NavigateNextIcon />}
+      sx={{ display: { md: 'inline-flex', xs: 'none' } }}
+    >
+      Learn more
+    </Button>,
   ),
 ];
 
@@ -355,9 +352,12 @@ const tableHeader = [
 ];
 
 export default function ComparisonTable() {
+  const theme = useTheme();
+  const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));
+
   return (
     <Box sx={{ mx: 'auto', maxWidth: 1440 }}>
-      <Hidden smUp implementation="js">
+      {isSmUp ? null : (
         <Grid container sx={{ textAlign: 'center', pt: 5, pb: 3 }}>
           {tableHeader.map((header) => (
             <Grid item xs={4} key={header.heading}>
@@ -368,7 +368,7 @@ export default function ComparisonTable() {
             </Grid>
           ))}
         </Grid>
-      </Hidden>
+      )}
       <StyledTable aria-label="comparison table">
         <TableHead>
           <TableRow>

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
@@ -6,7 +6,6 @@ import List from '@material-ui/core/List';
 import Drawer from '@material-ui/core/Drawer';
 import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
 import Divider from '@material-ui/core/Divider';
-import Hidden from '@material-ui/core/Hidden';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import Box from '@material-ui/core/Box';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/utils';
@@ -207,19 +206,18 @@ function AppNavDrawer(props) {
         </SwipeableDrawer>
       ) : null}
       {disablePermanent || mobile ? null : (
-        <Hidden lgDown implementation="css">
-          <Drawer
-            classes={{
-              paper: classes.paper,
-            }}
-            variant="permanent"
-            open
-          >
-            <PersistScroll slot="side" enabled>
-              {drawer}
-            </PersistScroll>
-          </Drawer>
-        </Hidden>
+        <Drawer
+          classes={{
+            paper: classes.paper,
+          }}
+          variant="permanent"
+          sx={{ display: { xs: 'none', lg: 'block' } }}
+          open
+        >
+          <PersistScroll slot="side" enabled>
+            {drawer}
+          </PersistScroll>
+        </Drawer>
       )}
     </nav>
   );

diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js
@@ -4,7 +4,6 @@ import AppBar from '@material-ui/core/AppBar';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Divider from '@material-ui/core/Divider';
 import Drawer from '@material-ui/core/Drawer';
-import Hidden from '@material-ui/core/Hidden';
 import IconButton from '@material-ui/core/IconButton';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import List from '@material-ui/core/List';
@@ -113,33 +112,31 @@ function ResponsiveDrawer(props) {
       </AppBar>
       <nav className={classes.drawer} aria-label="mailbox folders">
         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
-        <Hidden smUp implementation="css">
-          <Drawer
-            container={container}
-            variant="temporary"
-            open={mobileOpen}
-            onClose={handleDrawerToggle}
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            ModalProps={{
-              keepMounted: true, // Better open performance on mobile.
-            }}
-          >
-            {drawer}
-          </Drawer>
-        </Hidden>
-        <Hidden smDown implementation="css">
-          <Drawer
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            variant="permanent"
-            open
-          >
-            {drawer}
-          </Drawer>
-        </Hidden>
+        <Drawer
+          container={container}
+          variant="temporary"
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+          sx={{ display: { xs: 'block', sm: 'none' } }}
+        >
+          {drawer}
+        </Drawer>
+        <Drawer
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+          variant="permanent"
+          sx={{ display: { xs: 'none', sm: 'block' } }}
+          open
+        >
+          {drawer}
+        </Drawer>
       </nav>
       <main className={classes.content}>
         <div className={classes.toolbar} />

diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
@@ -3,7 +3,6 @@ import AppBar from '@material-ui/core/AppBar';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Divider from '@material-ui/core/Divider';
 import Drawer from '@material-ui/core/Drawer';
-import Hidden from '@material-ui/core/Hidden';
 import IconButton from '@material-ui/core/IconButton';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import List from '@material-ui/core/List';
@@ -120,33 +119,31 @@ export default function ResponsiveDrawer(props: Props) {
       </AppBar>
       <nav className={classes.drawer} aria-label="mailbox folders">
         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
-        <Hidden smUp implementation="css">
-          <Drawer
-            container={container}
-            variant="temporary"
-            open={mobileOpen}
-            onClose={handleDrawerToggle}
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            ModalProps={{
-              keepMounted: true, // Better open performance on mobile.
-            }}
-          >
-            {drawer}
-          </Drawer>
-        </Hidden>
-        <Hidden smDown implementation="css">
-          <Drawer
-            classes={{
-              paper: classes.drawerPaper,
-            }}
-            variant="permanent"
-            open
-          >
-            {drawer}
-          </Drawer>
-        </Hidden>
+        <Drawer
+          container={container}
+          variant="temporary"
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+          ModalProps={{
+            keepMounted: true, // Better open performance on mobile.
+          }}
+          sx={{ display: { xs: 'block', sm: 'none' } }}
+        >
+          {drawer}
+        </Drawer>
+        <Drawer
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+          variant="permanent"
+          sx={{ display: { xs: 'none', sm: 'block' } }}
+          open
+        >
+          {drawer}
+        </Drawer>
       </nav>
       <main className={classes.content}>
         <div className={classes.toolbar} />

diff --git a/docs/src/pages/components/hidden/BreakpointDown.js b/docs/src/pages/components/hidden/BreakpointDown.js