[core] Add space in between Label 'text' and 'helperText'.

[danielbh]

Fixes #2175

Checklist

• Enable CircleCI for your fork
• Include tests
• Update documentation (not need, its a bugfix)

Changes proposed in this pull request:

Adds a space in between text and helperText for the Label component

Reviewers should focus on:

The updated Label component and new tests

Screenshot

Before

After

[danielbh]

Good morning. Having a bit if trouble getting Circle to run on my new branch. Is this something you do on your end? Excited to start helping out.

[adidahiya]

Looks like your build workflow did run, but it was canceled. Can you try to retrigger it? https://circleci.com/gh/danielbh/workflows/blueprint/tree/dh%2Fadd-space-between-text-and-helperText

[danielbh]

Ok I re-triggered it. I had the "only build pull requests" option selected for some reason. I also needed to add a new commit.

[danielbh]

Update labelTests.tsx

Preview: documentation | landing | table

[adidahiya]

thanks!

[will-stone]

As the helper text is conditional, would it not be best to keep the span out of the DOM completely if helperText doesn't exist? e.g.

{helperText && <span className={classNames(Classes.TEXT_MUTED)}>{" " + helperText}</span>}

[danielbh]

Thanks for pointing this out Will. It seems cleaner to me. I’ll look if this affects the CSS. I can re-submit a PR tonight.

[will-stone]

Ah, the changes have broken the ability to add a React node as the helpertext e.g.

<Label
  text="Username"
  helperText={
      <span style={{ display: 'block', fontSize: '80%' }}>
          blah
       </span>
  }
>
  ...
</Label>

This now displays as : Username [object Object]

I suggest changing to:

{helperText && <span className={classNames(Classes.TEXT_MUTED)}>{" "}{helperText}</span>}

I'll log this as another issue