feat(Textarea): Add slots and deprecate extraActions (#2541)

Author: syeo66

.changeset/petite-otters-invent.md

@@ -0,0 +1,5 @@
+---
+"@frontify/fondue-components": minor
+---
+
+feat(Textarea): Add slots and deprecate extraActions

packages/components/src/components/Textarea/Textarea.stories.tsx

@@ -1,31 +1,20 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { IconClipboard, IconNook, IconQuestionMark } from '@frontify/fondue-icons';
+import { IconClipboard, IconNook } from '@frontify/fondue-icons';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { type ComponentProps } from 'react';
 import { action } from 'storybook/actions';
 
-import { type ExtraAction, Textarea } from './Textarea';
-
-const ExtraActions: ExtraAction[] = [
-    {
-        icon: <IconClipboard size={16} />,
-        title: 'Save to Clipboard',
-        callback: () => {
-            alert('Mock Copied to Clipboard');
-        },
-    },
-    {
-        icon: <IconQuestionMark size={16} />,
-        title: 'Help Desk',
-        callback: () => alert('Here to Help'),
-    },
-];
+import { Textarea, TextareaRoot, TextareaSlot } from './Textarea';
 
 type Story = StoryObj<typeof meta>;
 
-const meta: Meta<typeof Textarea> = {
+const meta: Meta<typeof TextareaRoot> = {
     title: 'Components/Textarea',
-    component: Textarea,
+    component: TextareaRoot,
+    subcomponents: {
+        'Textarea.Slot': TextareaSlot,
+    },
     tags: ['autodocs'],
     parameters: {
         status: {
@@ -51,36 +40,49 @@ const meta: Meta<typeof Textarea> = {
         selectable: true,
         value: undefined,
     },
+    render: (args) => {
+        // Used to get the correct component in the Storybook for the simple cases (`Textarea` instead of `Textarea.Root`)
+        // More complex cases are using the Story `render` function
+        const Component = (props: ComponentProps<typeof Textarea>) => <Textarea {...props} />;
+        Component.displayName = 'Textarea';
+        return <Component {...args} />;
+    },
 };
 
 export default meta;
 
-export const Default: Story = {
-    render: (args) => <Textarea {...args} />,
-};
+export const Default: Story = {};
 
 export const WithDecoratorAndAutosize: Story = {
     args: {
         autosize: true,
         decorator: <IconNook size={16} />,
         placeholder: 'Enter some long form text here',
     },
-    render: (args) => <Textarea {...args} />,
 };
 
-export const WithExtraActions: Story = {
+export const Required: Story = {
     args: {
-        extraActions: ExtraActions,
         placeholder: 'Enter some long form text here',
-        clearable: true,
+        required: true,
     },
-    render: (args) => <Textarea {...args} />,
 };
 
-export const Required: Story = {
+export const WithSlots: Story = {
     args: {
         placeholder: 'Enter some long form text here',
-        required: true,
+        autosize: true,
     },
-    render: (args) => <Textarea {...args} />,
+    render: (args) => (
+        <Textarea.Root {...args}>
+            <Textarea.Slot name="left">
+                <IconNook size={16} />
+            </Textarea.Slot>
+            <Textarea.Slot name="right">
+                <button onClick={() => alert('Action clicked!')} style={{ cursor: 'pointer' }}>
+                    <IconClipboard size={16} />
+                </button>
+            </Textarea.Slot>
+        </Textarea.Root>
+    ),
 };

packages/components/src/components/Textarea/Textarea.tsx

@@ -12,13 +12,18 @@ import {
     type ForwardedRef,
     type KeyboardEventHandler,
     type ReactElement,
+    type ReactNode,
     type SyntheticEvent,
 } from 'react';
 
 import { useSyncRefs } from '#/hooks/useSyncRefs';
+import { cn } from '#/utilities/styleUtilities';
 
 import styles from './styles/textarea.module.scss';
 
+/**
+ * @deprecated Use Textarea.Slot instead for custom actions
+ */
 export type ExtraAction = {
     icon: ReactElement;
     title: string;
@@ -32,6 +37,10 @@ type TextareaProps = {
      * The id of the textarea
      */
     id?: string;
+    /**
+     * The place where the textarea slots are placed
+     */
+    children?: ReactNode;
     /**
      * If `true`, Textarea will have `autoComplete` functionality
      */
@@ -55,6 +64,7 @@ type TextareaProps = {
     disabled?: boolean;
     /**
      * Collection of extra actions the input can preform
+     * @deprecated Use Textarea.Slot instead for custom actions
      */
     extraActions?: ExtraAction[];
     /**
@@ -118,11 +128,12 @@ type TextareaProps = {
     value?: string;
 };
 
-const TextareaComponent = (
+export const TextareaRoot = (
     {
         'data-test-id': dataTestId = 'fondue-textarea',
         autocomplete,
         autosize,
+        children,
         clearable,
         decorator,
         defaultValue,
@@ -179,46 +190,47 @@ const TextareaComponent = (
             data-disabled={disabled || readOnly}
             data-has-decorator={decorator ? true : false}
             data-has-tools={hasTools}
-            data-replicated-value={value}
             data-resizable={resizable}
             data-status={status}
             data-max-rows={!!maxRows}
             data-test-id={dataTestId}
             style={{ '--max-rows': `${maxRows}` } as CSSProperties}
         >
             {decorator ? <div className={styles.decorator}>{decorator}</div> : null}
-            <textarea
-                {...props}
-                onMouseDown={(mouseEvent) => {
-                    wasClicked.current = true;
-                    mouseEvent.currentTarget.dataset.showFocusRing = 'false';
-                }}
-                onFocus={(focusEvent) => {
-                    if (!wasClicked.current) {
-                        focusEvent.target.dataset.showFocusRing = 'true';
-                    }
-                    props.onFocus?.(focusEvent);
-                }}
-                onBlur={(blurEvent) => {
-                    blurEvent.target.dataset.showFocusRing = 'false';
-                    wasClicked.current = false;
-                    props.onBlur?.(blurEvent);
-                }}
-                autoComplete={autocomplete ? 'on' : 'off'}
-                className={styles.textarea}
-                disabled={disabled}
-                onKeyDown={handleKeyDown}
-                onInput={(event) => setValue(event.currentTarget.value)}
-                onSelect={(event) => {
-                    if (!selectable) {
-                        event.currentTarget.selectionStart = event.currentTarget.selectionEnd;
-                    }
-                }}
-                readOnly={readOnly}
-                ref={ref}
-                rows={rows}
-                value={value}
-            ></textarea>
+            <div className={styles.textareaWrapper} data-replicated-value={value}>
+                <textarea
+                    {...props}
+                    onMouseDown={(mouseEvent) => {
+                        wasClicked.current = true;
+                        mouseEvent.currentTarget.dataset.showFocusRing = 'false';
+                    }}
+                    onFocus={(focusEvent) => {
+                        if (!wasClicked.current) {
+                            focusEvent.target.dataset.showFocusRing = 'true';
+                        }
+                        props.onFocus?.(focusEvent);
+                    }}
+                    onBlur={(blurEvent) => {
+                        blurEvent.target.dataset.showFocusRing = 'false';
+                        wasClicked.current = false;
+                        props.onBlur?.(blurEvent);
+                    }}
+                    autoComplete={autocomplete ? 'on' : 'off'}
+                    className={styles.textarea}
+                    disabled={disabled}
+                    onKeyDown={handleKeyDown}
+                    onInput={(event) => setValue(event.currentTarget.value)}
+                    onSelect={(event) => {
+                        if (!selectable) {
+                            event.currentTarget.selectionStart = event.currentTarget.selectionEnd;
+                        }
+                    }}
+                    readOnly={readOnly}
+                    ref={ref}
+                    rows={rows}
+                    value={value}
+                ></textarea>
+            </div>
             {status === 'loading' && <div className={styles.loadingStatus} data-test-id={`${dataTestId}-loader`} />}
             {hasTools && (
                 <div className={styles.tools}>
@@ -250,9 +262,34 @@ const TextareaComponent = (
                     )}
                 </div>
             )}
+            {children}
         </div>
     );
 };
+TextareaRoot.displayName = 'Textarea.Root';
+
+export type TextareaSlotProps = {
+    children: ReactNode;
+    name?: 'left' | 'right';
+    className?: string;
+};
+
+export const TextareaSlot = (
+    { name, className, ...slotProps }: TextareaSlotProps,
+    forwardedRef: ForwardedRef<HTMLDivElement>,
+) => {
+    return <div data-slot data-name={name} {...slotProps} ref={forwardedRef} className={cn(styles.slot, className)} />;
+};
+
+TextareaSlot.displayName = 'Textarea.Slot';
+
+const ForwardedRefTextareaRoot = forwardRef<HTMLTextAreaElement, TextareaProps>(TextareaRoot);
+const ForwardedRefTextareaSlot = forwardRef<HTMLDivElement, TextareaSlotProps>(TextareaSlot);
 
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(TextareaComponent);
-Textarea.displayName = 'Textarea';
+// @ts-expect-error We support both single component (without slots) and compound components (with slots)
+export const Textarea: typeof TextareaRoot & {
+    Root: typeof ForwardedRefTextareaRoot;
+    Slot: typeof ForwardedRefTextareaSlot;
+} = ForwardedRefTextareaRoot;
+Textarea.Root = ForwardedRefTextareaRoot;
+Textarea.Slot = ForwardedRefTextareaSlot;