feat: update textarea to new styles (#2016)

* feat: update textarea to new styles

* chore: fix used component in tools app

* chore: add changeset

.changeset/loud-horses-fetch.md

@@ -0,0 +1,5 @@
+---
+"@kadena/react-ui": patch
+---
+
+feat: update textarea component to new styling

packages/apps/tools/src/pages/transactions/cross-chain-transfer-finisher/index.tsx

@@ -604,7 +604,7 @@ const CrossChainTransferFinisher: FC = () => {
                       <TextareaField
                         autoResize
                         isReadOnly
-                        inputFont="code"
+                        fontType="code"
                         id="sig-text-area"
                         value={formattedSigData}
                         aria-label={t('sigData')}

packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.css.ts

@@ -1,54 +1,34 @@
-import { style } from '@vanilla-extract/css';
-import { atoms, token } from '../../../styles';
+import { style, styleVariants } from '@vanilla-extract/css';
+import { token } from '../../../styles';
 
 export const addon = style({
   position: 'absolute',
   insetBlockStart: token('spacing.sm'),
   insetInlineEnd: token('spacing.sm'),
 });
 
-export const textarea = style([
-  atoms({
-    borderRadius: 'sm',
-    backgroundColor: 'input.default',
-    border: 'none',
-    color: 'text.base.default',
-    outline: 'none',
-    flex: 1,
-    overflow: 'hidden',
-  }),
-  {
-    paddingInline: token('spacing.md'),
-    paddingBlock: token('spacing.sm'),
-    minHeight: token('size.n20'),
-    resize: 'none',
-    '::placeholder': {
-      color: token('color.text.subtlest.default'),
+const textareaBase = style({
+  resize: 'none',
+  scrollbarWidth: 'none',
+});
+
+export const textarea = styleVariants({
+  sm: [
+    textareaBase,
+    {
+      minHeight: token('size.n24'),
     },
-    boxShadow: `0px 1px 0 0 ${token('color.border.base.default')}`,
-    outlineOffset: '2px',
-    selectors: {
-      '&[data-outlined]': {
-        border: `2px solid ${token('color.border.base.default')}`,
-      },
-      [`&:has(~ ${addon})`]: {
-        paddingInlineEnd: `calc(var(--end-addon-width) + ${token(
-          'spacing.lg',
-        )})`,
-      },
-      '&[data-positive]': {
-        outline: `2px solid ${token('color.border.semantic.positive.@focus')}`,
-      },
-      '&[data-disabled]': {
-        pointerEvents: 'none',
-        backgroundColor: token('color.background.layer.default'),
-      },
-      '&[data-focused]': {
-        outline: `2px solid ${token('color.border.semantic.info.@focus')}`,
-      },
-      '&[data-invalid]': {
-        outline: `2px solid ${token('color.border.semantic.negative.@focus')}`,
-      },
+  ],
+  md: [
+    textareaBase,
+    {
+      minHeight: token('size.n30'),
     },
-  },
-]);
+  ],
+  lg: [
+    textareaBase,
+    {
+      minHeight: '140px',
+    },
+  ],
+});

packages/libs/react-ui/src/components/Form/TextareaField/TextareaField.stories.tsx

@@ -1,15 +1,22 @@
 import { MonoAdd } from '@kadena/react-icons/system';
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import { onLayer2, withContentWidth } from '../../../storyDecorators';
+import {
+  getVariants,
+  onLayer2,
+  withContentWidth,
+} from '../../../storyDecorators';
 import { atoms } from '../../../styles';
 import { Button } from '../../Button';
 import { Text } from '../../Typography/Text/Text';
 import { CopyButton } from '../ActionButtons/CopyButton';
 import { Form } from '../Form';
+import { input } from '../Form.css';
 import { TextareaField } from '../TextareaField';
 import type { ITextareaFieldProps } from './TextareaField';
 
+const { variant, fontType, size } = getVariants(input);
+
 const formStoryClass = atoms({
   display: 'flex',
   flexDirection: 'column',
@@ -30,30 +37,34 @@ const meta: Meta<ITextareaFieldProps> = {
     },
   },
   argTypes: {
-    onChange: {
-      description: 'onChange handler',
+    variant: {
+      description: 'Variant of the input.',
       control: {
-        disable: true,
+        type: 'select',
       },
+      options: variant,
       table: {
-        disable: true,
+        type: { summary: 'string' },
+        defaultValue: { summary: 'body' },
       },
     },
-    onValueChange: {
-      description: 'onValueChange handler',
+    size: {
+      description: 'Size of the input.',
       control: {
-        disable: true,
+        type: 'select',
       },
+      options: size,
       table: {
-        disable: true,
+        type: { summary: 'string' },
+        defaultValue: { summary: 'md' },
       },
     },
-    inputFont: {
+    fontType: {
       description: 'Font to use for the input.',
       control: {
         type: 'select',
-        options: ['body', 'code'],
       },
+      options: fontType,
       table: {
         type: { summary: 'string' },
         defaultValue: { summary: 'body' },
@@ -68,7 +79,6 @@ const meta: Meta<ITextareaFieldProps> = {
         type: { summary: 'string' },
       },
     },
-
     info: {
       description: 'Additional information to display below the input.',
       control: {
@@ -88,7 +98,6 @@ const meta: Meta<ITextareaFieldProps> = {
         defaultValue: { summary: 'false' },
       },
     },
-
     label: {
       description: 'Label to display above the input.',
       control: {
@@ -98,7 +107,6 @@ const meta: Meta<ITextareaFieldProps> = {
         type: { summary: 'string' },
       },
     },
-
     placeholder: {
       description: 'Placeholder text to display in the input.',
       control: {
@@ -108,7 +116,6 @@ const meta: Meta<ITextareaFieldProps> = {
         type: { summary: 'string' },
       },
     },
-
     errorMessage: {
       description: 'Error message to display below the input.',
       control: {
@@ -118,17 +125,6 @@ const meta: Meta<ITextareaFieldProps> = {
         type: { summary: 'string' },
       },
     },
-    isPositive: {
-      description: 'Applies positive visual styling.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-
     isInvalid: {
       description: 'Marks the input as invalid and applies visual styling.',
       control: {
@@ -139,7 +135,6 @@ const meta: Meta<ITextareaFieldProps> = {
         defaultValue: { summary: 'false' },
       },
     },
-
     isDisabled: {
       description: 'Disables the input and applies visual styling.',
       control: {
@@ -150,7 +145,6 @@ const meta: Meta<ITextareaFieldProps> = {
         defaultValue: { summary: 'false' },
       },
     },
-
     isReadOnly: {
       description: 'Prevents the input from being edited.',
       control: {
@@ -161,7 +155,6 @@ const meta: Meta<ITextareaFieldProps> = {
         defaultValue: { summary: 'false' },
       },
     },
-
     isRequired: {
       description: 'Marks the input as required',
       control: {
@@ -172,6 +165,24 @@ const meta: Meta<ITextareaFieldProps> = {
         defaultValue: { summary: 'false' },
       },
     },
+    onChange: {
+      description: 'onChange handler',
+      control: {
+        disable: true,
+      },
+      table: {
+        disable: true,
+      },
+    },
+    onValueChange: {
+      description: 'onValueChange handler',
+      control: {
+        disable: true,
+      },
+      table: {
+        disable: true,
+      },
+    },
   },
 };
 
@@ -182,6 +193,9 @@ type Story = StoryObj<ITextareaFieldProps>;
 export const TextareaFieldStory: Story = {
   name: 'TextareaField',
   args: {
+    variant: 'default',
+    size: 'md',
+    fontType: 'ui',
     isDisabled: false,
     tag: 'tag',
     description: 'This is helper text',
@@ -196,7 +210,6 @@ export const TextareaFieldStory: Story = {
     isRequired: false,
     autoResize: false,
     errorMessage: '',
-    inputFont: 'body',
   },
   render: (props) => {
     const [value, setValue] = useState<string>('');
@@ -396,3 +409,14 @@ export const WithCopyButton: Story = {
     );
   },
 };
+export const WithAddons: Story = {
+  render: () => {
+    return (
+      <TextareaField
+        label="With Addons"
+        startVisual={<MonoAdd />}
+        endAddon={<Button>Button</Button>}
+      />
+    );
+  },
+};