hotfix: change inputProps style

sopt-makers · Apr 17, 2024 · 3172aa1 · 3172aa1
1 parent 1e0f73e
commit 3172aa1
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/.changeset/wise-scissors-reply.md b/.changeset/wise-scissors-reply.md
@@ -0,0 +1,5 @@
+---
+"@sopt-makers/ui": patch
+---
+
+fix inputProps style
diff --git a/apps/docs/src/stories/TextArea.stories.tsx b/apps/docs/src/stories/TextArea.stories.tsx
@@ -12,6 +12,7 @@ interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
   height?: string;
   isError?: boolean;
   onSubmit: () => void;
+  fixedHeight?: number;
 }
 
 const useTextArea = (props: TextAreaProps) => {
@@ -30,7 +31,7 @@ export default {
   tags: ['autodocs'],
   args: {
     value: '',
-    style: { width: '335px', height: '48px' },
+    style: { width: '335px' },
     onSubmit: fn(),
   },
   argTypes: {
@@ -54,19 +55,19 @@ export const Default: StoryObj<TextAreaProps> = {
   }
 };
 
-export const DoubleLine: StoryObj<TextAreaProps> = {
+export const FixedHeight: StoryObj<TextAreaProps> = {
   args: {
     labelText: 'Label',
     descriptionText: 'Description',
     placeholder: 'Placeholder...',
-    value: 'text\ntext',
+    value: 'text\ntext\ntest',
     maxLength: 300,
     isError: false,
     errorMessage: 'error message',
     required: true,
     readOnly: false,
     disabled: false,
-    style: { width: '335px', height: '76px' },
+    fixedHeight: 100,
   }
 };
 

diff --git a/packages/ui/Input/TextArea.tsx b/packages/ui/Input/TextArea.tsx
@@ -57,12 +57,12 @@ function TextArea(props: TextAreaProps) {
 
   const required = inputProps.required ? <span className={S.required}>*</span> : null;
   const description = descriptionText ? <p className={S.description}>{descriptionText}</p> : null;
-  const input = <textarea {...restInputProps} className={`${S.input} ${S.textarea} ${hasError() ? S.inputError : ''}`} onChange={handleInputChange} onKeyDown={handleKeyPress} style={{ height: `${fixedHeight ?? calcHeight}px` }} value={value} />;
+  const input = <textarea {...restInputProps} className={`${S.input} ${S.textarea} ${hasError() ? S.inputError : ''}`} onChange={handleInputChange} onKeyDown={handleKeyPress} style={{ ...inputProps.style, height: `${fixedHeight ?? calcHeight}px` }} value={value} />;
 
   return <div className={className} style={{ position: 'relative' }}>
     {labelText ? <label className={S.label}><span>{labelText}{required}</span>{description}{input}</label> : <div className={S.inputWrap}>{description}{input}</div>}
 
-    <button className={S.submitButton} disabled={disabled} onClick={onSubmit} style={{ ...inputProps.style, transform: `translateY(-${buttonPosition}px)` }} type="submit"><SendIcon disabled={disabled} /></button>
+    <button className={S.submitButton} disabled={disabled} onClick={onSubmit} style={{ transform: `translateY(-${buttonPosition}px)` }} type="submit"><SendIcon disabled={disabled} /></button>
 
     <div className={S.inputBottom}>
       {hasError() ? <div className={S.errorMessage}><AlertCircleIcon /><p>{errorMessage ?? 'error'}</p></div> : <div> </div>}