add hiddenLabel proptype to FilledInput

mui · May 14, 2021 · c33350f · c33350f
1 parent e526be5
commit c33350f
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 2 deletions.
diff --git a/docs/pages/api-docs/filled-input.json b/docs/pages/api-docs/filled-input.json
@@ -15,6 +15,7 @@
     "endAdornment": { "type": { "name": "node" } },
     "error": { "type": { "name": "bool" } },
     "fullWidth": { "type": { "name": "bool" } },
+    "hiddenLabel": { "type": { "name": "bool" } },
     "id": { "type": { "name": "string" } },
     "inputComponent": { "type": { "name": "elementType" }, "default": "'input'" },
     "inputProps": { "type": { "name": "object" }, "default": "{}" },

diff --git a/docs/src/pages/components/text-fields/TextFieldHiddenLabel.js b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.js
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import FilledInput from '@material-ui/core/FilledInput';
 import TextField from '@material-ui/core/TextField';
 
 export default function TextFieldHiddenLabel() {
   return (
     <Box
       component="form"
       sx={{
-        '& .MuiTextField-root': { m: 1, width: '25ch' },
+        '& .MuiFilledInput-root': { m: 1, width: '25ch' },
       }}
       noValidate
       autoComplete="off"
@@ -31,6 +32,14 @@ export default function TextFieldHiddenLabel() {
           variant="filled"
         />
       </Box>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <label htmlFor="filled-hidden-label-input">Hidden label</label>
+        <FilledInput
+          hiddenLabel
+          id="filled-hidden-label-input"
+          defaultValue="Filled Input"
+        />
+      </Box>
     </Box>
   );
 }
diff --git a/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx b/docs/src/pages/components/text-fields/TextFieldHiddenLabel.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import FilledInput from '@material-ui/core/FilledInput';
 import TextField from '@material-ui/core/TextField';
 
 export default function TextFieldHiddenLabel() {
   return (
     <Box
       component="form"
       sx={{
-        '& .MuiTextField-root': { m: 1, width: '25ch' },
+        '& .MuiFilledInput-root': { m: 1, width: '25ch' },
       }}
       noValidate
       autoComplete="off"
@@ -31,6 +32,14 @@ export default function TextFieldHiddenLabel() {
           variant="filled"
         />
       </Box>
+      <Box sx={{ display: 'flex', alignItems: 'center' }}>
+        <label htmlFor="filled-hidden-label-input">Hidden label</label>
+        <FilledInput
+          hiddenLabel
+          id="filled-hidden-label-input"
+          defaultValue="Filled Input"
+        />
+      </Box>
     </Box>
   );
 }
diff --git a/docs/translations/api-docs/filled-input/filled-input.json b/docs/translations/api-docs/filled-input/filled-input.json
@@ -11,6 +11,7 @@
     "endAdornment": "End <code>InputAdornment</code> for this component.",
     "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "fullWidth": "If <code>true</code>, the <code>input</code> will take up the full width of its container.",
+    "hiddenLabel": "If <code>true</code>, the label is hidden. This is used to increase density for a <code>FilledInput</code>. Be sure to add <code>aria-label</code> to the <code>input</code> element.",
     "id": "The id of the <code>input</code> element.",
     "inputComponent": "The component used for the <code>input</code> element. Either a string to use a HTML element or a component.",
     "inputProps": "<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes\">Attributes</a> applied to the <code>input</code> element.",

diff --git a/packages/material-ui/src/FilledInput/FilledInput.d.ts b/packages/material-ui/src/FilledInput/FilledInput.d.ts
@@ -42,6 +42,13 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
     /** Styles applied to the input element if `endAdornment` is provided. */
     inputAdornedEnd?: string;
   };
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel?: boolean;
   /**
    * If `true`, the input will not have an underline.
    */

diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -265,6 +265,13 @@ FilledInput.propTypes /* remove-proptypes */ = {
    * @default false
    */
   fullWidth: PropTypes.bool,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: PropTypes.bool,
   /**
    * The id of the `input` element.
    */