mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 16:06:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix: Optimize the display of elements of the block type. (#25903)

Browse Source 
* add flex style

* add new demo

* update snapshot

* Merge branch feature into fix-descriptions

* update snapshot

* update snapshot
This commit is contained in:
陈帅 2020-08-06 14:32:13 +08:00 committed by GitHub
parent b92a9a5678
commit f928baf52a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 1164 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/avatar/__tests__/Avatar.test.js
View File

@ -163,10 +163,7 @@ describe('Avatar Render', () => {
const div = global.document.createElement('div'); const div = global.document.createElement('div');
global.document.body.appendChild(div); global.document.body.appendChild(div);
const wrapper = mount( const wrapper = mount(
<Avatar <Avatar shape="circle" src="http://error.url">
shape="circle"
src="http://error.url"
>
A A
</Avatar>, </Avatar>,
{ attachTo: div }, { attachTo: div },

10
components/avatar/demo/fallback.md
View File

@ -19,16 +19,10 @@ import { Avatar } from 'antd';
ReactDOM.render( ReactDOM.render(
<> <>
<Avatar <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
shape="circle"
src="http://abc.com/not-exist.jpg"
>
A A
</Avatar> </Avatar>
<Avatar <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
shape="circle"
src="http://abc.com/not-exist.jpg"
>
ABC ABC
</Avatar> </Avatar>
</>, </>,

22
components/descriptions/Cell.tsx
View File

@ -54,16 +54,18 @@ const Cell: React.FC<CellProps> = ({
style={style} style={style}
colSpan={span} colSpan={span}
> >
{label && ( <div className={`${itemPrefixCls}-item-container`}>
<span {label && (
className={classNames(`${itemPrefixCls}-item-label`, { <span
[`${itemPrefixCls}-item-no-colon`]: !colon, className={classNames(`${itemPrefixCls}-item-label`, {
})} [`${itemPrefixCls}-item-no-colon`]: !colon,
> })}
{label} >
</span> {label}
)} </span>
{content && <span className={classNames(`${itemPrefixCls}-item-content`)}>{content}</span>} )}
{content && <span className={classNames(`${itemPrefixCls}-item-content`)}>{content}</span>}
</div>
</Component> </Component>
); );
}; };

715
components/descriptions/__tests__/__snapshots__/demo.test.js.snap
View File

@ -25,46 +25,58 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
UserName <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" UserName
> </span>
Zhou Maomao <span
</span> class="ant-descriptions-item-content"
>
Zhou Maomao
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Telephone <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Telephone
> </span>
1810000000 <span
</span> class="ant-descriptions-item-content"
>
1810000000
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Live <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Live
> </span>
Hangzhou, Zhejiang <span
</span> class="ant-descriptions-item-content"
>
Hangzhou, Zhejiang
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -74,31 +86,39 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Remark <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Remark
> </span>
empty <span
</span> class="ant-descriptions-item-content"
>
empty
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="2" colspan="2"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Address <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Address
> </span>
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China <span
</span> class="ant-descriptions-item-content"
>
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -668,6 +688,156 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Product
</span>
<span
class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Billing
</span>
<span
class="ant-descriptions-item-content"
>
Prepaid
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
time
</span>
<span
class="ant-descriptions-item-content"
>
18:00:00
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Amount
</span>
<span
class="ant-descriptions-item-content"
>
$80.00
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Discount
</span>
<span
class="ant-descriptions-item-content"
>
$20.00
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Official
</span>
<span
class="ant-descriptions-item-content"
>
$60.00
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
`;
exports[`renders ./components/descriptions/demo/text.md correctly 1`] = `
<div
class="ant-descriptions"
>
<div
class="ant-descriptions-header"
>
<div
class="ant-descriptions-title"
>
User Info
</div>
</div>
<div
class="ant-descriptions-view"
>
<table>
<tbody>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
> >
<span <span
class="ant-descriptions-item-label" class="ant-descriptions-item-label"
@ -679,59 +849,155 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
> >
Cloud Database Cloud Database
</span> </span>
</td> </div>
<td </td>
class="ant-descriptions-item" <td
colspan="1" class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
> >
<span <span
class="ant-descriptions-item-label" class="ant-descriptions-item-label"
> >
Billing Billing Mode
</span> </span>
<span <span
class="ant-descriptions-item-content" class="ant-descriptions-item-content"
> >
Prepaid Prepaid
</span> </span>
</td> </div>
<td </td>
class="ant-descriptions-item" </tr>
colspan="1" <tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
> >
<span <span
class="ant-descriptions-item-label" class="ant-descriptions-item-label"
> >
time Automatic Renewal
</span> </span>
<span <span
class="ant-descriptions-item-content" class="ant-descriptions-item-content"
> >
18:00:00 YES
</span> </span>
</td> </div>
</tr> </td>
<tr <td
class="ant-descriptions-row" class="ant-descriptions-item"
colspan="1"
> >
<td <div
class="ant-descriptions-item" class="ant-descriptions-item-container"
colspan="1"
> >
<span <span
class="ant-descriptions-item-label" class="ant-descriptions-item-label"
> >
Amount Order time
</span>
<span
class="ant-descriptions-item-content"
>
2018-04-24 18:00:00
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Usage Time
</span>
<span
class="ant-descriptions-item-content"
>
2019-04-24 18:00:00
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Status
</span>
<span
class="ant-descriptions-item-content"
>
<span
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
>
<span
class="ant-badge-status-dot ant-badge-status-processing"
/>
<span
class="ant-badge-status-text"
>
Running
</span>
</span>
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Negotiated Amount
</span> </span>
<span <span
class="ant-descriptions-item-content" class="ant-descriptions-item-content"
> >
$80.00 $80.00
</span> </span>
</td> </div>
<td </td>
class="ant-descriptions-item" <td
colspan="1" class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
> >
<span <span
class="ant-descriptions-item-label" class="ant-descriptions-item-label"
@ -743,26 +1009,199 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
> >
$20.00 $20.00
</span> </span>
</td> </div>
<td </td>
class="ant-descriptions-item" </tr>
colspan="1" <tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
> >
<span <span
class="ant-descriptions-item-label" class="ant-descriptions-item-label"
> >
Official Official Receipts
</span> </span>
<span <span
class="ant-descriptions-item-content" class="ant-descriptions-item-content"
> >
$60.00 $60.00
</span> </span>
</td> </div>
</tr> </td>
</tbody> <td
</table> class="ant-descriptions-item"
</div> colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Config Info
</span>
<span
class="ant-descriptions-item-content"
>
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1
<br />
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Official Receipts
</span>
<span
class="ant-descriptions-item-content"
>
$60.00
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
Config Info
</span>
<span
class="ant-descriptions-item-content"
>
<div
class="ant-table-wrapper"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table ant-table-small"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
>
<table
style="table-layout:auto"
>
<colgroup />
<thead
class="ant-table-thead"
>
<tr>
<th
class="ant-table-cell"
>
姓名
</th>
<th
class="ant-table-cell"
>
年龄
</th>
<th
class="ant-table-cell"
>
住址
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
>
<td
class="ant-table-cell"
>
胡彦斌
</td>
<td
class="ant-table-cell"
>
32
</td>
<td
class="ant-table-cell"
>
西湖区湖底公园1号
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="2"
>
<td
class="ant-table-cell"
>
胡彦祖
</td>
<td
class="ant-table-cell"
>
42
</td>
<td
class="ant-table-cell"
>
西湖区湖底公园1号
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>
`; `;
@ -792,31 +1231,43 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
UserName <span
</span> class="ant-descriptions-item-label"
>
UserName
</span>
</div>
</th> </th>
<th <th
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Telephone <span
</span> class="ant-descriptions-item-label"
>
Telephone
</span>
</div>
</th> </th>
<th <th
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Live <span
</span> class="ant-descriptions-item-label"
>
Live
</span>
</div>
</th> </th>
</tr> </tr>
<tr <tr
@ -826,31 +1277,43 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
Zhou Maomao <span
</span> class="ant-descriptions-item-content"
>
Zhou Maomao
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
1810000000 <span
</span> class="ant-descriptions-item-content"
>
1810000000
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
Hangzhou, Zhejiang <span
</span> class="ant-descriptions-item-content"
>
Hangzhou, Zhejiang
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -860,21 +1323,29 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="2" colspan="2"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Address <span
</span> class="ant-descriptions-item-label"
>
Address
</span>
</div>
</th> </th>
<th <th
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Remark <span
</span> class="ant-descriptions-item-label"
>
Remark
</span>
</div>
</th> </th>
</tr> </tr>
<tr <tr
@ -884,21 +1355,29 @@ exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="2" colspan="2"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China <span
</span> class="ant-descriptions-item-content"
>
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
empty <span
</span> class="ant-descriptions-item-content"
>
empty
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

394
components/descriptions/__tests__/__snapshots__/index.test.js.snap
View File

@ -16,16 +16,20 @@ exports[`Descriptions Descriptions support colon 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label ant-descriptions-item-no-colon" class="ant-descriptions-item-container"
> >
Product <span
</span> class="ant-descriptions-item-label ant-descriptions-item-no-colon"
<span >
class="ant-descriptions-item-content" Product
> </span>
Cloud Database <span
</span> class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -51,11 +55,15 @@ exports[`Descriptions Descriptions support style 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
Cloud Database <span
</span> class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -80,16 +88,20 @@ exports[`Descriptions Descriptions.Item support className 1`] = `
class="ant-descriptions-item my-class" class="ant-descriptions-item my-class"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Product <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Product
> </span>
Cloud Database <span
</span> class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -114,46 +126,58 @@ exports[`Descriptions column is number 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Product <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Product
> </span>
Cloud Database <span
</span> class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Billing <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Billing
> </span>
Prepaid <span
</span> class="ant-descriptions-item-content"
>
Prepaid
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" time
> </span>
18:00:00 <span
</span> class="ant-descriptions-item-content"
>
18:00:00
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -163,16 +187,20 @@ exports[`Descriptions column is number 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="3" colspan="3"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Amount <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Amount
> </span>
$80.00 <span
</span> class="ant-descriptions-item-content"
>
$80.00
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -197,16 +225,20 @@ exports[`Descriptions should work with React Fragment 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
bamboo <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" bamboo
> </span>
bamboo <span
</span> class="ant-descriptions-item-content"
>
bamboo
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -216,16 +248,20 @@ exports[`Descriptions should work with React Fragment 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
bamboo <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" bamboo
> </span>
bamboo <span
</span> class="ant-descriptions-item-content"
>
bamboo
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -235,16 +271,20 @@ exports[`Descriptions should work with React Fragment 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
bamboo <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" bamboo
> </span>
bamboo <span
</span> class="ant-descriptions-item-content"
>
bamboo
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -269,11 +309,15 @@ exports[`Descriptions vertical layout 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Product <span
</span> class="ant-descriptions-item-label"
>
Product
</span>
</div>
</th> </th>
</tr> </tr>
<tr <tr
@ -283,11 +327,15 @@ exports[`Descriptions vertical layout 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
Cloud Database <span
</span> class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -297,11 +345,15 @@ exports[`Descriptions vertical layout 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Billing <span
</span> class="ant-descriptions-item-label"
>
Billing
</span>
</div>
</th> </th>
</tr> </tr>
<tr <tr
@ -311,11 +363,15 @@ exports[`Descriptions vertical layout 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
Prepaid <span
</span> class="ant-descriptions-item-content"
>
Prepaid
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -325,11 +381,15 @@ exports[`Descriptions vertical layout 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
time <span
</span> class="ant-descriptions-item-label"
>
time
</span>
</div>
</th> </th>
</tr> </tr>
<tr <tr
@ -339,11 +399,15 @@ exports[`Descriptions vertical layout 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
18:00:00 <span
</span> class="ant-descriptions-item-content"
>
18:00:00
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -353,11 +417,15 @@ exports[`Descriptions vertical layout 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Amount <span
</span> class="ant-descriptions-item-label"
>
Amount
</span>
</div>
</th> </th>
</tr> </tr>
<tr <tr
@ -367,11 +435,15 @@ exports[`Descriptions vertical layout 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-content" class="ant-descriptions-item-container"
> >
$80.00 <span
</span> class="ant-descriptions-item-content"
>
$80.00
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -396,16 +468,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Product <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Product
> </span>
Cloud Database <span
</span> class="ant-descriptions-item-content"
>
Cloud Database
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -415,16 +491,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Billing <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Billing
> </span>
Prepaid <span
</span> class="ant-descriptions-item-content"
>
Prepaid
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -434,16 +514,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" time
> </span>
18:00:00 <span
</span> class="ant-descriptions-item-content"
>
18:00:00
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -453,16 +537,20 @@ exports[`Descriptions when item is rendered conditionally 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Amount <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Amount
> </span>
$80.00 <span
</span> class="ant-descriptions-item-content"
>
$80.00
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

87
components/descriptions/demo/text.md Normal file
View File

@ -0,0 +1,87 @@
---
order: 1
debug: true
title:
zh-CN: 复杂文本的情况
en-US: border
---
## zh-CN
带边框和背景颜色列表。
## en-US
Descriptions with border and background color.
```jsx
import { Descriptions, Badge, Table } from 'antd';
const dataSource = [
{
key: '1',
name: '胡彦斌',
age: 32,
address: '西湖区湖底公园1号',
},
{
key: '2',
name: '胡彦祖',
age: 42,
address: '西湖区湖底公园1号',
},
];
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '住址',
dataIndex: 'address',
key: 'address',
},
];
ReactDOM.render(
<Descriptions title="User Info" column={2}>
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
<Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
<Descriptions.Item label="Usage Time" span={2}>
2019-04-24 18:00:00
</Descriptions.Item>
<Descriptions.Item label="Status" span={3}>
<Badge status="processing" text="Running" />
</Descriptions.Item>
<Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
<Descriptions.Item label="Config Info">
Data disk type: MongoDB
<br />
Database version: 3.4
<br />
Package: dds.mongo.mid
<br />
Storage space: 10 GB
<br />
Replication factor: 3
<br />
Region: East China 1<br />
</Descriptions.Item>
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
<Descriptions.Item label="Config Info">
<Table size="small" pagination={false} dataSource={dataSource} columns={columns} />
</Descriptions.Item>
</Descriptions>,
mountNode,
);
```

6
components/descriptions/style/index.less
View File

@ -82,6 +82,7 @@
&-item-content { &-item-content {
display: table-cell; display: table-cell;
flex: 1;
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-base; line-height: @line-height-base;
@ -89,10 +90,15 @@
&-item { &-item {
padding-bottom: 0; padding-bottom: 0;
vertical-align: top;
> span { > span {
display: inline-flex; display: inline-flex;
align-items: baseline; align-items: baseline;
} }
&-container {
display: flex;
}
} }
&-middle { &-middle {

342
components/page-header/__tests__/__snapshots__/demo.test.js.snap
View File

@ -103,48 +103,60 @@ Array [
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Created <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Created
> </span>
Lili Qu <span
</span> class="ant-descriptions-item-content"
>
Lili Qu
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Association <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Association
> </span>
<a> <span
421421 class="ant-descriptions-item-content"
</a> >
</span> <a>
421421
</a>
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Creation Time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Creation Time
> </span>
2017-01-10 <span
</span> class="ant-descriptions-item-content"
>
2017-01-10
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -154,31 +166,39 @@ Array [
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Effective Time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Effective Time
> </span>
2017-10-10 <span
</span> class="ant-descriptions-item-content"
>
2017-10-10
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="2" colspan="2"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Remarks <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Remarks
> </span>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China <span
</span> class="ant-descriptions-item-content"
>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -827,48 +847,60 @@ exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Created <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Created
> </span>
Lili Qu <span
</span> class="ant-descriptions-item-content"
>
Lili Qu
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Association <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Association
> </span>
<a> <span
421421 class="ant-descriptions-item-content"
</a> >
</span> <a>
421421
</a>
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Creation Time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Creation Time
> </span>
2017-01-10 <span
</span> class="ant-descriptions-item-content"
>
2017-01-10
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -878,31 +910,39 @@ exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Effective Time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Effective Time
> </span>
2017-10-10 <span
</span> class="ant-descriptions-item-content"
>
2017-10-10
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="2" colspan="2"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Remarks <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Remarks
> </span>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China <span
</span> class="ant-descriptions-item-content"
>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -1022,33 +1062,41 @@ exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Created <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Created
> </span>
Lili Qu <span
</span> class="ant-descriptions-item-content"
>
Lili Qu
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Association <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Association
> </span>
<a> <span
421421 class="ant-descriptions-item-content"
</a> >
</span> <a>
421421
</a>
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -1058,31 +1106,39 @@ exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Creation Time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Creation Time
> </span>
2017-01-10 <span
</span> class="ant-descriptions-item-content"
>
2017-01-10
</span>
</div>
</td> </td>
<td <td
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="1" colspan="1"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Effective Time <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Effective Time
> </span>
2017-10-10 <span
</span> class="ant-descriptions-item-content"
>
2017-10-10
</span>
</div>
</td> </td>
</tr> </tr>
<tr <tr
@ -1092,16 +1148,20 @@ exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
class="ant-descriptions-item" class="ant-descriptions-item"
colspan="2" colspan="2"
> >
<span <div
class="ant-descriptions-item-label" class="ant-descriptions-item-container"
> >
Remarks <span
</span> class="ant-descriptions-item-label"
<span >
class="ant-descriptions-item-content" Remarks
> </span>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China <span
</span> class="ant-descriptions-item-content"
>
Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
</span>
</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>

2
components/table/__tests__/Table.pagination.test.js
View File

@ -349,7 +349,7 @@ describe('Table.pagination', () => {
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
dropdownWrapper.find('.ant-select-item-option').at(2).simulate('click'); dropdownWrapper.find('.ant-select-item-option').at(2).simulate('click');
expect(onChange).toBeCalledTimes(1) expect(onChange).toBeCalledTimes(1);
}); });
it('dynamic warning', () => { it('dynamic warning', () => {

4
components/table/demo/custom-filter-panel.md
View File

@ -82,7 +82,9 @@ class App extends React.Component {
), ),
filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />, filterIcon: filtered => <SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} />,
onFilter: (value, record) => onFilter: (value, record) =>
record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '', record[dataIndex]
? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase())
: '',
onFilterDropdownVisibleChange: visible => { onFilterDropdownVisibleChange: visible => {
if (visible) { if (visible) {
setTimeout(() => this.searchInput.select()); setTimeout(() => this.searchInput.select());

3
docs/react/customize-theme.zh-CN.md
View File

@ -26,7 +26,8 @@ antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色 @disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 2px; // 组件/浮层圆角 @border-radius-base: 2px; // 组件/浮层圆角
@border-color-base: #d9d9d9; // 边框色 @border-color-base: #d9d9d9; // 边框色
@box-shadow-base: 0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05); // 浮层阴影 @box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 9px 28px 8px rgba(0, 0, 0, 0.05); // 浮层阴影
``` ```
如果以上变量不能满足你的定制需求，可以给我们提 issue。 如果以上变量不能满足你的定制需求，可以给我们提 issue。

2
docs/react/faq.en-US.md
View File

@ -31,7 +31,7 @@ See: https://ant.design/docs/react/customize-theme .
### Will you provide other themes? ### Will you provide other themes?
No, we follow Ant Design's design specification. No, we follow Ant Design's design specification.
Related issue: https://github.com/ant-design/ant-design/issues/1241 Related issue: https://github.com/ant-design/ant-design/issues/1241

6
site/theme/en-US.js
View File

@ -116,8 +116,10 @@ module.exports = {
'app.publish.title': 'antd@3.0.0 has been released! 🎉 🎉 🎉', 'app.publish.title': 'antd@3.0.0 has been released! 🎉 🎉 🎉',
'app.publish.greeting': 'Hello, ', 'app.publish.greeting': 'Hello, ',
'app.publish.intro': ' has been released, so please upgrade. ', 'app.publish.intro': ' has been released, so please upgrade. ',
'app.publish.old-version-guide': 'If you need documentation for an older version, please visit ', 'app.publish.old-version-guide':
'app.publish.old-version-tips': ', or switch the version via the dropdown in the header nav bar.', 'If you need documentation for an older version, please visit ',
'app.publish.old-version-tips':
', or switch the version via the dropdown in the header nav bar.',
'app.docs.color.pick-primary': 'Pick your primary color', 'app.docs.color.pick-primary': 'Pick your primary color',
'app.docs.color.pick-background': 'Pick your background color', 'app.docs.color.pick-background': 'Pick your background color',
'app.docs.components.icon.search.placeholder': 'Search icons here, click icon to copy code', 'app.docs.components.icon.search.placeholder': 'Search icons here, click icon to copy code',

3
site/theme/template/Home/MorePage.tsx
View File

@ -46,7 +46,8 @@ const MORE_LIST: MoreProps[] = [
}, },
{ {
title: '设计法则「映射」: 让你的设计更符合直觉', title: '设计法则「映射」: 让你的设计更符合直觉',
description: '影响一个东西好不好用的因素有很多，本文将从125条通用设计法则中的「映射Mapping」出发，探讨一下这个法则对事物可用性的影响。', description:
'影响一个东西好不好用的因素有很多，本文将从125条通用设计法则中的「映射Mapping」出发，探讨一下这个法则对事物可用性的影响。',
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*AVELR486CNcAAAAAAAAAAABkARQnAQ', img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*AVELR486CNcAAAAAAAAAAABkARQnAQ',
date: '2019-08-24', date: '2019-08-24',
source: 'zhihu', source: 'zhihu',

6
site/theme/template/Home/RecommendPage.tsx
View File

@ -32,7 +32,8 @@ const LIST_CN: Recommend[] = [
}, },
{ {
title: 'JCD 驱动 - 复杂系统设计应对之道', title: 'JCD 驱动 - 复杂系统设计应对之道',
description: '基于蚂蚁集团 CTO 线的业务土壤，我们探索出以 JCD 为核心的企业级产品设计思维，助力设计师在深耕业务上有章可循，有方法可用。', description:
'基于蚂蚁集团 CTO 线的业务土壤，我们探索出以 JCD 为核心的企业级产品设计思维，助力设计师在深耕业务上有章可循，有方法可用。',
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dGDxQZQ7ymoAAAAAAAAAAABkARQnAQ', img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dGDxQZQ7ymoAAAAAAAAAAABkARQnAQ',
href: 'https://zhuanlan.zhihu.com/p/103237648', href: 'https://zhuanlan.zhihu.com/p/103237648',
}, },
@ -56,7 +57,8 @@ const LIST_EN: Recommend[] = [
}, },
{ {
title: 'Driven by JCD: How to Design Complicated Systems', title: 'Driven by JCD: How to Design Complicated Systems',
description: '🏦 Based on the business practice of Ant Group CTO line, we have summed up a design thinking system of enterprise product, which is called JCD.', description:
'🏦 Based on the business practice of Ant Group CTO line, we have summed up a design thinking system of enterprise product, which is called JCD.',
img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dGDxQZQ7ymoAAAAAAAAAAABkARQnAQ', img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*dGDxQZQ7ymoAAAAAAAAAAABkARQnAQ',
href: 'https://zhuanlan.zhihu.com/p/103237648', href: 'https://zhuanlan.zhihu.com/p/103237648',
}, },