fix(TextArea): Adjust label dependent on state

packages/css-framework/src/components/_textarea.scss

@@ -14,8 +14,7 @@
   background-color: f.color("neutral", "white");
   border: 1px solid f.color("neutral", "200");
   border-radius: 4px;
-  transition:
-    border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
     box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   position: relative;
 }
@@ -31,31 +30,38 @@
   box-shadow: 0 0 0 1px f.color("danger", "700");
 }
 
-.rn-textarea.is-valid .rn-textarea__wrapper {
-  border-color: f.color("success", "700");
-  box-shadow: 0 0 0 1px f.color("success", "700");
-}
-
 .rn-textarea__label {
   display: block;
   position: absolute;
-  padding-left: f.spacing("6");
   padding-bottom: f.spacing("2");
-  right: 14px;
+  top: 0;
   left: 0;
+  transform-origin: top left;
+  transform: translate(f.spacing("6"), f.spacing("6")) scale(1);
+  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
   pointer-events: none;
   color: f.color("neutral", "400");
   font-size: f.font-size("s");
   background-color: white;
   border-radius: 3px 3px 0 0;
 }
 
+.rn-textarea.has-focus .rn-textarea__label,
+.rn-textarea.has-content .rn-textarea__label {
+  transform: translate(f.spacing("6"), 6px) scale(0.8);
+}
+
+.rn-textarea.has-focus .rn-textarea__label,
+.rn-textarea.has-content .rn-textarea__label {
+  transform: translate(f.spacing("6"), 6px) scale(0.8);
+}
+
 .rn-textarea__label-inner {
   display: inline-block;
   transform-origin: top left;
   transform: translate(0, f.spacing("2")) scale(1.2);
-  transition:
-    color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
     transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 }
 

packages/react-component-library/src/components/TextArea/TextArea.stories.tsx

@@ -21,6 +21,11 @@ stories.add('Vanilla', () => {
     >
       <TextArea className="is-valid" name="colour" label="My Label" />
       <TextArea name="name" label="Name" />
+      <TextArea
+        name="description"
+        label="Description"
+        value="Some content has already been entered"
+      />
       <button type="submit">Submit</button>
     </form>
   )

packages/react-component-library/src/components/TextArea/TextArea.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import '@testing-library/jest-dom/extend-expect'
 import { render, RenderResult } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 
 import { FieldProps } from '../../common/FieldProps'
 import { FormProps } from '../../common/FormProps'
@@ -39,6 +40,12 @@ describe('TextArea', () => {
       )
     })
 
+    it('should add the `has-content` to the container', () => {
+      expect(wrapper.getByTestId('textarea-container').classList).toContain(
+        'has-content'
+      )
+    })
+
     it('renders the footnote', () => {
       expect(wrapper.getByText('footnote')).toBeInTheDocument()
     })
@@ -90,6 +97,38 @@ describe('TextArea', () => {
         expect(onBlurSpy).toHaveBeenCalledTimes(1)
       })
     })
+
+    describe('when the value is changed', () => {
+      beforeEach(async () => {
+        await userEvent.type(
+          wrapper.getByTestId('textarea-input'),
+          '{backspace}'
+        )
+      })
+
+      it('should update the value', () => {
+        expect(wrapper.getByTestId('textarea-input')).toHaveValue('a')
+      })
+    })
+
+    describe('when the value is deleted', () => {
+      beforeEach(async () => {
+        await userEvent.type(
+          wrapper.getByTestId('textarea-input'),
+          '{backspace}{backspace}'
+        )
+      })
+
+      it('should remove the `has-content` to the container', () => {
+        expect(
+          wrapper.getByTestId('textarea-container').classList
+        ).not.toContain('has-content')
+      })
+
+      it('should update the value', () => {
+        expect(wrapper.getByTestId('textarea-input')).toHaveValue('')
+      })
+    })
   })
 
   describe('when a Formik enhanced field has an error', () => {

packages/react-component-library/src/components/TextArea/TextArea.tsx

@@ -1,9 +1,10 @@
-import React, { TextareaHTMLAttributes } from 'react'
+import React, { ChangeEvent, TextareaHTMLAttributes } from 'react'
 import { v4 as uuidv4 } from 'uuid'
 import classNames from 'classnames'
 
 import { useFocus } from '../../hooks/useFocus'
 import { ComponentWithClass } from '../../common/ComponentWithClass'
+import { useInputValue } from '../../hooks/useInputValue'
 
 export interface TextAreaInputProps
   extends TextareaHTMLAttributes<HTMLTextAreaElement>,
@@ -31,14 +32,14 @@ export const TextArea: React.FC<TextAreaInputProps> = (props) => {
   } = props
 
   const { focus, onLocalBlur, onFocus } = useFocus(onBlur)
-  const hasContent = value && value.length
+  const { committedValue, hasValue, onValueChange } = useInputValue(value)
   const hasLabel = label && label.length
 
   const classes = classNames(
-    'rn-textinput',
+    'rn-textarea',
     {
       'has-focus': focus,
-      'has-content': hasContent,
+      'has-content': hasValue,
       'no-label': !hasLabel,
     },
     className
@@ -63,10 +64,15 @@ export const TextArea: React.FC<TextAreaInputProps> = (props) => {
           id={id}
           name={name}
           onBlur={onLocalBlur}
-          onChange={onChange}
+          onChange={(e) => {
+            onValueChange(e)
+            if (onChange) {
+              onChange(e)
+            }
+          }}
           onFocus={onFocus}
           placeholder={placeholder}
-          value={value}
+          value={committedValue}
           {...rest}
         />
       </div>

packages/react-component-library/src/hooks/useInputValue.ts

@@ -0,0 +1,23 @@
+import { get } from 'lodash'
+import { ChangeEvent, useMemo, useState } from 'react'
+
+export function useInputValue(value: string) {
+  const [committedValue, setCommittedValue] = useState<string>()
+
+  useMemo(() => setCommittedValue(value), [value])
+
+  const hasValue = useMemo(() => {
+    return !!(committedValue && committedValue.length)
+  }, [committedValue])
+
+  function onValueChange(event: ChangeEvent<HTMLTextAreaElement>) {
+    const newValue = get(event, 'target.value')
+    setCommittedValue(newValue)
+  }
+
+  return {
+    committedValue,
+    hasValue,
+    onValueChange,
+  }
+}