feat: update breadcrumb && button

components/breadcrumb/Breadcrumb.jsx

@@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types';
 import { cloneElement } from '../_util/vnode';
 import { filterEmpty, getComponentFromProp, getSlotOptions } from '../_util/props-util';
 import warning from '../_util/warning';
+import { ConfigConsumerProps } from '../config-provider';
 import BreadcrumbItem from './BreadcrumbItem';
 
 const Route = PropTypes.shape({
@@ -10,7 +11,7 @@ const Route = PropTypes.shape({
 }).loose;
 
 const BreadcrumbProps = {
-  prefixCls: PropTypes.string.def('ant-breadcrumb'),
+  prefixCls: PropTypes.string,
   routes: PropTypes.arrayOf(Route),
   params: PropTypes.any,
   separator: PropTypes.any,
@@ -32,6 +33,9 @@ function getBreadcrumbName(route, params) {
 export default {
   name: 'ABreadcrumb',
   props: BreadcrumbProps,
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   methods: {
     defaultItemRender({ route, params, routes, paths }) {
       const isLastItem = routes.indexOf(route) === routes.length - 1;
@@ -41,7 +45,10 @@ export default {
   },
   render() {
     let crumbs;
-    const { prefixCls, routes, params = {}, $slots, $scopedSlots } = this;
+    const { prefixCls: customizePrefixCls, routes, params = {}, $slots, $scopedSlots } = this;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
+
     const children = filterEmpty($slots.default);
     const separator = getComponentFromProp(this, 'separator');
     if (routes && routes.length > 0) {

components/breadcrumb/BreadcrumbItem.jsx

@@ -1,16 +1,23 @@
 import PropTypes from '../_util/vue-types';
 import { hasProp, getComponentFromProp } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 
 export default {
   name: 'ABreadcrumbItem',
   __ANT_BREADCRUMB_ITEM: true,
   props: {
-    prefixCls: PropTypes.string.def('ant-breadcrumb'),
+    prefixCls: PropTypes.string,
     href: PropTypes.string,
     separator: PropTypes.any,
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   render() {
-    const { prefixCls, $slots } = this;
+    const { prefixCls: customizePrefixCls, $slots } = this;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
+
     const children = $slots.default;
     let link;
     if (hasProp(this, 'href')) {

components/button/button-group.jsx

@@ -1,7 +1,8 @@
 import { filterEmpty } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
+
 const ButtonGroupProps = {
   prefixCls: {
-    default: 'ant-btn-group',
     type: String,
   },
   size: {
@@ -14,6 +15,9 @@ export { ButtonGroupProps };
 export default {
   name: 'AButtonGroup',
   props: ButtonGroupProps,
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   data() {
     return {
       sizeMap: {
@@ -22,20 +26,27 @@ export default {
       },
     };
   },
-  computed: {
+  render() {
-    classes() {
+    const { prefixCls: customizePrefixCls, size, sizeMap, $slots } = this;
-      const { prefixCls, size, sizeMap } = this;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
-      const sizeCls = sizeMap[size] || '';
+    const prefixCls = getPrefixCls('btn-group', customizePrefixCls);
-      return [
+
-        {
+    // large => lg
+    // small => sm
+    let sizeCls = '';
+    switch (size) {
+      case 'large':
+        sizeCls = 'lg';
+        break;
+      case 'small':
+        sizeCls = 'sm';
+      default:
+        break;
+    }
+    const classes = {
       [`${prefixCls}`]: true,
       [`${prefixCls}-${sizeCls}`]: sizeCls,
-        },
+    };
-      ];
-    },
-  },
-  render() {
-    const { classes, $slots } = this;
     return <div class={classes}>{filterEmpty($slots.default)}</div>;
   },
 };

components/button/button.jsx

@@ -1,22 +1,26 @@
 import Wave from '../_util/wave';
 import Icon from '../icon';
-const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
-const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 import buttonTypes from './buttonTypes';
 import { filterEmpty } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
+
+const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
+const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
 const props = buttonTypes();
 export default {
   name: 'AButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,
   props,
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   data() {
     return {
       sizeMap: {
         large: 'lg',
         small: 'sm',
       },
-      // clicked: false,
       sLoading: !!this.loading,
       hasTwoCNChar: false,
     };
@@ -24,7 +28,7 @@ export default {
   computed: {
     classes() {
       const {
-        prefixCls,
+        prefixCls: customizePrefixCls,
         type,
         shape,
         size,
@@ -36,6 +40,10 @@ export default {
         icon,
         $slots,
       } = this;
+      const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+      const prefixCls = getPrefixCls('btn', customizePrefixCls);
+      const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
+
       const sizeCls = sizeMap[size] || '';
       const children = filterEmpty($slots.default);
       return {
@@ -46,7 +54,7 @@ export default {
         [`${prefixCls}-icon-only`]: !children && children !== 0 && icon,
         [`${prefixCls}-loading`]: sLoading,
         [`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
-        [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
+        [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
         [`${prefixCls}-block`]: block,
       };
     },
@@ -142,7 +150,8 @@ export default {
     const iconType = sLoading ? 'loading' : icon;
     const iconNode = iconType ? <Icon type={iconType} /> : null;
     const children = filterEmpty($slots.default);
-    const kids = children.map(child => this.insertSpace(child, this.isNeedInserted()));
+    const autoInsertSpace = this.configProvider.autoInsertSpaceInButton !== false;
+    const kids = children.map(child => this.insertSpace(child, this.isNeedInserted() && autoInsertSpace));
 
     if ($attrs.href !== undefined) {
       return (

components/button/buttonTypes.js

@@ -1,10 +1,10 @@
 import PropTypes from '../_util/vue-types';
 export default () => ({
-  prefixCls: PropTypes.string.def('ant-btn'),
+  prefixCls: PropTypes.string,
   type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'default']).def('default'),
   htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).def('button'),
   icon: PropTypes.string,
-  shape: PropTypes.oneOf(['circle', 'circle-outline']),
+  shape: PropTypes.oneOf(['circle', 'circle-outline', 'round']),
   size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
   loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
   disabled: PropTypes.bool,

components/button/demo/basic.md

@@ -16,6 +16,10 @@ There are `primary` button, `default` button, `dashed` button and `danger` butto
     <a-button>Default</a-button>
     <a-button type="dashed">Dashed</a-button>
     <a-button type="danger">Danger</a-button>
+    <a-config-provider :autoInsertSpaceInButton="false">
+      <a-button type="primary">按钮</a-button>
+    </a-config-provider>
+    <a-button type="primary">按钮</a-button>
   </div>
 </template>
 ```

components/button/demo/size.md

@@ -25,6 +25,7 @@ If a large or small button is desired, set the `size` property to either `large`
     <a-button type="danger" :size="size">Danger</a-button>
     <br />
     <a-button type="primary" shape="circle" icon="download" :size="size" />
+    <a-button type="primary" shape="round" icon="download" :size="size">Download</a-button>
     <a-button type="primary" icon="download" :size="size">Download</a-button>
     <br />
     <a-button-group :size="size">

components/button/index.en-US.md

@@ -9,7 +9,7 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
 | icon | set the icon of button, see: Icon component | string | - |
 | loading | set the loading status of button | boolean \| { delay: number } | false |
-| shape | can be set to `circle` or omitted | string | - |
+| shape | can be set to `circle`, `round` or omitted | string | - |
 | size | can be set to `small` `large` or omitted | string | `default` |
 | type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
 | block | option to fit button width to its parent width | boolean | `false` |
@@ -20,4 +20,11 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | click | set the handler to handle `click` event | (event) => void |
 
 `<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
+`<Button href="http://example.com">Hello world!</Button>` will be rendered into `<a href="http://example.com"><span>Hello world!</span></a>`.
+
+## FAQ
+
+### How to remove space between 2 chinese characters
+
+Use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
 

components/button/index.zh-CN.md

@@ -1,6 +1,6 @@
 ## API
 
-通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
+通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
 
 按钮的属性说明如下：
 
@@ -11,7 +11,7 @@
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
 | icon | 设置按钮的图标类型 | string | - |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
-| shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - |
+| shape | 设置按钮形状，可选值为 `circle`、 `round`  或者不设 | string | - |
 | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
 | type | 设置按钮类型，可选值为 `primary` `dashed` `danger` | string | - |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
@@ -22,4 +22,11 @@
 | click | 点击按钮时的回调 | (event) => void |
 
 `<a-button>Hello world!</a-button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到原生 button 上。
+`<Button href="http://example.com">Hello world!</Button>` 则会渲染为 `<a href="http://example.com"><span>Hello world!</span></a>`。
+
+## FAQ
+
+### 如何移除 2 个汉字之间的空格
+
+设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。