diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap index 23f60c4a5a..bc6061119d 100644 --- a/components/badge/__tests__/__snapshots__/demo.test.js.snap +++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap @@ -1617,3 +1617,177 @@ exports[`renders ./components/badge/demo/status.md correctly 1`] = ` `; + +exports[`renders ./components/badge/demo/title.md correctly 1`] = ` +
+ + + + +

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+

+ 0 +

+

+ 1 +

+

+ 2 +

+

+ 3 +

+

+ 4 +

+

+ 5 +

+

+ 6 +

+

+ 7 +

+

+ 8 +

+

+ 9 +

+
+
+
+
+`; diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js index 964d6232c0..80554961bb 100644 --- a/components/badge/__tests__/index.test.js +++ b/components/badge/__tests__/index.test.js @@ -7,8 +7,14 @@ describe('Badge', () => { const badge = mount(); expect(badge.find('.ant-card-multiple-words').length).toBe(0); }); + test('badge dot not showing count == 0', () => { const badge = mount(); expect(badge.find('.ant-badge-dot').length).toBe(0); }); + + it('should have an overriden title attribute', () => { + const badge = mount(); + expect(badge.find('.ant-scroll-number').getDOMNode().attributes.getNamedItem('title').value).toEqual('Custom title'); + }); }); diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md new file mode 100644 index 0000000000..36714ca047 --- /dev/null +++ b/components/badge/demo/title.md @@ -0,0 +1,39 @@ +--- +order: 7 +title: + zh-CN: 自定义标题 + en-US: Title +--- + +## zh-CN + +设置鼠标放在状态点上时显示的文字 + +## en-US + +The badge will display `title` when hovered over, instead of `count`. + +````jsx +import { Badge } from 'antd'; + +ReactDOM.render( +
+ + + +
+, mountNode); +```` + + diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 546169ac39..834e3fd7dd 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -31,3 +31,4 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca | showZero | Whether to show badge when `count` is zero | boolean | `false` | | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | | text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | +| title | Text to show when hovering over the badge | string | `count` | diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 8e61e785cd..9d442bacfe 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -21,6 +21,7 @@ export interface BadgeProps { status?: 'success' | 'processing' | 'default' | 'error' | 'warning'; text?: string; offset?: [number | string, number | string]; + title?: string; } export default class Badge extends React.Component { @@ -57,6 +58,7 @@ export default class Badge extends React.Component { status, text, offset, + title, ...restProps, } = this.props; let displayCount = (count as number) > (overflowCount as number) ? `${overflowCount}+` : count; @@ -103,7 +105,7 @@ export default class Badge extends React.Component { data-show={!hidden} className={scrollNumberCls} count={displayCount} - title={count} + title={title || count} style={styleWithOffset} /> ); diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index c4dd553585..f794f02615 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -32,3 +32,4 @@ title: Badge | showZero | 当数值为 0 时,是否展示 Badge | boolean | false | | status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | | text | 在设置了 `status` 的前提下有效,设置状态点的文本 | string | '' | +| title | 设置鼠标放在状态点上时显示的文字 | string | `count` |