diff --git a/src/form-field/index.js b/src/form-field/index.js
index b437a8ab3..57cba808b 100644
--- a/src/form-field/index.js
+++ b/src/form-field/index.js
@@ -1,4 +1,5 @@
export FormField from './src/FormField'
export FormFieldDescription from './src/FormFieldDescription'
+export FormFieldHint from './src/FormFieldHint'
export FormFieldLabel from './src/FormFieldLabel'
export FormFieldValidationMessage from './src/FormFieldValidationMessage'
diff --git a/src/form-field/src/FormField.js b/src/form-field/src/FormField.js
index 26b146537..2a1653d11 100644
--- a/src/form-field/src/FormField.js
+++ b/src/form-field/src/FormField.js
@@ -4,6 +4,7 @@ import Box, { dimensions, spacing, position, layout } from 'ui-box'
import FormFieldLabel from './FormFieldLabel'
import FormFieldDescription from './FormFieldDescription'
import FormFieldValidationMessage from './FormFieldValidationMessage'
+import FormFieldHint from './FormFieldHint'
export default class FormField extends PureComponent {
static propTypes = {
@@ -23,13 +24,18 @@ export default class FormField extends PureComponent {
isRequired: PropTypes.bool,
/**
- * A optional description of the field under the input element.
+ * A optional description of the field under the label, above the input element.
*/
description: PropTypes.node,
+ /**
+ * A optional hint under the input element.
+ */
+ hint: PropTypes.node,
+
/**
* If a validation message is passed it is shown under the input element
- * and above the description.
+ * and above the hint.
*/
validationMessage: PropTypes.node,
@@ -62,6 +68,7 @@ export default class FormField extends PureComponent {
render() {
const {
+ hint,
label,
labelFor,
children,
@@ -77,21 +84,30 @@ export default class FormField extends PureComponent {
{label}
+ {typeof description === 'string' ? (
+
+ {description}
+
+ ) : (
+ description
+ )}
{children}
- {validationMessage && (
+ {typeof validationMessage === 'string' ? (
{validationMessage}
+ ) : (
+ validationMessage
)}
- {description && (
-
- {description}
-
+ {typeof hint === 'string' ? (
+ {hint}
+ ) : (
+ hint
)}
)
diff --git a/src/form-field/src/FormFieldDescription.js b/src/form-field/src/FormFieldDescription.js
index e4effd819..4d0c9f581 100644
--- a/src/form-field/src/FormFieldDescription.js
+++ b/src/form-field/src/FormFieldDescription.js
@@ -10,6 +10,6 @@ export default class FormFieldDescription extends PureComponent {
}
render() {
- return
+ return
}
}
diff --git a/src/form-field/src/FormFieldHint.js b/src/form-field/src/FormFieldHint.js
new file mode 100644
index 000000000..bc9d817c6
--- /dev/null
+++ b/src/form-field/src/FormFieldHint.js
@@ -0,0 +1,15 @@
+import React, { PureComponent } from 'react'
+import { Paragraph } from '../../typography'
+
+export default class FormFieldHint extends PureComponent {
+ static propTypes = {
+ /**
+ * Composes the Paragraph component as the base.
+ */
+ ...Paragraph.propTypes
+ }
+
+ render() {
+ return
+ }
+}
diff --git a/src/form-field/src/FormFieldValidationMessage.js b/src/form-field/src/FormFieldValidationMessage.js
index 87e7abf66..179c73c4e 100644
--- a/src/form-field/src/FormFieldValidationMessage.js
+++ b/src/form-field/src/FormFieldValidationMessage.js
@@ -28,7 +28,13 @@ class FormFieldValidationMessage extends PureComponent {
const { theme, children, ...props } = this.props
return (
-
+
{children}
diff --git a/src/index.js b/src/index.js
index e43611484..db21e8f84 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,6 +16,7 @@ export { FilePicker } from './file-picker'
export {
FormField,
FormFieldDescription,
+ FormFieldHint,
FormFieldLabel,
FormFieldValidationMessage
} from './form-field'
diff --git a/src/text-input/src/TextInputField.js b/src/text-input/src/TextInputField.js
index 4d20223c0..ee47df681 100644
--- a/src/text-input/src/TextInputField.js
+++ b/src/text-input/src/TextInputField.js
@@ -30,13 +30,18 @@ export default class TextInputField extends PureComponent {
isRequired: PropTypes.bool,
/**
- * A optional description of the field under the input element.
+ * A optional description of the field under the label, above the input element.
*/
description: PropTypes.node,
+ /**
+ * A optional hint under the input element.
+ */
+ hint: PropTypes.node,
+
/**
* If a validation message is passed it is shown under the input element
- * and above the description.
+ * and above the hint.
*/
validationMessage: PropTypes.node,
@@ -77,6 +82,7 @@ export default class TextInputField extends PureComponent {
id: unusedId,
// FormField props
+ hint,
label,
description,
validationMessage,
@@ -107,6 +113,7 @@ export default class TextInputField extends PureComponent {
marginBottom={24}
label={label}
isRequired={required}
+ hint={hint}
description={description}
validationMessage={validationMessage}
labelFor={id}
diff --git a/src/text-input/stories/index.stories.js b/src/text-input/stories/index.stories.js
index a536c8c04..1e2c7ae4d 100644
--- a/src/text-input/stories/index.stories.js
+++ b/src/text-input/stories/index.stories.js
@@ -184,6 +184,7 @@ storiesOf('text-input', module)
value="lgJ4AFjLN5"
disabled
description="This is your workspace's auto-generated unique identifier."
+ hint="You are not able to change this."
/>
+ return
}
}