add hint prop to TextInputField

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'

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 {
         <FormFieldLabel
           htmlFor={labelFor}
           isAstrixShown={isRequired}
-          marginBottom={4}
+          marginBottom={description ? 0 : 4}
           {...labelProps}
         >
           {label}
         </FormFieldLabel>
+        {typeof description === 'string' ? (
+          <FormFieldDescription marginBottom={4}>
+            {description}
+          </FormFieldDescription>
+        ) : (
+          description
+        )}
         {children}
-        {validationMessage && (
+        {typeof validationMessage === 'string' ? (
           <FormFieldValidationMessage marginTop={8}>
             {validationMessage}
           </FormFieldValidationMessage>
+        ) : (
+          validationMessage
         )}
-        {description && (
-          <FormFieldDescription marginTop={6}>
-            {description}
-          </FormFieldDescription>
+        {typeof hint === 'string' ? (
+          <FormFieldHint marginTop={6}>{hint}</FormFieldHint>
+        ) : (
+          hint
         )}
       </Box>
     )

src/form-field/src/FormFieldDescription.js

@@ -10,6 +10,6 @@ export default class FormFieldDescription extends PureComponent {
   }
 
   render() {
-    return <Paragraph marginTop={0} size={300} color="muted" {...this.props} />
+    return <Paragraph marginTop={0} size={400} color="muted" {...this.props} />
   }
 }

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 <Paragraph marginTop={0} size={300} color="muted" {...this.props} />
+  }
+}

src/form-field/src/FormFieldValidationMessage.js

@@ -28,7 +28,13 @@ class FormFieldValidationMessage extends PureComponent {
     const { theme, children, ...props } = this.props
     return (
       <Pane display="flex" {...props}>
-        <Icon size={14} marginRight={8} icon="error" color="danger" />
+        <Icon
+          icon="error"
+          color="danger"
+          marginTop={1}
+          size={14}
+          marginRight={8}
+        />
         <Paragraph marginTop={0} size={300} color="danger" role="alert">
           {children}
         </Paragraph>

src/index.js

@@ -16,6 +16,7 @@ export { FilePicker } from './file-picker'
 export {
   FormField,
   FormFieldDescription,
+  FormFieldHint,
   FormFieldLabel,
   FormFieldValidationMessage
 } from './form-field'

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}

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."
           />
           <Button
             intent="success"

src/typography/src/Label.js

@@ -7,6 +7,6 @@ export default class Label extends PureComponent {
   }
 
   render() {
-    return <Text is="label" {...this.props} />
+    return <Text is="label" fontWeight={500} {...this.props} />
   }
 }