diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
index 73d60d3f5b73..da9edf32fd39 100644
--- a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
@@ -34,7 +34,7 @@ exports[`Breadcrumb filter React.Fragment 1`] = `
exports[`Breadcrumb rtl render component should be rendered correctly in RTL direction 1`] = `
`;
diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
index 2edaf549c18a..20e2cd76071d 100644
--- a/components/breadcrumb/style/index.less
+++ b/components/breadcrumb/style/index.less
@@ -9,6 +9,14 @@
color: @breadcrumb-base-color;
font-size: @breadcrumb-font-size;
+ &-rtl {
+ direction: rtl;
+
+ > span {
+ float: right;
+ }
+ }
+
.@{iconfont-css-prefix} {
font-size: @breadcrumb-icon-font-size;
}
@@ -40,12 +48,22 @@
&-link {
> .@{iconfont-css-prefix} + span {
margin-left: 4px;
+
+ .@{breadcrumb-prefix-cls}-rtl & {
+ margin-right: 4px;
+ margin-left: 0;
+ }
}
}
&-overlay-link {
> .@{iconfont-css-prefix} {
margin-left: 4px;
+
+ .@{breadcrumb-prefix-cls}-rtl & {
+ margin-right: 4px;
+ margin-left: 0;
+ }
}
}
}
diff --git a/components/button/__tests__/index.test.js b/components/button/__tests__/index.test.js
index 88542d6c5f09..d08a2f7bc8fb 100644
--- a/components/button/__tests__/index.test.js
+++ b/components/button/__tests__/index.test.js
@@ -3,6 +3,7 @@ import { render, mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { SearchOutlined } from '@ant-design/icons';
import Button from '..';
+import ConfigProvider from '../../config-provider';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { sleep } from '../../../tests/utils';
@@ -252,4 +253,23 @@ describe('Button', () => {
);
warnSpy.mockRestore();
});
+
+ it('skip check 2 words when ConfigProvider disable this', () => {
+ const wrapper = mount(
+
+
+ ,
+ );
+
+ const btn = wrapper.find('button').instance();
+ Object.defineProperty(btn, 'textContent', {
+ get() {
+ throw new Error('Should not called!!!');
+ },
+ });
+ wrapper
+ .find('Button')
+ .instance()
+ .forceUpdate();
+ });
});
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 798ea4ba8af0..329766b85207 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -5,7 +5,7 @@ import { LoadingOutlined } from '@ant-design/icons';
import omit from 'omit.js';
import Group from './button-group';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext, ConfigConsumerProps } from '../config-provider';
import Wave from '../_util/wave';
import { Omit, tuple } from '../_util/type';
import warning from '../_util/warning';
@@ -114,6 +114,8 @@ class Button extends React.Component
{
static __ANT_BUTTON = true;
+ static contextType = ConfigContext;
+
static defaultProps = {
loading: false,
ghost: false,
@@ -177,8 +179,10 @@ class Button extends React.Component {
};
fixTwoCNChar() {
+ const { autoInsertSpaceInButton }: ConfigConsumerProps = this.context;
+
// Fix for HOC usage like
- if (!this.buttonNode) {
+ if (!this.buttonNode || autoInsertSpaceInButton === false) {
return;
}
const buttonText = this.buttonNode.textContent || this.buttonNode.innerText;
@@ -200,110 +204,110 @@ class Button extends React.Component {
return React.Children.count(children) === 1 && !icon && type !== 'link';
}
- renderButton = ({ getPrefixCls, autoInsertSpaceInButton, direction }: ConfigConsumerProps) => (
-
- {size => {
- const {
- prefixCls: customizePrefixCls,
- type,
- danger,
- shape,
- size: customizeSize,
- className,
- children,
- icon,
- ghost,
- block,
- ...rest
- } = this.props;
- const { loading, hasTwoCNChar } = this.state;
-
- warning(
- !(typeof icon === 'string' && icon.length > 2),
- 'Button',
- `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
- );
-
- const prefixCls = getPrefixCls('btn', customizePrefixCls);
- const autoInsertSpace = autoInsertSpaceInButton !== false;
-
- // large => lg
- // small => sm
- let sizeCls = '';
- switch (customizeSize || size) {
- case 'large':
- sizeCls = 'lg';
- break;
- case 'small':
- sizeCls = 'sm';
- break;
- default:
- break;
- }
-
- const iconType = loading ? 'loading' : icon;
-
- const classes = classNames(prefixCls, className, {
- [`${prefixCls}-${type}`]: type,
- [`${prefixCls}-${shape}`]: shape,
- [`${prefixCls}-${sizeCls}`]: sizeCls,
- [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
- [`${prefixCls}-loading`]: !!loading,
- [`${prefixCls}-background-ghost`]: ghost,
- [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
- [`${prefixCls}-block`]: block,
- [`${prefixCls}-dangerous`]: !!danger,
- [`${prefixCls}-rtl`]: direction === 'rtl',
- });
+ render() {
+ const { getPrefixCls, autoInsertSpaceInButton, direction }: ConfigConsumerProps = this.context;
+
+ return (
+
+ {size => {
+ const {
+ prefixCls: customizePrefixCls,
+ type,
+ danger,
+ shape,
+ size: customizeSize,
+ className,
+ children,
+ icon,
+ ghost,
+ block,
+ ...rest
+ } = this.props;
+ const { loading, hasTwoCNChar } = this.state;
+
+ warning(
+ !(typeof icon === 'string' && icon.length > 2),
+ 'Button',
+ `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+ );
- const iconNode = loading ? : icon || null;
- const kids =
- children || children === 0
- ? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)
- : null;
-
- const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType', 'loading']);
- if (linkButtonRestProps.href !== undefined) {
- return (
- lg
+ // small => sm
+ let sizeCls = '';
+ switch (customizeSize || size) {
+ case 'large':
+ sizeCls = 'lg';
+ break;
+ case 'small':
+ sizeCls = 'sm';
+ break;
+ default:
+ break;
+ }
+
+ const iconType = loading ? 'loading' : icon;
+
+ const classes = classNames(prefixCls, className, {
+ [`${prefixCls}-${type}`]: type,
+ [`${prefixCls}-${shape}`]: shape,
+ [`${prefixCls}-${sizeCls}`]: sizeCls,
+ [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
+ [`${prefixCls}-loading`]: !!loading,
+ [`${prefixCls}-background-ghost`]: ghost,
+ [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
+ [`${prefixCls}-block`]: block,
+ [`${prefixCls}-dangerous`]: !!danger,
+ [`${prefixCls}-rtl`]: direction === 'rtl',
+ });
+
+ const iconNode = loading ? : icon || null;
+ const kids =
+ children || children === 0
+ ? spaceChildren(children, this.isNeedInserted() && autoInsertSpace)
+ : null;
+
+ const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType', 'loading']);
+ if (linkButtonRestProps.href !== undefined) {
+ return (
+
+ {iconNode}
+ {kids}
+
+ );
+ }
+
+ // React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
+ const { htmlType, ...otherProps } = rest as NativeButtonProps;
+
+ const buttonNode = (
+
);
- }
-
- // React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
- const { htmlType, ...otherProps } = rest as NativeButtonProps;
-
- const buttonNode = (
-
- );
-
- if (type === 'link') {
- return buttonNode;
- }
-
- return {buttonNode};
- }}
-
- );
- render() {
- return {this.renderButton};
+ if (type === 'link') {
+ return buttonNode;
+ }
+
+ return {buttonNode};
+ }}
+
+ );
}
}
diff --git a/components/card/style/index.less b/components/card/style/index.less
index 536837757008..444ba7ba23cd 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -166,7 +166,7 @@
position: relative;
display: block;
min-width: 32px;
- font-size: 14px;
+ font-size: @font-size-base;
line-height: 22px;
cursor: pointer;
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index f00a79c3103a..32ca84ea9fa7 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -1,9 +1,8 @@
import * as React from 'react';
-import * as PropTypes from 'prop-types';
import classNames from 'classnames';
import RcCheckbox from 'rc-checkbox';
import shallowEqual from 'shallowequal';
-import CheckboxGroup, { CheckboxGroupContext } from './Group';
+import CheckboxGroup, { CheckboxGroupContext, GroupContext } from './Group';
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
import warning from '../_util/warning';
@@ -52,9 +51,7 @@ class Checkbox extends React.Component {
indeterminate: false,
};
- static contextTypes = {
- checkboxGroup: PropTypes.any,
- };
+ static contextType = GroupContext;
context: any;
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index 99f9819fd55f..423fdc9720f3 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -43,6 +43,10 @@ export interface CheckboxGroupContext {
};
}
+export const GroupContext = React.createContext<{ checkboxGroup: any }>({
+ checkboxGroup: undefined,
+});
+
class CheckboxGroup extends React.Component {
static defaultProps = {
options: [],
@@ -55,10 +59,6 @@ class CheckboxGroup extends React.Component
- {children}
+ {children}
-
+
+ class="config-progress-bg"
+ style="width:0%;height:8px;border-radius:"
+ />
-
- 0%
-
+
+ 0%
+
`;
@@ -9253,26 +9251,24 @@ exports[`ConfigProvider components Progress normal 1`] = `
-
+
+ class="ant-progress-bg"
+ style="width:0%;height:8px;border-radius:"
+ />
-
- 0%
-
+
+ 0%
+
`;
@@ -9280,26 +9276,24 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
-
+
+ class="prefix-Progress-bg"
+ style="width:0%;height:8px;border-radius:"
+ />
-
- 0%
-
+
+ 0%
+
`;
diff --git a/components/config-provider/demo/size.md b/components/config-provider/demo/size.md
index feff9927bbe3..9d494756ff95 100644
--- a/components/config-provider/demo/size.md
+++ b/components/config-provider/demo/size.md
@@ -14,6 +14,7 @@ title:
Config component default size.
```jsx
+import React, { useState } from 'react';
import {
ConfigProvider,
Radio,
@@ -27,7 +28,7 @@ import {
} from 'antd';
const FormSizeDemo = () => {
- const [componentSize, setComponentSize] = React.useState('small');
+ const [componentSize, setComponentSize] = useState('small');
return (
document.body` | |
| locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | |
-| prefixCls | set prefix class | string | ant | |
+| prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant | |
| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | |
-| direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | string: 'ltr', 'rtl' | ltr | |
+| direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
## FAQ
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index fef998439196..f5788ae24f15 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -39,15 +39,15 @@ return (
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | |
-| componentSize | 设置 antd 组件大小 | `small | middle | large` | - | |
+| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | |
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | Function(componentName: string): ReactNode | - | |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | |
| locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | |
-| prefixCls | 设置统一样式前缀 | string | ant | |
+| prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式`| string | ant | |
| pageHeader | 统一设置 pageHeader 的 ghost，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | |
-| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | string: 'ltr', 'rtl' | ltr | |
+| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
## FAQ
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 314f0b3e73de..277e132a997a 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -54,9 +54,9 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
| dropdownClassName | to customize the className of the popup calendar | string | - | |
| getPopupContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
-| mode | picker panel mode（[Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time|date|month|year|decade` | - | |
+| mode | picker panel mode（[Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| open | open state of picker | boolean | - | |
-| picker | Set picker type | `date`, `week`, `month`, `year` | `date` | |
+| picker | Set picker type | `date` \| `week` \| `month` \| `year` | `date` | |
| placeholder | placeholder of date input | string\|RangePicker\[] | - | |
| popupStyle | to customize the style of the popup calendar | object | {} | |
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - | |
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 3a1cd417674d..2a72f8cda0a5 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -56,9 +56,9 @@ import 'moment/locale/zh-cn';
| dropdownClassName | 额外的弹出日历 className | string | - | |
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
-| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time|date|month|year|decade` | - | |
+| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| open | 控制弹层是否展开 | boolean | - | |
-| picker | 设置选择器类型 | `date`, `week`, `month`, `year` | `date` | |
+| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `year` | `date` | |
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - | |
| popupStyle | 额外的弹出日历样式 | object | {} | |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 | |
diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md
index 1da8de8a0c0e..a15753ac027b 100644
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@@ -20,8 +20,8 @@ Commonly displayed on the details page.
| title | The title of the description list, placed at the top | ReactNode | - | |
| bordered | whether to display the border | boolean | false | |
| column | the number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | |
-| size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default | middle | small` | false | |
-| layout | Define description layout | `horizontal | vertical` | `horizontal` | |
+| size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | false | |
+| layout | Define description layout | `horizontal` \| `vertical` | `horizontal` | |
| colon | change default props `colon` value of `Descriptions.Item` | boolean | true | |
### DescriptionItem
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
index 3e38f9e558e2..a7c4608ef1c1 100644
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@@ -21,8 +21,8 @@ cols: 1
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
| bordered | 是否展示边框 | boolean | false | |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | |
-| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false | |
-| layout | 描述布局 | `horizontal | vertical` | `horizontal` | |
+| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | false | |
+| layout | 描述布局 | `horizontal` \| `vertical` | `horizontal` | |
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | |
### DescriptionItem
diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md
index ecd383c624c3..5b774be66d02 100644
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@@ -20,6 +20,6 @@ A divider line separates different content.
| --- | --- | --- | --- | --- |
| className | className of container | string | - | |
| dashed | whether line is dashed | boolean | false | |
-| orientation | position of title inside divider | enum: `left` `right` `center` | `center` | |
+| orientation | position of title inside divider | `left` \| `right` \| `center` | `center` | |
| style | style object of container | object | - | |
-| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` | |
+| type | direction type of divider | `horizontal` \| `vertical` | `horizontal` | |
diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md
index 8da18d179bc1..2a450cd3f3df 100644
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@@ -18,6 +18,6 @@ subtitle: 分割线
| ----------- | ---------------- | ----------------------------- | ------------ | ---- |
| className | 分割线样式类 | string | - | |
| dashed | 是否虚线 | boolean | false | |
-| orientation | 分割线标题的位置 | enum: `left` `right` | `center` | |
+| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | |
| style | 分割线样式对象 | object | - | |
-| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` | |
+| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | |
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index 42962bdf39ba..92bf55707441 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -165,7 +165,6 @@ exports[`Drawer have a footer 1`] = `
>
-
+
diff --git a/components/drawer/demo/multi-level-drawer.md b/components/drawer/demo/multi-level-drawer.md
index 13307d3d21b8..165c23a1d630 100644
--- a/components/drawer/demo/multi-level-drawer.md
+++ b/components/drawer/demo/multi-level-drawer.md
@@ -55,18 +55,6 @@ class App extends React.Component {
closable={false}
onClose={this.onClose}
visible={this.state.visible}
- footer={
-
-
-
-
- }
>
+
+
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron |
+| --- | --- | --- | --- | --- | --- |
+| IE11, Edge | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões |
+
+## 📦 Instalação
+
+```bash
+npm install antd
+```
+
+```bash
+yarn add antd
+```
+
+## 🔨 Uso
+
+```jsx
+import { Button, DatePicker } from 'antd';
+
+const App = () => (
+ <>
+
+