From 63bd4700abbbf10eb0dbfb2984fae08142a87e17 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 20 Aug 2020 19:36:12 +0800
Subject: [PATCH] breaking change: rename Info to Badge

---
 components.js                                 |  2 +-
 src/action-bar-icon/index.js                  | 11 +++----
 src/action-bar/README.zh-CN.md                |  1 -
 .../test/__snapshots__/demo.spec.js.snap      |  6 ++--
 .../test/__snapshots__/index.spec.js.snap     |  6 ++--
 src/action-bar/test/index.spec.js             |  4 +--
 src/badge/index.js                            | 21 ++++++++++++
 src/badge/index.less                          | 29 +++++++++++++++++
 .../test/__snapshots__/index.spec.js.snap     |  7 ++++
 src/badge/test/index.spec.js                  | 32 +++++++++++++++++++
 src/grid-item/index.js                        |  8 ++---
 src/grid/README.zh-CN.md                      |  1 -
 src/grid/test/__snapshots__/demo.spec.js.snap |  4 +--
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 src/grid/test/index.spec.js                   |  2 +-
 src/icon/README.zh-CN.md                      |  1 -
 src/icon/index.js                             | 14 +++-----
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 src/info/index.js                             | 22 -------------
 src/info/index.less                           | 29 -----------------
 .../test/__snapshots__/index.spec.js.snap     |  7 ----
 src/info/test/index.spec.js                   | 32 -------------------
 src/sidebar-item/index.js                     |  4 +--
 src/sidebar/README.zh-CN.md                   |  1 -
 .../test/__snapshots__/demo.spec.js.snap      |  6 ++--
 src/style/var.less                            | 24 +++++++-------
 src/tab/README.zh-CN.md                       |  1 -
 src/tab/index.js                              |  1 -
 src/tab/test/__snapshots__/index.spec.js.snap |  6 ++--
 src/tab/test/index.spec.js                    |  4 +--
 src/tabbar-item/index.js                      |  8 ++---
 src/tabbar-item/index.less                    |  2 +-
 src/tabbar/README.zh-CN.md                    |  1 -
 .../test/__snapshots__/demo.spec.js.snap      |  8 ++---
 src/tabs/Title.js                             |  8 ++---
 src/tabs/index.js                             |  2 +-
 src/tree-select/index.js                      |  4 +--
 .../test/__snapshots__/demo.spec.js.snap      |  4 +--
 .../test/__snapshots__/index.spec.js.snap     |  4 +--
 src/tree-select/test/index.spec.js            |  4 +--
 40 files changed, 157 insertions(+), 178 deletions(-)
 create mode 100644 src/badge/index.js
 create mode 100644 src/badge/index.less
 create mode 100644 src/badge/test/__snapshots__/index.spec.js.snap
 create mode 100644 src/badge/test/index.spec.js
 delete mode 100644 src/info/index.js
 delete mode 100644 src/info/index.less
 delete mode 100644 src/info/test/__snapshots__/index.spec.js.snap
 delete mode 100644 src/info/test/index.spec.js

diff --git a/components.js b/components.js
index 6b040c175..d26384119 100644
--- a/components.js
+++ b/components.js
@@ -4,7 +4,7 @@ module.exports = [
   'cell',
   'cell-group',
   'icon',
-  'info',
+  'badge',
   'image',
   'col',
   'row',
diff --git a/src/action-bar-icon/index.js b/src/action-bar-icon/index.js
index 7964f429d..c47dee5bf 100644
--- a/src/action-bar-icon/index.js
+++ b/src/action-bar-icon/index.js
@@ -1,8 +1,8 @@
-import { createNamespace, isDef } from '../utils';
+import { createNamespace } from '../utils';
 import { route, routeProps } from '../utils/router';
 import { ChildrenMixin } from '../mixins/relation';
-import Info from '../info';
 import Icon from '../icon';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('action-bar-icon');
 
@@ -15,7 +15,6 @@ export default createComponent({
     text: String,
     icon: String,
     color: String,
-    info: [Number, String],
     badge: [Number, String],
     iconClass: null,
   },
@@ -29,13 +28,11 @@ export default createComponent({
     },
 
     genIcon() {
-      const info = isDef(this.badge) ? this.badge : this.info;
-
       if (this.$slots.icon) {
         return (
           <div class={bem('icon')}>
             {this.$slots.icon()}
-            <Info dot={this.dot} info={info} />
+            <Badge dot={this.dot} badge={this.badge} />
           </div>
         );
       }
@@ -45,8 +42,8 @@ export default createComponent({
           class={[bem('icon'), this.iconClass]}
           tag="div"
           dot={this.dot}
-          info={info}
           name={this.icon}
+          badge={this.badge}
           color={this.color}
         />
       );
diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md
index 6828f658f..f7cb4b26b 100644
--- a/src/action-bar/README.zh-CN.md
+++ b/src/action-bar/README.zh-CN.md
@@ -98,7 +98,6 @@ export default {
 | icon-class | 图标额外类名 | _any_ | - |
 | dot `2.5.5` | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
diff --git a/src/action-bar/test/__snapshots__/demo.spec.js.snap b/src/action-bar/test/__snapshots__/demo.spec.js.snap
index 3b49bfc00..eb1a3881d 100644
--- a/src/action-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/action-bar/test/__snapshots__/demo.spec.js.snap
@@ -27,17 +27,17 @@ exports[`renders demo correctly 1`] = `
     <div class="van-action-bar">
       <div role="button" tabindex="0" class="van-action-bar-icon">
         <div class="van-icon van-icon-chat-o van-action-bar-icon__icon">
-          <div class="van-info van-info--dot"></div>
+          <div class="van-badge van-badge--dot"></div>
         </div>客服
       </div>
       <div role="button" tabindex="0" class="van-action-bar-icon">
         <div class="van-icon van-icon-cart-o van-action-bar-icon__icon">
-          <div class="van-info">5</div>
+          <div class="van-badge">5</div>
         </div>购物车
       </div>
       <div role="button" tabindex="0" class="van-action-bar-icon">
         <div class="van-icon van-icon-shop-o van-action-bar-icon__icon">
-          <div class="van-info">12</div>
+          <div class="van-badge">12</div>
         </div>店铺
       </div> <button class="van-button van-button--warning van-button--large van-action-bar-button van-action-bar-button--first van-action-bar-button--warning">
         <div class="van-button__content"><span class="van-button__text">加入购物车</span></div>
diff --git a/src/action-bar/test/__snapshots__/index.spec.js.snap b/src/action-bar/test/__snapshots__/index.spec.js.snap
index f96684d67..d83e14ad9 100644
--- a/src/action-bar/test/__snapshots__/index.spec.js.snap
+++ b/src/action-bar/test/__snapshots__/index.spec.js.snap
@@ -24,14 +24,14 @@ exports[`Icon render icon slot 1`] = `
 
 exports[`Icon render icon slot with dot 1`] = `
 <div role="button" tabindex="0" class="van-action-bar-icon">
-  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-info van-info--dot"></div>
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-badge van-badge--dot"></div>
   </div>Text
 </div>
 `;
 
-exports[`Icon render icon slot with info 1`] = `
+exports[`Icon render icon slot with badge 1`] = `
 <div role="button" tabindex="0" class="van-action-bar-icon">
-  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-info">1</div>
+  <div class="van-action-bar-icon__icon">Custom Icon<div class="van-badge">1</div>
   </div>Text
 </div>
 `;
diff --git a/src/action-bar/test/index.spec.js b/src/action-bar/test/index.spec.js
index e49915da8..1db44eaeb 100644
--- a/src/action-bar/test/index.spec.js
+++ b/src/action-bar/test/index.spec.js
@@ -50,12 +50,12 @@ test('Icon render icon slot', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('Icon render icon slot with info', () => {
+test('Icon render icon slot with badge', () => {
   const wrapper = mount({
     render(h) {
       return h(Icon, {
         props: {
-          info: '1',
+          badge: '1',
         },
         scopedSlots: {
           default: () => 'Text',
diff --git a/src/badge/index.js b/src/badge/index.js
new file mode 100644
index 000000000..35620c38d
--- /dev/null
+++ b/src/badge/index.js
@@ -0,0 +1,21 @@
+import { isDef, createNamespace } from '../utils';
+
+const [createComponent, bem] = createNamespace('badge');
+
+export default createComponent({
+  props: {
+    dot: Boolean,
+    badge: [Number, String],
+  },
+
+  render() {
+    const { dot, badge } = this;
+    const showBadge = isDef(badge) && badge !== '';
+
+    if (!dot && !showBadge) {
+      return;
+    }
+
+    return <div class={bem({ dot })}>{dot ? '' : badge}</div>;
+  },
+});
diff --git a/src/badge/index.less b/src/badge/index.less
new file mode 100644
index 000000000..31fb14856
--- /dev/null
+++ b/src/badge/index.less
@@ -0,0 +1,29 @@
+@import '../style/var';
+
+.van-badge {
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  min-width: @badge-size;
+  padding: @badge-padding;
+  color: @badge-color;
+  font-weight: @badge-font-weight;
+  font-size: @badge-font-size;
+  font-family: @badge-font-family;
+  line-height: 1.2;
+  text-align: center;
+  background-color: @badge-background-color;
+  border: @badge-border-width solid @white;
+  border-radius: @badge-size;
+  transform: translate(50%, -50%);
+  transform-origin: 100%;
+
+  &--dot {
+    width: @badge-dot-size;
+    min-width: 0;
+    height: @badge-dot-size;
+    background-color: @badge-dot-color;
+    border-radius: 100%;
+  }
+}
diff --git a/src/badge/test/__snapshots__/index.spec.js.snap b/src/badge/test/__snapshots__/index.spec.js.snap
new file mode 100644
index 000000000..f1dda6f62
--- /dev/null
+++ b/src/badge/test/__snapshots__/index.spec.js.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should not render when badge is empty string 1`] = ``;
+
+exports[`should not render when badge is empty undefined 1`] = ``;
+
+exports[`should render when badge is zero 1`] = `<div class="van-badge">0</div>`;
diff --git a/src/badge/test/index.spec.js b/src/badge/test/index.spec.js
new file mode 100644
index 000000000..276a3c2ab
--- /dev/null
+++ b/src/badge/test/index.spec.js
@@ -0,0 +1,32 @@
+import Badge from '..';
+import { mount } from '../../../test';
+
+test('should not render when badge is empty string', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: '',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should not render when badge is empty undefined', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: undefined,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('should render when badge is zero', () => {
+  const wrapper = mount(Badge, {
+    propsData: {
+      badge: 0,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/grid-item/index.js b/src/grid-item/index.js
index c003d9dbb..dea4ddc70 100644
--- a/src/grid-item/index.js
+++ b/src/grid-item/index.js
@@ -7,8 +7,8 @@ import { route, routeProps } from '../utils/router';
 import { ChildrenMixin } from '../mixins/relation';
 
 // Components
-import Info from '../info';
 import Icon from '../icon';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('grid-item');
 
@@ -75,7 +75,7 @@ export default createComponent({
         return (
           <div class={bem('icon-wrapper')}>
             {this.$slots.icon()}
-            <Info dot={this.dot} info={this.badge} />
+            <Badge dot={this.dot} badge={this.badge} />
           </div>
         );
       }
@@ -83,10 +83,10 @@ export default createComponent({
       if (this.icon) {
         return (
           <Icon
-            name={this.icon}
             dot={this.dot}
-            info={this.badge}
+            name={this.icon}
             size={this.parent.iconSize}
+            badge={this.badge}
             class={bem('icon')}
             classPrefix={this.iconPrefix}
           />
diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md
index 1dd484706..82225a88d 100644
--- a/src/grid/README.zh-CN.md
+++ b/src/grid/README.zh-CN.md
@@ -135,7 +135,6 @@ Vue.use(GridItem);
 | icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info `2.2.1` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
diff --git a/src/grid/test/__snapshots__/demo.spec.js.snap b/src/grid/test/__snapshots__/demo.spec.js.snap
index b917973ee..95f2bd6e5 100644
--- a/src/grid/test/__snapshots__/demo.spec.js.snap
+++ b/src/grid/test/__snapshots__/demo.spec.js.snap
@@ -182,12 +182,12 @@ exports[`renders demo correctly 1`] = `
     <div class="van-grid van-hairline--top">
       <div class="van-grid-item" style="flex-basis: 50%;">
         <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-home-o van-grid-item__icon">
-            <div class="van-info van-info--dot"></div>
+            <div class="van-badge van-badge--dot"></div>
           </i><span class="van-grid-item__text">文字</span></div>
       </div>
       <div class="van-grid-item" style="flex-basis: 50%;">
         <div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-search van-grid-item__icon">
-            <div class="van-info">99+</div>
+            <div class="van-badge">99+</div>
           </i><span class="van-grid-item__text">文字</span></div>
       </div>
     </div>
diff --git a/src/grid/test/__snapshots__/index.spec.js.snap b/src/grid/test/__snapshots__/index.spec.js.snap
index 92eb96f44..1387be1b9 100644
--- a/src/grid/test/__snapshots__/index.spec.js.snap
+++ b/src/grid/test/__snapshots__/index.spec.js.snap
@@ -15,7 +15,7 @@ exports[`render icon-slot 1`] = `
     <div class="van-grid-item__content van-grid-item__content--center van-hairline">
       <div class="van-grid-item__icon-wrapper">
         <div>Custom Icon</div>
-        <div class="van-info">1</div>
+        <div class="van-badge">1</div>
       </div>
     </div>
   </div>
diff --git a/src/grid/test/index.spec.js b/src/grid/test/index.spec.js
index 166640e38..78f15a3ed 100644
--- a/src/grid/test/index.spec.js
+++ b/src/grid/test/index.spec.js
@@ -49,7 +49,7 @@ test('render icon-slot', () => {
   const wrapper = mount({
     template: `
       <van-grid icon-size="10">
-        <van-grid-item info="1">
+        <van-grid-item badge="1">
           <template #icon>
             <div>Custom Icon</div>
           </template>
diff --git a/src/icon/README.zh-CN.md b/src/icon/README.zh-CN.md
index 794490b64..bcfd27e35 100644
--- a/src/icon/README.zh-CN.md
+++ b/src/icon/README.zh-CN.md
@@ -93,7 +93,6 @@ import 'vant/lib/icon/local.css';
 | name | 图标名称或图片链接 | _string_ | - |
 | dot `v2.2.1` | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | color | 图标颜色 | _string_ | `inherit` |
 | size | 图标大小，如 `20px` `2em`，默认单位为`px` | _number \| string_ | `inherit` |
 | class-prefix | 类名前缀，用于使用自定义图标 | _string_ | `van-icon` |
diff --git a/src/icon/index.js b/src/icon/index.js
index 31c785b2b..a7520a223 100644
--- a/src/icon/index.js
+++ b/src/icon/index.js
@@ -1,8 +1,5 @@
-// Utils
 import { addUnit, createNamespace } from '../utils';
-
-// Components
-import Info from '../info';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('icon');
 
@@ -30,7 +27,7 @@ export default createComponent({
   render() {
     const { name } = this;
     const imageIcon = isImage(name);
-  
+
     return (
       <this.tag
         class={[
@@ -44,11 +41,8 @@ export default createComponent({
       >
         {this.$slots.default?.()}
         {imageIcon && <img class={bem('image')} src={name} />}
-        <Info
-          dot={this.dot}
-          info={this.badge}
-        />
+        <Badge dot={this.dot} badge={this.badge} />
       </this.tag>
     );
-  }
+  },
 });
diff --git a/src/icon/test/__snapshots__/index.spec.js.snap b/src/icon/test/__snapshots__/index.spec.js.snap
index 54ddf2e50..c5fb94374 100644
--- a/src/icon/test/__snapshots__/index.spec.js.snap
+++ b/src/icon/test/__snapshots__/index.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`dot prop 1`] = `
 <i class="van-icon van-icon-undefined">
-  <div class="van-info van-info--dot"></div>
+  <div class="van-badge van-badge--dot"></div>
 </i>
 `;
 
diff --git a/src/info/index.js b/src/info/index.js
deleted file mode 100644
index 74a02fddd..000000000
--- a/src/info/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// Utils
-import { isDef, createNamespace } from '../utils';
-
-const [createComponent, bem] = createNamespace('info');
-
-export default createComponent({
-  props: {
-    dot: Boolean,
-    info: [Number, String],
-  },
-
-  render() {
-    const { dot, info } = this;
-    const showInfo = isDef(info) && info !== '';
-
-    if (!dot && !showInfo) {
-      return;
-    }
-
-    return <div class={bem({ dot })}>{dot ? '' : info}</div>;
-  },
-});
diff --git a/src/info/index.less b/src/info/index.less
deleted file mode 100644
index 10d9ce115..000000000
--- a/src/info/index.less
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../style/var';
-
-.van-info {
-  position: absolute;
-  top: 0;
-  right: 0;
-  box-sizing: border-box;
-  min-width: @info-size;
-  padding: @info-padding;
-  color: @info-color;
-  font-weight: @info-font-weight;
-  font-size: @info-font-size;
-  font-family: @info-font-family;
-  line-height: 1.2;
-  text-align: center;
-  background-color: @info-background-color;
-  border: @info-border-width solid @white;
-  border-radius: @info-size;
-  transform: translate(50%, -50%);
-  transform-origin: 100%;
-
-  &--dot {
-    width: @info-dot-size;
-    min-width: 0;
-    height: @info-dot-size;
-    background-color: @info-dot-color;
-    border-radius: 100%;
-  }
-}
diff --git a/src/info/test/__snapshots__/index.spec.js.snap b/src/info/test/__snapshots__/index.spec.js.snap
deleted file mode 100644
index 84b187992..000000000
--- a/src/info/test/__snapshots__/index.spec.js.snap
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should not render when info is empty string 1`] = ``;
-
-exports[`should not render when info is empty undefined 1`] = ``;
-
-exports[`should render when info is zero 1`] = `<div class="van-info">0</div>`;
diff --git a/src/info/test/index.spec.js b/src/info/test/index.spec.js
deleted file mode 100644
index d0a2e1678..000000000
--- a/src/info/test/index.spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Info from '..';
-import { mount } from '../../../test';
-
-test('should not render when info is empty string', () => {
-  const wrapper = mount(Info, {
-    propsData: {
-      info: '',
-    },
-  });
-
-  expect(wrapper).toMatchSnapshot();
-});
-
-test('should not render when info is empty undefined', () => {
-  const wrapper = mount(Info, {
-    propsData: {
-      info: undefined,
-    },
-  });
-
-  expect(wrapper).toMatchSnapshot();
-});
-
-test('should render when info is zero', () => {
-  const wrapper = mount(Info, {
-    propsData: {
-      info: 0,
-    },
-  });
-
-  expect(wrapper).toMatchSnapshot();
-});
diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.js
index 9b594b5a1..58bfb5c5a 100644
--- a/src/sidebar-item/index.js
+++ b/src/sidebar-item/index.js
@@ -1,7 +1,7 @@
 import { createNamespace } from '../utils';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
-import Info from '../info';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('sidebar-item');
 
@@ -45,7 +45,7 @@ export default createComponent({
       >
         <div class={bem('text')}>
           {this.title}
-          <Info dot={this.dot} info={this.badge} class={bem('info')} />
+          <Badge dot={this.dot} badge={this.badge} class={bem('badge')} />
         </div>
       </a>
     );
diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md
index 32a58d61d..b0afc0628 100644
--- a/src/sidebar/README.zh-CN.md
+++ b/src/sidebar/README.zh-CN.md
@@ -108,7 +108,6 @@ export default {
 | title | 内容 | _string_ | `''` |
 | dot `v2.2.1` | 是否显示右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | disabled `v2.2.0` | 是否禁用该项 | _boolean_ | `false` |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to `v2.0.4` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
diff --git a/src/sidebar/test/__snapshots__/demo.spec.js.snap b/src/sidebar/test/__snapshots__/demo.spec.js.snap
index 1a7caf7b3..a5221621b 100644
--- a/src/sidebar/test/__snapshots__/demo.spec.js.snap
+++ b/src/sidebar/test/__snapshots__/demo.spec.js.snap
@@ -25,13 +25,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-grid-item__content van-grid-item__content--center">
         <h3 class="demo-sidebar-title">徽标提示</h3>
         <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
-            <div class="van-sidebar-item__text">标签名<div class="van-info van-info--dot van-sidebar-item__info"></div>
+            <div class="van-sidebar-item__text">标签名<div class="van-badge van-badge--dot van-sidebar-item__badge"></div>
             </div>
           </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">5</div>
+            <div class="van-sidebar-item__text">标签名<div class="van-badge van-sidebar-item__badge">5</div>
             </div>
           </a> <a class="van-sidebar-item">
-            <div class="van-sidebar-item__text">标签名<div class="van-info van-sidebar-item__info">99+</div>
+            <div class="van-sidebar-item__text">标签名<div class="van-badge van-sidebar-item__badge">99+</div>
             </div>
           </a></div>
       </div>
diff --git a/src/style/var.less b/src/style/var.less
index b66033175..5970fd170 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -113,6 +113,18 @@
 @address-list-item-radio-icon-color: @red;
 @address-list-edit-icon-size: 20px;
 
+// Badge
+@badge-size: 16px;
+@badge-color: @white;
+@badge-padding: 0 3px;
+@badge-font-size: @font-size-sm;
+@badge-font-weight: @font-weight-bold;
+@badge-border-width: @border-width-base;
+@badge-background-color: @red;
+@badge-dot-color: @red;
+@badge-dot-size: 8px;
+@badge-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
+
 // Button
 @button-mini-height: 24px;
 @button-mini-font-size: @font-size-xs;
@@ -409,18 +421,6 @@
 @index-bar-index-line-height: @line-height-xs;
 @index-bar-index-active-color: @green;
 
-// Info
-@info-size: 16px;
-@info-color: @white;
-@info-padding: 0 3px;
-@info-font-size: @font-size-sm;
-@info-font-weight: @font-weight-bold;
-@info-border-width: @border-width-base;
-@info-background-color: @red;
-@info-dot-color: @red;
-@info-dot-size: 8px;
-@info-font-family: -apple-system-font, Helvetica Neue, Arial, sans-serif;
-
 // Image
 @image-placeholder-text-color: @gray-6;
 @image-placeholder-font-size: @font-size-md;
diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md
index c4c0dc751..dd2e8e04b 100644
--- a/src/tab/README.zh-CN.md
+++ b/src/tab/README.zh-CN.md
@@ -254,7 +254,6 @@ export default {
 | disabled | 是否禁用标签 | _boolean_ | `false` |
 | dot `v2.3.0` | 是否在标题右上角显示小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info `v2.3.0` | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | name `v2.0.6` | 标签名称，作为匹配的标识符 | _number \| string_ | 标签的索引值 |
 | url `v2.2.1` | 点击后跳转的链接地址 | _string_ | - |
 | to `v2.2.1` | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
diff --git a/src/tab/index.js b/src/tab/index.js
index 8ce34d4ca..c38407f03 100644
--- a/src/tab/index.js
+++ b/src/tab/index.js
@@ -11,7 +11,6 @@ export default createComponent({
     ...routeProps,
     dot: Boolean,
     name: [Number, String],
-    info: [Number, String],
     badge: [Number, String],
     title: String,
     titleStyle: null,
diff --git a/src/tab/test/__snapshots__/index.spec.js.snap b/src/tab/test/__snapshots__/index.spec.js.snap
index 93627890c..f7be7a42e 100644
--- a/src/tab/test/__snapshots__/index.spec.js.snap
+++ b/src/tab/test/__snapshots__/index.spec.js.snap
@@ -105,7 +105,7 @@ exports[`dot prop 1`] = `
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
-        <div class="van-info van-info--dot"></div>
+        <div class="van-badge van-badge--dot"></div>
         </span></div>
       <div class="van-tabs__line"></div>
     </div>
@@ -116,12 +116,12 @@ exports[`dot prop 1`] = `
 </div>
 `;
 
-exports[`info prop 1`] = `
+exports[`badge prop 1`] = `
 <div class="van-tabs van-tabs--line">
   <div class="van-tabs__wrap">
     <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
       <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-tab__text-wrapper"><span class="van-tab__text van-tab__text--ellipsis"></span>
-        <div class="van-info">10</div>
+        <div class="van-badge">10</div>
         </span></div>
       <div class="van-tabs__line"></div>
     </div>
diff --git a/src/tab/test/index.spec.js b/src/tab/test/index.spec.js
index 9eb51fba5..29bc198ce 100644
--- a/src/tab/test/index.spec.js
+++ b/src/tab/test/index.spec.js
@@ -246,11 +246,11 @@ test('dot prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('info prop', () => {
+test('badge prop', () => {
   const wrapper = mount({
     template: `
       <van-tabs>
-        <van-tab info="10">Text</van-tab>
+        <van-tab badge="10">Text</van-tab>
       </van-tabs>
     `,
   });
diff --git a/src/tabbar-item/index.js b/src/tabbar-item/index.js
index 2698e2e74..8d3e412b9 100644
--- a/src/tabbar-item/index.js
+++ b/src/tabbar-item/index.js
@@ -7,7 +7,7 @@ import { ChildrenMixin } from '../mixins/relation';
 
 // Components
 import Icon from '../icon';
-import Info from '../info';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('tabbar-item');
 
@@ -19,7 +19,6 @@ export default createComponent({
     dot: Boolean,
     icon: String,
     name: [Number, String],
-    info: [Number, String],
     badge: [Number, String],
     iconPrefix: String,
   },
@@ -71,10 +70,7 @@ export default createComponent({
       <div class={bem({ active })} style={{ color }} onClick={this.onClick}>
         <div class={bem('icon')}>
           {this.genIcon(active)}
-          <Info
-            dot={this.dot}
-            info={isDef(this.badge) ? this.badge : this.info}
-          />
+          <Badge dot={this.dot} badge={this.badge} />
         </div>
         <div class={bem('text')}>
           {this.$slots.default ? this.$slots.default({ active }) : null}
diff --git a/src/tabbar-item/index.less b/src/tabbar-item/index.less
index da63a2fc3..3a8f3a8c9 100644
--- a/src/tabbar-item/index.less
+++ b/src/tabbar-item/index.less
@@ -31,7 +31,7 @@
     color: @tabbar-item-active-color;
   }
 
-  .van-info {
+  .van-badge {
     margin-top: @padding-base;
   }
 }
diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md
index 634a66137..4beb51019 100644
--- a/src/tabbar/README.zh-CN.md
+++ b/src/tabbar/README.zh-CN.md
@@ -184,7 +184,6 @@ export default {
 | icon-prefix `v2.5.3` | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
 | dot | 是否显示图标右上角小红点 | _boolean_ | `false` |
 | badge `v2.5.6` | 图标右上角徽标的内容 | _number \| string_ | - |
-| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _number \| string_ | - |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
diff --git a/src/tabbar/test/__snapshots__/demo.spec.js.snap b/src/tabbar/test/__snapshots__/demo.spec.js.snap
index 4edc5c2d9..c65307606 100644
--- a/src/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/src/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -86,14 +86,14 @@ exports[`renders demo correctly 1`] = `
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
             <!----></i>
-          <div class="van-info van-info--dot"></div>
+          <div class="van-badge van-badge--dot"></div>
         </div>
         <div class="van-tabbar-item__text">标签</div>
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
             <!----></i>
-          <div class="van-info">5</div>
+          <div class="van-badge">5</div>
         </div>
         <div class="van-tabbar-item__text">
           标签
@@ -102,7 +102,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
             <!----></i>
-          <div class="van-info">20</div>
+          <div class="van-badge">20</div>
         </div>
         <div class="van-tabbar-item__text">
           标签
@@ -114,7 +114,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed">
       <div class="van-tabbar-item van-tabbar-item--active">
         <div class="van-tabbar-item__icon"><img src="https://img.yzcdn.cn/vant/user-active.png">
-          <div class="van-info">3</div>
+          <div class="van-badge">3</div>
         </div>
         <div class="van-tabbar-item__text"><span>自定义</span></div>
       </div>
diff --git a/src/tabs/Title.js b/src/tabs/Title.js
index a02cba346..4755b8790 100644
--- a/src/tabs/Title.js
+++ b/src/tabs/Title.js
@@ -1,5 +1,5 @@
 import { createNamespace, isDef } from '../utils';
-import Info from '../info';
+import Badge from '../badge';
 
 const [createComponent, bem] = createNamespace('tab');
 
@@ -7,9 +7,9 @@ export default createComponent({
   props: {
     dot: Boolean,
     type: String,
-    info: [Number, String],
     color: String,
     title: String,
+    badge: [Number, String],
     isActive: Boolean,
     disabled: Boolean,
     scrollable: Boolean,
@@ -59,11 +59,11 @@ export default createComponent({
         </span>
       );
 
-      if (this.dot || (isDef(this.info) && this.info !== '')) {
+      if (this.dot || (isDef(this.badge) && this.badge !== '')) {
         return (
           <span class={bem('text-wrapper')}>
             {Text}
-            {<Info dot={this.dot} info={this.info} />}
+            {<Badge dot={this.dot} badge={this.badge} />}
           </span>
         );
       }
diff --git a/src/tabs/index.js b/src/tabs/index.js
index 1be2e8f4b..29a4ecf65 100644
--- a/src/tabs/index.js
+++ b/src/tabs/index.js
@@ -373,7 +373,7 @@ export default createComponent({
           }}
           dot={item.dot}
           type={type}
-          info={isDef(item.badge) ? item.badge : item.info}
+          badge={item.badge}
           title={item.title}
           color={this.color}
           style={item.titleStyle}
diff --git a/src/tree-select/index.js b/src/tree-select/index.js
index b123d891f..3ecb0a07d 100644
--- a/src/tree-select/index.js
+++ b/src/tree-select/index.js
@@ -1,5 +1,5 @@
 // Utils
-import { createNamespace, addUnit, isDef } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 
 // Components
 import Icon from '../icon';
@@ -58,8 +58,8 @@ export default createComponent({
       const Navs = items.map((item) => (
         <SidebarItem
           dot={item.dot}
-          info={isDef(item.badge) ? item.badge : item.info}
           title={item.text}
+          badge={item.badge}
           disabled={item.disabled}
           class={[bem('nav-item'), item.className]}
         />
diff --git a/src/tree-select/test/__snapshots__/demo.spec.js.snap b/src/tree-select/test/__snapshots__/demo.spec.js.snap
index ef3181896..073f62275 100644
--- a/src/tree-select/test/__snapshots__/demo.spec.js.snap
+++ b/src/tree-select/test/__snapshots__/demo.spec.js.snap
@@ -71,10 +71,10 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tree-select" style="height: 55vw;">
       <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">浙江<div class="van-info van-info--dot van-sidebar-item__info"></div>
+          <div class="van-sidebar-item__text">浙江<div class="van-badge van-badge--dot van-sidebar-item__badge"></div>
           </div>
         </a><a class="van-sidebar-item van-tree-select__nav-item">
-          <div class="van-sidebar-item__text">江苏<div class="van-info van-sidebar-item__info">5</div>
+          <div class="van-sidebar-item__text">江苏<div class="van-badge van-sidebar-item__badge">5</div>
           </div>
         </a></div>
       <div class="van-tree-select__content">
diff --git a/src/tree-select/test/__snapshots__/index.spec.js.snap b/src/tree-select/test/__snapshots__/index.spec.js.snap
index 245f661d1..d97ec6468 100644
--- a/src/tree-select/test/__snapshots__/index.spec.js.snap
+++ b/src/tree-select/test/__snapshots__/index.spec.js.snap
@@ -25,10 +25,10 @@ exports[`height prop 1`] = `
 </div>
 `;
 
-exports[`nav info 1`] = `
+exports[`nav badge 1`] = `
 <div class="van-tree-select" style="height: 300px;">
   <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
-      <div class="van-sidebar-item__text">group1<div class="van-info van-sidebar-item__info">3</div>
+      <div class="van-sidebar-item__text">group1<div class="van-badge van-sidebar-item__badge">3</div>
       </div>
     </a></div>
   <div class="van-tree-select__content"></div>
diff --git a/src/tree-select/test/index.spec.js b/src/tree-select/test/index.spec.js
index 3b45a3936..86b746390 100644
--- a/src/tree-select/test/index.spec.js
+++ b/src/tree-select/test/index.spec.js
@@ -151,13 +151,13 @@ test('height prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
-test('nav info', () => {
+test('nav badge', () => {
   const wrapper = mount(TreeSelect, {
     propsData: {
       items: [
         {
           text: 'group1',
-          info: 3,
+          badge: 3,
         },
       ],
     },