From 499b9eabb57c200977d120298fe5cbbd4ff05274 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Mon, 25 Mar 2024 11:00:08 +0800
Subject: [PATCH] pref: optimize the help style of some formkit components
 (#5521)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind improvement
/area ui

#### What this PR does / why we need it:

优化 formkit 中 checkout、repeater、group 组件的 help 样式。

移除 checkout 的内边距
为 repeater、group 组件增加底部边距

#### How to test it?

观察上述组件的 help 样式是否正常。

#### Which issue(s) this PR fixes:

Fixes #5411

#### Does this PR introduce a user-facing change?
```release-note
优化 formkit 中 checkout、repeater 及 group 组件的 help 样式
```
---
 ui/src/formkit/theme.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/src/formkit/theme.ts b/ui/src/formkit/theme.ts
index 70c9a91ad..ef3b10a16 100644
--- a/ui/src/formkit/theme.ts
+++ b/ui/src/formkit/theme.ts
@@ -14,7 +14,7 @@ const boxClassification = {
     "group border border-gray-300 rounded-base px-2 py-2 focus-within:border-primary max-w-lg",
   wrapper:
     "flex items-center mb-1 cursor-pointer group-[.formkit-fieldset]:px-2",
-  help: "mb-2 mt-0 px-2",
+  help: "mb-2 mt-0",
   input: "form-check-input mr-2 bg-white",
   inner: "flex items-center",
 };
@@ -47,10 +47,14 @@ const theme: Record<string, Record<string, string>> = {
     fileItem: "block flex text-gray-800 text-sm mb-1",
     fileRemove: "ml-auto text-blue-500 text-sm",
   },
-  checkbox: boxClassification,
+  checkbox: {
+    ...boxClassification,
+    wrapper: "flex items-center mb-1 cursor-pointer",
+  },
   radio: {
     ...boxClassification,
     input: boxClassification.input.replace("rounded-sm", "rounded-full"),
+    help: `${boxClassification.help} px-2`,
   },
   range: {
     ...textClassification,
@@ -83,7 +87,7 @@ const theme: Record<string, Record<string, string>> = {
     legend: `${textClassification.label} px-2`,
     fieldset: boxClassification.fieldset,
     wrapper: boxClassification.wrapper,
-    help: boxClassification.wrapper,
+    help: `${boxClassification.wrapper} mb-2`,
     inner: "flex flex-col gap-4",
     items: "flex flex-col w-full gap-2 rounded-base",
     item: "border rounded-base grid grid-cols-12 focus-within:border-primary transition-all overflow-visible focus-within:shadow-sm",
@@ -98,7 +102,7 @@ const theme: Record<string, Record<string, string>> = {
     legend: `${textClassification.label} px-2`,
     fieldset: boxClassification.fieldset,
     wrapper: boxClassification.wrapper,
-    help: boxClassification.wrapper,
+    help: `${boxClassification.wrapper} mb-2`,
     inner: "flex flex-col px-2 divide-y divide-gray-100",
   },
   tagSelect: {