[EuiTextArea] Add isClearable and icon props (#7449)

Co-authored-by: Cee Chen <[email protected]>

changelogs/upcoming/7449.md

@@ -0,0 +1 @@
+- Updated `EuiTextArea` to accept `isClearable` and `icon` as props

src-docs/src/views/form_controls/text_area.js

@@ -12,7 +12,7 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles>
+    <DisplayToggles canClear>
       <EuiTextArea
         placeholder="Placeholder text"
         aria-label="Use aria labels when no actual label is in use"

src/components/form/text_area/text_area.spec.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/// <reference types="cypress" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../../cypress/support" />
+
+import React, { useState } from 'react';
+import { EuiTextArea } from './text_area';
+
+describe('EuiTextArea', () => {
+  describe('isClearable', () => {
+    it('works for uncontrolled components', () => {
+      cy.realMount(<EuiTextArea isClearable />);
+
+      cy.get('textarea').type('hello world');
+      cy.get('textarea').should('have.value', 'hello world');
+
+      cy.get('[data-test-subj="clearTextAreaButton"]').click();
+      cy.get('textarea').should('have.value', '');
+    });
+
+    it('works for controlled components', () => {
+      const ControlledTextArea = ({}) => {
+        const [value, setValue] = useState('');
+        return (
+          <EuiTextArea
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            isClearable
+          />
+        );
+      };
+      cy.realMount(<ControlledTextArea />);
+
+      cy.get('textarea').type('hello world');
+      cy.get('textarea').should('have.value', 'hello world');
+
+      cy.get('[data-test-subj="clearTextAreaButton"]').click();
+      cy.get('textarea').should('have.value', '');
+    });
+  });
+});

src/components/form/text_area/text_area.tsx

@@ -6,18 +6,32 @@
  * Side Public License, v 1.
  */
 
-import React, { TextareaHTMLAttributes, Ref, FunctionComponent } from 'react';
-import { CommonProps } from '../../common';
+import React, {
+  TextareaHTMLAttributes,
+  Ref,
+  FunctionComponent,
+  useRef,
+  useMemo,
+} from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../../common';
+import { useCombinedRefs } from '../../../services';
+
 import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
 import { useFormContext } from '../eui_form_context';
+import { EuiFormControlLayoutIconsProps } from '../form_control_layout/form_control_layout_icons';
 
 export type EuiTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
   CommonProps & {
+    icon?: EuiFormControlLayoutIconsProps['icon'];
     isLoading?: boolean;
     isInvalid?: boolean;
+    /**
+     * Shows a button that allows users to quickly clear the textarea
+     */
+    isClearable?: boolean;
     /**
      * Expand to fill 100% of the parent.
      * Defaults to `fullWidth` prop of `<EuiForm>`.
@@ -52,9 +66,11 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
     compressed,
     fullWidth = defaultFullWidth,
     id,
+    icon,
     inputRef,
     isLoading,
     isInvalid,
+    isClearable,
     name,
     placeholder,
     resize = 'vertical',
@@ -82,11 +98,35 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
     definedRows = 6;
   }
 
+  const ref = useRef<HTMLTextAreaElement | null>(null);
+  const refs = useCombinedRefs([ref, inputRef]);
+
+  const clear = useMemo(() => {
+    if (isClearable) {
+      return {
+        onClick: () => {
+          if (ref.current) {
+            ref.current.value = '';
+            const event = new Event('input', {
+              bubbles: true,
+              cancelable: false,
+            });
+            ref.current.dispatchEvent(event);
+            ref.current.focus(); // set focus back to the textarea
+          }
+        },
+        'data-test-subj': 'clearTextAreaButton',
+      };
+    }
+  }, [isClearable]);
+
   return (
     <EuiFormControlLayout
       fullWidth={fullWidth}
       isLoading={isLoading}
       isInvalid={isInvalid}
+      clear={clear}
+      icon={icon}
       className="euiFormControlLayout--euiTextArea"
     >
       <EuiValidatableControl isInvalid={isInvalid}>
@@ -96,7 +136,7 @@ export const EuiTextArea: FunctionComponent<EuiTextAreaProps> = (props) => {
           rows={definedRows}
           name={name}
           id={id}
-          ref={inputRef}
+          ref={refs}
           placeholder={placeholder}
         >
           {children}