feat(vara-ui): upd textarea

gear-tech · Dec 4, 2024 · 7ac5c76 · 7ac5c76
1 parent 1151eae
commit 7ac5c76
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 33 deletions.
diff --git a/utils/vara-ui/src/components/textarea/helpers.ts b/utils/vara-ui/src/components/textarea/helpers.ts
@@ -0,0 +1,5 @@
+const textareaSizes = ['default', 'medium', 'small'] as const;
+type ITextareaSizes = (typeof textareaSizes)[number];
+
+export { textareaSizes };
+export type { ITextareaSizes };
diff --git a/utils/vara-ui/src/components/textarea/textarea.module.scss b/utils/vara-ui/src/components/textarea/textarea.module.scss
@@ -1,30 +1,32 @@
 .root {
   &.disabled {
-    pointer-events: none;
-    opacity: 0.3;
-  }
-}
+    cursor: not-allowed;
 
-.base {
-  position: relative;
-}
+    * {
+      pointer-events: none;
+    }
 
-.textarea,
-.label {
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0.009em;
-  color: #010500;
+    .fieldset {
+      background-color: #eceded;
+      border-color: #d0d5dd;
+    }
 
-  &.default {
-    font-size: 16px;
-  }
+    .textarea:disabled {
+      cursor: not-allowed;
+    }
 
-  &.small {
-    font-size: 14px;
+    .textarea,
+    .label {
+      color: #58696e80;
+    }
   }
 }
 
+.base {
+  position: relative;
+  user-select: none;
+}
+
 .textarea {
   outline: none;
   resize: none;
@@ -36,6 +38,10 @@
   padding-right: 14px;
   padding-left: 14px;
 
+  &::placeholder {
+    color: #58696e;
+  }
+
   &:not(:focus) {
     &::placeholder {
       color: transparent;
@@ -60,32 +66,41 @@
 
   &:focus {
     ~ .fieldset {
-      border-color: #00b387;
+      border-color: #53eece;
 
       .legendLabel {
-        color: #00b387;
+        color: #53eece;
       }
     }
   }
 
   &.error {
+    ~ .label {
+      color: #ff3231cc;
+    }
+
     ~ .fieldset {
-      border-color: #fc174d;
+      border-color: #ff3231cc;
 
       .legendLabel {
-        color: #fc174d;
+        color: #ff3231cc;
       }
     }
   }
 
   &.default {
-    padding-top: 13px;
-    padding-bottom: 13px;
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+
+  &.medium {
+    padding-top: 9px;
+    padding-bottom: 9px;
   }
 
   &.small {
-    padding-top: 8px;
-    padding-bottom: 8px;
+    padding-top: 6px;
+    padding-bottom: 6px;
   }
 }
 
@@ -96,11 +111,35 @@
   left: 13px;
 
   &.default {
-    top: 13px;
+    top: 14px;
+  }
+
+  &.medium {
+    top: 9px;
   }
 
   &.small {
-    top: 8px;
+    top: 6px;
+  }
+}
+
+.textarea,
+.label {
+  font-weight: 400;
+  line-height: 24px;
+  color: #000000;
+
+  &.default {
+    font-size: 16px;
+  }
+
+  &.medium {
+    font-size: 16px;
+  }
+
+  &.small {
+    font-size: 14px;
+    line-height: 20px;
   }
 }
 
@@ -116,17 +155,19 @@
   bottom: 0;
   left: 0;
   right: 0;
+  z-index: -1;
 
-  border: 1px solid #0000003b;
   border-radius: 4px;
+  background-color: #ffffff;
+  border: 1px solid #d0d5dd;
+  box-shadow: 0 1px 2px 0 #1018280d;
 }
 
 .legend,
 .message {
   font-size: 12px;
   font-weight: 400;
   line-height: 1;
-  letter-spacing: 0.01em;
 }
 
 .legend {
@@ -140,10 +181,73 @@
 
 .message {
   margin: 4px 0 0 0;
-
-  color: #fc174d;
+  color: #ff3231cc;
 }
 
 .block {
   width: 100%;
 }
+
+
+:global(.dark-theme) {
+  .root {
+    &.disabled {
+      .fieldset {
+        background-color: #282c301a;
+        border-color: #ffffff0a;
+      }
+
+      .textarea,
+      .label {
+        color: #9cacb166;
+      }
+    }
+  }
+
+  .fieldset {
+    background-color: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.04);
+    box-shadow: 0 1px 2px 0 #1018280d;
+  }
+
+  .label,
+  .textarea {
+    color: #828b8e;
+  }
+
+  .textarea {
+    color: #f6f6f6e5;
+
+    &:focus::placeholder {
+      color: #828b8e;
+    }
+
+    &:focus {
+      ~ .fieldset {
+        border-color: #0fa885;
+
+        .legendLabel {
+          color: #0fa885;
+        }
+      }
+    }
+
+    &.error {
+      ~ .label {
+        color: #d73b4f;
+      }
+
+      ~ .fieldset {
+        border-color: #d73b4f;
+
+        .legendLabel {
+          color: #d73b4f;
+        }
+      }
+    }
+
+    .message {
+      color: #d73b4f;
+    }
+  }
+}
diff --git a/utils/vara-ui/src/components/textarea/textarea.stories.ts b/utils/vara-ui/src/components/textarea/textarea.stories.ts
@@ -1,12 +1,28 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Textarea } from './textarea';
+import { textareaSizes } from './helpers';
 
 type Type = typeof Textarea;
 type Story = StoryObj<Type>;
 
 const meta: Meta<Type> = {
   title: 'Textarea',
   component: Textarea,
+  args: {
+    label: '',
+    size: 'default',
+    disabled: false,
+    block: false,
+    placeholder: 'Placeholder',
+  },
+  argTypes: {
+    disabled: { control: 'boolean' },
+    block: { control: 'boolean' },
+    size: {
+      options: textareaSizes,
+      control: { type: 'select' },
+    },
+  },
 };
 
 const Default: Story = {

diff --git a/utils/vara-ui/src/components/textarea/textarea.tsx b/utils/vara-ui/src/components/textarea/textarea.tsx
@@ -1,9 +1,10 @@
 import { TextareaHTMLAttributes, ReactNode, useId, forwardRef } from 'react';
 import cx from 'clsx';
 import styles from './textarea.module.scss';
+import type { ITextareaSizes } from './helpers.ts';
 
 type Props = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'id' | 'size'> & {
-  size?: 'default' | 'small';
+  size?: ITextareaSizes;
   label?: string;
   error?: ReactNode;
   block?: boolean;
@@ -24,6 +25,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, Props>(
             className={cx(styles.textarea, styles[size], error && styles.error)}
             placeholder={placeholder}
             ref={ref}
+            disabled={disabled}
             {...attrs}
           />