[TextField] Document how to hide label in FilledInput

[AGPX]

The TextField top padding is wrong when variant is 'filled' and no label is specified.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When variant = 'filled' and no label is used, the top padding of the TextField seems to still consider the label space (when variant = 'standard', you haven't this issue).

Expected Behavior 🤔

When variant = 'filled' and no label is used, the top padding of the TextField must be reduced like the one used when variant = 'standard'.

Steps to Reproduce 🕹

Steps:

Example at the link: https://codesandbox.io/s/material-ui-issue-forked-p9bx3

1. Create a TextField.
2. Set the variant attribute to 'filled'.

The issue is in the classes: '.MuiFilledInput-input' (and '.MuiFilledInput-inputMarginDense' for the small size).

Context 🔦

Your Environment 🌎

Tech	Version
Material-UI	v4.11.1
React
Browser
TypeScript
etc.

[marthaerm]

@oliviertassinari is this issue good to take? I would like to give It a try!

[oliviertassinari]

@AGPX There is a feature for this, but it's barely documented:

Before

After

      <TextField
        hiddenLabel
        id="standard-start-adornment"
        size="small"
        variant="filled"
        InputProps={{
          startAdornment: <InputAdornment position="start">Kg</InputAdornment>
        }}
      />

How about we add a new demo under https://next.material-ui.com/components/text-fields/#sizes?

[oliviertassinari]

Maybe something like this?

diff --git a/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx
new file mode 100644
index 0000000000..456953127e
--- /dev/null
+++ b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx
@@ -0,0 +1,43 @@
+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,
+      },
+    },
+  }),
+);
+
+export default function TextFieldHiddenLabel() {
+  const classes = useStyles();
+
+  return (
+    <form className={classes.root} noValidate autoComplete="off">
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <label htmlFor="filled-hidden-label-small">Hidden label</label>
+        <TextField
+          hiddenLabel
+          id="filled-hidden-label-small"
+          defaultValue="Small"
+          variant="filled"
+          size="small"
+        />
+      </Box>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <label htmlFor="filled-hidden-label-normal">Hidden label</label>
+        <TextField
+          hiddenLabel
+          id="filled-hidden-label-normal"
+          defaultValue="Normal"
+          variant="filled"
+        />
+      </Box>
+    </form>
+  );
+}
diff --git a/docs/src/pages/components/text-fields/text-fields.md b/docs/src/pages/components/text-fields/text-fields.md
index 6db59637be..b9c2669f6a 100644
--- a/docs/src/pages/components/text-fields/text-fields.md
+++ b/docs/src/pages/components/text-fields/text-fields.md
@@ -71,6 +71,10 @@ Fancy smaller inputs? Use the `size` prop.

 {{"demo": "pages/components/text-fields/TextFieldSizes.js"}}

+The `filled` variant input height can be further reduced by rendering the label outside of it.
+
+{{"demo": "pages/components/text-fields/TextFieldHiddenLabel.js"}}
+
 ## Layout

 `margin` prop can be used to alter the vertical spacing of inputs.

[AGPX]

Excuse me, but if a label is not specified, why do I have to explicitly hide it? The current one is not an expected behavior.
However, with the hiddenLabel, it works and this definitely need to be documented and/or an example added. Thanks for the quick support.

[oliviertassinari]

@AGPX You are right, the prop was introduced in #16671, we can polish it more. For instance, Textfield should likely set the prop automatically.

[smajl]

FYI, hiddenLabel doesn't work correctly for multiline filled inputs.