[TextField / Labelled] Add character count

[jfangrad]

WHY are these changes introduced?

Resolves #491

TextField lacks the ability to display the remaining characters available when the TextField has a max character length. This PR adds that ability.

WHAT is this pull request doing?

Adds in the prop showCharacterCount to TextField to enable the displaying of the remaining character count.

The Labelled component will then display the number of characters out of the total allowed characters that have been inputted into the TextField.

One item of note is that things can get a little busy as can be seen below:

@dpersing was giving insight into this on the issue.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {Page, TextField} from '@shopify/polaris';

interface State {
  value: string;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    value: '',
  };

  onChange = (value: string) => {
    this.setState({value});
  };

  render() {
    const {value} = this.state;
    return (
      <Page
        title="Playground"
        primaryAction={{content: 'View Examples', url: '/examples'}}
      >
        <TextField
          label="This is where the label lives"
          value={value}
          onChange={this.onChange}
          maxLength={10}
          showCharacterCount
        />
        <TextField
          label="This is where the label lives"
          value={value}
          onChange={this.onChange}
          maxLength={10}
          multiline         
          showCharacterCount
        />
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated UNRELEASED.md

[solonaarmstrong-zz]

I wonder if it would make more sense to position the text count here:

This is how it is already implemented across the admin. It looks like it's using subdued text style as a sibling to the label.

[danrosenthal]

I'm also in favor of that positioning, @solonaarmstrong. cc: @sarahill to confirm

[jfangrad]

@solonaarmstrong @danrosenthal I also agree and think that it looks better in that position. The one reason, that came up in the issue, for putting it below was that if the textfield had a lot of text in it the user might not be able to see the count as they type if it was at the top of the field.

Its probably a rare case but just thought I would bring that up again to be included in the consideration.

[danrosenthal]

The one reason, that came up in the issue, for putting it below was that if the textfield had a lot of text in it the user might not be able to see the count as they type if it was at the top of the field.

I think that's an acceptable limitation.

[sarahill]

I like @solonaarmstrong suggestion for placement.

Couple questions/thoughts:

• How would this look on smaller screens?
  • We could either not show the count on or reduce it to just the count 4 / 70.
• Do we need to worry about a long label that could potentially run into the character count?
  • For this we could set a max-width and allow the label to wrap if necessary and base align the label + character count.

[solonaarmstrong-zz]

@sarahill This is how it currently behaves on small screens in the admin (for SEO, as an example). It simply needs to stack.

[jfangrad]

@danrosenthal @solonaarmstrong I made the changes to the placement etc.

One thing that I ran into is that the placement of the label action gets a little weird when also showing the character count. Currently this is what I have it doing when both are present:

Its probably a super rare case to have all three...
To have the label action always be on the far right I would have to move the character count code down another level into the Label component which wouldn't be super nice.

label action will still be on the far right if the showCharacterCount is false

[danrosenthal]

This is feeling like a really strong step in the right direction, but I feel that the separation of concerns is wrong here. The character count feels like it should be the concern of the TextField component itself, but in this implementation the Labelled component is doing most of the work. In my opinion, the generation of the characterCount markup should be the concern of the TextField itself, and should just be passed as a ReactNode to the Labelled component, which should not really care what it is, and only should be concerned with where to render it.

What do you think about doing all the work in the TextField component, and then passing it to the action prop of Labelled? Then Labelled could check if it received an object or a ReactNode as an action, and render it accordingly. My only hesitation here is that it would feel a bit unnatural to pass something that wasn't an Action to the action prop, but I think I'm okay with that. It would also solve your display problem of figuring out whether or not to render the Action, as the Labelled could only take one or the other.

Thoughts about this approach?

Feedback addressed

[jfangrad]

@danrosenthal I definitely agree with you. It felt weird putting all the logic in Labelled.

I like the idea of passing it through the action prop, my only concern is that you will then not be able to have both at the same time. I know for my project that isn't a concern. I guess if it becomes a problem in the future that can be addressed then?

My main question then is if someone passes a labelAction prop and the showCharacterCount prop to the TextField which should we pass to the Labelled components action prop? Which takes precedence? My initial thought is action should probably take precedence since it has been around longer.

I am also worried about people trying to do an action and a character count and wondering why one of them doesn't show up (But maybe just saying why in the docs is enough?)

[emarchak]

It ended up making more sense to provide a fixed line-height to the CharacterCount instead of shifting around the margins if it's a multiline text field. I believe we still need the .AlignFieldBottom since the layout had inconsistent behaviour when I applied align-self: flex-end; to a single line input field.

I believe this should be good to go pending the two ✅ and someone approving percy. @solonaarmstrong and @dpersing could you please take another look?

[dpersing]

Hi @emarchak! It looks like the aria-label for the "X of Y" content is reading out "X characters remaining", which is the opposite of the visual. For example, when 0 characters have been typed, it says "0 characters remaining", whereas really it should be "10 characters remaining" since none have been typed yet:

<div id="TextField1CharacterCounter" class="TextField-CharacterCount_7V_ks" aria-label="0 characters remaining" aria-live="polite" aria-atomic="true">0/10</div>

I'm thinking that "X of Y characters used" would make more sense with the visual?

[emarchak]

Fixed!

[dpersing]

🎉

[ghost]

🎉 Thanks for your contribution to Polaris React!

[fchienvuhoang]

I'm using bellow code example but showCharacterCount not work, my Polaris v3.8.0, any update?

 <TextField
        label="Store name"
        value={this.state.value}
        onChange={this.handleChange}
        maxLength={20}
        showCharacterCount
        multiline
      />

[solonaarmstrong-zz]

@fchienvuhoang I just tried and I see it in there in v3.9.0.