From 4eab26bc8d8f0d09dced15c805c36b89f600222a Mon Sep 17 00:00:00 2001
From: johnsoncherian <johnsonc.dev@gmail.com>
Date: Fri, 27 Mar 2026 14:32:29 +0530
Subject: [PATCH] fix(file-button): update default icon and fix section
 categorization

- Change default icon of FileButton component from IconHome2 to IconFileUpload for better UX
- Set iconVisibility to true by default for FileButton
- Add FileButton to Miscellaneous section in component library
- Replace ButtonGroup with ButtonGroupV2 in Buttons section in component library
---
 .../RightSideBar/ComponentManagerTab/sectionConfig.js         | 3 ++-
 frontend/src/AppBuilder/WidgetManager/widgets/fileButton.js   | 4 ++--
 frontend/src/AppBuilder/Widgets/FileButton/FileButton.jsx     | 2 +-
 server/src/modules/apps/services/widget-config/fileButton.js  | 4 ++--
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/sectionConfig.js b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/sectionConfig.js
index 6df3b0fb55..bae39a2a9e 100644
--- a/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/sectionConfig.js
+++ b/frontend/src/AppBuilder/RightSideBar/ComponentManagerTab/sectionConfig.js
@@ -5,7 +5,7 @@ const sectionConfig = {
   },
   buttons: {
     title: 'Buttons',
-    valueSet: new Set(['Button', 'ButtonGroup', 'PopoverMenu', 'FileButton']),
+    valueSet: new Set(['Button', 'ButtonGroupV2', 'PopoverMenu', 'FileButton']),
   },
   data: {
     title: 'Data',
@@ -71,6 +71,7 @@ const sectionConfig = {
     title: 'Miscellaneous',
     valueSet: new Set([
       'FilePicker',
+      'FileButton',
       'CodeEditor',
       'ColorPicker',
       'BoundedBox',
diff --git a/frontend/src/AppBuilder/WidgetManager/widgets/fileButton.js b/frontend/src/AppBuilder/WidgetManager/widgets/fileButton.js
index 02530ea8b5..d58e3ed7ec 100644
--- a/frontend/src/AppBuilder/WidgetManager/widgets/fileButton.js
+++ b/frontend/src/AppBuilder/WidgetManager/widgets/fileButton.js
@@ -329,8 +329,8 @@ export const fileButtonConfig = {
       labelSize: { value: '14' },
       labelWeight: { value: 'medium' },
       labelColor: { value: 'var(--cc-surface1-surface)' },
-      icon: { value: 'IconHome2' },
-      iconVisibility: { value: false },
+      icon: { value: 'IconFileUpload' },
+      iconVisibility: { value: true },
       iconColor: { value: 'var(--cc-surface1-surface)' },
       iconDirection: { value: 'left' },
       loaderColor: { value: 'var(--cc-surface1-surface)' },
diff --git a/frontend/src/AppBuilder/Widgets/FileButton/FileButton.jsx b/frontend/src/AppBuilder/Widgets/FileButton/FileButton.jsx
index 9de42a1b8f..9015d825fa 100644
--- a/frontend/src/AppBuilder/Widgets/FileButton/FileButton.jsx
+++ b/frontend/src/AppBuilder/Widgets/FileButton/FileButton.jsx
@@ -177,7 +177,7 @@ export const FileButton = (props) => {
               {iconVisibility && <TablerIcon iconName={icon} size={16} color={computedIconColor} />}
               <span
                 className={clsx(
-                  'tw-flex tw-items-center tw-gap-1.5 tw-flex-1 tw-min-w-0 tw-overflow-hidden',
+                  'tw-flex tw-items-center tw-gap-1.5 tw-min-w-0 tw-overflow-hidden',
                   justifyClass[contentAlignment] ?? 'tw-justify-start'
                 )}
               >
diff --git a/server/src/modules/apps/services/widget-config/fileButton.js b/server/src/modules/apps/services/widget-config/fileButton.js
index 715c0daab3..aa60b66ad7 100644
--- a/server/src/modules/apps/services/widget-config/fileButton.js
+++ b/server/src/modules/apps/services/widget-config/fileButton.js
@@ -333,8 +333,8 @@ export const fileButtonConfig = {
       labelSize: { value: '14' },
       labelWeight: { value: 'medium' },
       labelColor: { value: 'var(--cc-surface1-surface)' },
-      icon: { value: 'IconHome2' },
-      iconVisibility: { value: false },
+      icon: { value: 'IconFileUpload' },
+      iconVisibility: { value: true },
       iconColor: { value: 'var(--cc-surface1-surface)' },
       iconDirection: { value: 'left' },
       loaderColor: { value: 'var(--cc-surface1-surface)' },