From e066eefed3a20f0c4d5ba89826d29828222b3a3c Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:38:33 -0400 Subject: [PATCH 01/28] docs: Migrate ColorTextField demo to emotion --- .../components/text-fields/ColorTextFields.js | 24 +++++++---------- .../text-fields/ColorTextFields.tsx | 26 +++++++------------ 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js index 9eb29fa9accbcc..cc7941b846cfd1 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.js +++ b/docs/src/pages/components/text-fields/ColorTextFields.js @@ -1,21 +1,17 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme) => ({ - root: { - '& > *': { - margin: theme.spacing(1), - width: '25ch', - }, - }, -})); - export default function ColorTextFields() { - const classes = useStyles(); - return ( -
+ :not(style)': { m: 1 }, + }} + noValidate + autoComplete="off" + > - +
); } diff --git a/docs/src/pages/components/text-fields/ColorTextFields.tsx b/docs/src/pages/components/text-fields/ColorTextFields.tsx index 5d9c052ad483fd..cc7941b846cfd1 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.tsx +++ b/docs/src/pages/components/text-fields/ColorTextFields.tsx @@ -1,23 +1,17 @@ import * as React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - margin: theme.spacing(1), - width: '25ch', - }, - }, - }), -); - export default function ColorTextFields() { - const classes = useStyles(); - return ( -
+ :not(style)': { m: 1 }, + }} + noValidate + autoComplete="off" + > - +
); } From 6a599ca1a69fc2806f847a2de0b8c2612ec99c91 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:38:53 -0400 Subject: [PATCH 02/28] docs: Migrate ComposedTextField demo to emotion --- .../text-fields/ComposedTextField.js | 22 ++++++++--------- .../text-fields/ComposedTextField.tsx | 24 ++++++++----------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/docs/src/pages/components/text-fields/ComposedTextField.js b/docs/src/pages/components/text-fields/ComposedTextField.js index e4a73d3f21003a..4159b8bda8d63a 100644 --- a/docs/src/pages/components/text-fields/ComposedTextField.js +++ b/docs/src/pages/components/text-fields/ComposedTextField.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import FilledInput from '@material-ui/core/FilledInput'; import FormControl from '@material-ui/core/FormControl'; import FormHelperText from '@material-ui/core/FormHelperText'; @@ -7,24 +7,22 @@ import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import OutlinedInput from '@material-ui/core/OutlinedInput'; -const useStyles = makeStyles((theme) => ({ - root: { - '& > *': { - margin: theme.spacing(1), - }, - }, -})); - export default function ComposedTextField() { const [name, setName] = React.useState('Composed TextField'); - const classes = useStyles(); const handleChange = (event) => { setName(event.target.value); }; return ( -
+ :not(style)': { m: 1 }, + }} + noValidate + autoComplete="off" + > Name @@ -69,6 +67,6 @@ export default function ComposedTextField() { Name - +
); } diff --git a/docs/src/pages/components/text-fields/ComposedTextField.tsx b/docs/src/pages/components/text-fields/ComposedTextField.tsx index aae6a21637b4c6..81506537d3acd9 100644 --- a/docs/src/pages/components/text-fields/ComposedTextField.tsx +++ b/docs/src/pages/components/text-fields/ComposedTextField.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import FilledInput from '@material-ui/core/FilledInput'; import FormControl from '@material-ui/core/FormControl'; import FormHelperText from '@material-ui/core/FormHelperText'; @@ -7,26 +7,22 @@ import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import OutlinedInput from '@material-ui/core/OutlinedInput'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - margin: theme.spacing(1), - }, - }, - }), -); - export default function ComposedTextField() { const [name, setName] = React.useState('Composed TextField'); - const classes = useStyles(); const handleChange = (event: React.ChangeEvent) => { setName(event.target.value); }; return ( -
+ :not(style)': { m: 1 }, + }} + noValidate + autoComplete="off" + > Name @@ -71,6 +67,6 @@ export default function ComposedTextField() { Name - +
); } From f2b9f17fafa1aa960a96d309cef4327e7770d69a Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:39:09 -0400 Subject: [PATCH 03/28] docs: Migrate CustomizedInputBase demo to emotion --- .../pages/components/text-fields/CustomizedInputBase.js | 8 ++++---- .../pages/components/text-fields/CustomizedInputBase.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.js b/docs/src/pages/components/text-fields/CustomizedInputBase.js index 4aa7f485c24f7d..bf601c78af9afb 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.js +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.js @@ -11,9 +11,9 @@ export default function CustomizedInputBase() { return ( - + - + - + diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.tsx b/docs/src/pages/components/text-fields/CustomizedInputBase.tsx index 4aa7f485c24f7d..bf601c78af9afb 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.tsx +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.tsx @@ -11,9 +11,9 @@ export default function CustomizedInputBase() { return ( - + - + - + From 27672a81450f973a5c9621695ce86944333d7a97 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:39:30 -0400 Subject: [PATCH 04/28] docs: Migrate FormattedInputs demo to emotion --- .../components/text-fields/FormattedInputs.js | 21 ++++++++--------- .../text-fields/FormattedInputs.tsx | 23 ++++++++----------- 2 files changed, 18 insertions(+), 26 deletions(-) diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js index 502776be945174..cea00055ca16e0 100644 --- a/docs/src/pages/components/text-fields/FormattedInputs.js +++ b/docs/src/pages/components/text-fields/FormattedInputs.js @@ -2,20 +2,12 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MaskedInput from 'react-text-mask'; import NumberFormat from 'react-number-format'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import TextField from '@material-ui/core/TextField'; import FormControl from '@material-ui/core/FormControl'; -const useStyles = makeStyles((theme) => ({ - root: { - '& > *': { - margin: theme.spacing(1), - }, - }, -})); - const TextMaskCustom = React.forwardRef(function TextMaskCustom(props, ref) { const setRef = React.useCallback( (maskedInputRef) => { @@ -84,7 +76,6 @@ NumberFormatCustom.propTypes = { }; export default function FormattedInputs() { - const classes = useStyles(); const [values, setValues] = React.useState({ textmask: '(1  )    -    ', numberformat: '1320', @@ -98,7 +89,13 @@ export default function FormattedInputs() { }; return ( -
+ :not(style)': { + m: 1, + }, + }} + > react-text-mask -
+ ); } diff --git a/docs/src/pages/components/text-fields/FormattedInputs.tsx b/docs/src/pages/components/text-fields/FormattedInputs.tsx index 0ef7b8ef3dff60..29f8f12aa53fd0 100644 --- a/docs/src/pages/components/text-fields/FormattedInputs.tsx +++ b/docs/src/pages/components/text-fields/FormattedInputs.tsx @@ -1,22 +1,12 @@ import * as React from 'react'; import MaskedInput from 'react-text-mask'; import NumberFormat from 'react-number-format'; -import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import TextField from '@material-ui/core/TextField'; import FormControl from '@material-ui/core/FormControl'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - margin: theme.spacing(1), - }, - }, - }), -); - const TextMaskCustom = React.forwardRef(function TextMaskCustom( props, ref, @@ -95,7 +85,6 @@ interface State { } export default function FormattedInputs() { - const classes = useStyles(); const [values, setValues] = React.useState({ textmask: '(1  )    -    ', numberformat: '1320', @@ -109,7 +98,13 @@ export default function FormattedInputs() { }; return ( -
+ :not(style)': { + m: 1, + }, + }} + > react-text-mask -
+ ); } From 9ddd0b8d1bcaf8fb2b9f68f654220b65b098397c Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:39:47 -0400 Subject: [PATCH 05/28] docs: Migrate HelperTextAligned demo to emotion --- .../text-fields/HelperTextAligned.js | 20 +++++++++---------- .../text-fields/HelperTextAligned.tsx | 20 +++++++++---------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/docs/src/pages/components/text-fields/HelperTextAligned.js b/docs/src/pages/components/text-fields/HelperTextAligned.js index da005567335c6f..0488b257f10618 100644 --- a/docs/src/pages/components/text-fields/HelperTextAligned.js +++ b/docs/src/pages/components/text-fields/HelperTextAligned.js @@ -1,18 +1,16 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles({ - root: { - display: 'flex', - alignItems: 'center', - }, -}); - export default function HelperTextAligned() { - const classes = useStyles(); return ( -
+ :not(style)': { + m: 1, + }, + }} + > -
+ ); } diff --git a/docs/src/pages/components/text-fields/HelperTextAligned.tsx b/docs/src/pages/components/text-fields/HelperTextAligned.tsx index da005567335c6f..0488b257f10618 100644 --- a/docs/src/pages/components/text-fields/HelperTextAligned.tsx +++ b/docs/src/pages/components/text-fields/HelperTextAligned.tsx @@ -1,18 +1,16 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles({ - root: { - display: 'flex', - alignItems: 'center', - }, -}); - export default function HelperTextAligned() { - const classes = useStyles(); return ( -
+ :not(style)': { + m: 1, + }, + }} + > -
+ ); } From e303147a1b0b60ee932e7aed69076a65cf29a0fa Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:40:03 -0400 Subject: [PATCH 06/28] docs: Migrate HelperTextMisalihned demo to emotion --- .../text-fields/HelperTextMisaligned.js | 20 +++++++++---------- .../text-fields/HelperTextMisaligned.tsx | 20 +++++++++---------- 2 files changed, 18 insertions(+), 22 deletions(-) diff --git a/docs/src/pages/components/text-fields/HelperTextMisaligned.js b/docs/src/pages/components/text-fields/HelperTextMisaligned.js index b4d8f405afc748..e847151d2e428f 100644 --- a/docs/src/pages/components/text-fields/HelperTextMisaligned.js +++ b/docs/src/pages/components/text-fields/HelperTextMisaligned.js @@ -1,18 +1,16 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles({ - root: { - display: 'flex', - alignItems: 'center', - }, -}); - export default function HelperTextMisaligned() { - const classes = useStyles(); return ( -
+ :not(style)': { + m: 1, + }, + }} + > -
+ ); } diff --git a/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx b/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx index b4d8f405afc748..e847151d2e428f 100644 --- a/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx +++ b/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx @@ -1,18 +1,16 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles({ - root: { - display: 'flex', - alignItems: 'center', - }, -}); - export default function HelperTextMisaligned() { - const classes = useStyles(); return ( -
+ :not(style)': { + m: 1, + }, + }} + > -
+ ); } From 58bdae0aaf769c3dee4f8d2181d6572ceb887aaf Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:40:17 -0400 Subject: [PATCH 07/28] docs: Migrate StateTextField demo to emotion --- .../components/text-fields/StateTextFields.js | 23 ++++++++--------- .../text-fields/StateTextFields.tsx | 25 ++++++++----------- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/docs/src/pages/components/text-fields/StateTextFields.js b/docs/src/pages/components/text-fields/StateTextFields.js index 335fd9cf77e902..12a3b92a802ecf 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.js +++ b/docs/src/pages/components/text-fields/StateTextFields.js @@ -1,25 +1,22 @@ import * as React from 'react'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles((theme) => ({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: '25ch', - }, - }, -})); export default function StateTextFields() { - const classes = useStyles(); const [name, setName] = React.useState('Cat in the Hat'); const handleChange = (event) => { setName(event.target.value); }; return ( -
+
- +
); } diff --git a/docs/src/pages/components/text-fields/StateTextFields.tsx b/docs/src/pages/components/text-fields/StateTextFields.tsx index 9b7c69e1294df1..f936e54c619ee0 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.tsx +++ b/docs/src/pages/components/text-fields/StateTextFields.tsx @@ -1,27 +1,22 @@ import * as React from 'react'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: '25ch', - }, - }, - }), -); export default function StateTextFields() { - const classes = useStyles(); const [name, setName] = React.useState('Cat in the Hat'); const handleChange = (event: React.ChangeEvent) => { setName(event.target.value); }; return ( -
+
- +
); } From 008435301d185b8bc105021b8be3b1c0a9c71f0a Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:40:30 -0400 Subject: [PATCH 08/28] docs: Migrate Inputs demo to emotion --- .../pages/components/text-fields/Inputs.js | 25 ++++++++--------- .../pages/components/text-fields/Inputs.tsx | 27 ++++++++----------- 2 files changed, 22 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/text-fields/Inputs.js b/docs/src/pages/components/text-fields/Inputs.js index f1af9f90a9209b..02f94e19e6c94b 100644 --- a/docs/src/pages/components/text-fields/Inputs.js +++ b/docs/src/pages/components/text-fields/Inputs.js @@ -1,20 +1,17 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Input from '@material-ui/core/Input'; -const useStyles = makeStyles((theme) => ({ - root: { - '& > *': { - margin: theme.spacing(1), - }, - }, -})); - export default function Inputs() { - const classes = useStyles(); - return ( -
+ :not(style)': { m: 1 }, + }} + noValidate + autoComplete="off" + > - +
); } diff --git a/docs/src/pages/components/text-fields/Inputs.tsx b/docs/src/pages/components/text-fields/Inputs.tsx index 4950cfabde3647..02f94e19e6c94b 100644 --- a/docs/src/pages/components/text-fields/Inputs.tsx +++ b/docs/src/pages/components/text-fields/Inputs.tsx @@ -1,22 +1,17 @@ import * as React from 'react'; -import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Input from '@material-ui/core/Input'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - margin: theme.spacing(1), - }, - }, - }), -); - export default function Inputs() { - const classes = useStyles(); - return ( -
+ :not(style)': { m: 1 }, + }} + noValidate + autoComplete="off" + > - +
); } From 58e1b05e7393df1d41bf82449a9c06c3223b4d94 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 19:40:44 -0400 Subject: [PATCH 09/28] docs: Migrate LayoutTextFields demo to emotion --- .../text-fields/LayoutTextFields.js | 40 +++++------------- .../text-fields/LayoutTextFields.tsx | 42 +++++-------------- 2 files changed, 22 insertions(+), 60 deletions(-) diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.js b/docs/src/pages/components/text-fields/LayoutTextFields.js index fbf0eab9f635a7..e85262c2f95621 100644 --- a/docs/src/pages/components/text-fields/LayoutTextFields.js +++ b/docs/src/pages/components/text-fields/LayoutTextFields.js @@ -1,29 +1,22 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - flexWrap: 'wrap', - }, - textField: { - marginLeft: theme.spacing(1), - marginRight: theme.spacing(1), - width: '25ch', - }, -})); - export default function LayoutTextFields() { - const classes = useStyles(); - return ( -
+ :not(style)': { mb: 2 }, + '& .MuiTextField-root': { m: 1 }, + '& .MuiTextField-root:not(:first-of-type)': { width: '25ch' }, + }} + >
@@ -51,7 +42,6 @@ export default function LayoutTextFields() { label="Normal" id="outlined-margin-normal" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="normal" /> @@ -60,7 +50,6 @@ export default function LayoutTextFields() { @@ -82,7 +70,6 @@ export default function LayoutTextFields() { label="Dense" id="filled-margin-dense" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="dense" variant="filled" @@ -91,7 +78,6 @@ export default function LayoutTextFields() { label="Normal" id="filled-margin-normal" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="normal" variant="filled" @@ -101,7 +87,6 @@ export default function LayoutTextFields() { @@ -123,7 +107,6 @@ export default function LayoutTextFields() { label="Dense" id="margin-dense" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="dense" variant="standard" @@ -132,12 +115,11 @@ export default function LayoutTextFields() { label="Normal" id="margin-normal" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="normal" variant="standard" />
-
+ ); } diff --git a/docs/src/pages/components/text-fields/LayoutTextFields.tsx b/docs/src/pages/components/text-fields/LayoutTextFields.tsx index 13cef77d0cea6c..e85262c2f95621 100644 --- a/docs/src/pages/components/text-fields/LayoutTextFields.tsx +++ b/docs/src/pages/components/text-fields/LayoutTextFields.tsx @@ -1,31 +1,22 @@ import * as React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - display: 'flex', - flexWrap: 'wrap', - }, - textField: { - marginLeft: theme.spacing(1), - marginRight: theme.spacing(1), - width: '25ch', - }, - }), -); - export default function LayoutTextFields() { - const classes = useStyles(); - return ( -
+ :not(style)': { mb: 2 }, + '& .MuiTextField-root': { m: 1 }, + '& .MuiTextField-root:not(:first-of-type)': { width: '25ch' }, + }} + >
@@ -53,7 +42,6 @@ export default function LayoutTextFields() { label="Normal" id="outlined-margin-normal" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="normal" /> @@ -62,7 +50,6 @@ export default function LayoutTextFields() { @@ -84,7 +70,6 @@ export default function LayoutTextFields() { label="Dense" id="filled-margin-dense" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="dense" variant="filled" @@ -93,7 +78,6 @@ export default function LayoutTextFields() { label="Normal" id="filled-margin-normal" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="normal" variant="filled" @@ -103,7 +87,6 @@ export default function LayoutTextFields() { @@ -125,7 +107,6 @@ export default function LayoutTextFields() { label="Dense" id="margin-dense" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="dense" variant="standard" @@ -134,12 +115,11 @@ export default function LayoutTextFields() { label="Normal" id="margin-normal" defaultValue="Default Value" - className={classes.textField} helperText="Some important text" margin="normal" variant="standard" />
-
+ ); } From 1e5f7dd7191149c2bc52bb1915318f72a8a13dbc Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 20:05:28 -0400 Subject: [PATCH 10/28] docs: Migrate BasicTextFields demo to emotion --- .../components/text-fields/BasicTextFields.js | 24 +++++++---------- .../text-fields/BasicTextFields.tsx | 26 +++++++------------ 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/text-fields/BasicTextFields.js b/docs/src/pages/components/text-fields/BasicTextFields.js index c4c09e2a673b2d..c10c95dc1bc146 100644 --- a/docs/src/pages/components/text-fields/BasicTextFields.js +++ b/docs/src/pages/components/text-fields/BasicTextFields.js @@ -1,24 +1,20 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme) => ({ - root: { - '& > *': { - margin: theme.spacing(1), - width: '25ch', - }, - }, -})); - export default function BasicTextFields() { - const classes = useStyles(); - return ( -
+ :not(style)': { m: 1, width: '25ch' }, + }} + noValidate + autoComplete="off" + > - +
); } diff --git a/docs/src/pages/components/text-fields/BasicTextFields.tsx b/docs/src/pages/components/text-fields/BasicTextFields.tsx index b422e73c891c14..c10c95dc1bc146 100644 --- a/docs/src/pages/components/text-fields/BasicTextFields.tsx +++ b/docs/src/pages/components/text-fields/BasicTextFields.tsx @@ -1,26 +1,20 @@ import * as React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& > *': { - margin: theme.spacing(1), - width: '25ch', - }, - }, - }), -); - export default function BasicTextFields() { - const classes = useStyles(); - return ( -
+ :not(style)': { m: 1, width: '25ch' }, + }} + noValidate + autoComplete="off" + > - +
); } From 3d302015b538cd87a754add7e98aee65e272921b Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 20:05:50 -0400 Subject: [PATCH 11/28] docs: Migrate FormPropsTextFields demo to emotion --- .../text-fields/FormPropsTextFields.js | 24 +++++++---------- .../text-fields/FormPropsTextFields.tsx | 26 +++++++------------ 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.js b/docs/src/pages/components/text-fields/FormPropsTextFields.js index 6a63fc58c9c984..b43d79021a707f 100644 --- a/docs/src/pages/components/text-fields/FormPropsTextFields.js +++ b/docs/src/pages/components/text-fields/FormPropsTextFields.js @@ -1,21 +1,17 @@ import * as React from 'react'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles((theme) => ({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: '25ch', - }, - }, -})); export default function FormPropsTextFields() { - const classes = useStyles(); - return ( -
+
- +
); } diff --git a/docs/src/pages/components/text-fields/FormPropsTextFields.tsx b/docs/src/pages/components/text-fields/FormPropsTextFields.tsx index f8216a35d30d7a..b43d79021a707f 100644 --- a/docs/src/pages/components/text-fields/FormPropsTextFields.tsx +++ b/docs/src/pages/components/text-fields/FormPropsTextFields.tsx @@ -1,23 +1,17 @@ import * as React from 'react'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: '25ch', - }, - }, - }), -); export default function FormPropsTextFields() { - const classes = useStyles(); - return ( -
+
- +
); } From 20116553cd3f8be7e09b95aac30be077655cadf3 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 20:06:05 -0400 Subject: [PATCH 12/28] docs: Migrate InputWithIcon demo to emotion --- .../components/text-fields/InputWithIcon.js | 23 +++++++---------- .../components/text-fields/InputWithIcon.tsx | 25 +++++++------------ 2 files changed, 18 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/text-fields/InputWithIcon.js b/docs/src/pages/components/text-fields/InputWithIcon.js index 48c483f00b5a48..03f86e235ad205 100644 --- a/docs/src/pages/components/text-fields/InputWithIcon.js +++ b/docs/src/pages/components/text-fields/InputWithIcon.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import InputAdornment from '@material-ui/core/InputAdornment'; @@ -8,18 +8,14 @@ import TextField from '@material-ui/core/TextField'; import Grid from '@material-ui/core/Grid'; import AccountCircle from '@material-ui/icons/AccountCircle'; -const useStyles = makeStyles((theme) => ({ - margin: { - margin: theme.spacing(1), - }, -})); - export default function InputWithIcon() { - const classes = useStyles(); - return ( -
- + :not(style)': { m: 1 }, + }} + > + With a start adornment @@ -33,7 +29,6 @@ export default function InputWithIcon() { /> -
+
@@ -59,6 +54,6 @@ export default function InputWithIcon() {
-
+ ); } diff --git a/docs/src/pages/components/text-fields/InputWithIcon.tsx b/docs/src/pages/components/text-fields/InputWithIcon.tsx index 1d315479b717ea..03f86e235ad205 100644 --- a/docs/src/pages/components/text-fields/InputWithIcon.tsx +++ b/docs/src/pages/components/text-fields/InputWithIcon.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createStyles, Theme, makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import Input from '@material-ui/core/Input'; import InputLabel from '@material-ui/core/InputLabel'; import InputAdornment from '@material-ui/core/InputAdornment'; @@ -8,20 +8,14 @@ import TextField from '@material-ui/core/TextField'; import Grid from '@material-ui/core/Grid'; import AccountCircle from '@material-ui/icons/AccountCircle'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - margin: { - margin: theme.spacing(1), - }, - }), -); - export default function InputWithIcon() { - const classes = useStyles(); - return ( -
- + :not(style)': { m: 1 }, + }} + > + With a start adornment @@ -35,7 +29,6 @@ export default function InputWithIcon() { /> -
+
@@ -61,6 +54,6 @@ export default function InputWithIcon() {
-
+ ); } From e73577475c97486ba1c6be703e6e6dfff2a9a8c5 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 20:06:20 -0400 Subject: [PATCH 13/28] docs: Migrate ValidationTextField demo to emotion --- .../text-fields/ValidationTextFields.js | 24 +++++++---------- .../text-fields/ValidationTextFields.tsx | 26 +++++++------------ 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/text-fields/ValidationTextFields.js b/docs/src/pages/components/text-fields/ValidationTextFields.js index 91d409762c758c..74a00edb8cf5b2 100644 --- a/docs/src/pages/components/text-fields/ValidationTextFields.js +++ b/docs/src/pages/components/text-fields/ValidationTextFields.js @@ -1,21 +1,17 @@ import * as React from 'react'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -import { makeStyles } from '@material-ui/core/styles'; - -const useStyles = makeStyles((theme) => ({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: 200, - }, - }, -})); export default function ValidationTextFields() { - const classes = useStyles(); - return ( -
+
- +
); } diff --git a/docs/src/pages/components/text-fields/ValidationTextFields.tsx b/docs/src/pages/components/text-fields/ValidationTextFields.tsx index 57faf6a5f7e219..74a00edb8cf5b2 100644 --- a/docs/src/pages/components/text-fields/ValidationTextFields.tsx +++ b/docs/src/pages/components/text-fields/ValidationTextFields.tsx @@ -1,23 +1,17 @@ import * as React from 'react'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: 200, - }, - }, - }), -); export default function ValidationTextFields() { - const classes = useStyles(); - return ( -
+
- +
); } From 6eddb57506b71f64f36a22558ea8d727a1b7f9db Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 20:06:38 -0400 Subject: [PATCH 14/28] docs: Migrate SelectedTextField demo to emotion --- .../text-fields/SelectTextFields.js | 23 ++++++++--------- .../text-fields/SelectTextFields.tsx | 25 ++++++++----------- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/docs/src/pages/components/text-fields/SelectTextFields.js b/docs/src/pages/components/text-fields/SelectTextFields.js index 717adfb0ac10f6..e75e6b9f3ef0ea 100644 --- a/docs/src/pages/components/text-fields/SelectTextFields.js +++ b/docs/src/pages/components/text-fields/SelectTextFields.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; import MenuItem from '@material-ui/core/MenuItem'; @@ -22,17 +22,7 @@ const currencies = [ }, ]; -const useStyles = makeStyles((theme) => ({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: '25ch', - }, - }, -})); - export default function SelectTextFields() { - const classes = useStyles(); const [currency, setCurrency] = React.useState('EUR'); const handleChange = (event) => { @@ -40,7 +30,14 @@ export default function SelectTextFields() { }; return ( -
+
- +
); } diff --git a/docs/src/pages/components/text-fields/SelectTextFields.tsx b/docs/src/pages/components/text-fields/SelectTextFields.tsx index 5f00b6278bc0e3..26c1c5e68d3da7 100644 --- a/docs/src/pages/components/text-fields/SelectTextFields.tsx +++ b/docs/src/pages/components/text-fields/SelectTextFields.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; import MenuItem from '@material-ui/core/MenuItem'; @@ -22,19 +22,7 @@ const currencies = [ }, ]; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: '25ch', - }, - }, - }), -); - export default function SelectTextFields() { - const classes = useStyles(); const [currency, setCurrency] = React.useState('EUR'); const handleChange = (event: React.ChangeEvent) => { @@ -42,7 +30,14 @@ export default function SelectTextFields() { }; return ( -
+
- +
); } From 816ae30cdfb179f7cb37f59be928bf541997a142 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 20:06:56 -0400 Subject: [PATCH 15/28] docs: Migrate MultilineTextFields demo to emotion --- .../text-fields/MultilineTextFields.js | 23 ++++++++--------- .../text-fields/MultilineTextFields.tsx | 25 ++++++++----------- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.js b/docs/src/pages/components/text-fields/MultilineTextFields.js index c102dd58b066f1..b6fbffc5cf4d0c 100644 --- a/docs/src/pages/components/text-fields/MultilineTextFields.js +++ b/docs/src/pages/components/text-fields/MultilineTextFields.js @@ -1,18 +1,8 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme) => ({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: '25ch', - }, - }, -})); - export default function MultilineTextFields() { - const classes = useStyles(); const [value, setValue] = React.useState('Controlled'); const handleChange = (event) => { @@ -20,7 +10,14 @@ export default function MultilineTextFields() { }; return ( -
+
- +
); } diff --git a/docs/src/pages/components/text-fields/MultilineTextFields.tsx b/docs/src/pages/components/text-fields/MultilineTextFields.tsx index 4fcbf085c4ad5b..ddf6c97a061b92 100644 --- a/docs/src/pages/components/text-fields/MultilineTextFields.tsx +++ b/docs/src/pages/components/text-fields/MultilineTextFields.tsx @@ -1,20 +1,8 @@ import * as React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: '25ch', - }, - }, - }), -); - export default function MultilineTextFields() { - const classes = useStyles(); const [value, setValue] = React.useState('Controlled'); const handleChange = (event: React.ChangeEvent) => { @@ -22,7 +10,14 @@ export default function MultilineTextFields() { }; return ( -
+
- +
); } From 6bddf0b01d11dd3dd943802374d866e4e0b73b9e Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 20:11:36 -0400 Subject: [PATCH 16/28] docs: Migrate TextFieldSizes demo to emotion --- .../components/text-fields/TextFieldSizes.js | 24 +++++++---------- .../components/text-fields/TextFieldSizes.tsx | 26 +++++++------------ 2 files changed, 20 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/text-fields/TextFieldSizes.js b/docs/src/pages/components/text-fields/TextFieldSizes.js index 2adf16a27d7768..ff476b6bda89df 100644 --- a/docs/src/pages/components/text-fields/TextFieldSizes.js +++ b/docs/src/pages/components/text-fields/TextFieldSizes.js @@ -1,21 +1,17 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme) => ({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: 200, - }, - }, -})); - export default function TextFieldSizes() { - const classes = useStyles(); - return ( -
+
- +
); } diff --git a/docs/src/pages/components/text-fields/TextFieldSizes.tsx b/docs/src/pages/components/text-fields/TextFieldSizes.tsx index 47545032b5fb0c..ff476b6bda89df 100644 --- a/docs/src/pages/components/text-fields/TextFieldSizes.tsx +++ b/docs/src/pages/components/text-fields/TextFieldSizes.tsx @@ -1,23 +1,17 @@ import * as React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import TextField from '@material-ui/core/TextField'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: 200, - }, - }, - }), -); - export default function TextFieldSizes() { - const classes = useStyles(); - return ( -
+
- +
); } From 994312696a56c1872e53a07f280bd5e7f16ff1a9 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Sun, 4 Apr 2021 20:11:48 -0400 Subject: [PATCH 17/28] docs: Migrate TextFieldHiddenLabel demo to emotion --- .../text-fields/TextFieldHiddenLabel.js | 25 +++++++---------- .../text-fields/TextFieldHiddenLabel.tsx | 27 +++++++------------ 2 files changed, 20 insertions(+), 32 deletions(-) diff --git a/docs/src/pages/components/text-fields/TextFieldHiddenLabel.js b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.js index 266d2ba83d247f..948e0c35212e57 100644 --- a/docs/src/pages/components/text-fields/TextFieldHiddenLabel.js +++ b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.js @@ -1,22 +1,17 @@ import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import TextField from '@material-ui/core/TextField'; import Box from '@material-ui/core/Box'; - -const useStyles = makeStyles((theme) => ({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: 200, - }, - }, -})); +import TextField from '@material-ui/core/TextField'; export default function TextFieldHiddenLabel() { - const classes = useStyles(); - return ( -
+ - +
); } diff --git a/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx index 456953127ee42f..948e0c35212e57 100644 --- a/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx +++ b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx @@ -1,24 +1,17 @@ import * as React from 'react'; -import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; -import TextField from '@material-ui/core/TextField'; import Box from '@material-ui/core/Box'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - '& .MuiTextField-root': { - margin: theme.spacing(1), - width: 200, - }, - }, - }), -); +import TextField from '@material-ui/core/TextField'; export default function TextFieldHiddenLabel() { - const classes = useStyles(); - return ( -
+ - +
); } From 4ebbfae4271749ec37b244ae38da660c3a9d9786 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 5 Apr 2021 08:24:01 -0400 Subject: [PATCH 18/28] docs: Migrate InputAdormments demo to emotion --- .../components/text-fields/InputAdornments.js | 62 +++++------------- .../text-fields/InputAdornments.tsx | 64 +++++-------------- 2 files changed, 30 insertions(+), 96 deletions(-) diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js index cc9b0e65c7f3b1..25266b51990f20 100644 --- a/docs/src/pages/components/text-fields/InputAdornments.js +++ b/docs/src/pages/components/text-fields/InputAdornments.js @@ -1,6 +1,5 @@ import * as React from 'react'; -import clsx from 'clsx'; -import { makeStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import IconButton from '@material-ui/core/IconButton'; import Input from '@material-ui/core/Input'; import FilledInput from '@material-ui/core/FilledInput'; @@ -13,24 +12,7 @@ import TextField from '@material-ui/core/TextField'; import Visibility from '@material-ui/icons/Visibility'; import VisibilityOff from '@material-ui/icons/VisibilityOff'; -const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - flexWrap: 'wrap', - }, - margin: { - margin: theme.spacing(1), - }, - withoutLabel: { - marginTop: theme.spacing(3), - }, - textField: { - width: '25ch', - }, -})); - export default function InputAdornments() { - const classes = useStyles(); const [values, setValues] = React.useState({ amount: '', password: '', @@ -55,20 +37,17 @@ export default function InputAdornments() { }; return ( -
+
Kg, }} /> - + Weight - + Password - + Amount Kg, }} variant="filled" /> - + Weight - + Password - + Amount Kg, }} variant="standard" /> - + Weight - + Password - + Amount
-
+ ); } diff --git a/docs/src/pages/components/text-fields/InputAdornments.tsx b/docs/src/pages/components/text-fields/InputAdornments.tsx index 94c4b21dd05735..b319e2c19ac521 100644 --- a/docs/src/pages/components/text-fields/InputAdornments.tsx +++ b/docs/src/pages/components/text-fields/InputAdornments.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import clsx from 'clsx'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; import IconButton from '@material-ui/core/IconButton'; import Input from '@material-ui/core/Input'; import FilledInput from '@material-ui/core/FilledInput'; @@ -13,24 +12,6 @@ import TextField from '@material-ui/core/TextField'; import Visibility from '@material-ui/icons/Visibility'; import VisibilityOff from '@material-ui/icons/VisibilityOff'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - display: 'flex', - flexWrap: 'wrap', - }, - margin: { - margin: theme.spacing(1), - }, - withoutLabel: { - marginTop: theme.spacing(3), - }, - textField: { - width: '25ch', - }, - }), -); - interface State { amount: string; password: string; @@ -40,7 +21,6 @@ interface State { } export default function InputAdornments() { - const classes = useStyles(); const [values, setValues] = React.useState({ amount: '', password: '', @@ -67,20 +47,17 @@ export default function InputAdornments() { }; return ( -
+
Kg, }} /> - + Weight - + Password - + Amount Kg, }} variant="filled" /> - + Weight - + Password - + Amount Kg, }} variant="standard" /> - + Weight - + Password - + Amount
-
+ ); } From 61632e129590daf14851fb93924302c733f0834b Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Mon, 5 Apr 2021 08:25:39 -0400 Subject: [PATCH 19/28] docs: Update title from TextField to Basic TextField --- docs/src/pages/components/text-fields/text-fields.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md index 24fae4f388886c..f649df48b45d91 100644 --- a/docs/src/pages/components/text-fields/text-fields.md +++ b/docs/src/pages/components/text-fields/text-fields.md @@ -13,7 +13,7 @@ Text fields allow users to enter text into a UI. They typically appear in forms {{"component": "modules/components/ComponentLinkHeader.js"}} -## TextField +## Basic TextField The `TextField` wrapper component is a complete form control including a label, input and help text. From 3e54e9c5e8c010a6c1cf71035f49bd34bab6d893 Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Tue, 6 Apr 2021 07:41:33 -0400 Subject: [PATCH 20/28] Revert "docs: Migrate CustomizedInputBase demo to emotion" This reverts commit f2b9f17fafa1aa960a96d309cef4327e7770d69a. --- .../pages/components/text-fields/CustomizedInputBase.js | 8 ++++---- .../pages/components/text-fields/CustomizedInputBase.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.js b/docs/src/pages/components/text-fields/CustomizedInputBase.js index bf601c78af9afb..4aa7f485c24f7d 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.js +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.js @@ -11,9 +11,9 @@ export default function CustomizedInputBase() { return ( - + - + - + diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.tsx b/docs/src/pages/components/text-fields/CustomizedInputBase.tsx index bf601c78af9afb..4aa7f485c24f7d 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.tsx +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.tsx @@ -11,9 +11,9 @@ export default function CustomizedInputBase() { return ( - + - + - + From 65796e2e9bd05cdadb10d80fc42c1b3d60c94571 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 6 Apr 2021 13:53:11 +0200 Subject: [PATCH 21/28] keep using shorthand for consistency --- docs/src/pages/components/text-fields/CustomizedInputBase.js | 2 +- docs/src/pages/components/text-fields/CustomizedInputBase.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.js b/docs/src/pages/components/text-fields/CustomizedInputBase.js index 4aa7f485c24f7d..d39c44c2b7c43e 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.js +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.js @@ -11,7 +11,7 @@ export default function CustomizedInputBase() { return ( diff --git a/docs/src/pages/components/text-fields/CustomizedInputBase.tsx b/docs/src/pages/components/text-fields/CustomizedInputBase.tsx index 4aa7f485c24f7d..d39c44c2b7c43e 100644 --- a/docs/src/pages/components/text-fields/CustomizedInputBase.tsx +++ b/docs/src/pages/components/text-fields/CustomizedInputBase.tsx @@ -11,7 +11,7 @@ export default function CustomizedInputBase() { return ( From b39992ccc2f6c6dc27484c34f69d49e48f6658dd Mon Sep 17 00:00:00 2001 From: Victor Casas Date: Tue, 6 Apr 2021 18:36:04 -0400 Subject: [PATCH 22/28] Add width to demo ColorTextFields --- docs/src/pages/components/text-fields/ColorTextFields.js | 2 +- docs/src/pages/components/text-fields/ColorTextFields.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/text-fields/ColorTextFields.js b/docs/src/pages/components/text-fields/ColorTextFields.js index cc7941b846cfd1..105e10d7ac40f4 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.js +++ b/docs/src/pages/components/text-fields/ColorTextFields.js @@ -7,7 +7,7 @@ export default function ColorTextFields() { :not(style)': { m: 1 }, + '& > :not(style)': { m: 1, width: '25ch' }, }} noValidate autoComplete="off" diff --git a/docs/src/pages/components/text-fields/ColorTextFields.tsx b/docs/src/pages/components/text-fields/ColorTextFields.tsx index cc7941b846cfd1..105e10d7ac40f4 100644 --- a/docs/src/pages/components/text-fields/ColorTextFields.tsx +++ b/docs/src/pages/components/text-fields/ColorTextFields.tsx @@ -7,7 +7,7 @@ export default function ColorTextFields() { :not(style)': { m: 1 }, + '& > :not(style)': { m: 1, width: '25ch' }, }} noValidate autoComplete="off" From 2081ebe1a9dd864d121fba1e812d4c9f64a08cf4 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 7 Apr 2021 01:17:58 +0200 Subject: [PATCH 23/28] fix abbreviation of versus --- docs/src/pages/components/text-fields/text-fields.md | 2 +- docs/src/pages/guides/api/api.md | 2 +- docs/src/pages/system/basics/Why.js | 2 +- docs/src/pages/system/basics/Why.tsx | 2 +- docs/src/pages/system/basics/basics.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md index f649df48b45d91..dc64860722bb71 100644 --- a/docs/src/pages/components/text-fields/text-fields.md +++ b/docs/src/pages/components/text-fields/text-fields.md @@ -85,7 +85,7 @@ Using `none` (default) will not apply margins to the `FormControl`, whereas `den {{"demo": "pages/components/text-fields/LayoutTextFields.js"}} -## Uncontrolled vs Controlled +## Uncontrolled vs. Controlled The component can be controlled or uncontrolled. diff --git a/docs/src/pages/guides/api/api.md b/docs/src/pages/guides/api/api.md index 52abbe117a0688..b9597563d83c98 100644 --- a/docs/src/pages/guides/api/api.md +++ b/docs/src/pages/guides/api/api.md @@ -104,7 +104,7 @@ Most of the controlled component are controlled via the `value` and the `onChang however, the `open` / `onClose` / `onOpen` combination is used for display related state. In the cases where there are more events, we put the noun first, and then the verb, for example: `onPageChange`, `onRowsChange`. -### boolean vs enum +### boolean vs. enum There are two options to design the API for the variations of a component: with a _boolean_; or with an _enum_. For example, let's take a button that has different types. Each option has its pros and cons: diff --git a/docs/src/pages/system/basics/Why.js b/docs/src/pages/system/basics/Why.js index df526fdc5a4f97..f8be46da2fdb3d 100644 --- a/docs/src/pages/system/basics/Why.js +++ b/docs/src/pages/system/basics/Why.js @@ -32,7 +32,7 @@ export default function Why() { 18.77% - vs last week + vs. last week ); diff --git a/docs/src/pages/system/basics/Why.tsx b/docs/src/pages/system/basics/Why.tsx index df526fdc5a4f97..f8be46da2fdb3d 100644 --- a/docs/src/pages/system/basics/Why.tsx +++ b/docs/src/pages/system/basics/Why.tsx @@ -32,7 +32,7 @@ export default function Why() { 18.77% - vs last week + vs. last week ); diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md index f2a03dd7a9a8bb..4b4c0d2fe446d5 100644 --- a/docs/src/pages/system/basics/basics.md +++ b/docs/src/pages/system/basics/basics.md @@ -124,7 +124,7 @@ return ( 18.77% - vs last week + vs. last week ``` From 1fa126217a8a93befdb77ded0f89225610928c3f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 7 Apr 2021 01:20:05 +0200 Subject: [PATCH 24/28] simplify Uncontrolled demo --- .../components/text-fields/StateTextFields.js | 56 ++++--------------- .../text-fields/StateTextFields.tsx | 56 ++++--------------- 2 files changed, 24 insertions(+), 88 deletions(-) diff --git a/docs/src/pages/components/text-fields/StateTextFields.js b/docs/src/pages/components/text-fields/StateTextFields.js index 12a3b92a802ecf..bd76fe488a5a4b 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.js +++ b/docs/src/pages/components/text-fields/StateTextFields.js @@ -12,54 +12,22 @@ export default function StateTextFields() { :not(style)': { m: 1, width: '25ch' }, }} noValidate autoComplete="off" > -
- - -
-
- - -
-
- - -
+ + ); } diff --git a/docs/src/pages/components/text-fields/StateTextFields.tsx b/docs/src/pages/components/text-fields/StateTextFields.tsx index f936e54c619ee0..efb494c369ea6f 100644 --- a/docs/src/pages/components/text-fields/StateTextFields.tsx +++ b/docs/src/pages/components/text-fields/StateTextFields.tsx @@ -12,54 +12,22 @@ export default function StateTextFields() { :not(style)': { m: 1, width: '25ch' }, }} noValidate autoComplete="off" > -
- - -
-
- - -
-
- - -
+ + ); } From 49be0f2db433d689927991d0a6f3907b2a9e9a02 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 11 Apr 2021 19:35:51 +0200 Subject: [PATCH 25/28] improve ponctuation --- .../components/text-fields/text-fields.md | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md index dc64860722bb71..1cf35b9b37e4b9 100644 --- a/docs/src/pages/components/text-fields/text-fields.md +++ b/docs/src/pages/components/text-fields/text-fields.md @@ -15,9 +15,9 @@ Text fields allow users to enter text into a UI. They typically appear in forms ## Basic TextField -The `TextField` wrapper component is a complete form control including a label, input and help text. +The `TextField` wrapper component is a complete form control including a label, input, and help text. -It supports standard, outlined and filled styling. +It supports standard, outlined, and filled styling. {{"demo": "pages/components/text-fields/BasicTextFields.js"}} @@ -33,7 +33,8 @@ Standard form attributes are supported e.g. `required`, `disabled`, `type`, etc. ## Validation -The `error` prop toggles the error state, the `helperText` prop can then be used to provide feedback to the user about the error. +The `error` prop toggles the error state. +The `helperText` prop can then be used to provide feedback to the user about the error. {{"demo": "pages/components/text-fields/ValidationTextFields.js"}} @@ -60,7 +61,7 @@ There are multiple ways to display an icon with a text field. ### Input Adornments The main way is with an `InputAdornment`. -This can be used to add a prefix, a suffix or an action to an input. +This can be used to add a prefix, a suffix, or an action to an input. For instance, you can use an icon button to hide or reveal the password. {{"demo": "pages/components/text-fields/InputAdornments.js"}} @@ -104,7 +105,8 @@ and [`FormHelperText`](/api/form-helper-text/) You might also have noticed that some native HTML input properties are missing from the `TextField` component. This is on purpose. -The component takes care of the most used properties, then it's up to the user to use the underlying component shown in the following demo. Still, you can use `inputProps` (and `InputProps`, `InputLabelProps` properties) if you want to avoid some boilerplate. +The component takes care of the most used properties. +Then, it's up to the user to use the underlying component shown in the following demo. Still, you can use `inputProps` (and `InputProps`, `InputLabelProps` properties) if you want to avoid some boilerplate. {{"demo": "pages/components/text-fields/ComposedTextField.js"}} @@ -125,7 +127,8 @@ Here are some examples of customizing the component. You can learn more about th {{"demo": "pages/components/text-fields/CustomizedInputs.js"}} -Customization does not stop at CSS, you can use composition to build custom components and give your app a unique feel. +Customization does not stop at CSS. +You can use composition to build custom components and give your app a unique feel. Below is an example using the [`InputBase`](/api/input-base/) component, inspired by Google Maps. {{"demo": "pages/components/text-fields/CustomizedInputBase.js", "bg": true}} @@ -156,8 +159,9 @@ or ### Floating label -The floating label is absolutely positioned, it won't impact the layout of the page. -You need to make sure that the input is larger than the label to display correctly. +The floating label is absolutely positioned. +It won't impact the layout of the page. +Make sure that the input is larger than the label to display correctly. ### type="number" @@ -256,7 +260,7 @@ In order for the text field to be accessible, **the input should be linked to th ## Complementary projects -For more advanced use cases you might be able to take advantage of: +For more advanced use cases, you might be able to take advantage of: - [react-hook-form](https://react-hook-form.com/): React hook for form validation. - [formik-material-ui](https://github.com/stackworx/formik-material-ui): Bindings for using Material-UI with [formik](https://jaredpalmer.com/formik). From 96057b7c233faf062a6c90ddf8da906f4190b40d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 11 Apr 2021 19:39:55 +0200 Subject: [PATCH 26/28] simplify demo --- .../components/text-fields/InputWithIcon.js | 19 ++++--------------- .../components/text-fields/InputWithIcon.tsx | 19 ++++--------------- 2 files changed, 8 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/text-fields/InputWithIcon.js b/docs/src/pages/components/text-fields/InputWithIcon.js index 03f86e235ad205..b8a79cad2eb131 100644 --- a/docs/src/pages/components/text-fields/InputWithIcon.js +++ b/docs/src/pages/components/text-fields/InputWithIcon.js @@ -5,7 +5,6 @@ import InputLabel from '@material-ui/core/InputLabel'; import InputAdornment from '@material-ui/core/InputAdornment'; import FormControl from '@material-ui/core/FormControl'; import TextField from '@material-ui/core/TextField'; -import Grid from '@material-ui/core/Grid'; import AccountCircle from '@material-ui/icons/AccountCircle'; export default function InputWithIcon() { @@ -40,20 +39,10 @@ export default function InputWithIcon() { }} variant="standard" /> -
- - - - - - - - -
+ + + + ); } diff --git a/docs/src/pages/components/text-fields/InputWithIcon.tsx b/docs/src/pages/components/text-fields/InputWithIcon.tsx index 03f86e235ad205..b8a79cad2eb131 100644 --- a/docs/src/pages/components/text-fields/InputWithIcon.tsx +++ b/docs/src/pages/components/text-fields/InputWithIcon.tsx @@ -5,7 +5,6 @@ import InputLabel from '@material-ui/core/InputLabel'; import InputAdornment from '@material-ui/core/InputAdornment'; import FormControl from '@material-ui/core/FormControl'; import TextField from '@material-ui/core/TextField'; -import Grid from '@material-ui/core/Grid'; import AccountCircle from '@material-ui/icons/AccountCircle'; export default function InputWithIcon() { @@ -40,20 +39,10 @@ export default function InputWithIcon() { }} variant="standard" /> -
- - - - - - - - -
+ + + + ); } From 5f3a37d9ccbfa1a63c2432b99030739341b9b081 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 11 Apr 2021 19:44:32 +0200 Subject: [PATCH 27/28] fix the helper text demo --- .../components/text-fields/HelperTextAligned.js | 8 +++----- .../components/text-fields/HelperTextAligned.tsx | 8 +++----- .../components/text-fields/HelperTextMisaligned.js | 13 ++++--------- .../components/text-fields/HelperTextMisaligned.tsx | 13 ++++--------- 4 files changed, 14 insertions(+), 28 deletions(-) diff --git a/docs/src/pages/components/text-fields/HelperTextAligned.js b/docs/src/pages/components/text-fields/HelperTextAligned.js index 0488b257f10618..369abef75e4478 100644 --- a/docs/src/pages/components/text-fields/HelperTextAligned.js +++ b/docs/src/pages/components/text-fields/HelperTextAligned.js @@ -6,22 +6,20 @@ export default function HelperTextAligned() { return ( :not(style)': { - m: 1, - }, + display: 'flex', + alignItems: 'center', + '& > :not(style)': { m: 1 }, }} > ); diff --git a/docs/src/pages/components/text-fields/HelperTextAligned.tsx b/docs/src/pages/components/text-fields/HelperTextAligned.tsx index 0488b257f10618..369abef75e4478 100644 --- a/docs/src/pages/components/text-fields/HelperTextAligned.tsx +++ b/docs/src/pages/components/text-fields/HelperTextAligned.tsx @@ -6,22 +6,20 @@ export default function HelperTextAligned() { return ( :not(style)': { - m: 1, - }, + display: 'flex', + alignItems: 'center', + '& > :not(style)': { m: 1 }, }} > ); diff --git a/docs/src/pages/components/text-fields/HelperTextMisaligned.js b/docs/src/pages/components/text-fields/HelperTextMisaligned.js index e847151d2e428f..0ec2183a027e31 100644 --- a/docs/src/pages/components/text-fields/HelperTextMisaligned.js +++ b/docs/src/pages/components/text-fields/HelperTextMisaligned.js @@ -6,22 +6,17 @@ export default function HelperTextMisaligned() { return ( :not(style)': { - m: 1, - }, + display: 'flex', + alignItems: 'center', + '& > :not(style)': { m: 1 }, }} > - + ); } diff --git a/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx b/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx index e847151d2e428f..0ec2183a027e31 100644 --- a/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx +++ b/docs/src/pages/components/text-fields/HelperTextMisaligned.tsx @@ -6,22 +6,17 @@ export default function HelperTextMisaligned() { return ( :not(style)': { - m: 1, - }, + display: 'flex', + alignItems: 'center', + '& > :not(style)': { m: 1 }, }} > - + ); } From 28a97f3e319cea414243a639c477122f20bc6449 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 11 Apr 2021 19:48:24 +0200 Subject: [PATCH 28/28] inline-preview --- .../pages/components/text-fields/Inputs.js | 24 +++++-------------- .../pages/components/text-fields/Inputs.tsx | 24 +++++-------------- 2 files changed, 12 insertions(+), 36 deletions(-) diff --git a/docs/src/pages/components/text-fields/Inputs.js b/docs/src/pages/components/text-fields/Inputs.js index 02f94e19e6c94b..0d7b6f9acb570f 100644 --- a/docs/src/pages/components/text-fields/Inputs.js +++ b/docs/src/pages/components/text-fields/Inputs.js @@ -2,6 +2,8 @@ import * as React from 'react'; import Box from '@material-ui/core/Box'; import Input from '@material-ui/core/Input'; +const ariaLabel = { 'aria-label': 'description' }; + export default function Inputs() { return ( - - - - + + + + ); } diff --git a/docs/src/pages/components/text-fields/Inputs.tsx b/docs/src/pages/components/text-fields/Inputs.tsx index 02f94e19e6c94b..0d7b6f9acb570f 100644 --- a/docs/src/pages/components/text-fields/Inputs.tsx +++ b/docs/src/pages/components/text-fields/Inputs.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; import Box from '@material-ui/core/Box'; import Input from '@material-ui/core/Input'; +const ariaLabel = { 'aria-label': 'description' }; + export default function Inputs() { return ( - - - - + + + + ); }