feat(Icon): add dot prop (#4425)

src/goods-action/README.md

@@ -82,7 +82,7 @@ Use `info` prop to show badge in icon
 | text | Button text | *string* | - | - |
 | icon | Icon | *string* | - | - |
 | icon-class | Icon class name | *any* | `''` | - |
-| info | Content of badge in the upper right corner of icon | *string \| number* | - | - |
+| info | Content of the badge | *string \| number* | - | - |
 | url | Link | *string* | - | - |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | - |
 | replace | If true, the navigation will not leave a history record | *boolean* | `false` | - |

src/goods-action/README.zh-CN.md

@@ -84,7 +84,7 @@ export default {
 | text | 按钮文字 | *string* | - | - |
 | icon | 图标 | *string* | - | - |
 | icon-class | 图标额外类名 | *any* | - | - |
-| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
+| info | 图标右上角徽标的内容 | *string \| number* | - | - |
 | url | 点击后跳转的链接地址 | *string* | - | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |
 | replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |

src/grid/README.md

@@ -114,7 +114,7 @@ Vue.use(Grid).use(GridItem);
 |------|------|------|------|------|
 | text | Text | *string* | - | - |
 | icon | Icon name or URL | *string* | - | - |
-| info | Content of badge in the upper right corner of icon | *string \| number* | `''` | 2.2.1 |
+| info | Content of the badge | *string \| number* | `''` | 2.2.1 |
 | url | Link URL | *string* | - | - |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | - |
 | replace | If true, the navigation will not leave a history record | *boolean* | `false` | - |

src/grid/README.zh-CN.md

@@ -132,7 +132,7 @@ Vue.use(Grid).use(GridItem);
 |------|------|------|------|------|
 | text | 文字 | *string* | - | - |
 | icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon) | *string* | - | - |
-| info | 图标右上角徽标提示的内容 | *string \| number* | - | 2.2.1 |
+| info | 图标右上角徽标的内容 | *string \| number* | - | 2.2.1 |
 | url | 点击后跳转的链接地址 | *string* | - | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |
 | replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |

src/icon/README.md

@@ -23,6 +23,7 @@ Use `name` prop to set icon name or icon URL
 ### Show Info
 
 ```html
+<van-icon name="chat" dot />
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```
@@ -63,7 +64,8 @@ import 'vant/lib/icon/local.css';
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
 | name | Icon name or URL | *string* | `''` | - |
-| info | Content of badge in the upper right corner of icon | *string \| number* | `''` | - |
+| dot | Whether to show red dot | *boolean* | `false` | 2.2.1 |
+| info | Content of the badge | *string \| number* | `''` | - |
 | color | Icon color | *string* | `inherit` | - |
 | size | Icon size | *string \| number* | `inherit` | - |
 | class-prefix | ClassName prefix | *string* | `van-icon` | - |

src/icon/README.zh-CN.md

@@ -24,11 +24,12 @@ Vue.use(Icon);
 <van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />
 ```
 
-### 显示徽标
+### 提示信息
 
-设置`info`属性后，会在图标的右上角显示红色的徽标
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
 
 ```html
+<van-icon name="chat" dot />
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```
@@ -73,7 +74,8 @@ import 'vant/lib/icon/local.css';
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | name | 图标名称或图片链接 | *string* | - | - |
-| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
+| dot | 是否显示图标右上角小红点 | *boolean* | `false` | 2.2.1 |
+| info | 图标右上角徽标的内容 | *string \| number* | - | - |
 | color | 图标颜色 | *string* | `inherit` | - |
 | size | 图标大小，如 `20px` `2em`，默认单位为`px` | *string \| number* | `inherit` | - |
 | class-prefix | 类名前缀 | *string* | `van-icon` | - |

src/icon/demo/index.vue

@@ -1,19 +1,21 @@
 <template>
   <demo-section>
     <van-tabs v-model="tab" sticky :color="BLUE">
-      <van-tab title="基础图标">
+      <van-tab :title="$t('basic')">
         <van-col v-for="icon in icons.basic" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
         </van-col>
       </van-tab>
-      <van-tab title="线框风格">
+
+      <van-tab :title="$t('outline')">
         <van-col v-for="icon in icons.outline" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
         </van-col>
       </van-tab>
-      <van-tab title="实底风格">
+
+      <van-tab :title="$t('filled')">
         <van-col v-for="icon in icons.filled" :key="icon" span="6" @click="copy(icon)">
           <van-icon :name="icon" />
           <span>{{ icon }}</span>
@@ -55,15 +57,19 @@ export default {
   i18n: {
     'zh-CN': {
       title: '图标列表',
-      info: '显示徽标',
+      info: '提示信息',
       basic: '基础图标',
-      copied: '复制成功'
+      copied: '复制成功',
+      outline: '线框风格',
+      filled: '实底风格'
     },
     'en-US': {
       title: 'Icon List',
       info: 'Show Info',
-      basic: 'Basic Icon',
+      basic: 'Basic',
-      copied: 'Copied'
+      copied: 'Copied',
+      outline: 'Outline',
+      filled: 'Filled'
     }
   },
 

src/icon/index.tsx

@@ -8,6 +8,7 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
 export type IconProps = {
+  dot?: boolean;
   tag: keyof HTMLElementTagNameMap | string;
   name: string;
   size?: string | number;
@@ -47,12 +48,13 @@ function Icon(
       {imageIcon && (
         <Image class={bem('image')} fit="contain" src={props.name} showLoading={false} />
       )}
-      <Info info={props.info} />
+      <Info dot={props.dot} info={props.info} />
     </props.tag>
   );
 }
 
 Icon.props = {
+  dot: Boolean,
   name: String,
   size: [Number, String],
   info: [Number, String],

src/icon/test/__snapshots__/index.spec.js.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`dot prop 1`] = `
+<i class="van-icon van-icon-undefined">
+  <div class="van-info van-info--dot"></div>
+</i>
+`;
+
 exports[`render icon default slot 1`] = `
 <i class="van-icon van-icon-success">Default slot
   <!----></i>

src/icon/test/index.spec.js

@@ -46,6 +46,15 @@ test('tag prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('dot prop', () => {
+  const wrapper = mount(Icon, {
+    propsData: {
+      dot: true
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('size without unit', () => {
   const wrapper = mount(Icon, {
     propsData: {

src/info/index.less

@@ -2,7 +2,7 @@
 
 .van-info {
   position: absolute;
-  top: -@info-size / 2;
+  top: 0;
   right: 0;
   box-sizing: border-box;
   min-width: @info-size;
@@ -16,6 +16,14 @@
   background-color: @info-background-color;
   border: @info-border-width solid @white;
   border-radius: @info-size;
-  transform: translateX(50%);
+  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%;
+  }
 }

src/info/index.tsx

@@ -6,6 +6,7 @@ import { CreateElement, RenderContext } from 'vue/types';
 import { DefaultSlots } from '../utils/types';
 
 export type InfoProps = {
+  dot?: boolean;
   info?: string | number;
 };
 
@@ -17,18 +18,22 @@ function Info(
   slots: DefaultSlots,
   ctx: RenderContext<InfoProps>
 ) {
-  if (!isDef(props.info) || props.info === '') {
+  const { dot, info } = props;
+  const showInfo = isDef(info) && info !== '';
+
+  if (!dot && !showInfo) {
     return;
   }
 
   return (
-    <div class={bem()} {...inherit(ctx, true)}>
+    <div class={bem({ dot })} {...inherit(ctx, true)}>
-      {props.info}
+      {dot ? '' : props.info}
     </div>
   );
 }
 
 Info.props = {
+  dot: Boolean,
   info: [Number, String]
 };
 

src/style/var.less

@@ -318,6 +318,8 @@
 @info-font-weight: 500;
 @info-border-width: 1px;
 @info-background-color: @red;
+@info-dot-color: @red;
+@info-dot-size: 8px;
 @info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
 
 // Image

src/tabbar/README.md

@@ -163,7 +163,7 @@ export default {
 | name | Identifier | *string \| number* | Item index | - |
 | icon | Icon name | *string* | - | - |
 | dot | Whether to show red dot | *boolean* | - | - |
-| info | Content of badge in the upper right corner of icon | *string \| number* | - | - |
+| info | Content of the badge | *string \| number* | - | - |
 | url | Link | *string* | - | - |
 | to | Target route of the link, same as to of vue-router | *string \| object* | - | - |
 | replace | If true, the navigation will not leave a history record | *boolean* | `false` | - |

src/tabbar/README.zh-CN.md

@@ -57,7 +57,9 @@ export default {
 }
 ```
 
-### 显示徽标
+### 提示信息
+
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标
 
 ```html
 <van-tabbar v-model="active">
@@ -168,8 +170,8 @@ export default {
 |------|------|------|------|------|
 | name | 标签名称，作为匹配的标识符 | *string \| number* | 当前标签的索引值 | - |
 | icon | 图标名称或图片链接，可选值见 [Icon 组件](/#/zh-CN/icon)| *string* | - | - |
-| dot | 是否显示小红点 | *boolean* | - | - |
+| dot | 是否显示图标右上角小红点 | *boolean* | `false` | - |
-| info | 图标右上角徽标提示的内容 | *string \| number* | - | - |
+| info | 图标右上角徽标的内容 | *string \| number* | - | - |
 | url | 点击后跳转的链接地址 | *string* | - | - |
 | to | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | *string \| object* | - | - |
 | replace | 跳转时是否替换当前页面历史 | *boolean* | `false` | - |

src/tabbar/demo/index.vue

@@ -94,7 +94,7 @@
 export default {
   i18n: {
     'zh-CN': {
-      badge: '显示徽标',
+      badge: '提示信息',
       customIcon: '自定义图标',
       customColor: '自定义颜色',
       matchByName: '通过名称匹配'