diff --git a/packages/react-core/src/components/TextArea/TextArea.tsx b/packages/react-core/src/components/TextArea/TextArea.tsx index 30db54edbc7..2879ef2cb91 100644 --- a/packages/react-core/src/components/TextArea/TextArea.tsx +++ b/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, 'onC /** A callback for when the text area value changes. */ onChange?: (event: React.ChangeEvent, 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 { 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 { 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 diff --git a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx index 2cfc37f2aa0..959e12f33c7 100644 --- a/packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx +++ b/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(