chore: Merge feature

.antd-tools.config.js

@@ -3,6 +3,7 @@ const path = require('path');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const packageInfo = require('./package.json');
 const darkVars = require('./scripts/dark-vars');
+const compactVars = require('./scripts/compact-vars');
 
 // We need compile additional content for antd user
 function finalizeCompile() {
@@ -49,35 +50,38 @@ function finalizeCompile() {
   }
 }
 
+function buildThemeFile(theme, vars) {
+  // Build less entry file: dist/antd.${theme}.less
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `antd.${theme}.less`),
+    `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
+  );
+
+  // eslint-disable-next-line
+  console.log(`Built a entry less file to dist/antd.${theme}.less`);
+
+  // Build ${theme}.js: dist/${theme}-theme.js, for less-loader
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `${theme}-theme.js`),
+    `module.exports = ${JSON.stringify(vars, null, 2)};`,
+  );
+
+  // eslint-disable-next-line
+  console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
+}
+
 function finalizeDist() {
   if (fs.existsSync(path.join(__dirname, './dist'))) {
     // Build less entry file: dist/antd.less
     fs.writeFileSync(
       path.join(process.cwd(), 'dist', 'antd.less'),
       '@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
     );
-
     // eslint-disable-next-line
     console.log('Built a entry less file to dist/antd.less');
-
-    // Build less entry file: dist/antd.dark.less
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'antd.dark.less'),
-      '@import "../lib/style/dark.less";\n@import "../lib/style/components.less";',
-    );
-
-    // eslint-disable-next-line
-    console.log('Built a entry less file to dist/antd.dark.less');
-
-    // Build dark.js: dist/dark-theme.js, for less-loader
-
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'dark-theme.js'),
-      `module.exports = ${JSON.stringify(darkVars, null, 2)};`,
-    );
-
-    // eslint-disable-next-line
-    console.log('Built a dark theme js file to dist/dark-theme.js');
+    buildThemeFile('dark', darkVars);
+    buildThemeFile('compact', compactVars);
   }
 }
 

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

@@ -27,6 +27,7 @@ Array [
   "Drawer",
   "Empty",
   "Form",
+  "Grid",
   "Input",
   "InputNumber",
   "Layout",
@@ -49,6 +50,7 @@ Array [
   "Select",
   "Skeleton",
   "Slider",
+  "Space",
   "Spin",
   "Steps",
   "Switch",

components/_util/getRenderPropValue.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export type RenderFunction = () => React.ReactNode;
+
+export const getRenderPropValue = (
+  propValue?: React.ReactNode | RenderFunction,
+): React.ReactNode => {
+  if (!propValue) {
+    return null;
+  }
+
+  const isRenderFunction = typeof propValue === 'function';
+  if (isRenderFunction) {
+    return (propValue as RenderFunction)();
+  }
+
+  return propValue;
+};

components/alert/style/index.less

@@ -12,7 +12,7 @@
   border-radius: @border-radius-base;
 
   &&-no-icon {
-    padding: 8px 15px;
+    padding: @alert-no-icon-padding-vertical 15px;
   }
 
   &&-closable {
@@ -71,7 +71,7 @@
 
   &-close-icon {
     position: absolute;
-    top: 8px;
+    top: @padding-xs;
     right: 16px;
     padding: 0;
     overflow: hidden;
@@ -108,7 +108,7 @@
   }
 
   &-with-description&-no-icon {
-    padding: 15px;
+    padding: @alert-with-description-no-icon-padding-vertical 15px;
   }
 
   &-with-description &-icon {

components/auto-complete/style/index.less

@@ -12,5 +12,5 @@
   // https://github.com/ant-design/ant-design/issues/22302
   .@{select-prefix-cls}-clear {
     right: 13px;
-  } 
+  }
 }

components/badge/demo/colorful.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-3.16.0 后新增。我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
+我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
 
 ## en-US
 
-New feature after 3.16.0. We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
+We preset a series of colorful Badge styles for use in different situations. You can also set it to a hex color string for custom color.
 
 ```jsx
 import { Badge } from 'antd';

components/breadcrumb/BreadcrumbItem.tsx

@@ -10,6 +10,7 @@ export interface BreadcrumbItemProps {
   separator?: React.ReactNode;
   href?: string;
   overlay?: DropDownProps['overlay'];
+  dropdownProps?: DropDownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
 }
 
@@ -58,10 +59,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
    * Wrap a DropDown
    */
   renderBreadcrumbNode = (breadcrumbItem: React.ReactNode, prefixCls: string) => {
-    const { overlay } = this.props;
+    const { overlay, dropdownProps } = this.props;
     if (overlay) {
       return (
-        <DropDown overlay={overlay} placement="bottomCenter">
+        <DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <DownOutlined />

components/breadcrumb/index.en-US.md

@@ -30,6 +30,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 | href | Target of hyperlink | string | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
 | onClick | Set the handler to handle `click` event | (e:MouseEvent)=>void | - |  |
+| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
 
 ### Breadcrumb.Separator
 

components/breadcrumb/index.zh-CN.md

@@ -26,11 +26,12 @@ title: Breadcrumb
 
 ### Breadcrumb.Item
 
-| 参数    | 说明           | 类型                                   | 默认值 | 版本 |
-| ------- | -------------- | -------------------------------------- | ------ | ---- |
-| href    | 链接的目的地   | string                                 | -      |      |
-| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | -      |      |
-| onClick | 单击事件       | (e:MouseEvent)=>void                   | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| href | 链接的目的地 | string | - |  |
+| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
+| onClick | 单击事件 | (e:MouseEvent)=>void | - |  |
+| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
 
 ### Breadcrumb.Separator
 

components/button/style/index.less

@@ -182,7 +182,7 @@
   // To ensure that a space will be placed between character and `Icon`.
   > .@{iconfont-css-prefix} + span,
   > span + .@{iconfont-css-prefix} {
-    margin-left: 8px;
+    margin-left: @margin-xs;
   }
 
   &-background-ghost {

components/button/style/mixin.less

@@ -254,6 +254,7 @@
     .button-size(
       @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
     );
+    line-height: @btn-height-sm - 2px;
   }
 }
 // primary button style
@@ -370,14 +371,23 @@
 // square button: the content only contains icon
 .btn-square(@btnClassName: btn) {
   .square(@btn-square-size);
-  .button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius-base);
+  .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
+  & > * {
+    font-size: @btn-square-only-icon-size;
+  }
   &.@{btnClassName}-lg {
     .square(@btn-square-size-lg);
-    .button-size(@btn-square-size-lg; 0; @btn-font-size-lg + 2px; @btn-border-radius-base);
+    .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
+    & > * {
+      font-size: @btn-square-only-icon-size-lg;
+    }
   }
   &.@{btnClassName}-sm {
     .square(@btn-square-size-sm);
-    .button-size(@btn-square-size-sm; 0; @font-size-base; @btn-border-radius-base);
+    .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
+    & > * {
+      font-size: @btn-square-only-icon-size-sm;
+    }
   }
 }
 // circle button: the content only contains icon