mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Merge pull request #25889 from ant-design/master

Browse Source 
chore: merge master into feature
This commit is contained in:
偏右 2020-07-29 21:32:11 +08:00 committed by GitHub
commit cc7ad06a43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 532 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/test.yml vendored
View File

@ -93,6 +93,8 @@ jobs:
- name: dist
run: npm run dist
env:
NODE_OPTIONS: --max_old_space_size=4096
- name: check
run: node ./tests/dekko/dist.test.js

15
CHANGELOG.en-US.md
View File

@ -15,9 +15,20 @@ timeline: true
---
## 4.5.1
`2020-07-28`
- 🐞 Fix Badge style causing build error. [#25863](https://github.com/ant-design/ant-design/pull/25863)
- 🐞 Fix Menu in `horizontal` `dark` status Menu.Item background style glitch. [#25850](https://github.com/ant-design/ant-design/pull/25850)
- 💄 Optimize Divider color in none-white background. [#25855](https://github.com/ant-design/ant-design/pull/25855)
- 💄 Remove multiple Select choice animation of item. [#25852](https://github.com/ant-design/ant-design/pull/25852)
- TypeScript
- Export Form `FormList` interface. [#25849](https://github.com/ant-design/ant-design/pull/25849)
## 4.5.0
`2020-07-27`
`2020-07-28`
- 🆕 Input and Input.TextArea support `bordered` prop. [#25617](https://github.com/ant-design/ant-design/pull/25617)
- 🆕 Add `useMessage` hook for Message to support `context` access. [#25422](https://github.com/ant-design/ant-design/pull/25422)
@ -58,7 +69,7 @@ timeline: true
- 💄 Card action pane color is unified with body color. [#25722](https://github.com/ant-design/ant-design/pull/25722)
- ⌨️ Improve Alert/message/notification accessibility by adding role attribute. [#25774](https://github.com/ant-design/ant-design/pull/25774)
- 🇭🇰 Add zh_HK localization. [#25731](https://github.com/ant-design/ant-design/pull/25731) [@wuchu](https://github.com/wuchu)
- 🇩🇪 Improve de_DE localization. [#25823](https://github.com/ant-design/ant-design/pull/25823) [@LukeTimeWalker](https://github.com/LukeTimeWalker)
- 🇩🇪 Improve Form de_DE localization. [#25823](https://github.com/ant-design/ant-design/pull/25823) [@LukeTimeWalker](https://github.com/LukeTimeWalker)
## 4.4.3

17
CHANGELOG.zh-CN.md
View File

@ -15,9 +15,20 @@ timeline: true
---
## 4.5.1
`2020-07-28`
- 🐞 修复 Badge 样式导致构建出错的问题。[#25863](https://github.com/ant-design/ant-design/pull/25863)
- 🐞 修复 Menu 在 `horizontal` `dark` 状态下 Menu.Item 背景样式出错。[#25850](https://github.com/ant-design/ant-design/pull/25850)
- 💄 优化 Divider 颜色在非白底背景上的表现。[#25855](https://github.com/ant-design/ant-design/pull/25855)
- 💄 移除多选 Select 选项的动画效果使交互更流畅。[#25852](https://github.com/ant-design/ant-design/pull/25852)
- TypeScript
- 导出 Form `FormList` 接口。[#25849](https://github.com/ant-design/ant-design/pull/25849)
## 4.5.0
`2020-07-27`
`2020-07-28`
- 🆕 Input 和 Input.TextArea 支持 `bordered` 属性。[#25617](https://github.com/ant-design/ant-design/pull/25617)
- 🆕 Message 新增 `useMessage` hook，以支持 `context` 访问。[#25422](https://github.com/ant-design/ant-design/pull/25422)
@ -57,8 +68,8 @@ timeline: true
- 🐞 修复 Tabs 禁用时 focus & active 状态的颜色。[25827](https://github.com/ant-design/ant-design/pull/25827) [hsuanxyz](https://github.com/hsuanxyz)
- 💄 Card 操作面板颜色与主体颜色统一。[#25722](https://github.com/ant-design/ant-design/pull/25722)
- ⌨️ 提升 Alert/message/notification 组件的可访问性。[#25774](https://github.com/ant-design/ant-design/pull/25774)
- 🇭🇰 新增 zh_HK 本地化。[#25731](https://github.com/ant-design/ant-design/pull/25731) [@wuchu](https://github.com/wuchu)
- 🇩🇪 改进 de_DE 本地化。[#25823](https://github.com/ant-design/ant-design/pull/25823) [@LukeTimeWalker](https://github.com/LukeTimeWalker)
- 🇭🇰 增加中文繁体（香港） zh_HK 本地化。[#25731](https://github.com/ant-design/ant-design/pull/25731) [@wuchu](https://github.com/wuchu)
- 🇩🇪 新增 Form 校验文案的德语 de_DE 本地化。[#25823](https://github.com/ant-design/ant-design/pull/25823) [@LukeTimeWalker](https://github.com/LukeTimeWalker)
## 4.4.3

5
components/_util/interopDefault.ts
View File

@ -1,5 +0,0 @@
// https://github.com/moment/moment/issues/3650
// since we are using ts 3.5.1, it should be safe to remove.
export default function interopDefault(m: any) {
return m.default || m;
}

7
components/_util/motion.tsx
View File

@ -28,10 +28,7 @@ interface Motion {
const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 });
const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 });
const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight });
function skipOpacityTransition(_: HTMLElement, event: TransitionEvent) {
return event.propertyName === 'height';
}
const skipOpacityTransition: MotionEndFunc = (_, event) => event.propertyName === 'height';
const collapseMotion: Motion = {
motionName: 'ant-motion-collapse',
@ -41,11 +38,9 @@ const collapseMotion: Motion = {
onEnterActive: getRealHeight,
onLeaveStart: getCurrentHeight,
onLeaveActive: getCollapsedHeight,
onAppearEnd: skipOpacityTransition,
onEnterEnd: skipOpacityTransition,
onLeaveEnd: skipOpacityTransition,
motionDeadline: 500,
};

1
components/badge/style/index.less
View File

@ -200,3 +200,4 @@
}
@import './rtl';
@import './ribbon';

1
components/badge/style/index.tsx
View File

@ -1,3 +1,2 @@
import '../../style/index.less';
import './ribbon.less';
import './index.less';

124
components/carousel/__tests__/__snapshots__/demo.test.js.snap
View File

@ -27,7 +27,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -45,7 +47,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
1
</h3>
</div>
@ -63,7 +67,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
2
</h3>
</div>
@ -81,7 +87,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
3
</h3>
</div>
@ -99,7 +107,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -117,7 +127,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
1
</h3>
</div>
@ -135,7 +147,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
2
</h3>
</div>
@ -153,7 +167,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
3
</h3>
</div>
@ -171,7 +187,9 @@ exports[`renders ./components/carousel/demo/autoplay.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -243,7 +261,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -261,7 +281,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
1
</h3>
</div>
@ -279,7 +301,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
2
</h3>
</div>
@ -297,7 +321,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
3
</h3>
</div>
@ -315,7 +341,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -333,7 +361,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
1
</h3>
</div>
@ -351,7 +381,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
2
</h3>
</div>
@ -369,7 +401,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
3
</h3>
</div>
@ -387,7 +421,9 @@ exports[`renders ./components/carousel/demo/basic.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -459,7 +495,9 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
1
</h3>
</div>
@ -477,7 +515,9 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
2
</h3>
</div>
@ -495,7 +535,9 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
3
</h3>
</div>
@ -513,7 +555,9 @@ exports[`renders ./components/carousel/demo/fade.md correctly 1`] = `
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -668,7 +712,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -686,7 +732,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
1
</h3>
</div>
@ -704,7 +752,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
2
</h3>
</div>
@ -722,7 +772,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
3
</h3>
</div>
@ -740,7 +792,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>
@ -758,7 +812,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
1
</h3>
</div>
@ -776,7 +832,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
2
</h3>
</div>
@ -794,7 +852,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
3
</h3>
</div>
@ -812,7 +872,9 @@ Array [
style="width:100%;display:inline-block"
tabindex="-1"
>
<h3>
<h3
style="height:160px;color:#fff;line-height:160px;text-align:center;background:#364d79"
>
4
</h3>
</div>

31
components/carousel/demo/autoplay.md
View File

@ -16,36 +16,29 @@ Timing of scrolling to the next card/picture.
```jsx
import { Carousel } from 'antd';
const contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
ReactDOM.render(
<Carousel autoplay>
<div>
<h3>1</h3>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3>2</h3>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3>3</h3>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3>4</h3>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>,
mountNode,
);
```
```css
/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
```

31
components/carousel/demo/basic.md
View File

@ -20,36 +20,29 @@ function onChange(a, b, c) {
console.log(a, b, c);
}
const contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
ReactDOM.render(
<Carousel afterChange={onChange}>
<div>
<h3>1</h3>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3>2</h3>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3>3</h3>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3>4</h3>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>,
mountNode,
);
```
```css
/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
```

31
components/carousel/demo/fade.md
View File

@ -16,36 +16,29 @@ Slides use fade for transition.
```jsx
import { Carousel } from 'antd';
const contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
ReactDOM.render(
<Carousel effect="fade">
<div>
<h3>1</h3>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3>2</h3>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3>3</h3>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3>4</h3>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>,
mountNode,
);
```
```css
/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
```

31
components/carousel/demo/position.md
View File

@ -16,6 +16,14 @@ There are 4 position options available.
```jsx
import { Carousel, Radio } from 'antd';
const contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79',
};
class PositionCarouselDemo extends React.Component {
state = {
dotPosition: 'top',
@ -39,16 +47,16 @@ class PositionCarouselDemo extends React.Component {
</Radio.Group>
<Carousel dotPosition={dotPosition}>
<div>
<h3>1</h3>
<h3 style={contentStyle}>1</h3>
</div>
<div>
<h3>2</h3>
<h3 style={contentStyle}>2</h3>
</div>
<div>
<h3>3</h3>
<h3 style={contentStyle}>3</h3>
</div>
<div>
<h3>4</h3>
<h3 style={contentStyle}>4</h3>
</div>
</Carousel>
</>
@ -58,18 +66,3 @@ class PositionCarouselDemo extends React.Component {
ReactDOM.render(<PositionCarouselDemo />, mountNode);
```
```css
/* For demo */
.ant-carousel .slick-slide {
text-align: center;
height: 160px;
line-height: 160px;
background: #364d79;
overflow: hidden;
}
.ant-carousel .slick-slide h3 {
color: #fff;
}
```

9
components/carousel/style/index.less
View File

@ -47,6 +47,15 @@
visibility: visible;
}
}
// fix Carousel content height not match parent node
// when children is empty node
// https://github.com/ant-design/ant-design/issues/25878
> div > div > *:empty::after {
visibility: hidden;
content: 'none';
pointer-events: none;
}
}
}
.slick-slider .slick-track,

18
components/cascader/__tests__/__snapshots__/index.test.js.snap
View File

@ -1078,8 +1078,11 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
motionEnter={false}
motionLeave={false}
motionName="slide-up"
onAppearStart={[Function]}
onEnterEnd={[Function]}
onEnterStart={[Function]}
onLeaveEnd={[Function]}
onLeaveStart={[Function]}
removeOnLeave={false}
visible={true}
>
@ -1089,8 +1092,11 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
motionEnter={false}
motionLeave={false}
motionName="slide-up"
onAppearStart={[Function]}
onEnterEnd={[Function]}
onEnterStart={[Function]}
onLeaveEnd={[Function]}
onLeaveStart={[Function]}
removeOnLeave={false}
visible={true}
>
@ -1512,8 +1518,11 @@ exports[`Cascader should render not found content 1`] = `
motionEnter={false}
motionLeave={false}
motionName="slide-up"
onAppearStart={[Function]}
onEnterEnd={[Function]}
onEnterStart={[Function]}
onLeaveEnd={[Function]}
onLeaveStart={[Function]}
removeOnLeave={false}
visible={true}
>
@ -1523,8 +1532,11 @@ exports[`Cascader should render not found content 1`] = `
motionEnter={false}
motionLeave={false}
motionName="slide-up"
onAppearStart={[Function]}
onEnterEnd={[Function]}
onEnterStart={[Function]}
onLeaveEnd={[Function]}
onLeaveStart={[Function]}
removeOnLeave={false}
visible={true}
>
@ -1827,8 +1839,11 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
motionEnter={false}
motionLeave={false}
motionName="slide-up"
onAppearStart={[Function]}
onEnterEnd={[Function]}
onEnterStart={[Function]}
onLeaveEnd={[Function]}
onLeaveStart={[Function]}
removeOnLeave={false}
visible={true}
>
@ -1838,8 +1853,11 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
motionEnter={false}
motionLeave={false}
motionName="slide-up"
onAppearStart={[Function]}
onEnterEnd={[Function]}
onEnterStart={[Function]}
onLeaveEnd={[Function]}
onLeaveStart={[Function]}
removeOnLeave={false}
visible={true}
>

4
components/divider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -5,7 +5,7 @@ Array [
<div
class="ant-divider ant-divider-horizontal"
role="separator"
style="height:2px;background-color:#7cb305"
style="border-width:2px;border-color:#7cb305"
/>,
<div
class="ant-divider ant-divider-horizontal ant-divider-dashed"
@ -15,7 +15,7 @@ Array [
<div
class="ant-divider ant-divider-vertical"
role="separator"
style="height:60px;background-color:#7cb305"
style="height:60px;border-color:#7cb305"
/>,
<div
class="ant-divider ant-divider-vertical ant-divider-dashed"

4
components/divider/demo/customize-style.md
View File

@ -19,9 +19,9 @@ import { Divider } from 'antd';
ReactDOM.render(
<>
<Divider style={{ height: 2, backgroundColor: '#7cb305' }} />
<Divider style={{ borderWidth: 2, borderColor: '#7cb305' }} />
<Divider style={{ borderColor: '#7cb305' }} dashed />
<Divider type="vertical" style={{ height: 60, backgroundColor: '#7cb305' }} />
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} />
<Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
</>,
mountNode,

8
components/divider/style/index.less
View File

@ -6,7 +6,7 @@
.@{divider-prefix-cls} {
.reset-component;
border-top: 1px solid @border-color-split;
border-top: 1px solid @divider-color;
&-vertical {
position: relative;
@ -16,7 +16,7 @@
margin: 0 8px;
vertical-align: middle;
border-top: 0;
border-left: 1px solid @border-color-split;
border-left: 1px solid @divider-color;
}
&-horizontal {
@ -41,7 +41,7 @@
position: relative;
top: 50%;
width: 50%;
border-top: 1px solid @border-color-split;
border-top: 1px solid @divider-color;
transform: translateY(50%);
content: '';
}
@ -76,7 +76,7 @@
&-dashed {
background: none;
border-color: @border-color-split;
border-color: @divider-color;
border-style: dashed;
border-width: 1px 0 0;
}

2
components/dropdown/demo/dropdown-button.md
View File

@ -36,7 +36,7 @@ const menu = (
2nd menu item
</Menu.Item>
<Menu.Item key="3" icon={<UserOutlined />}>
3rd item
3rd menu item
</Menu.Item>
</Menu>
);

8
components/form/FormList.tsx
View File

@ -3,21 +3,21 @@ import { List } from 'rc-field-form';
import { StoreValue } from 'rc-field-form/lib/interface';
import devWarning from '../_util/devWarning';
interface FieldData {
export interface FormListFieldData {
name: number;
key: number;
fieldKey: number;
}
interface Operation {
export interface FormListOperation {
add: (defaultValue?: StoreValue) => void;
remove: (index: number | number[]) => void;
move: (from: number, to: number) => void;
}
interface FormListProps {
export interface FormListProps {
name: string | number | (string | number)[];
children: (fields: FieldData[], operation: Operation) => React.ReactNode;
children: (fields: FormListFieldData[], operation: FormListOperation) => React.ReactNode;
}
const FormList: React.FC<FormListProps> = ({ children, ...props }) => {

2
components/form/__tests__/index.test.js
View File

@ -22,7 +22,7 @@ describe('Form', () => {
async function change(wrapper, index, value) {
wrapper.find(Input).at(index).simulate('change', { target: { value } });
await sleep(100);
await sleep(200);
wrapper.update();
}

210
components/menu/__tests__/__snapshots__/demo.test.js.snap
View File

@ -809,6 +809,216 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
</ul>
`;
exports[`renders ./components/menu/demo/style-debug.md correctly 1`] = `
Array [
<button
aria-checked="true"
class="ant-switch ant-switch-checked"
role="switch"
type="button"
>
<div
class="ant-switch-handle"
/>
<span
class="ant-switch-inner"
>
Dark
</span>
</button>,
<br />,
<br />,
<ul
class="ant-menu ant-menu-dark ant-menu-root ant-menu-horizontal"
role="menu"
>
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="display:none"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span>
···
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-submenu-selected"
role="menuitem"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span
aria-label="mail"
class="anticon anticon-mail"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="mail"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
/>
</svg>
</span>
<span>
Navigation One Long Long Long Long
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="display:none"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span>
···
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-horizontal"
role="menuitem"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span
aria-label="appstore"
class="anticon anticon-appstore"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="appstore"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
/>
</svg>
</span>
<span>
Navigation Two
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="display:none"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span>
···
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-item ant-menu-item-only-child"
role="menuitem"
>
Option 11
</li>
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="display:none"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span>
···
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-item ant-menu-item-only-child"
role="menuitem"
>
Option 12
</li>
<li
class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
role="menuitem"
style="visibility:hidden;position:absolute"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="button"
>
<span>
···
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
</ul>,
]
`;
exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
Array [
<button

82
components/menu/demo/style-debug.md Normal file
View File

@ -0,0 +1,82 @@
---
order: 99
title:
zh-CN: Style debug
en-US: Style debug
debug: true
---
## zh-CN
buggy!
## en-US
buggy!
```jsx
import { Menu, Switch } from 'antd';
import { MailOutlined, AppstoreOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
class Sider extends React.Component {
state = {
theme: 'dark',
current: '1',
};
changeTheme = value => {
this.setState({
theme: value ? 'dark' : 'light',
});
};
handleClick = e => {
console.log('click ', e);
this.setState({
current: e.key,
});
};
render() {
return (
<>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One Long Long Long Long">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</Menu>
</>
);
}
}
ReactDOM.render(<Sider />, mountNode);
```

1
components/menu/style/dark.less
View File

@ -31,6 +31,7 @@
&-dark&-horizontal > &-submenu {
top: 0;
margin-top: 0;
padding: @menu-item-padding;
border-color: @menu-dark-bg;
border-bottom: 0;
}

26
components/menu/style/index.less
View File

@ -41,6 +41,9 @@
transition: all 0.3s;
}
&-horizontal &-submenu {
transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out;
}
&-submenu,
&-submenu-inline {
transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
@ -167,6 +170,11 @@
min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
}
&-horizontal &-item,
&-horizontal &-submenu-title {
transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
background 0.3s @ease-in-out;
}
&-item,
&-submenu-title {
position: relative;
@ -333,17 +341,23 @@
border-bottom: @border-width-base @border-style-base @border-color-split;
box-shadow: none;
&:not(.@{menu-prefix-cls}-dark) {
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
margin: @menu-item-padding;
margin-top: -1px;
margin-bottom: 0;
padding: @menu-item-padding;
padding-right: 0;
padding-left: 0;
}
}
> .@{menu-prefix-cls}-item,
> .@{menu-prefix-cls}-submenu {
position: relative;
top: 1px;
display: inline-block;
margin: @menu-item-padding;
margin-top: 0;
margin-bottom: 0;
padding: @menu-item-padding;
padding-right: 0;
padding-left: 0;
vertical-align: bottom;
border-bottom: 2px solid transparent;

2
components/select/index.tsx
View File

@ -47,7 +47,7 @@ class Select<ValueType extends SelectValue = SelectValue> extends React.Componen
static defaultProps = {
transitionName: 'slide-up',
choiceTransitionName: 'zoom',
choiceTransitionName: '',
bordered: true,
};

1
components/style/themes/default.less
View File

@ -245,6 +245,7 @@
// Divider
@divider-text-padding: 1em;
@divider-orientation-margin: 5%;
@divider-color: rgba(0, 0, 0, 6%);
// Dropdown
@dropdown-selected-color: @primary-color;

2
components/tree-select/index.tsx
View File

@ -46,7 +46,7 @@ class TreeSelect<T> extends React.Component<TreeSelectProps<T>, {}> {
static defaultProps = {
transitionName: 'slide-up',
choiceTransitionName: 'zoom',
choiceTransitionName: '',
bordered: true,
};

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "4.5.0",
"version": "4.5.1",
"description": "An enterprise-class UI design language and React components implementation",
"keywords": [
"ant",

1
site/theme/template/Layout/Header/Navigation.less
View File

@ -13,6 +13,7 @@
& > .ant-menu-item,
& > .ant-menu-submenu {
min-width: 40px;
height: @header-height;
margin-right: 12px;
margin-left: 12px;

4
site/theme/template/Layout/Header/index.tsx
View File

@ -153,9 +153,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
.replace(/\/$/, '');
return;
}
window.location.href = currentUrl
.replace(window.location.origin, url)
.replace(currentPathname, utils.getLocalizedPathname(currentPathname));
window.location.href = currentUrl.replace(window.location.origin, url);
};
onLangChange = () => {