From 41b75fe449a6bf5dd0e1cf4af7416fcf62e6e605 Mon Sep 17 00:00:00 2001
From: Hitesh Chauhan <51196367+hiteshkundal@users.noreply.github.com>
Date: Mon, 13 Jan 2020 14:44:10 +0530
Subject: [PATCH] [TextField] Support padding for helperText (#19198)
---
docs/pages/api/form-helper-text.md | 2 +-
.../material-ui/src/FormHelperText/FormHelperText.js | 12 +++++++++++-
2 files changed, 12 insertions(+), 2 deletions(-)
diff --git a/docs/pages/api/form-helper-text.md b/docs/pages/api/form-helper-text.md
index ea4eff79c5b5bf..95d6fe979d8588 100644
--- 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 |
|:-----|:-----|:--------|:------------|
-| children | node | | The content of the component. |
+| children | node | | The content of the component.
If `' '` is provided, the component reserves one line height for displaying a future message. |
| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
| component | elementType | 'p' | The component used for the root node. Either a string to use a DOM element or a component. |
| disabled | bool | | 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
index 94e73fc23d44fa..c0da0a8e9c397f 100644
--- 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
+
+ ) : (
+ children
+ )}
+
);
});
FormHelperText.propTypes = {
/**
* The content of the component.
+ *
+ * If `' '` is provided, the component reserves one line height for displaying a future message.
*/
children: PropTypes.node,
/**