[docs] Improve mobile display

mui · oliviertassinari · Jan 8, 2020 · Jan 5, 2020 · Jan 5, 2020 · Jan 5, 2020
commit 4410744967ecb1b167c75d4c67107de4a1597409
diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -119,6 +119,7 @@ const styles = theme => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: 16,
     color: theme.palette.text.primary,
+    wordBreak: 'break-word',
     '& .anchor-link': {
       marginTop: -96, // Offset for the anchor.
       position: 'absolute',

diff --git a/docs/src/pages/components/dividers/MiddleDividers.js b/docs/src/pages/components/dividers/MiddleDividers.js
@@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({
     backgroundColor: theme.palette.background.paper,
   },
   chip: {
-    marginRight: theme.spacing(1),
+    margin: theme.spacing(0.5),
   },
   section1: {
     margin: theme.spacing(3, 2),

diff --git a/docs/src/pages/components/dividers/MiddleDividers.tsx b/docs/src/pages/components/dividers/MiddleDividers.tsx
@@ -14,7 +14,7 @@ const useStyles = makeStyles((theme: Theme) =>
       backgroundColor: theme.palette.background.paper,
     },
     chip: {
-      marginRight: theme.spacing(1),
+      margin: theme.spacing(0.5),
     },
     section1: {
       margin: theme.spacing(3, 2),

diff --git a/docs/src/pages/components/hidden/BreakpointDown.js b/docs/src/pages/components/hidden/BreakpointDown.js
@@ -12,6 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
   container: {
     display: 'flex',
+    flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(2),

diff --git a/docs/src/pages/components/hidden/BreakpointDown.tsx b/docs/src/pages/components/hidden/BreakpointDown.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     container: {
       display: 'flex',
+      flexWrap: 'wrap',
     },
     paper: {
       padding: theme.spacing(2),

diff --git a/docs/src/pages/components/hidden/BreakpointOnly.js b/docs/src/pages/components/hidden/BreakpointOnly.js
@@ -12,6 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
   container: {
     display: 'flex',
+    flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(2),

diff --git a/docs/src/pages/components/hidden/BreakpointOnly.tsx b/docs/src/pages/components/hidden/BreakpointOnly.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     container: {
       display: 'flex',
+      flexWrap: 'wrap',
     },
     paper: {
       padding: theme.spacing(2),

diff --git a/docs/src/pages/components/hidden/BreakpointUp.js b/docs/src/pages/components/hidden/BreakpointUp.js
@@ -12,6 +12,7 @@ const useStyles = makeStyles(theme => ({
   },
   container: {
     display: 'flex',
+    flexWrap: 'wrap',
   },
   paper: {
     padding: theme.spacing(2),

diff --git a/docs/src/pages/components/hidden/BreakpointUp.tsx b/docs/src/pages/components/hidden/BreakpointUp.tsx
@@ -12,6 +12,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     container: {
       display: 'flex',
+      flexWrap: 'wrap',
     },
     paper: {
       padding: theme.spacing(2),

diff --git a/docs/src/pages/components/lists/VirtualizedList.js b/docs/src/pages/components/lists/VirtualizedList.js
@@ -9,7 +9,7 @@ const useStyles = makeStyles(theme => ({
   root: {
     width: '100%',
     height: 400,
-    maxWidth: 360,
+    maxWidth: 300,
     backgroundColor: theme.palette.background.paper,
   },
 }));
@@ -34,7 +34,7 @@ export default function VirtualizedList() {
 
   return (
     <div className={classes.root}>
-      <FixedSizeList height={400} width={360} itemSize={46} itemCount={200}>
+      <FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
         {renderRow}
       </FixedSizeList>
     </div>

diff --git a/docs/src/pages/components/lists/VirtualizedList.tsx b/docs/src/pages/components/lists/VirtualizedList.tsx
@@ -9,7 +9,7 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       width: '100%',
       height: 400,
-      maxWidth: 360,
+      maxWidth: 300,
       backgroundColor: theme.palette.background.paper,
     },
   }),
@@ -30,7 +30,7 @@ export default function VirtualizedList() {
 
   return (
     <div className={classes.root}>
-      <FixedSizeList height={400} width={360} itemSize={46} itemCount={200}>
+      <FixedSizeList height={400} width={300} itemSize={46} itemCount={200}>
         {renderRow}
       </FixedSizeList>
     </div>

diff --git a/docs/src/pages/components/paper/SimplePaper.js b/docs/src/pages/components/paper/SimplePaper.js
@@ -5,6 +5,7 @@ import Paper from '@material-ui/core/Paper';
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
+    flexWrap: 'wrap',
     '& > *': {
       margin: theme.spacing(1),
       width: theme.spacing(16),

diff --git a/docs/src/pages/components/paper/SimplePaper.tsx b/docs/src/pages/components/paper/SimplePaper.tsx
@@ -6,6 +6,7 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       display: 'flex',
+      flexWrap: 'wrap',
       '& > *': {
         margin: theme.spacing(1),
         width: theme.spacing(16),

diff --git a/packages/material-ui-lab/src/TreeItem/TreeItem.js b/packages/material-ui-lab/src/TreeItem/TreeItem.js
@@ -15,6 +15,7 @@ export const styles = theme => ({
     margin: 0,
     padding: 0,
     outline: 0,
+    WebkitTapHighlightColor: 'transparent',
     '&:focus > $content': {
       backgroundColor: theme.palette.grey[400],
     },
@@ -86,7 +87,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
     icons: contextIcons,
     isExpanded,
     isFocused,
-    isTabable,
+    isTabbable,
     setFocusByFirstCharacter,
     toggle,
   } = React.useContext(TreeViewContext);
@@ -100,7 +101,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
   const expandable = Boolean(Array.isArray(children) ? children.length : children);
   const expanded = isExpanded ? isExpanded(nodeId) : false;
   const focused = isFocused ? isFocused(nodeId) : false;
-  const tabable = isTabable ? isTabable(nodeId) : false;
+  const tabbable = isTabbable ? isTabbable(nodeId) : false;
   const icons = contextIcons || {};
   const theme = useTheme();
 
@@ -234,7 +235,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
   };
 
   const handleFocus = event => {
-    if (!focused && tabable) {
+    if (!focused && tabbable) {
       focus(nodeId);
     }
 
@@ -281,7 +282,7 @@ const TreeItem = React.forwardRef(function TreeItem(props, ref) {
       onFocus={handleFocus}
       aria-expanded={expandable ? expanded : null}
       ref={handleRef}
-      tabIndex={tabable ? 0 : -1}
+      tabIndex={tabbable ? 0 : -1}
       {...other}
     >
       <div className={classes.content} onClick={handleClick} ref={contentRef}>

diff --git a/packages/material-ui-lab/src/TreeView/TreeView.js b/packages/material-ui-lab/src/TreeView/TreeView.js
@@ -87,7 +87,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
   }, [children]);
 
   const isExpanded = React.useCallback(id => expanded.indexOf(id) !== -1, [expanded]);
-  const isTabable = id => tabable === id;
+  const isTabbable = id => tabable === id;
   const isFocused = id => focused === id;
 
   const getLastNode = React.useCallback(
@@ -335,7 +335,7 @@ const TreeView = React.forwardRef(function TreeView(props, ref) {
         icons: { defaultCollapseIcon, defaultExpandIcon, defaultParentIcon, defaultEndIcon },
         isExpanded,
         isFocused,
-        isTabable,
+        isTabbable,
         setFocusByFirstCharacter,
         toggle,
       }}