feat: Add character count to TextArea Field component (#157)

* feat: Add character count to TextArea Field component

* docs: add w-full to new character count UI states for textarea field

Co-authored-by: Tony Ward <8069555+ynotdraw@users.noreply.github.com>

* changeset: Added changeset for TextArea Field

---------

Co-authored-by: Tony Ward <8069555+ynotdraw@users.noreply.github.com>

Author: nicolechung

.changeset/lazy-items-shake.md

@@ -0,0 +1,5 @@
+---
+'@crowdstrike/ember-toucan-core': patch 
+---
+
+Added: Character Count for Textarea Field

docs/components/textarea-field/index.md

@@ -242,6 +242,50 @@ Target the error block via `data-error`.
   />
 </div>
 
+### TextareaField with character count 
+
+<div class='mb-4 w-64'>
+  <Form::Fields::Textarea
+    class="w-full"
+    @label='Label'
+    @hint='With hint text'
+  >
+    <:secondary as |secondary|>
+      <secondary.CharacterCount @max={{255}} />
+    </:secondary>
+  </Form::Fields::Textarea>
+</div>
+
+### TextareaField with character count with a single error 
+
+<div class='mb-4 w-64'>
+  <Form::Fields::Textarea
+    class="w-full"
+    @label='Label'
+    @hint='With hint text'
+    @error="With error"
+  >
+    <:secondary as |secondary|>
+      <secondary.CharacterCount @max={{255}} />
+    </:secondary>
+  </Form::Fields::Textarea>
+</div>
+
+### TextareaField with character count with multiple errors 
+
+<div class='mb-4 w-64'>
+  <Form::Fields::Textarea
+    class="w-full"
+    @label='Label'
+    @hint='With hint text'
+    @error={{(array 'With error 1' 'With error 2' 'With error 3')}}
+  >
+    <:secondary as |secondary|>
+      <secondary.CharacterCount @max={{255}} />
+    </:secondary>
+  </Form::Fields::Textarea>
+</div>
+
 ### TextareaField with isReadOnly
 
 <div class='mb-4 w-64'>

packages/ember-toucan-core/src/components/form/fields/textarea.hbs

@@ -46,11 +46,36 @@
         @value={{@value}}
         @onChange={{@onChange}}
         @hasError={{this.hasError}}
+        {{on "input" this.handleCount}}
         ...attributes
       />
     </field.Control>
 
-    {{#if @error}}
+    {{#if (has-block "secondary")}}
+      <div class="flex justify-between">
+        {{#if @error}}
+          <field.Error
+            class="flex-3"
+            id={{field.errorId}}
+            @error={{@error}}
+            data-error
+          />
+        {{/if}}
+
+        <div
+          class="type-xs-tight text-body-and-labels mt-1.5 flex-1 text-right"
+        >
+          {{yield
+            (hash
+              CharacterCount=(component
+                (ensure-safe-component this.CharacterCount) current=this.count
+              )
+            )
+            to="secondary"
+          }}
+        </div>
+      </div>
+    {{else if @error}}
       <field.Error id={{field.errorId}} @error={{@error}} data-error />
     {{/if}}
   </Form::Field>

packages/ember-toucan-core/src/components/form/fields/textarea.ts

@@ -1,10 +1,15 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { assert } from '@ember/debug';
+import { action } from '@ember/object';
 
 import assertBlockOrArgumentExists from '../../../-private/assert-block-or-argument-exists';
+import CharacterCount from '../../../components/form/controls/character-count';
 
 import type { AssertBlockOrArg } from '../../../-private/assert-block-or-argument-exists';
 import type { ErrorMessage } from '../../../-private/types';
 import type { ToucanFormTextareaControlComponentSignature } from '../controls/textarea';
+import type { WithBoundArgs } from '@glint/template';
 
 export interface ToucanFormTextareaFieldComponentSignature {
   Element: HTMLTextAreaElement;
@@ -52,10 +57,18 @@ export interface ToucanFormTextareaFieldComponentSignature {
   Blocks: {
     label: [];
     hint: [];
+    secondary: [
+      {
+        CharacterCount: WithBoundArgs<typeof CharacterCount, 'current'>;
+      }
+    ];
   };
 }
 
 export default class ToucanFormTextareaFieldComponent extends Component<ToucanFormTextareaFieldComponentSignature> {
+  @tracked count = this.args.value?.length ?? 0;
+
+  CharacterCount = CharacterCount;
   assertBlockOrArgumentExists = ({
     blockExists,
     argName,
@@ -71,6 +84,15 @@ export default class ToucanFormTextareaFieldComponent extends Component<ToucanFo
     super(owner, args);
   }
 
+  @action
+  handleCount(event: Event | InputEvent): void {
+    assert(
+      'Expected HTMLTextAreaElement',
+      event.target instanceof HTMLTextAreaElement
+    );
+    this.count = event.target?.value.length ?? 0;
+  }
+
   get hasError() {
     return Boolean(this.args?.error);
   }

test-app/tests/integration/components/textarea-field-test.gts

@@ -222,4 +222,21 @@ module('Integration | Component | Fields | Textarea', function (hooks) {
       </TextareaField>
     </template>);
   });
+
+  test('it renders a `<:secondary>` block that tracks the textarea value length', async function(assert) {
+    await render(<template>
+      <TextareaField @label="Label" @value="Hello" data-textarea>
+        <:secondary as |secondary|>
+          <secondary.CharacterCount @max={{255}} data-character />
+        </:secondary>
+      </TextareaField>
+    </template>);
+
+    assert.dom('[data-character]').hasText('5 / 255');
+
+    await fillIn('[data-textarea]', 'Hello Hello');
+
+    assert.dom('[data-character]').hasText('11 / 255');
+
+  });
 });