From 0f80683d82e5c4e55cc66c52fbf84abdf499d3b0 Mon Sep 17 00:00:00 2001
From: LTakhyunKim <kimkih1218@lunit.io>
Date: Tue, 31 Oct 2023 13:58:29 +0900
Subject: [PATCH 1/3] style(textfield): add error focus style

---
 .../design-system/src/components/TextField/TextField.style.ts  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/design-system/src/components/TextField/TextField.style.ts b/packages/design-system/src/components/TextField/TextField.style.ts
index ba32c423..2c75be20 100644
--- a/packages/design-system/src/components/TextField/TextField.style.ts
+++ b/packages/design-system/src/components/TextField/TextField.style.ts
@@ -83,6 +83,9 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
     "&.Mui-focused fieldset": {
       border: `1px solid ${lunit_token.core.focused}`,
     },
+    "&.Mui-error.Mui-focused fieldset": {
+      border: `2px solid ${lunit_token.component.textfield_border_error}`,
+    },
     "&.Mui-disabled": {
       opacity: 0.38,
       "&:hover::before": {

From 7df4c47d94c71c5482b2cef57c56a2e8e9597a29 Mon Sep 17 00:00:00 2001
From: LTakhyunKim <kimkih1218@lunit.io>
Date: Tue, 31 Oct 2023 14:07:35 +0900
Subject: [PATCH 2/3] feat(textfield): add error focused story

---
 .../TextField/TextFieldMulti.stories.tsx      |  6 +++++
 .../TextField/TextFieldSingle.stories.tsx     | 24 +++++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/packages/design-system/src/stories/components/TextField/TextFieldMulti.stories.tsx b/packages/design-system/src/stories/components/TextField/TextFieldMulti.stories.tsx
index 87e30350..18f26de2 100644
--- a/packages/design-system/src/stories/components/TextField/TextFieldMulti.stories.tsx
+++ b/packages/design-system/src/stories/components/TextField/TextFieldMulti.stories.tsx
@@ -107,6 +107,9 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error Focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -123,6 +126,9 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} multiline focused />
         </TableCell>
+        <TableCell>
+          <TextField {...args} multiline error focused />
+        </TableCell>
         <TableCell>
           <TextField {...args} multiline disabled />
         </TableCell>
diff --git a/packages/design-system/src/stories/components/TextField/TextFieldSingle.stories.tsx b/packages/design-system/src/stories/components/TextField/TextFieldSingle.stories.tsx
index 0ccd2560..840d696a 100644
--- a/packages/design-system/src/stories/components/TextField/TextFieldSingle.stories.tsx
+++ b/packages/design-system/src/stories/components/TextField/TextFieldSingle.stories.tsx
@@ -99,6 +99,9 @@ const SingleTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error Focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -115,6 +118,9 @@ const SingleTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled />
         </TableCell>
@@ -137,6 +143,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           focused
         </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error focused
+        </TableCell>
         <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
           Disabled
         </TableCell>
@@ -156,6 +165,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused leftIcon={<Bell />} />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused leftIcon={<Bell />} />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled leftIcon={<Bell />} />
         </TableCell>
@@ -173,6 +185,9 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         <TableCell>
           <TextField {...args} focused rightIcon={<Bell />} />
         </TableCell>
+        <TableCell>
+          <TextField {...args} error focused rightIcon={<Bell />} />
+        </TableCell>
         <TableCell>
           <TextField {...args} disabled rightIcon={<Bell />} />
         </TableCell>
@@ -195,6 +210,15 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
             rightIcon={<Bell />}
           />
         </TableCell>
+        <TableCell>
+          <TextField
+            {...args}
+            error
+            focused
+            leftIcon={<Bell />}
+            rightIcon={<Bell />}
+          />
+        </TableCell>
         <TableCell>
           <TextField
             {...args}

From 3137c911f00faa4decfd241056b70bfb7d8bbecc Mon Sep 17 00:00:00 2001
From: LTakhyunKim <kimkih1218@lunit.io>
Date: Tue, 31 Oct 2023 15:51:44 +0900
Subject: [PATCH 3/3] style(textfield): delete unused overflow hidden style

---
 .../design-system/src/components/TextField/TextField.style.ts    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/design-system/src/components/TextField/TextField.style.ts b/packages/design-system/src/components/TextField/TextField.style.ts
index 2c75be20..d2cd4806 100644
--- a/packages/design-system/src/components/TextField/TextField.style.ts
+++ b/packages/design-system/src/components/TextField/TextField.style.ts
@@ -113,7 +113,6 @@ const commonStyle = ({ lunit_token }: { lunit_token: ColorToken }) => ({
       },
     },
     background: lunit_token.component.textfield_bg,
-    overflow: "hidden",
     color: lunit_token.core.text_normal,
     "&:hover": {
       position: "relative",