[docs] Improve font size scaling of some demos (#19950)

mui · Mar 4, 2020 · 7124101 · 7124101
1 parent 89c0ed4
commit 7124101
Show file tree

Hide file tree

Showing 26 changed files with 42 additions and 38 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
  root: {
  '& .MuiTextField-root': {
  margin: theme.spacing(1),
- width: 200,
+ width: '25ch',
  },
  },
  }),