From 06d4c66120fd9b8e6d2df354882d21dfaa8d2b15 Mon Sep 17 00:00:00 2001
From: smithoo <smithoo@pubg.com>
Date: Tue, 20 Aug 2024 16:02:12 +0900
Subject: [PATCH 1/2] fix(VsFileInput): change vs-file-input scss
 (chromatic-build)

---
 .../components/vs-file-input/VsFileInput.scss | 29 +++++++++++--------
 .../src/components/vs-file-input/types.ts     |  2 +-
 .../src/components/vs-input/VsInput.scss      |  3 +-
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/vlossom/src/components/vs-file-input/VsFileInput.scss b/packages/vlossom/src/components/vs-file-input/VsFileInput.scss
index 9f3d91318..117ae1620 100644
--- a/packages/vlossom/src/components/vs-file-input/VsFileInput.scss
+++ b/packages/vlossom/src/components/vs-file-input/VsFileInput.scss
@@ -5,6 +5,9 @@ $file-input-height-dense: var(--vs-file-input-height, var(--vs-input-comp-height
 
 .vs-file-input {
     position: relative;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
     background-color: var(--vs-file-input-backgroundColor, transparent);
     border: var(--vs-file-input-border, 1px solid var(--vs-line-color));
     border-radius: var(--vs-file-input-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius)));
@@ -20,22 +23,25 @@ $file-input-height-dense: var(--vs-file-input-height, var(--vs-input-comp-height
         width: 100%;
         height: 100%;
         opacity: 0;
+        cursor: pointer;
+
+        &::file-selector-button {
+            display: none;
+        }
     }
 
     .vs-attach-file-icon {
-        position: absolute;
-        top: -1px;
-        left: -1px;
-        width: $file-input-height;
-        height: $file-input-height;
-        border-radius: var(--vs-file-input-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius))) 0 0
-            var(--vs-file-input-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius)));
-        background-color: var(--vs-file-input-iconBackgroundColor, var(--vs-primary-comp-bg));
-        color: var(--vs-file-input-iconColor, var(--vs-primary-comp-font));
+        position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
-        cursor: pointer;
+        flex-wrap: nowrap;
+        white-space: nowrap;
+        padding: 0 1rem;
+        height: 100%;
+        border: none;
+        background-color: var(--vs-file-input-iconBackgroundColor, var(--vs-primary-comp-bg));
+        color: var(--vs-file-input-iconColor, var(--vs-primary-comp-font));
     }
 
     .vs-label-box {
@@ -43,8 +49,7 @@ $file-input-height-dense: var(--vs-file-input-height, var(--vs-input-comp-height
         width: 100%;
         height: 100%;
         align-items: center;
-        padding-left: calc(#{$file-input-height} + var(--vs-file-input-paddingLeft, 0.8rem));
-        padding-right: 3rem;
+        padding: var(--vs-file-input-padding, 0 0.8rem);
         background-color: transparent;
 
         .vs-label-wrap {
diff --git a/packages/vlossom/src/components/vs-file-input/types.ts b/packages/vlossom/src/components/vs-file-input/types.ts
index 2d2587bd2..5a63e9a4a 100644
--- a/packages/vlossom/src/components/vs-file-input/types.ts
+++ b/packages/vlossom/src/components/vs-file-input/types.ts
@@ -10,5 +10,5 @@ export interface VsFileInputStyleSet {
     height?: string;
     iconBackgroundColor?: string;
     iconColor?: string;
-    paddingLeft?: string;
+    padding?: string;
 }
diff --git a/packages/vlossom/src/components/vs-input/VsInput.scss b/packages/vlossom/src/components/vs-input/VsInput.scss
index 9704c59db..a46f110cf 100644
--- a/packages/vlossom/src/components/vs-input/VsInput.scss
+++ b/packages/vlossom/src/components/vs-input/VsInput.scss
@@ -6,11 +6,12 @@
     align-items: center;
     overflow: hidden;
     background-color: var(--vs-input-backgroundColor, transparent);
-    box-sizing: border-box;
     border: var(--vs-input-border, solid 1px var(--vs-line-color));
     border-radius: var(--vs-input-borderRadius, calc(var(--vs-radius-ratio) * var(--vs-radius)));
     height: var(--vs-input-height, var(--vs-input-comp-height));
     font-size: var(--vs-input-fontSize, var(--vs-font-size));
+    color: var(--vs-input-fontColor, var(--vs-font-color));
+    box-sizing: border-box;
 
     input {
         width: 100%;

From cacf9f556ff06a3f4f15c5e986d45eaacc16378d Mon Sep 17 00:00:00 2001
From: smithoo <smithoo@pubg.com>
Date: Tue, 20 Aug 2024 17:33:40 +0900
Subject: [PATCH 2/2] fix story (chromatic-build)

---
 .../src/components/vs-file-input/stories/VsFileInput.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vlossom/src/components/vs-file-input/stories/VsFileInput.stories.ts b/packages/vlossom/src/components/vs-file-input/stories/VsFileInput.stories.ts
index 6f2663ab5..2de942c22 100644
--- a/packages/vlossom/src/components/vs-file-input/stories/VsFileInput.stories.ts
+++ b/packages/vlossom/src/components/vs-file-input/stories/VsFileInput.stories.ts
@@ -180,7 +180,7 @@ export const StyleSet: Story = {
             fontColor: '#d84315',
             dragBackgroundColor: '#ffcc80',
             fontSize: '1.3rem',
-            paddingLeft: '2rem',
+            padding: '0 3rem',
         },
     },
 };