From 7124101aa19d0f7429b32d020c48d44be804ce27 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 5 Mar 2020 00:33:29 +0100 Subject: [PATCH] [docs] Improve font size scaling of some demos (#19950) --- .../pages/components/app-bar/PrimarySearchAppBar.js | 8 +++++--- .../pages/components/app-bar/PrimarySearchAppBar.tsx | 8 +++++--- docs/src/pages/components/app-bar/SearchAppBar.js | 10 ++++++---- docs/src/pages/components/app-bar/SearchAppBar.tsx | 10 ++++++---- docs/src/pages/components/lists/AlignItemsList.js | 2 +- docs/src/pages/components/lists/AlignItemsList.tsx | 2 +- docs/src/pages/components/menus/LongMenu.js | 2 +- docs/src/pages/components/menus/LongMenu.tsx | 2 +- docs/src/pages/components/menus/SimpleListMenu.js | 2 -- docs/src/pages/components/menus/SimpleListMenu.tsx | 2 -- .../pages/components/text-fields/BasicTextFields.js | 2 +- .../pages/components/text-fields/BasicTextFields.tsx | 2 +- .../pages/components/text-fields/ColorTextFields.js | 2 +- .../pages/components/text-fields/ColorTextFields.tsx | 2 +- .../components/text-fields/FormPropsTextFields.js | 2 +- .../components/text-fields/FormPropsTextFields.tsx | 2 +- .../pages/components/text-fields/InputAdornments.js | 2 +- .../pages/components/text-fields/InputAdornments.tsx | 2 +- .../pages/components/text-fields/LayoutTextFields.js | 2 +- .../pages/components/text-fields/LayoutTextFields.tsx | 2 +- .../components/text-fields/MultilineTextFields.js | 2 +- .../components/text-fields/MultilineTextFields.tsx | 2 +- .../pages/components/text-fields/SelectTextFields.js | 2 +- .../pages/components/text-fields/SelectTextFields.tsx | 2 +- .../pages/components/text-fields/StateTextFields.js | 2 +- .../pages/components/text-fields/StateTextFields.tsx | 2 +- 26 files changed, 42 insertions(+), 38 deletions(-) diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js index 667239fadf1c9a..1570d526c910d2 100644 --- a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js +++ b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js @@ -44,7 +44,7 @@ const useStyles = makeStyles(theme => ({ }, }, searchIcon: { - width: theme.spacing(7), + padding: theme.spacing(0, 2), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -56,11 +56,13 @@ const useStyles = makeStyles(theme => ({ color: 'inherit', }, inputInput: { - padding: theme.spacing(1, 1, 1, 7), + padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('md')]: { - width: 200, + width: '20ch', }, }, sectionDesktop: { diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx b/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx index 2241c3c641bd6b..0b6108df37b215 100644 --- a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx +++ b/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx @@ -45,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) => }, }, searchIcon: { - width: theme.spacing(7), + padding: theme.spacing(0, 2), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -57,11 +57,13 @@ const useStyles = makeStyles((theme: Theme) => color: 'inherit', }, inputInput: { - padding: theme.spacing(1, 1, 1, 7), + padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('md')]: { - width: 200, + width: '20ch', }, }, sectionDesktop: { diff --git a/docs/src/pages/components/app-bar/SearchAppBar.js b/docs/src/pages/components/app-bar/SearchAppBar.js index e1e289ad5709e6..b6e29ca868a8a2 100644 --- a/docs/src/pages/components/app-bar/SearchAppBar.js +++ b/docs/src/pages/components/app-bar/SearchAppBar.js @@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({ }, }, searchIcon: { - width: theme.spacing(7), + padding: theme.spacing(0, 2), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -49,13 +49,15 @@ const useStyles = makeStyles(theme => ({ color: 'inherit', }, inputInput: { - padding: theme.spacing(1, 1, 1, 7), + padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('sm')]: { - width: 120, + width: '12ch', '&:focus': { - width: 200, + width: '20ch', }, }, }, diff --git a/docs/src/pages/components/app-bar/SearchAppBar.tsx b/docs/src/pages/components/app-bar/SearchAppBar.tsx index e16142c60f346e..91eeef616c8d69 100644 --- a/docs/src/pages/components/app-bar/SearchAppBar.tsx +++ b/docs/src/pages/components/app-bar/SearchAppBar.tsx @@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => }, }, searchIcon: { - width: theme.spacing(7), + padding: theme.spacing(0, 2), height: '100%', position: 'absolute', pointerEvents: 'none', @@ -50,13 +50,15 @@ const useStyles = makeStyles((theme: Theme) => color: 'inherit', }, inputInput: { - padding: theme.spacing(1, 1, 1, 7), + padding: theme.spacing(1, 1, 1, 0), + // vertical padding + font size from searchIcon + paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('sm')]: { - width: 120, + width: '12ch', '&:focus': { - width: 200, + width: '20ch', }, }, }, diff --git a/docs/src/pages/components/lists/AlignItemsList.js b/docs/src/pages/components/lists/AlignItemsList.js index c28e133e9b2d2e..124cf20c3d0ae6 100644 --- a/docs/src/pages/components/lists/AlignItemsList.js +++ b/docs/src/pages/components/lists/AlignItemsList.js @@ -11,7 +11,7 @@ import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles(theme => ({ root: { width: '100%', - maxWidth: 360, + maxWidth: '36ch', backgroundColor: theme.palette.background.paper, }, inline: { diff --git a/docs/src/pages/components/lists/AlignItemsList.tsx b/docs/src/pages/components/lists/AlignItemsList.tsx index 90b27ed8d7f111..dbeb6103bbb362 100644 --- a/docs/src/pages/components/lists/AlignItemsList.tsx +++ b/docs/src/pages/components/lists/AlignItemsList.tsx @@ -12,7 +12,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ root: { width: '100%', - maxWidth: 360, + maxWidth: '36ch', backgroundColor: theme.palette.background.paper, }, inline: { diff --git a/docs/src/pages/components/menus/LongMenu.js b/docs/src/pages/components/menus/LongMenu.js index b827659c60aefa..2d364f5f3d7ddf 100644 --- a/docs/src/pages/components/menus/LongMenu.js +++ b/docs/src/pages/components/menus/LongMenu.js @@ -54,7 +54,7 @@ export default function LongMenu() { PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 4.5, - width: 200, + width: '20ch', }, }} > diff --git a/docs/src/pages/components/menus/LongMenu.tsx b/docs/src/pages/components/menus/LongMenu.tsx index f083f7ed215aa7..807bf94c9a9bc0 100644 --- a/docs/src/pages/components/menus/LongMenu.tsx +++ b/docs/src/pages/components/menus/LongMenu.tsx @@ -54,7 +54,7 @@ export default function LongMenu() { PaperProps={{ style: { maxHeight: ITEM_HEIGHT * 4.5, - width: 200, + width: '20ch', }, }} > diff --git a/docs/src/pages/components/menus/SimpleListMenu.js b/docs/src/pages/components/menus/SimpleListMenu.js index 964402db3a02e5..180a07aa851c4c 100644 --- a/docs/src/pages/components/menus/SimpleListMenu.js +++ b/docs/src/pages/components/menus/SimpleListMenu.js @@ -8,8 +8,6 @@ import Menu from '@material-ui/core/Menu'; const useStyles = makeStyles(theme => ({ root: { - width: '100%', - maxWidth: 360, backgroundColor: theme.palette.background.paper, }, })); diff --git a/docs/src/pages/components/menus/SimpleListMenu.tsx b/docs/src/pages/components/menus/SimpleListMenu.tsx index 3e5c1e03a43bb2..28a04a803b5563 100644 --- a/docs/src/pages/components/menus/SimpleListMenu.tsx +++ b/docs/src/pages/components/menus/SimpleListMenu.tsx @@ -9,8 +9,6 @@ import Menu from '@material-ui/core/Menu'; const useStyles = makeStyles((theme: Theme) => createStyles({ root: { - width: '100%', - maxWidth: 360, backgroundColor: theme.palette.background.paper, }, }), diff --git a/docs/src/pages/components/text-fields/BasicTextFields.js b/docs/src/pages/components/text-fields/BasicTextFields.js index d12a5802fb0a31..412b88401f9bfe 100644 --- a/docs/src/pages/components/text-fields/BasicTextFields.js +++ b/docs/src/pages/components/text-fields/BasicTextFields.js @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({ root: { '& > *': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, })); diff --git a/docs/src/pages/components/text-fields/BasicTextFields.tsx b/docs/src/pages/components/text-fields/BasicTextFields.tsx index c0a167be8a7ac3..99957ca120964d 100644 --- a/docs/src/pages/components/text-fields/BasicTextFields.tsx +++ b/docs/src/pages/components/text-fields/BasicTextFields.tsx @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) => root: { '& > *': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, }), diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js index f610ea21297a64..c56b9afc40bc96 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.js +++ b/docs/src/pages/components/text-fields/ColorTextFields.js @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({ root: { '& > *': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, })); diff --git a/docs/src/pages/components/text-fields/ColorTextFields.tsx b/docs/src/pages/components/text-fields/ColorTextFields.tsx index ecfa1dd89f0502..d0be558c88fe6a 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.tsx +++ b/docs/src/pages/components/text-fields/ColorTextFields.tsx @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) => root: { '& > *': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, }), diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.js b/docs/src/pages/components/text-fields/FormPropsTextFields.js index dca99feadcf0cb..d1aa2523002089 100644 --- a/docs/src/pages/components/text-fields/FormPropsTextFields.js +++ b/docs/src/pages/components/text-fields/FormPropsTextFields.js @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, })); diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.tsx b/docs/src/pages/components/text-fields/FormPropsTextFields.tsx index 3dc5c459492b1a..2689659cee668a 100644 --- a/docs/src/pages/components/text-fields/FormPropsTextFields.tsx +++ b/docs/src/pages/components/text-fields/FormPropsTextFields.tsx @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) => root: { '& .MuiTextField-root': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, }), diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js index 3067025bd05222..53b16c03573160 100644 --- a/docs/src/pages/components/text-fields/InputAdornments.js +++ b/docs/src/pages/components/text-fields/InputAdornments.js @@ -25,7 +25,7 @@ const useStyles = makeStyles(theme => ({ marginTop: theme.spacing(3), }, textField: { - width: 200, + width: '25ch', }, })); diff --git a/docs/src/pages/components/text-fields/InputAdornments.tsx b/docs/src/pages/components/text-fields/InputAdornments.tsx index 7b5c4b09976145..349af59685e098 100644 --- a/docs/src/pages/components/text-fields/InputAdornments.tsx +++ b/docs/src/pages/components/text-fields/InputAdornments.tsx @@ -26,7 +26,7 @@ const useStyles = makeStyles((theme: Theme) => marginTop: theme.spacing(3), }, textField: { - width: 200, + width: '25ch', }, }), ); diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.js b/docs/src/pages/components/text-fields/LayoutTextFields.js index 911675f1676ae0..51d5e6b0ad9116 100644 --- a/docs/src/pages/components/text-fields/LayoutTextFields.js +++ b/docs/src/pages/components/text-fields/LayoutTextFields.js @@ -10,7 +10,7 @@ const useStyles = makeStyles(theme => ({ textField: { marginLeft: theme.spacing(1), marginRight: theme.spacing(1), - width: 200, + width: '25ch', }, })); diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.tsx b/docs/src/pages/components/text-fields/LayoutTextFields.tsx index f643c98e3408c4..8c7e958b93b021 100644 --- a/docs/src/pages/components/text-fields/LayoutTextFields.tsx +++ b/docs/src/pages/components/text-fields/LayoutTextFields.tsx @@ -11,7 +11,7 @@ const useStyles = makeStyles((theme: Theme) => textField: { marginLeft: theme.spacing(1), marginRight: theme.spacing(1), - width: 200, + width: '25ch', }, }), ); diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.js b/docs/src/pages/components/text-fields/MultilineTextFields.js index 4b2df672012485..3f3f7a695e8123 100644 --- a/docs/src/pages/components/text-fields/MultilineTextFields.js +++ b/docs/src/pages/components/text-fields/MultilineTextFields.js @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, })); diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.tsx b/docs/src/pages/components/text-fields/MultilineTextFields.tsx index 778cb27240dc9e..115617850da5f5 100644 --- a/docs/src/pages/components/text-fields/MultilineTextFields.tsx +++ b/docs/src/pages/components/text-fields/MultilineTextFields.tsx @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) => root: { '& .MuiTextField-root': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, }), diff --git a/docs/src/pages/components/text-fields/SelectTextFields.js b/docs/src/pages/components/text-fields/SelectTextFields.js index 3d9422eec6db95..7f214a6d1465d5 100644 --- a/docs/src/pages/components/text-fields/SelectTextFields.js +++ b/docs/src/pages/components/text-fields/SelectTextFields.js @@ -26,7 +26,7 @@ const useStyles = makeStyles(theme => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, })); diff --git a/docs/src/pages/components/text-fields/SelectTextFields.tsx b/docs/src/pages/components/text-fields/SelectTextFields.tsx index 65ca713f26d23c..9f3e6c86ee2ecc 100644 --- a/docs/src/pages/components/text-fields/SelectTextFields.tsx +++ b/docs/src/pages/components/text-fields/SelectTextFields.tsx @@ -27,7 +27,7 @@ const useStyles = makeStyles((theme: Theme) => root: { '& .MuiTextField-root': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, }), diff --git a/docs/src/pages/components/text-fields/StateTextFields.js b/docs/src/pages/components/text-fields/StateTextFields.js index 9e90288fee20c6..c04cf7077b2117 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.js +++ b/docs/src/pages/components/text-fields/StateTextFields.js @@ -6,7 +6,7 @@ const useStyles = makeStyles(theme => ({ root: { '& .MuiTextField-root': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, })); diff --git a/docs/src/pages/components/text-fields/StateTextFields.tsx b/docs/src/pages/components/text-fields/StateTextFields.tsx index 82c6c63f8ce649..45293cedb380b2 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.tsx +++ b/docs/src/pages/components/text-fields/StateTextFields.tsx @@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) => root: { '& .MuiTextField-root': { margin: theme.spacing(1), - width: 200, + width: '25ch', }, }, }),