feat(text-area/input): add new decorator prop

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -8521,6 +8521,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "decorator": Object {
+        "type": "node",
+      },
       "defaultValue": Object {
         "args": Array [
           Array [
@@ -8581,9 +8584,7 @@ Map {
       "rows": Object {
         "type": "number",
       },
-      "slug": Object {
-        "type": "node",
-      },
+      "slug": [Function],
       "value": Object {
         "args": Array [
           Array [
@@ -8856,6 +8857,9 @@ Map {
       "className": Object {
         "type": "string",
       },
+      "decorator": Object {
+        "type": "node",
+      },
       "defaultValue": Object {
         "args": Array [
           Array [
@@ -8924,9 +8928,7 @@ Map {
         ],
         "type": "oneOf",
       },
-      "slug": Object {
-        "type": "node",
-      },
+      "slug": [Function],
       "type": Object {
         "type": "string",
       },

packages/react/src/components/Form/Form.stories.js

@@ -317,8 +317,8 @@ export const withAILabel = (args) => {
               {...rest}
             />
           </DatePicker>
-          <TextInput {...TextInputProps} slug={aiLabel} {...rest} />
-          <TextArea {...textareaProps} slug={aiLabel} {...rest} />
+          <TextInput {...TextInputProps} decorator={aiLabel} {...rest} />
+          <TextArea {...textareaProps} decorator={aiLabel} {...rest} />
           <Dropdown
             id="default"
             titleText="Dropdown title"
@@ -408,15 +408,15 @@ export const withAILabel = (args) => {
           <FluidTextInput
             {...TextInputProps}
             id="fluid-text-input"
-            slug={aiLabel}
+            decorator={aiLabel}
             {...rest}
           />
         </div>
         <div style={{ display: 'flex' }}>
           <FluidTextArea
             {...textareaProps}
             id="fluid-text-area"
-            slug={aiLabel}
+            decorator={aiLabel}
             {...rest}
           />
         </div>

packages/react/src/components/TextArea/TextArea.stories.js

@@ -8,11 +8,12 @@
 import React from 'react';
 
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
-import { View, FolderOpen, Folders } from '@carbon/icons-react';
+import { View, FolderOpen, Folders, Information } from '@carbon/icons-react';
 import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import { default as TextArea, TextAreaSkeleton } from './';
+import { Tooltip } from '../Tooltip';
 
 export default {
   title: 'Components/TextArea',
@@ -26,6 +27,11 @@ export default {
         disable: true,
       },
     },
+    slug: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 
@@ -83,13 +89,26 @@ const aiLabel = (
 );
 
 export const withAILabel = () => (
-  <TextArea
-    labelText="Text Area label"
-    helperText="Optional helper text"
-    rows={4}
-    id="text-area-5"
-    slug={aiLabel}
-  />
+  <>
+    <TextArea
+      labelText="Text Area label"
+      helperText="Optional helper text"
+      rows={4}
+      id="text-area-5"
+      decorator={aiLabel}
+    />
+    <TextArea
+      labelText="Text Area label"
+      helperText="Optional helper text"
+      rows={4}
+      id="text-area-5"
+      decorator={
+        <Tooltip>
+          <Information></Information>
+        </Tooltip>
+      }
+    />
+  </>
 );
 
 export const Skeleton = () => <TextAreaSkeleton />;

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

@@ -38,6 +38,11 @@ export interface TextAreaProps
    */
   cols?: number;
 
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextArea` component
+   */
+  decorator?: ReactNode;
+
   /**
    * Optionally provide the default value of the `<textarea>`
    */
@@ -130,6 +135,7 @@ export interface TextAreaProps
   rows?: number;
 
   /**
+   * @deprecated please use `decorator` instead.
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
    */
   slug?: ReactNode;
@@ -158,6 +164,7 @@ export interface TextAreaProps
 const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
   const {
     className,
+    decorator,
     disabled = false,
     id,
     labelText,
@@ -329,6 +336,7 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
     [`${prefix}--text-area__wrapper--readonly`]: other.readOnly,
     [`${prefix}--text-area__wrapper--warn`]: warn,
     [`${prefix}--text-area__wrapper--slug`]: slug,
+    [`${prefix}--text-area__wrapper--decorator`]: decorator,
   });
 
   const labelClasses = classNames(`${prefix}--label`, {
@@ -466,12 +474,20 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
     />
   );
 
-  // Slug is always size `mini`
-  let normalizedSlug;
-  if (slug && slug['type']?.displayName === 'AILabel') {
-    normalizedSlug = React.cloneElement(slug as React.ReactElement<any>, {
-      size: 'mini',
-    });
+  // AILabel is always size `mini`
+  let normalizedDecorator = React.isValidElement(slug ?? decorator)
+    ? (slug ?? decorator)
+    : null;
+  if (
+    normalizedDecorator &&
+    normalizedDecorator['type']?.displayName === 'AILabel'
+  ) {
+    normalizedDecorator = React.cloneElement(
+      normalizedDecorator as React.ReactElement<any>,
+      {
+        size: 'mini',
+      }
+    );
   }
 
   return (
@@ -490,7 +506,15 @@ const TextArea = React.forwardRef((props: TextAreaProps, forwardRef) => {
           />
         )}
         {input}
-        {normalizedSlug}
+        {slug ? (
+          normalizedDecorator
+        ) : decorator ? (
+          <div className={`${prefix}--text-area__inner-wrapper--decorator`}>
+            {normalizedDecorator}
+          </div>
+        ) : (
+          ''
+        )}
         <span
           className={`${prefix}--text-area__counter-alert`}
           role="alert"
@@ -528,6 +552,11 @@ TextArea.propTypes = {
    */
   counterMode: PropTypes.oneOf(['character', 'word']),
 
+  /**
+   * **Experimental**: Provide a `decorator` component to be rendered inside the `TextArea` component
+   */
+  decorator: PropTypes.node,
+
   /**
    * Optionally provide the default value of the `<textarea>`
    */
@@ -625,7 +654,11 @@ TextArea.propTypes = {
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `TextArea` component
    */
-  slug: PropTypes.node,
+  slug: deprecate(
+    PropTypes.node,
+    'The `slug` prop for `TextArea` has ' +
+      'been deprecated in favor of the new `decorator` prop. It will be removed in the next major release.'
+  ),
 
   /**
    * Provide the current value of the `<textarea>`

packages/react/src/components/TextArea/__tests__/TextArea-test.js

@@ -195,7 +195,21 @@ describe('TextArea', () => {
       expect(screen.getByText('0/500')).toBeInTheDocument();
     });
 
-    it('should respect slug prop', () => {
+    it('should respect decorator prop', () => {
+      render(
+        <TextArea
+          id="textarea-1"
+          labelText="TextArea label"
+          decorator={<AILabel />}
+        />
+      );
+      expect(
+        screen.getByRole('button', { name: 'AI - Show information' })
+      ).toBeInTheDocument();
+    });
+
+    it('should respect deprecated slug prop', () => {
+      const spy = jest.spyOn(console, 'warn').mockImplementation(() => {});
       render(
         <TextArea
           id="textarea-1"
@@ -206,6 +220,7 @@ describe('TextArea', () => {
       expect(
         screen.getByRole('button', { name: 'AI - Show information' })
       ).toBeInTheDocument();
+      spy.mockRestore();
     });
 
     describe('behaves as expected - Component API', () => {

packages/react/src/components/TextInput/TextInput.stories.js

@@ -8,13 +8,14 @@
 import React from 'react';
 import { WithLayer } from '../../../.storybook/templates/WithLayer';
 import FluidForm from '../FluidForm';
-import { View, FolderOpen, Folders } from '@carbon/icons-react';
+import { View, FolderOpen, Folders, Information } from '@carbon/icons-react';
 import Button from '../Button';
 import { AILabel, AILabelContent, AILabelActions } from '../AILabel';
 import { IconButton } from '../IconButton';
 import mdx from './TextInput.mdx';
 
 import { default as TextInput, TextInputSkeleton } from '../TextInput';
+import { Tooltip } from '../Tooltip';
 
 export default {
   title: 'Components/TextInput',
@@ -33,6 +34,11 @@ export default {
         disable: true,
       },
     },
+    slug: {
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 
@@ -108,13 +114,27 @@ const aiLabel = (
 );
 
 export const withAILabel = () => (
-  <TextInput
-    type="text"
-    labelText="Text input label"
-    helperText="Optional help text"
-    id="text-input-ai-label"
-    slug={aiLabel}
-  />
+  <>
+    <TextInput
+      type="text"
+      labelText="Text input label"
+      helperText="Optional help text"
+      id="text-input-ai-label"
+      decorator={aiLabel}
+    />
+    <br />
+    <TextInput
+      type="text"
+      labelText="Text input label"
+      helperText="Optional help text"
+      id="text-input-ai-label"
+      decorator={
+        <Tooltip>
+          <Information></Information>
+        </Tooltip>
+      }
+    />
+  </>
 );
 
 export const Skeleton = () => <TextInputSkeleton />;