[TextField] Support padding for helperText (#19198)

mui · Jan 13, 2020 · 41b75fe · 41b75fe
1 parent 16fd9b7
commit 41b75fe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/docs/pages/api/form-helper-text.md b/docs/pages/api/form-helper-text.md
@@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component.<br>If `' '` is provided, the component reserves one line height for displaying a future message. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'p'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |  | If `true`, the helper text should be displayed in a disabled state. |

diff --git a/packages/material-ui/src/FormHelperText/FormHelperText.js b/packages/material-ui/src/FormHelperText/FormHelperText.js
@@ -44,6 +44,7 @@ export const styles = theme => ({
 
 const FormHelperText = React.forwardRef(function FormHelperText(props, ref) {
   const {
+    children,
     classes,
     className,
     component: Component = 'p',
@@ -81,13 +82,22 @@ const FormHelperText = React.forwardRef(function FormHelperText(props, ref) {
       )}
       ref={ref}
       {...other}
-    />
+    >
+      {children === ' ' ? (
+        // eslint-disable-next-line react/no-danger
+        <span dangerouslySetInnerHTML={{ __html: '&#8203;' }} />
+      ) : (
+        children
+      )}
+    </Component>
   );
 });
 
 FormHelperText.propTypes = {
   /**
    * The content of the component.
+   *
+   * If `' '` is provided, the component reserves one line height for displaying a future message.
    */
   children: PropTypes.node,
   /**