feat: Textarea, add endAdornment

components/Textarea/Textarea.stories.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
 
 import { Textarea, TextareaProps, TextareaVariants } from './Textarea';
 import { Box } from '../Box';
 import { Flex } from '../Flex';
 import ignoreArgType from '../../utils/ignoreArgType';
+import { CopyIcon, CheckCircledIcon, InfoCircledIcon } from '@radix-ui/react-icons';
+import { styled } from '../../stitches.config';
 
 const BaseTextarea = (props: TextareaProps): JSX.Element => <Textarea {...props} />;
 
@@ -91,6 +93,57 @@ export const Ghost: ComponentStory<typeof TextareaForStory> = (args) => (
 );
 Ghost.args = { defaultValue: 'default value', variant: 'ghost', rows: 2 };
 
+const StyledCopyIcon = styled(CopyIcon, {
+  '@hover': {
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  }
+});
+
+export const EndAdornment = Template.bind({});
+EndAdornment.args = {
+  endAdornment: <InfoCircledIcon />
+}
+
+export const ReadOnlyCopy: ComponentStory<typeof TextareaForStory> = (args) => {
+  const toCopy = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+  labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+  laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+  voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`;
+  const [copied, setCopied] = useState(false);
+
+  const onCopy = useCallback(
+    async () => {
+      await navigator.clipboard.writeText(toCopy)
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    },
+    [toCopy, setCopied],
+  );
+
+  return (
+    <Flex direction="column" gap={2}>
+      <TextareaForStory
+        id={`readOnly-copy`}
+        label="readOnly Copy"
+        rows={10}
+        cols={40}
+        value={toCopy}
+        readOnly
+        endAdornment={copied ? (
+          <CheckCircledIcon aria-label='Copied' />
+        ) : (
+          <StyledCopyIcon aria-label='Copy' onClick={onCopy} />
+        )}
+        {...args}
+      />
+    </Flex>
+  );
+}
 
 const Customize: ComponentStory<typeof TextareaForStory> = (args) => (
   <Textarea {...args} css={{ c: '$hiContrast' }} />

components/Textarea/Textarea.tsx

@@ -17,7 +17,6 @@ const StyledTextarea = styled('textarea', {
   fontFamily: '$rubik',
   margin: '0',
   outline: 'none',
-  padding: '0',
   WebkitTapHighlightColor: 'rgba(0,0,0,0)',
 
   // Custom
@@ -116,6 +115,12 @@ const StyledTextarea = styled('textarea', {
       horizontal: {
         resize: 'horizontal'
       }
+    },
+    endAdornment: {
+      true: {
+        paddingBottom: '$5',
+        paddingRight: '$5',
+      }
     }
   },
   defaultVariants: {
@@ -215,20 +220,35 @@ const TextareaWrapper = styled('div', {
   },
 });
 
-export interface TextareaVariants extends VariantProps<typeof StyledTextarea> { }
+const AdornmentWrapperEnd = styled('div', {
+  position: 'absolute',
+  bottom: '$2',
+  right: '$3',
+  minWidth: '$5',
+  minHeight: '$5',
+  zIndex: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export interface TextareaVariants extends Omit<VariantProps<typeof StyledTextarea>, 'endAdornment'> { }
 
-export interface TextareaProps extends TextareaVariants, Omit<React.ComponentProps<typeof StyledTextarea>, 'css'> {
+export interface TextareaProps extends TextareaVariants, Omit<React.ComponentProps<typeof StyledTextarea>, 'css' | 'endAdornment'> {
   label?: string
-  rootCss?: CSS,
+  endAdornment?: React.ReactNode
+  rootCss?: CSS
   css?: CSS
 }
 
 export const Textarea = React.forwardRef<React.ElementRef<typeof StyledTextarea>, TextareaProps>(
-  ({ state, disabled, onFocus, onBlur, label, id, rootCss, css, ...props }, forwardedRef) => {
+  ({ state, disabled, onFocus, onBlur, label, id, rootCss, css, endAdornment, ...props }, forwardedRef) => {
     const [hasFocus, setHasFocus] = React.useState(false);
 
     const invalid = React.useMemo(() => state === 'invalid', [state]);
 
+    const hasEndAdornment = React.useMemo(() => Boolean(endAdornment), [endAdornment]);
+
     const labelVariant = React.useMemo(() => {
       if (disabled) {
         return 'subtle';
@@ -274,8 +294,10 @@ export const Textarea = React.forwardRef<React.ElementRef<typeof StyledTextarea>
             disabled={disabled}
             state={state}
             onFocus={handleFocus} onBlur={handleBlur}
+            endAdornment={hasEndAdornment}
             {...props}
           />
+          {hasEndAdornment && (<AdornmentWrapperEnd>{endAdornment}</AdornmentWrapperEnd>)}
         </TextareaWrapper>
       </Box>
     )