Merge branch 'v3-button' into next

Author: tangjinzhou

antd-tools/getTSCommonConfig.js

@@ -4,7 +4,7 @@ const fs = require('fs');
 const assign = require('object-assign');
 const { getProjectPath } = require('./utils/projectHelper');
 
-module.exports = function () {
+module.exports = function() {
   let my = {};
   if (fs.existsSync(getProjectPath('tsconfig.json'))) {
     my = require(getProjectPath('tsconfig.json'));

antd-tools/gulpfile.js

@@ -80,7 +80,7 @@ function compileTs(stream) {
   return stream
     .pipe(ts(tsConfig))
     .js.pipe(
-      through2.obj(function (file, encoding, next) {
+      through2.obj(function(file, encoding, next) {
         // console.log(file.path, file.base);
         file.path = file.path.replace(/\.[jt]sx$/, '.js');
         this.push(file);
@@ -146,7 +146,7 @@ function compile(modules) {
   const less = gulp
     .src(['components/**/*.less'])
     .pipe(
-      through2.obj(function (file, encoding, next) {
+      through2.obj(function(file, encoding, next) {
         this.push(file.clone());
         if (
           file.path.match(/\/style\/index\.less$/) ||

antd-tools/utils/getChangelog.js

@@ -1,7 +1,10 @@
 const fs = require('fs');
 
 module.exports = function getChangelog(file, version) {
-  const lines = fs.readFileSync(file).toString().split('\n');
+  const lines = fs
+    .readFileSync(file)
+    .toString()
+    .split('\n');
   const changeLog = [];
   const startPattern = new RegExp(`^## ${version}`);
   const stopPattern = /^## /; // 前一个版本

antd-tools/utils/getRunCmdEnv.js

@@ -11,7 +11,13 @@ module.exports = function getRunCmdEnv() {
   const nodeModulesBinDir = path.join(__dirname, '../../node_modules/.bin');
 
   Object.entries(env)
-    .filter(v => v.slice(0, 1).pop().toLowerCase() === 'path')
+    .filter(
+      v =>
+        v
+          .slice(0, 1)
+          .pop()
+          .toLowerCase() === 'path',
+    )
     .forEach(v => {
       const key = v.slice(0, 1).pop();
       env[key] = env[key] ? `${nodeModulesBinDir}:${env[key]}` : nodeModulesBinDir;

antd-tools/utils/projectHelper.js

@@ -20,7 +20,7 @@ function injectRequire() {
   const Module = require('module');
 
   const oriRequire = Module.prototype.require;
-  Module.prototype.require = function (...args) {
+  Module.prototype.require = function(...args) {
     const moduleName = args[0];
     try {
       return oriRequire.apply(this, args);

components/_util/hooks/useConfigInject.ts

@@ -18,6 +18,7 @@ export default (
   form?: ComputedRef<{
     requiredMark?: RequiredMark;
   }>;
+  autoInsertSpaceInButton: ComputedRef<Boolean>;
   renderEmpty?: ComputedRef<(componentName?: string) => VNodeChild | JSX.Element>;
 } => {
   const configProvider = inject<UnwrapRef<ConfigProviderProps>>(
@@ -26,6 +27,7 @@ export default (
   );
   const prefixCls = computed(() => configProvider.getPrefixCls(name, props.prefixCls));
   const direction = computed(() => configProvider.direction);
+  const autoInsertSpaceInButton = computed(() => configProvider.autoInsertSpaceInButton);
   const renderEmpty = computed(() => configProvider.renderEmpty);
   const space = computed(() => configProvider.space);
   const pageHeader = computed(() => configProvider.pageHeader);
@@ -41,6 +43,7 @@ export default (
     space,
     pageHeader,
     form,
+    autoInsertSpaceInButton,
     renderEmpty,
   };
 };

components/button/__tests__/__snapshots__/index.test.js.snap

@@ -59,7 +59,7 @@ exports[`Button should not render as link button when href is undefined 1`] = `
 `;
 
 exports[`Button should support link button 1`] = `
-<a target="_blank" class="ant-btn" href="http://ant.design">
+<a class="ant-btn" href="http://ant.design" target="_blank">
   <!----><span>link button</span>
 </a>
 `;

components/button/__tests__/index.test.js

@@ -2,9 +2,9 @@ import Button from '../index';
 import SearchOutlined from '@ant-design/icons-vue/SearchOutlined';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-import { asyncExpect } from '@/tests/utils';
-import { sleep } from '../../../tests/utils';
-import mountTest from '../../../tests/shared/mountTest';
+import { asyncExpect, sleep } from '@/tests/utils';
+import mountTest from '@/tests/shared/mountTest';
+import { resetWarned } from '../../_util/warning';
 
 describe('Button', () => {
   mountTest(Button);
@@ -27,7 +27,7 @@ describe('Button', () => {
     expect(wrapper.find('.ant-btn-primary').exists()).toBe(true);
   });
 
-  it('renders Chinese characters correctly', done => {
+  it('renders Chinese characters correctly', (done) => {
     const wrapper = mount({
       render() {
         return <Button>按钮</Button>;
@@ -247,4 +247,51 @@ describe('Button', () => {
       wrapper.unmount();
     }).not.toThrow();
   });
+
+  it('should warning when pass type=link and ghost=true', () => {
+    resetWarned();
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount({
+      render() {
+        return <Button type="link" ghost />;
+      },
+    });
+    expect(warnSpy).toHaveBeenCalledWith(
+      "Warning: [ant-design-vue: Button] `link` or `text` button can't be a `ghost` button.",
+    );
+    warnSpy.mockRestore();
+  });
+
+  it('should warning when pass type=text and ghost=true', () => {
+    resetWarned();
+    const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount({
+      render() {
+        return <Button type="text" ghost />;
+      },
+    });
+    expect(warnSpy).toHaveBeenCalledWith(
+      "Warning: [ant-design-vue: Button] `link` or `text` button can't be a `ghost` button.",
+    );
+    warnSpy.mockRestore();
+  });
+
+  it('should not redirect when button is disabled', async () => {
+    const onClick = jest.fn();
+    const wrapper = mount({
+      render() {
+        return (
+          <Button href="https://ant.design" onClick={onClick} disabled>
+            click me
+          </Button>
+        );
+      },
+    });
+    await asyncExpect(() => {
+      wrapper.trigger('click');
+    });
+    await asyncExpect(() => {
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
 });

components/button/__tests__/wave.test.js

@@ -0,0 +1,79 @@
+import Button from '../index';
+import { mount } from '@vue/test-utils';
+import { asyncExpect, sleep } from '@/tests/utils';
+
+describe('click wave effect', () => {
+  async function clickButton(wrapper) {
+    await asyncExpect(() => {
+      wrapper.find('.ant-btn').trigger('click');
+    });
+    wrapper.find('.ant-btn').element.dispatchEvent(new Event('transitionstart'));
+    await sleep(20);
+    wrapper.find('.ant-btn').element.dispatchEvent(new Event('animationend'));
+    await sleep(20);
+  }
+
+  it('should have click wave effect for primary button', async () => {
+    const wrapper = mount({
+      render() {
+        return <Button type="primary">button</Button>;
+      },
+    });
+    await clickButton(wrapper);
+    expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
+      'true',
+    );
+  });
+
+  it('should have click wave effect for default button', async () => {
+    const wrapper = mount({
+      render() {
+        return <Button>button</Button>;
+      },
+    });
+    await clickButton(wrapper);
+    expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
+      'true',
+    );
+  });
+
+  it('should not have click wave effect for link type button', async () => {
+    const wrapper = mount({
+      render() {
+        return <Button type="link">button</Button>;
+      },
+    });
+    await clickButton(wrapper);
+    expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
+      undefined,
+    );
+  });
+
+  it('should not have click wave effect for text type button', async () => {
+    const wrapper = mount({
+      render() {
+        return <Button type="text">button</Button>;
+      },
+    });
+    await clickButton(wrapper);
+    expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
+      undefined,
+    );
+  });
+
+  it('should handle transitionstart', async () => {
+    const wrapper = mount({
+      render() {
+        return <Button type="primary">button</Button>;
+      },
+    });
+    await clickButton(wrapper);
+    const buttonNode = wrapper.find('.ant-btn').element;
+    buttonNode.dispatchEvent(new Event('transitionstart'));
+    expect(wrapper.find('.ant-btn').attributes('ant-click-animating-without-extra-node')).toBe(
+      'true',
+    );
+    wrapper.unmount();
+    buttonNode.dispatchEvent(new Event('transitionstart'));
+  });
+});

components/button/button-group.tsx

@@ -1,53 +1,49 @@
-import { defineComponent, inject } from 'vue';
-import { filterEmpty, getSlot } from '../_util/props-util';
+import { computed, defineComponent } from 'vue';
+import { flattenChildren } from '../_util/props-util';
 import PropTypes from '../_util/vue-types';
-import { defaultConfigProvider } from '../config-provider';
-import { tuple } from '../_util/type';
+import useConfigInject from '../_util/hooks/useConfigInject';
 
-const ButtonGroupProps = {
+import type { ExtractPropTypes, PropType } from 'vue';
+import type { SizeType } from '../config-provider';
+
+const buttonGroupProps = {
   prefixCls: PropTypes.string,
-  size: PropTypes.oneOf(tuple('small', 'large', 'default')),
+  size: {
+    type: String as PropType<SizeType>,
+  },
 };
-export { ButtonGroupProps };
+export { buttonGroupProps };
+
+export type ButtonGroupProps = Partial<ExtractPropTypes<typeof buttonGroupProps>>;
+
 export default defineComponent({
   name: 'AButtonGroup',
-  props: ButtonGroupProps,
-  setup() {
-    const configProvider = inject('configProvider', defaultConfigProvider);
-    return {
-      configProvider,
-    };
-  },
-  data() {
-    return {
-      sizeMap: {
-        large: 'lg',
-        small: 'sm',
-      },
-    };
-  },
-  render() {
-    const { prefixCls: customizePrefixCls, size } = this;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('btn-group', customizePrefixCls);
-
-    // large => lg
-    // small => sm
-    let sizeCls = '';
-    switch (size) {
-      case 'large':
-        sizeCls = 'lg';
-        break;
-      case 'small':
-        sizeCls = 'sm';
-        break;
-      default:
-        break;
-    }
-    const classes = {
-      [`${prefixCls}`]: true,
-      [`${prefixCls}-${sizeCls}`]: sizeCls,
+  props: buttonGroupProps,
+  setup(props, { slots }) {
+    const { prefixCls, direction } = useConfigInject('btn-group', props);
+    const classes = computed(() => {
+      const { size } = props;
+      // large => lg
+      // small => sm
+      let sizeCls = '';
+      switch (size) {
+        case 'large':
+          sizeCls = 'lg';
+          break;
+        case 'small':
+          sizeCls = 'sm';
+          break;
+        default:
+          break;
+      }
+      return {
+        [`${prefixCls.value}`]: true,
+        [`${prefixCls.value}-${sizeCls}`]: sizeCls,
+        [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
+      };
+    });
+    return () => {
+      return <div class={classes.value}>{flattenChildren(slots.default?.())}</div>;
     };
-    return <div class={classes}>{filterEmpty(getSlot(this))}</div>;
   },
 });