Fix hint+requirementLabel bug in FormLabel component

CMSgov · Mar 31, 2018 · 9f5cb04 · 9f5cb04
1 parent 6b0516e
commit 9f5cb04
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>
 `;