fix: badge style use more reasonable API name countStyle, and compati…

…ble with old APIs, and documents present new APIs
DouyinFE · May 29, 2024 · 445f984 · 445f984
1 parent 3e923be
commit 445f984
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git a/content/show/badge/index-en-US.md b/content/show/badge/index-en-US.md
@@ -285,7 +285,7 @@ import { Badge } from '@douyinfe/semi-ui';
 | dot            | Displayed as a little dot.                                                            | boolean    | false      |
 | overflowCount  | Cap number value                                                                      | number     | -          |
 | position       | Badge position, optional `left Top`, `left Bottom`, `right Top`, `right Bottom`       | string     | `rightTop` |
-| style          | style                                                                                 | CSSProperties     | -          |
+| countStyle     | style of content (>=v2.59.1)                                                          | CSSProperties     | -          |
 | theme          | Badge theme, one of `solid`, `light`, `inverted`                                      | string     | `solid`    |
 | type           | Badge type, one of `primary`, `secondary`, `tertiary`, `danger`, `warning`,`success`, | string     | `primary`  |
 

diff --git a/content/show/badge/index.md b/content/show/badge/index.md
@@ -274,17 +274,17 @@ import { Badge } from '@douyinfe/semi-ui';
 
 ## API参考
 
-| 属性             | 说明        | 类型   | 默认值 |
-|----------------|-------------|-----------------|---|
-| children       | 徽章的 base | ReactNode | 无 | 
-| className      | 外侧 className | string | - |
-| count          | 展示的内容 | ReactNode  | 无 |
-| countClassName | 内容区域 className |  string | 无 |
-| dot            | 不展示数字，显示小圆点 | boolean  | false |
-| overflowCount  | 最大的展示数字值 | number | 无 |
-| position       | 徽章位置，可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom` | string | `rightTop` |
-| style          | 徽章的样式 | CSSProperties | 无 | 
-| theme          | 徽章主题，可选 `solid`、 `light`、 `inverted` | string | `solid` |
+| 属性             | 说明                                                                         | 类型   | 默认值 |
+|----------------|----------------------------------------------------------------------------|-----------------|---|
+| children       | 徽章的 base                                                                   | ReactNode | 无 | 
+| className      | 外侧 className                                                               | string | - |
+| count          | 展示的内容                                                                      | ReactNode  | 无 |
+| countClassName | 内容区域 className                                                             |  string | 无 |
+| dot            | 不展示数字，显示小圆点                                                                | boolean  | false |
+| overflowCount  | 最大的展示数字值                                                                   | number | 无 |
+| position       | 徽章位置，可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom`                 | string | `rightTop` |
+| countStyle     | 徽章内容的样式, v2.59.1后生效                                                        | CSSProperties | 无 | 
+| theme          | 徽章主题，可选 `solid`、 `light`、 `inverted`                                       | string | `solid` |
 | type           | 徽章类型，可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning`、 `success` | string | `primary` |
 
 ## 文案规范

diff --git a/content/start/changelog/index-en-US.md b/content/start/changelog/index-en-US.md
@@ -24,6 +24,7 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
     - Fixed the problem that when TreeSelect is in defaultOpen mode, the pop-up layer cannot be closed when clicking outside. [#2254](https://github.com/DouyinFE/semi-design/pull/2254)
     - Fixed the problem that Avatar cannot trigger onClick, onMouseEnter, and onMouseLeave events when the border/topSlot/bottomSlot API is set. [#2255](https://github.com/DouyinFE/semi-design/pull/2255)
     - Fixed the problem that Badge className function aligns other components and acts on the outermost layer of DOM
+    - Revised Badge API definition, added a more semantic countStyle API, and made it consistent with the existing style API (the old API `props.style` can still be used, and the effect remains unchanged, but it is no longer recommended in the documentation)
 - 【Chore】
     - Fixed the problem that when FormApi does not pass in generics, there will be a type error that string type cannot be assigned to never when calling setValue (affected scope, v2.59.0) [#2259](https://github.com/DouyinFE/semi-design/pull/2259)
     - Optimize FormApi getValue type hints for nested paths and align setValue behavior [#2259](https://github.com/DouyinFE/semi-design/pull/2259)

diff --git a/content/start/changelog/index.md b/content/start/changelog/index.md
@@ -21,6 +21,7 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
     - 修复 TreeSelect 在 defaultOpen 模式时候，点击外部没有无法关闭弹出层问题 [#2254](https://github.com/DouyinFE/semi-design/pull/2254)
     - 修复 Avatar 在设置了 border/topSlot/bottomSlot API 情况下，无法触发 onClick、onMouseEnter、onMouseLeave 事件问题 [#2255](https://github.com/DouyinFE/semi-design/pull/2255)
     - 修复 Badge className 作用范围不正确的问题，功能对齐其他组件，作用于 DOM 最外层 
+    - 修正 Badge API 定义，增加更语义的 countStyle API，作用与现有 style API 保持一致（旧 API props.style 仍可使用，效果不变，但不再于文档中推荐）
 - 【Chore】
     - 修复 FormApi 在未传入泛型时，调用 setValue时会有 string类型不能赋值给 never 的类型报错问题（影响范围，v2.59.0） [#2259](https://github.com/DouyinFE/semi-design/pull/2259)
     - 优化 FormApi getValue 对于嵌套路径的类型提示，对齐 setValue 行为 [#2259](https://github.com/DouyinFE/semi-design/pull/2259)

diff --git a/packages/semi-ui/badge/__test__/badge.test.js b/packages/semi-ui/badge/__test__/badge.test.js
@@ -15,7 +15,7 @@ describe('badge', () => {
     it('badge with custom className & style', () => {
         let props = {
             className: 'test',
-            style: {
+            countStyle: {
                 color: 'red'
             }
         }

diff --git a/packages/semi-ui/badge/index.tsx b/packages/semi-ui/badge/index.tsx
@@ -25,7 +25,8 @@ export interface BadgeProps {
     onMouseLeave?: (e: React.MouseEvent) => any;
     onClick?: (e: React.MouseEvent) => any;
     children?: React.ReactNode;
-    countClassName?: string
+    countClassName?: string;
+    countStyle?: React.CSSProperties;
 
 }
 
@@ -45,6 +46,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         onMouseEnter: PropTypes.func,
         onMouseLeave: PropTypes.func,
         countClassName: PropTypes.string,
+        countStyle: PropTypes.object,
     };
 
     static defaultProps = {
@@ -63,7 +65,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         const { direction } = this.context;
         // DefaultPosition here, static can't get this
         const defaultPosition = direction === 'rtl' ? 'leftTop' : 'rightTop';
-        const { count, dot, type, countClassName, theme, position = defaultPosition, overflowCount, style, children, className, ...rest } = this.props;
+        const { count, dot, type, countClassName,countStyle, theme, position = defaultPosition, overflowCount, style, children, className, ...rest } = this.props;
         const custom = count && !(isNumber(count) || isString(count));
         const showBadge = count !== null && typeof count !== 'undefined';
         const wrapper = cls(countClassName, {
@@ -84,7 +86,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         return (
             <span className={cls(prefixCls, className)} {...rest}>
                 {children}
-                <span className={wrapper} style={style} x-semi-prop="count">
+                <span className={wrapper} style={style || countStyle} x-semi-prop="count">
                     {dot ? null : content}
                 </span>
             </span>