From 56af6f43c0e435c348d1e30cdcd0196e76dd6669 Mon Sep 17 00:00:00 2001
From: MyPrototypeWhat <daoquqiexing@gmail.com>
Date: Tue, 16 Sep 2025 17:15:40 +0800
Subject: [PATCH] refactor(ui): update button elements to include type
 attribute

- Added type="button" to button elements in DividerWithText and Icon stories for better accessibility and to prevent unintended form submissions.
- Improved code consistency across button components in the UI stories.
---
 .../components/base/DividerWithText.stories.tsx  | 12 +++++++++---
 .../ui/stories/components/icons/Icon.stories.tsx | 16 +++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/ui/stories/components/base/DividerWithText.stories.tsx b/packages/ui/stories/components/base/DividerWithText.stories.tsx
index 51b6154dfd..f5e68a54ce 100644
--- a/packages/ui/stories/components/base/DividerWithText.stories.tsx
+++ b/packages/ui/stories/components/base/DividerWithText.stories.tsx
@@ -92,12 +92,18 @@ export const MultipleUsage: Story = {
               placeholder="请输入密码"
             />
           </div>
-          <button className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700">登录</button>
+          <button type="button" className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-blue-700">
+            登录
+          </button>
 
           <DividerWithText text="或" />
 
-          <button className="w-full border border-gray-300 py-2 rounded-md hover:bg-gray-50">使用 Google 登录</button>
-          <button className="w-full border border-gray-300 py-2 rounded-md hover:bg-gray-50">使用 GitHub 登录</button>
+          <button type="button" className="w-full border border-gray-300 py-2 rounded-md hover:bg-gray-50">
+            使用 Google 登录
+          </button>
+          <button type="button" className="w-full border border-gray-300 py-2 rounded-md hover:bg-gray-50">
+            使用 GitHub 登录
+          </button>
         </div>
       </div>
     </div>
diff --git a/packages/ui/stories/components/icons/Icon.stories.tsx b/packages/ui/stories/components/icons/Icon.stories.tsx
index 43d8cc0d6a..3accb10f70 100644
--- a/packages/ui/stories/components/icons/Icon.stories.tsx
+++ b/packages/ui/stories/components/icons/Icon.stories.tsx
@@ -178,13 +178,13 @@ export const IconStates: Story = {
   render: () => (
     <div className="space-y-4">
       <div className="flex items-center gap-4">
-        <button className="rounded p-2 hover:bg-gray-100">
+        <button type="button" className="rounded p-2 hover:bg-gray-100">
           <EditIcon size={20} />
         </button>
-        <button className="rounded p-2 hover:bg-gray-100" disabled>
+        <button type="button" className="rounded p-2 hover:bg-gray-100" disabled>
           <EditIcon size={20} className="opacity-50" />
         </button>
-        <button className="rounded bg-blue-500 p-2 text-white hover:bg-blue-600">
+        <button type="button" className="rounded bg-blue-500 p-2 text-white hover:bg-blue-600">
           <EditIcon size={20} />
         </button>
       </div>
@@ -205,13 +205,13 @@ export const InContext: Story = {
         <div className="flex items-center justify-between">
           <h3 className="font-semibold">Document.pdf</h3>
           <div className="flex gap-2">
-            <button className="rounded p-1 hover:bg-gray-100">
+            <button type="button" className="rounded p-1 hover:bg-gray-100">
               <CopyIcon size={16} />
             </button>
-            <button className="rounded p-1 hover:bg-gray-100">
+            <button type="button" className="rounded p-1 hover:bg-gray-100">
               <EditIcon size={16} />
             </button>
-            <button className="rounded p-1 hover:bg-gray-100">
+            <button type="button" className="rounded p-1 hover:bg-gray-100">
               <DeleteIcon size={16} />
             </button>
           </div>
@@ -224,7 +224,9 @@ export const InContext: Story = {
           <span className="font-medium">Image Processing</span>
         </div>
         <p className="mb-3 text-sm text-gray-600">Process your images with advanced AI tools</p>
-        <button className="flex items-center gap-2 rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600">
+        <button
+          type="button"
+          className="flex items-center gap-2 rounded bg-blue-500 px-3 py-1 text-sm text-white hover:bg-blue-600">
           <OcrIcon size={16} />
           <span>Extract Text</span>
         </button>