From 159e91ab321eb6ddb3ce395b6d85359e5bf2a7f0 Mon Sep 17 00:00:00 2001
From: Kevin Kim <kkim020902@gmail.com>
Date: Mon, 7 Nov 2022 01:10:26 -0500
Subject: [PATCH 1/3] fix(TextArea): redo

---
 .../components/TextArea/examples/TextArea.md  | 268 +-----------------
 .../examples/TextAreaAutoResizing.tsx         |   6 +
 .../TextArea/examples/TextAreaBasic.tsx       |   7 +
 .../TextArea/examples/TextAreaDisabled.tsx    |   6 +
 .../TextAreaHorizontallyResizable.tsx         |  14 +
 .../TextArea/examples/TextAreaIconSprite.tsx  |  41 +++
 .../TextArea/examples/TextAreaInvalid.tsx     |  15 +
 .../TextArea/examples/TextAreaReadOnly.tsx    |  25 ++
 .../examples/TextAreaUncontrolled.tsx         |   6 +
 .../TextArea/examples/TextAreaValidated.tsx   |  52 ++++
 .../examples/TextAreaVerticallyResizable.tsx  |  14 +
 11 files changed, 196 insertions(+), 258 deletions(-)
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaDisabled.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaUncontrolled.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
 create mode 100644 packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx

diff --git a/packages/react-core/src/components/TextArea/examples/TextArea.md b/packages/react-core/src/components/TextArea/examples/TextArea.md
index 235dfc24d63..161916de786 100644
--- a/packages/react-core/src/components/TextArea/examples/TextArea.md
+++ b/packages/react-core/src/components/TextArea/examples/TextArea.md
@@ -9,300 +9,52 @@ propComponents: ['TextArea']
 
 ### Basic
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class SimpleTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return <TextArea value={value} onChange={this.handleTextAreaChange} aria-label="text area example" />;
-  }
-}
+```ts file="./TextAreaBasic.tsx"
 ```
 
 ### Invalid
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleInvalidTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleInvalidTextAreaChange}
-        isRequired
-        validated={'error'}
-        aria-label="invalid text area example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaInvalid.tsx"
 ```
 
 ### Validated
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'You must have something to say',
-      validated: 'default',
-      helperText: 'Share your thoughts.'
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState(
-        {
-          value,
-          validated: 'default',
-          helperText: 'Validating...'
-        },
-        this.simulateNetworkCall(() => {
-          if (value && value.length > 0) {
-            if (value.length >= 10) {
-              this.setState({ validated: 'success', helperText: 'Thanks for your comments!' });
-            } else {
-              this.setState({
-                validated: 'error',
-                invalidText: 'Your being too brief, please enter at least 10 characters.'
-              });
-            }
-          } else {
-            this.setState({ validated: 'warning', helperText: 'You must have something to say' });
-          }
-        })
-      );
-    };
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Comments:"
-          type="string"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          fieldId="selection"
-          validated={validated}
-        >
-          <TextArea
-            value={value}
-            onChange={this.handleTextAreaChange}
-            isRequired
-            validated={validated}
-            aria-label="invalid text area example"
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./TextAreaValidated.tsx"
 ```
 
 ### Vertically resizable text area
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class VerticalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="vertical"
-        aria-label="text vertical resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaVerticallyResizable.tsx"
 ```
 
 ### Horizontally resizable text area
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class HorizontalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="horizontal"
-        aria-label="text horizontal resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaHorizontallyResizable.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea defaultValue="default value" aria-label="uncontrolled text area example" />;
+```ts file="./TextAreaUncontrolled.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="disabled text area example" isDisabled />;
+```ts file="./TextAreaDisabled.tsx"
 ```
 
 ### Read only
 
-```js
-import React from 'react';
-import { Checkbox, TextArea } from '@patternfly/react-core';
-
-const ReadOnlyTextArea = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
-
-  return (
-    <React.Fragment>
-      <div style={{ marginBottom: '12px' }}>
-        <Checkbox
-          id="isPlain"
-          key="isPlain"
-          label="Plain read only variant"
-          isChecked={isPlainChecked}
-          onChange={checked => setIsPlainChecked(checked)}
-        />
-      </div>
-      <TextArea
-        aria-label="read only text area example"
-        value="read only text area example"
-        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
-      />
-    </React.Fragment>
-  );
-};
+```ts file="./TextAreaReadOnly.tsx"
 ```
 
 ### Auto resizing
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="auto resizing text area example" autoResize />;
+```ts file="./TextAreaAutoResizing.tsx"
 ```
 
 ### Icon sprite variants
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-IconSpriteTextArea = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextArea
-        validated={ValidatedOptions.success}
-        isIconSprite
-        type="text"
-        onChange={value => setSuccess(value)}
-        aria-label="success icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.warning}
-        isIconSprite
-        type="text"
-        onChange={value => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.error}
-        isIconSprite
-        type="text"
-        onChange={value => setError(value)}
-        aria-label="error icon sprite text area example"
-      />
-    </>
-  );
-};
+```ts isBeta file="./TextAreaIconSprite.tsx"
 ```
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
new file mode 100644
index 00000000000..386afc0f66e
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaAutoResizing: React.FunctionComponent = () => (
+  <TextArea aria-label="auto resizing text area example" autoResize />
+);
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx
new file mode 100644
index 00000000000..228602248df
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaBasic.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return <TextArea value={value} onChange={value => setValue(value)} aria-label="text area example" />;
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaDisabled.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaDisabled.tsx
new file mode 100644
index 00000000000..cb5b455a4b0
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaDisabled.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaDisabled: React.FunctionComponent = () => (
+  <TextArea aria-label="disabled text area example" isDisabled />
+);
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
new file mode 100644
index 00000000000..71a5edc9783
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="horizontal"
+      aria-label="text horizontal resize example"
+    />
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
new file mode 100644
index 00000000000..d654a07ab02
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaIconSprite: React.FunctionComponent = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <TextArea
+        validated={'success'}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        value={success}
+        aria-label="success icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'warning'}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        value={warning}
+        aria-label="warning icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'error'}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        value={error}
+        aria-label="error icon sprite text area example"
+      />
+    </>
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx
new file mode 100644
index 00000000000..765f29b9569
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaInvalid.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaInvalid: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      isRequired
+      validated={'error'}
+      aria-label="invalid text area example"
+    />
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx
new file mode 100644
index 00000000000..bf9da8f74a9
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Checkbox, TextArea } from '@patternfly/react-core';
+
+export const TextAreaReadOnly: React.FunctionComponent = () => {
+  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          id="isPlain"
+          key="isPlain"
+          label="Plain read only variant"
+          isChecked={isPlainChecked}
+          onChange={checked => setIsPlainChecked(checked)}
+        />
+      </div>
+      <TextArea
+        aria-label="read only text area example"
+        value="read only text area example"
+        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
+      />
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaUncontrolled.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaUncontrolled.tsx
new file mode 100644
index 00000000000..f2a75725e2f
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaUncontrolled.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaUncontrolled: React.FunctionComponent = () => (
+  <TextArea defaultValue="default value" aria-label="uncontrolled text area example" />
+);
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
new file mode 100644
index 00000000000..52c18afe847
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+
+export const TextAreaValidated: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [invalidText, setInvalidText] = React.useState('You must have something to say');
+  const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
+  const [helperText, setHelperText] = React.useState('Share your thoughts.');
+  const simulateNetworkCall = callback => {
+    setTimeout(callback, 2000);
+  };
+
+  const handleTextAreaChange = value => {
+    setValue(value);
+    setValidated('default');
+    setHelperText('Validating...');
+    simulateNetworkCall(() => {
+      if (value?.length > 0) {
+        if (value.length >= 10) {
+          setValidated('success');
+          setHelperText('Thanks for your comments!');
+        } else {
+          setValidated('error');
+          setInvalidText("You're being too brief, please enter at least 10 characters.");
+        }
+      } else {
+        setValidated('warning');
+        setHelperText('You must have something to say');
+      }
+    });
+  };
+  return (
+    <Form>
+      <FormGroup
+        label="Comments:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <TextArea
+          value={value}
+          onChange={value => handleTextAreaChange(value)}
+          isRequired
+          validated={validated}
+          aria-label="invalid text area example"
+        />
+      </FormGroup>
+    </Form>
+  );
+};
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
new file mode 100644
index 00000000000..b28a9e48352
--- /dev/null
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const VerticalResizeTextArea: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="vertical"
+      aria-label="text vertical resize example"
+    />
+  );
+};

From 68ec2d9d24f523b311e97837cc314455c9a057c3 Mon Sep 17 00:00:00 2001
From: Kevin Kim <kkim020902@gmail.com>
Date: Tue, 18 Oct 2022 10:54:07 -0400
Subject: [PATCH 2/3] fix(TextArea): made requested changes

---
 .../src/components/TextArea/examples/TextArea.md   |  4 ++--
 .../TextArea/examples/TextAreaAutoResizing.tsx     | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/TextArea/examples/TextArea.md b/packages/react-core/src/components/TextArea/examples/TextArea.md
index 161916de786..4f80fdb6e52 100644
--- a/packages/react-core/src/components/TextArea/examples/TextArea.md
+++ b/packages/react-core/src/components/TextArea/examples/TextArea.md
@@ -22,12 +22,12 @@ propComponents: ['TextArea']
 ```ts file="./TextAreaValidated.tsx"
 ```
 
-### Vertically resizable text area
+### Vertically resizable
 
 ```ts file="./TextAreaVerticallyResizable.tsx"
 ```
 
-### Horizontally resizable text area
+### Horizontally resizable
 
 ```ts file="./TextAreaHorizontallyResizable.tsx"
 ```
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
index 386afc0f66e..ff4f536b60b 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx
@@ -1,6 +1,14 @@
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
 
-export const TextAreaAutoResizing: React.FunctionComponent = () => (
-  <TextArea aria-label="auto resizing text area example" autoResize />
-);
+export const TextAreaAutoResizing: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      aria-label="auto resizing text area example"
+      autoResize
+    />
+  );
+};

From 859c668222f8a7a99c47ab65545063dfa1562216 Mon Sep 17 00:00:00 2001
From: Kevin Kim <kkim020902@gmail.com>
Date: Tue, 18 Oct 2022 16:36:01 -0400
Subject: [PATCH 3/3] fix(TextArea): typed functions and changed labels

---
 .../TextArea/examples/TextAreaHorizontallyResizable.tsx     | 2 +-
 .../src/components/TextArea/examples/TextAreaIconSprite.tsx | 2 +-
 .../src/components/TextArea/examples/TextAreaValidated.tsx  | 6 +++---
 .../TextArea/examples/TextAreaVerticallyResizable.tsx       | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
index 71a5edc9783..7aa543459b4 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx
@@ -8,7 +8,7 @@ export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
       value={value}
       onChange={value => setValue(value)}
       resizeOrientation="horizontal"
-      aria-label="text horizontal resize example"
+      aria-label="text area horizontal resize example"
     />
   );
 };
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
index d654a07ab02..c63a9d8938c 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaIconSprite.tsx
@@ -24,7 +24,7 @@ export const TextAreaIconSprite: React.FunctionComponent = () => {
         type="text"
         onChange={value => setWarning(value)}
         value={warning}
-        aria-label="warning icon sprite text input example"
+        aria-label="warning icon sprite text area example"
       />
       <br />
       <br />
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
index 52c18afe847..58aa1c2ee46 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaValidated.tsx
@@ -6,16 +6,16 @@ export const TextAreaValidated: React.FunctionComponent = () => {
   const [invalidText, setInvalidText] = React.useState('You must have something to say');
   const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
   const [helperText, setHelperText] = React.useState('Share your thoughts.');
-  const simulateNetworkCall = callback => {
+  const simulateNetworkCall = (callback: Function) => {
     setTimeout(callback, 2000);
   };
 
-  const handleTextAreaChange = value => {
+  const handleTextAreaChange = (value: string) => {
     setValue(value);
     setValidated('default');
     setHelperText('Validating...');
     simulateNetworkCall(() => {
-      if (value?.length > 0) {
+      if (value.length > 0) {
         if (value.length >= 10) {
           setValidated('success');
           setHelperText('Thanks for your comments!');
diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
index b28a9e48352..769dcd83573 100644
--- a/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
+++ b/packages/react-core/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx
@@ -8,7 +8,7 @@ export const VerticalResizeTextArea: React.FunctionComponent = () => {
       value={value}
       onChange={value => setValue(value)}
       resizeOrientation="vertical"
-      aria-label="text vertical resize example"
+      aria-label="text area vertical resize example"
     />
   );
 };