Fix/textarea vertical resize 315

src/components/TextInput/cfpb-text-input.scss

@@ -0,0 +1,2 @@
+@use '@cfpb/cfpb-design-system/src/components/cfpb-forms/form-field';
+@use '@cfpb/cfpb-design-system/src/components/cfpb-forms/text-input';

src/components/TextInput/text-area.test.tsx

@@ -28,6 +28,14 @@ describe('<TextArea />', () => {
 
     const textInput = screen.getByTestId('textAreaInput');
     expect(textInput).toHaveClass('a-text-input--full');
+    expect(screen.getByTestId('text-area-field')).toContainElement(textInput);
+  });
+
+  it('does not wrap in m-form-field by default', () => {
+    render(<TextArea id='enabled' />);
+
+    expect(screen.queryByTestId('text-area-field')).not.toBeInTheDocument();
+    expect(screen.getByTestId('textAreaInput')).toBeInTheDocument();
   });
 
   it('applies validation status modifiers', () => {
@@ -47,4 +55,11 @@ describe('<TextArea />', () => {
     expect(textInput).toHaveClass('a-text-input');
     expect(textInput).not.toHaveClass('a-text-input--success');
   });
+
+  it('restricts resizing to the vertical axis', () => {
+    render(<TextArea id='enabled' />);
+
+    const textArea = screen.getByTestId('textAreaInput');
+    expect(textArea).toHaveStyle({ resize: 'vertical' });
+  });
 });

src/components/TextInput/text-area.tsx

@@ -7,6 +7,7 @@ import {
   type Ref,
 } from 'react';
 import { noOp as onNoOp } from '../../utils/no-op';
+import './cfpb-text-input.scss';
 import {
   getTextInputStatusClass,
   type TextInputStatusType,
@@ -28,7 +29,7 @@ export const TextArea = forwardRef(
   (
     {
       id,
-      className = '',
+      className,
       status,
       placeholder = 'Placeholder text',
       isFullWidth = false,
@@ -38,6 +39,8 @@ export const TextArea = forwardRef(
     }: JSX.IntrinsicElements['textarea'] & TextAreaType,
     reference: Ref<HTMLTextAreaElement>,
   ): ReactElement => {
+    const { style, ...restProperties } = properties;
+
     const onChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
       event,
     ) => {
@@ -47,24 +50,34 @@ export const TextArea = forwardRef(
 
     const classes = [
       'a-text-input',
+      className,
       getTextInputStatusClass(status),
-      isFullWidth ? 'a-text-input--full' : '',
-      className || '',
-    ].filter((x) => x.length);
+    ];
+
+    if (isFullWidth) {
+      classes.push('a-text-input--full');
+    }
+
+    const textarea = (
+      <textarea
+        className={classNames(classes)}
+        id={id}
+        placeholder={placeholder}
+        onChange={onChangeHandler}
+        disabled={isDisabled}
+        data-testid='textAreaInput'
+        ref={reference}
+        style={{ ...style, resize: 'vertical' }}
+        {...restProperties}
+      />
+    );
 
-    return (
-      <div className='m-form-field'>
-        <textarea
-          className={classNames(classes)}
-          id={id}
-          placeholder={placeholder}
-          onChange={onChangeHandler}
-          disabled={isDisabled}
-          data-testid='textAreaInput'
-          ref={reference}
-          {...properties}
-        />
+    return isFullWidth ? (
+      <div className='m-form-field' data-testid='text-area-field'>
+        {textarea}
       </div>
+    ) : (
+      textarea
     );
   },
 );

src/components/TextInput/text-input.tsx

@@ -5,6 +5,7 @@ import {
   type ComponentPropsWithoutRef,
   type ReactNode,
 } from 'react';
+import './cfpb-text-input.scss';
 import type { TextInputStatusType } from './text-input-status';
 import { getTextInputStatusClass } from './text-input-status';
 
@@ -65,23 +66,9 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProperties>(
 
     if (isFullWidth) {
       classes.push('a-text-input--full');
-      return (
-        <div className='m-form-field'>
-          <input
-            data-testid='textInput'
-            className={classnames(classes)}
-            disabled={isDisabled}
-            id={id}
-            name={name}
-            type={type}
-            ref={reference}
-            {...otherInputProperties}
-          />
-        </div>
-      );
     }
 
-    return (
+    const input = (
       <input
         data-testid='textInput'
         className={classnames(classes)}
@@ -93,6 +80,12 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProperties>(
         {...otherInputProperties}
       />
     );
+
+    return isFullWidth ? (
+      <div className='m-form-field'>{input}</div>
+    ) : (
+      input
+    );
   },
 );