diff --git a/frontend/src/components/Input/Input.stories.tsx b/frontend/src/components/Input/Input.stories.tsx index d9c13dadd..a92a123b8 100644 --- a/frontend/src/components/Input/Input.stories.tsx +++ b/frontend/src/components/Input/Input.stories.tsx @@ -17,7 +17,7 @@ const meta: Meta = { size: { control: { type: 'radio', - options: ['small', 'medium'], + options: ['small', 'medium', 'large'], }, }, isValid: { diff --git a/frontend/src/components/Input/Input.style.ts b/frontend/src/components/Input/Input.style.ts index 8bfe7d91c..ad9f9ae91 100644 --- a/frontend/src/components/Input/Input.style.ts +++ b/frontend/src/components/Input/Input.style.ts @@ -8,7 +8,7 @@ const sizes = { gap: 0.5rem; height: 2rem; - padding: 0.625rem 0.75rem; + padding: 0 0.75rem; font-size: 0.75rem; line-height: 100%; @@ -16,10 +16,21 @@ const sizes = { border-radius: 8px; `, medium: css` + gap: 0.875rem; + + height: 2.5rem; + padding: 0 0.875rem; + + font-size: 0.875rem; + line-height: 100%; + + border-radius: 10px; + `, + large: css` gap: 0.75rem; height: 3rem; - padding: 1rem; + padding: 0 1rem; font-size: 1rem; line-height: 100%; diff --git a/frontend/src/components/Input/Input.tsx b/frontend/src/components/Input/Input.tsx index 043607d0e..7602c07df 100644 --- a/frontend/src/components/Input/Input.tsx +++ b/frontend/src/components/Input/Input.tsx @@ -11,12 +11,12 @@ import { import * as S from './Input.style'; export interface BaseProps extends HTMLAttributes { - size?: 'small' | 'medium'; + size?: 'small' | 'medium' | 'large'; variant?: 'filled' | 'outlined' | 'text'; isValid?: boolean; } export interface TextFieldProps extends InputHTMLAttributes { - inputSize?: 'small' | 'medium'; + inputSize?: 'small' | 'medium' | 'large'; } export interface LabelProps extends LabelHTMLAttributes {}