[docs] Fix Fab demo overflow on mobile (#28033)

Co-authored-by: Olivier Tassinari <[email protected]>
mui · Aug 30, 2021 · 65da499 · 65da499
1 parent c29d229
commit 65da499
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 28 deletions.
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import Stack from '@material-ui/core/Stack';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import NavigationIcon from '@material-ui/icons/Navigation';
 
 export default function FloatingActionButtonExtendedSize() {
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <Fab variant="extended" size="small" color="primary" aria-label="add">
         <NavigationIcon sx={{ mr: 1 }} />
         Extended
@@ -18,6 +18,6 @@ export default function FloatingActionButtonExtendedSize() {
         <NavigationIcon sx={{ mr: 1 }} />
         Extended
       </Fab>
-    </Stack>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonExtendedSize.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import Stack from '@material-ui/core/Stack';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import NavigationIcon from '@material-ui/icons/Navigation';
 
 export default function FloatingActionButtonExtendedSize() {
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <Fab variant="extended" size="small" color="primary" aria-label="add">
         <NavigationIcon sx={{ mr: 1 }} />
         Extended
@@ -18,6 +18,6 @@ export default function FloatingActionButtonExtendedSize() {
         <NavigationIcon sx={{ mr: 1 }} />
         Extended
       </Fab>
-    </Stack>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.js
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import Stack from '@material-ui/core/Stack';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 
 export default function FloatingActionButtonSize() {
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <Fab size="small" color="secondary" aria-label="add">
         <AddIcon />
       </Fab>
@@ -15,6 +15,6 @@ export default function FloatingActionButtonSize() {
       <Fab color="secondary" aria-label="add">
         <AddIcon />
       </Fab>
-    </Stack>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtonSize.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
-import Stack from '@material-ui/core/Stack';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 
 export default function FloatingActionButtonSize() {
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <Fab size="small" color="secondary" aria-label="add">
         <AddIcon />
       </Fab>
@@ -15,6 +15,6 @@ export default function FloatingActionButtonSize() {
       <Fab color="secondary" aria-label="add">
         <AddIcon />
       </Fab>
-    </Stack>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtons.js b/docs/src/pages/components/floating-action-button/FloatingActionButtons.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Stack from '@material-ui/core/Stack';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
@@ -8,7 +8,7 @@ import NavigationIcon from '@material-ui/icons/Navigation';
 
 export default function FloatingActionButtons() {
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <Fab color="primary" aria-label="add">
         <AddIcon />
       </Fab>
@@ -22,6 +22,6 @@ export default function FloatingActionButtons() {
       <Fab disabled aria-label="like">
         <FavoriteIcon />
       </Fab>
-    </Stack>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/floating-action-button/FloatingActionButtons.tsx b/docs/src/pages/components/floating-action-button/FloatingActionButtons.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Stack from '@material-ui/core/Stack';
+import Box from '@material-ui/core/Box';
 import Fab from '@material-ui/core/Fab';
 import AddIcon from '@material-ui/icons/Add';
 import EditIcon from '@material-ui/icons/Edit';
@@ -8,7 +8,7 @@ import NavigationIcon from '@material-ui/icons/Navigation';
 
 export default function FloatingActionButtons() {
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <Fab color="primary" aria-label="add">
         <AddIcon />
       </Fab>
@@ -22,6 +22,6 @@ export default function FloatingActionButtons() {
       <Fab disabled aria-label="like">
         <FavoriteIcon />
       </Fab>
-    </Stack>
+    </Box>
   );
 }
diff --git a/docs/src/pages/components/text-fields/InputWithIcon.js b/docs/src/pages/components/text-fields/InputWithIcon.js
@@ -9,11 +9,7 @@ import AccountCircle from '@material-ui/icons/AccountCircle';
 
 export default function InputWithIcon() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': { m: 1 },
-      }}
-    >
+    <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <FormControl variant="standard">
         <InputLabel htmlFor="input-with-icon-adornment">
           With a start adornment

diff --git a/docs/src/pages/components/text-fields/InputWithIcon.tsx b/docs/src/pages/components/text-fields/InputWithIcon.tsx
@@ -9,11 +9,7 @@ import AccountCircle from '@material-ui/icons/AccountCircle';
 
 export default function InputWithIcon() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': { m: 1 },
-      }}
-    >
+    <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <FormControl variant="standard">
         <InputLabel htmlFor="input-with-icon-adornment">
           With a start adornment