feat(Text area): Add resize disable feature (#11383)

* feat(Text area): Add reasize disable feature

* change disabled to none

* update tests

* add resize none example

Author: tlabaj

packages/react-core/src/components/TextArea/TextArea.tsx

@@ -8,7 +8,8 @@ import { FormControlIcon } from '../FormControl/FormControlIcon';
 export enum TextAreResizeOrientation {
   horizontal = 'horizontal',
   vertical = 'vertical',
-  both = 'both'
+  both = 'both',
+  none = 'none'
 }
 
 export enum TextAreaReadOnlyVariant {
@@ -37,7 +38,7 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   /** A callback for when the text area value changes. */
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>, value: string) => void;
   /** Sets the orientation to limit the resize to */
-  resizeOrientation?: 'horizontal' | 'vertical' | 'both';
+  resizeOrientation?: 'horizontal' | 'vertical' | 'both' | 'none';
   /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
   /** @hide A reference object to attach to the text area. */
@@ -118,10 +119,10 @@ class TextAreaBase extends React.Component<TextAreaProps> {
       onFocus,
       ...props
     } = this.props;
-    const orientation = `resize${capitalize(resizeOrientation)}` as
-      | 'resizeVertical'
-      | 'resizeHorizontal'
-      | 'resizeBoth';
+    const orientation =
+      resizeOrientation !== 'none'
+        ? (`resize${capitalize(resizeOrientation)}` as 'resizeVertical' | 'resizeHorizontal' | 'resizeBoth')
+        : undefined;
     const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
 
     return (
@@ -130,7 +131,7 @@ class TextAreaBase extends React.Component<TextAreaProps> {
           styles.formControl,
           readOnlyVariant && styles.modifiers.readonly,
           readOnlyVariant === 'plain' && styles.modifiers.plain,
-          resizeOrientation && styles.modifiers[orientation],
+          resizeOrientation !== 'none' && styles.modifiers[orientation],
           isDisabled && styles.modifiers.disabled,
           hasStatusIcon && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className

packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import '@testing-library/jest-dom';
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -93,6 +94,16 @@ test('Text area is not invalid by default', () => {
   expect(screen.getByRole('textbox')).not.toBeInvalid();
 });
 
+test('Renders vertically & resizable text area by default', () => {
+  render(<TextArea aria-label="vertical resize textarea" />);
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-both');
+});
+
+test('Renders vertically & resizable text area when resizeOrientation is set to both', () => {
+  render(<TextArea aria-label="vertical resize textarea" resizeOrientation="both" />);
+  expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-both');
+});
+
 test('Renders vertically resizable text area', () => {
   render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
   expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-vertical');
@@ -103,6 +114,13 @@ test('Renders horizontally resizable text area', () => {
   expect(screen.getByRole('textbox').parentElement).toHaveClass('pf-m-resize-horizontal');
 });
 
+test('Disables resizable text area', () => {
+  render(<TextArea aria-label="disabled resize textarea" resizeOrientation="none" />);
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-vertical');
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-horizontal');
+  expect(screen.getByRole('textbox').parentElement).not.toHaveClass('pf-m-resize-both');
+});
+
 test('Throws console error when no aria-label or id is given', () => {
   jest.spyOn(global.console, 'error');
 

packages/react-core/src/components/TextArea/examples/TextArea.md

@@ -38,6 +38,12 @@ propComponents: ['TextArea']
 
 ```
 
+### Not resizable
+
+```ts file="./TextAreaResizableNone.tsx"
+
+```
+
 ### Uncontrolled
 
 ```ts file="./TextAreaUncontrolled.tsx"

packages/react-core/src/components/TextArea/examples/TextAreaResizableNone.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaResizeNone: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={(_event, value) => setValue(value)}
+      resizeOrientation="none"
+      aria-label="text area resize none example"
+    />
+  );
+};