From 9f5cb042175c5d8a0be94bb0738e51de2a0c3b2d Mon Sep 17 00:00:00 2001
From: Patrick Wolfert <patrickrwolfert@gmail.com>
Date: Sat, 31 Mar 2018 12:33:59 -0700
Subject: [PATCH] Fix hint+requirementLabel bug in FormLabel component

---
 .../__snapshots__/DateField.test.jsx.snap     |  3 +-
 .../src/components/FormLabel/FormLabel.jsx    |  8 +++--
 .../components/FormLabel/FormLabel.test.jsx   | 12 ++++++--
 .../__snapshots__/FormLabel.test.jsx.snap     | 29 +++++++++++++++++--
 4 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap b/packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap
index 803ed2d29b..5935b37233 100644
--- a/packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap
+++ b/packages/core/src/components/DateField/__snapshots__/DateField.test.jsx.snap
@@ -610,7 +610,8 @@ exports[`DateField has requirementLabel 1`] = `
       className="ds-c-field__hint"
     >
       Optional.
-       For example: 4 28 1986
+       
+      For example: 4 28 1986
     </span>
   </legend>
   <div
diff --git a/packages/core/src/components/FormLabel/FormLabel.jsx b/packages/core/src/components/FormLabel/FormLabel.jsx
index a5ae06a5f6..92a5da34fe 100644
--- a/packages/core/src/components/FormLabel/FormLabel.jsx
+++ b/packages/core/src/components/FormLabel/FormLabel.jsx
@@ -22,13 +22,16 @@ export class FormLabel extends React.PureComponent {
   }
 
   hint() {
-    let { hint, requirementLabel } = this.props;
+    const { hint } = this.props;
+    let { requirementLabel } = this.props;
     if (!hint && !requirementLabel) return;
 
     const classes = classNames('ds-c-field__hint', {
       'ds-c-field__hint--inverse': this.props.inversed
     });
 
+    let hintPadding = null;
+
     if (requirementLabel && hint) {
       if (typeof requirementLabel === 'string') {
         // Remove any existing spacing and punctuation
@@ -38,12 +41,13 @@ export class FormLabel extends React.PureComponent {
       }
 
       // Add space between hint and preceding requirementLabel
-      hint = ' ' + hint;
+      hintPadding = ' ';
     }
 
     return (
       <span className={classes}>
         {requirementLabel}
+        {hintPadding}
         {hint}
       </span>
     );
diff --git a/packages/core/src/components/FormLabel/FormLabel.test.jsx b/packages/core/src/components/FormLabel/FormLabel.test.jsx
index 9ace533c1d..945c86f0ef 100644
--- a/packages/core/src/components/FormLabel/FormLabel.test.jsx
+++ b/packages/core/src/components/FormLabel/FormLabel.test.jsx
@@ -60,8 +60,16 @@ describe('FormLabel', () => {
   });
 
   it('adds punctuation to requirementLabel when hint is also present', () => {
-    const props = { hint: 'Hint', requirementLabel: 'Optional' };
-    const wrapper = shallow(<FormLabel {...props}>{labelText}</FormLabel>);
+    let props = { hint: 'Hint', requirementLabel: 'Optional' };
+    let wrapper = shallow(<FormLabel {...props}>{labelText}</FormLabel>);
+
+    expect(wrapper).toMatchSnapshot();
+
+    props = {
+      hint: <span>Hint</span>,
+      requirementLabel: <span>Optional</span>
+    };
+    wrapper = shallow(<FormLabel {...props}>{labelText}</FormLabel>);
 
     expect(wrapper).toMatchSnapshot();
   });
diff --git a/packages/core/src/components/FormLabel/__snapshots__/FormLabel.test.jsx.snap b/packages/core/src/components/FormLabel/__snapshots__/FormLabel.test.jsx.snap
index 15112d3d79..343c7de80e 100644
--- a/packages/core/src/components/FormLabel/__snapshots__/FormLabel.test.jsx.snap
+++ b/packages/core/src/components/FormLabel/__snapshots__/FormLabel.test.jsx.snap
@@ -13,7 +13,31 @@ exports[`FormLabel adds punctuation to requirementLabel when hint is also presen
     className="ds-c-field__hint"
   >
     Optional.
-     Hint
+     
+    Hint
+  </span>
+</label>
+`;
+
+exports[`FormLabel adds punctuation to requirementLabel when hint is also present 2`] = `
+<label
+  className="ds-c-label"
+>
+  <span
+    className=""
+  >
+    Hello world
+  </span>
+  <span
+    className="ds-c-field__hint"
+  >
+    <span>
+      Optional
+    </span>
+     
+    <span>
+      Hint
+    </span>
   </span>
 </label>
 `;
@@ -31,7 +55,8 @@ exports[`FormLabel avoids duplicate punctuation after requirementLabel 1`] = `
     className="ds-c-field__hint"
   >
     Optional.
-     Hint
+     
+    Hint
   </span>
 </label>
 `;