🐛 fix: 修复 FieldTitle 样式错误 (#92)

* ⚰️ chore: remove unnecessary props * 📸 chore: update snapshot * 🐛 fix: no extra
ant-design · Sep 18, 2023 · 789172e · 789172e
1 parent 7634877
commit 789172e
Show file tree

Hide file tree

Showing 6 changed files with 660 additions and 943 deletions.
diff --git a/package.json b/package.json
@@ -119,9 +119,9 @@
     "@emotion/jest": "^11.11.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.5.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/color": "^3.0.4",
-    "@types/json-schema": "^7.0.12",
+    "@types/json-schema": "^7.0.13",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@umijs/lint": "^4.0.81",
@@ -148,7 +148,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rxjs-spy": "^8.0.2",
-    "semantic-release": "^21.1.1",
+    "semantic-release": "^21.1.2",
     "semantic-release-config-gitmoji": "^1.5.3",
     "stylelint": "^15.10.3",
     "typescript": "~5.1.6",

diff --git a/src/FieldTitle/demos/description.tsx b/src/FieldTitle/demos/description.tsx
@@ -7,18 +7,6 @@ const Demo = () => {
       <ProCard layout="center" bordered colSpan={24} title="描述" subTitle="描述在标题右边">
         <FieldTitle type={APIFieldType.bool} title="success" description="成功标识" />
       </ProCard>
-      <ProCard layout="center" bordered colSpan={24} title="额外" subTitle="额外内容在字段下面">
-        <FieldTitle type={APIFieldType.bool} title="success" extra="额外内容" />
-      </ProCard>
-      <ProCard
-        layout="center"
-        bordered
-        colSpan={24}
-        title="可选"
-        subTitle="可选为false 则额外内容左侧有 padding"
-      >
-        <FieldTitle type={APIFieldType.bool} title="success" extra="额外内容" checkable={false} />
-      </ProCard>
     </ProCard>
   );
 };

diff --git a/src/FieldTitle/index.md b/src/FieldTitle/index.md
@@ -21,11 +21,9 @@ group: 基础组件
 
 ## API
 
-| 参数          | 说明                           | 类型                              | 默认值 |
-| :------------ | :----------------------------- | :-------------------------------- | :----- |
-| type          | 字段类型                       | 参考 `FieldIcon` 字段类型类型枚举 | -      |
-| isParentArray | 父级是否是数组                 | boolean                           | -      |
-| title         | 字段标题                       | `React.ReactNode`                 | -      |
-| description   | 标题右侧描述                   | `React.ReactNode`                 | -      |
-| extra         | 额外内容                       | `React.ReactNode`                 | -      |
-| checkable     | 是否可选，可选会添加 `padding` | `boolean`                         | true   |
+| 参数          | 说明           | 类型                              | 默认值 |
+| :------------ | :------------- | :-------------------------------- | :----- |
+| type          | 字段类型       | 参考 `FieldIcon` 字段类型类型枚举 | -      |
+| isParentArray | 父级是否是数组 | boolean                           | -      |
+| title         | 字段标题       | `React.ReactNode`                 | -      |
+| description   | 标题右侧描述   | `React.ReactNode`                 | -      |
diff --git a/src/FieldTitle/index.tsx b/src/FieldTitle/index.tsx
@@ -33,14 +33,6 @@ export interface FieldTitleProps {
    * 标题右侧描述
    */
   description?: React.ReactNode;
-  /**
-   * 额外内容
-   */
-  extra?: React.ReactNode;
-  /**
-   * 是否可选
-   */
-  checkable?: boolean;
 }
 
 const FieldTitle: React.FC<FieldTitleProps> = (props) => {
@@ -52,12 +44,10 @@ const FieldTitle: React.FC<FieldTitleProps> = (props) => {
     isParentArray,
     title,
     description = null,
-    extra = null,
-    checkable = true,
   } = props;
 
   const prefixCls = getPrefixCls('field-title', customizePrefixCls);
-  const { styles } = useStyle({ prefixCls, checkable });
+  const { styles } = useStyle({ prefixCls });
 
   let finalType = type;
   if (finalType === 'boolean') {
@@ -67,14 +57,11 @@ const FieldTitle: React.FC<FieldTitleProps> = (props) => {
     finalType += 'Array';
   }
   return (
-    <div className={classNames(prefixCls, className)} style={style}>
-      <div className={styles.content}>
-        {finalType ? <FieldIcon type={finalType} /> : null}
-        {title ? <span className={styles.title}>{title}</span> : null}
-        {description ? <span className={styles.description}>{description}</span> : null}
-      </div>
-      {extra ? <div className={styles.extra}>{extra}</div> : null}
-    </div>
+    <span className={classNames(prefixCls, className, styles.container)} style={style}>
+      {finalType ? <FieldIcon type={finalType} /> : null}
+      {title ? <span className={styles.title}>{title}</span> : null}
+      {description ? <span className={styles.description}>{description}</span> : null}
+    </span>
   );
 };
 

diff --git a/src/FieldTitle/style.ts b/src/FieldTitle/style.ts
@@ -1,11 +1,11 @@
 import { createStyles } from '../theme';
 
-export const useStyle = createStyles(({ token, css, cx }, { prefixCls, checkable }) => {
+export const useStyle = createStyles(({ token, css, cx }, { prefixCls }) => {
   return {
-    content: cx(
-      `${prefixCls}-content`,
+    container: cx(
+      `${prefixCls}-container`,
       css({
-        display: 'flex',
+        display: 'inline-flex',
         alignItems: 'center',
         fontSize: token.fontSize,
       }),
@@ -22,11 +22,5 @@ export const useStyle = createStyles(({ token, css, cx }, { prefixCls, checkable
         marginLeft: token.marginXXS,
       }),
     ),
-    extra: cx(
-      `${prefixCls}-extra`,
-      css({
-        paddingLeft: checkable ? token.paddingLG : undefined,
-      }),
-    ),
   };
 });