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 17 Packages Projects Releases Wiki Activity

fix: descriptions buttom right padding style (#49895)

Browse Source 
* fix: descriptions buttom right padding style

* feat: demo

* feat: demo

* feat: test

* feat: style

* feat: paddingInlineEnd

* feat: test

* feat: remove long demo

* feat: add demo

* feat: add demo

* feat: add demo
This commit is contained in:
叶枫 2024-07-16 16:12:56 +08:00 committed by GitHub
parent f1699d3788
commit 88c629e4e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 728 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

331
components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -957,6 +957,337 @@ exports[`renders components/descriptions/demo/jsx.tsx extend context correctly 1
exports[`renders components/descriptions/demo/jsx.tsx extend context correctly 2`] = `[]`;
exports[`renders components/descriptions/demo/padding.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-vertical"
style="gap: 8px;"
>
<div
style="width: 600px; border: 1px solid; padding: 20px;"
>
<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
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</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"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</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"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
style="width: 600px; border: 1px solid; padding: 20px;"
>
<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"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
exports[`renders components/descriptions/demo/padding.tsx extend context correctly 2`] = `[]`;
exports[`renders components/descriptions/demo/responsive.tsx extend context correctly 1`] = `
<div
class="ant-descriptions ant-descriptions-bordered"

329
components/descriptions/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -869,6 +869,335 @@ exports[`renders components/descriptions/demo/jsx.tsx correctly 1`] = `
</div>
`;
exports[`renders components/descriptions/demo/padding.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-vertical"
style="gap:8px"
>
<div
style="width:600px;border:1px solid;padding:20px"
>
<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
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</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"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</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"
>
long
</span>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
style="width:600px;border:1px solid;padding:20px"
>
<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"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
<th
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
<td
class="ant-descriptions-item"
colspan="1"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
<tr
class="ant-descriptions-row"
>
<th
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-label"
>
long
</span>
</div>
</th>
</tr>
<tr
class="ant-descriptions-row"
>
<td
class="ant-descriptions-item"
colspan="2"
>
<div
class="ant-descriptions-item-container"
>
<span
class="ant-descriptions-item-content"
>
loooooooooooooooooooooooooooooooooooooooooooooooong
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
`;
exports[`renders components/descriptions/demo/responsive.tsx correctly 1`] = `
<div
class="ant-descriptions ant-descriptions-bordered"

1
components/descriptions/demo/component-token.tsx
View File

@ -104,6 +104,7 @@ const App: React.FC = () => {
titleColor: 'red',
titleMarginBottom: 2,
itemPaddingBottom: 8,
itemPaddingEnd: 8,
colonMarginRight: 10,
colonMarginLeft: 20,
contentColor: 'green',

7
components/descriptions/demo/padding.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
间距
## en-US
padding

44
components/descriptions/demo/padding.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from 'react';
import { Descriptions, Flex } from 'antd';
import type { DescriptionsProps } from 'antd';
const items: DescriptionsProps['items'] = [
{
key: '1',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '2',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '3',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '4',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
{
key: '5',
label: 'long',
children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',
},
];
const App: React.FC = () => (
<Flex gap={8} vertical>
<div style={{ width: 600, border: '1px solid', padding: 20 }}>
<Descriptions title="User Info" column={2} items={items} />
</div>
<div style={{ width: 600, border: '1px solid', padding: 20 }}>
<Descriptions layout="vertical" title="User Info" column={2} items={items} />
</div>
</Flex>
);
export default App;

1
components/descriptions/index.en-US.md
View File

@ -63,6 +63,7 @@ const items: DescriptionsProps['items'] = [
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/border.tsx">border</code>
<code src="./demo/text.tsx" debug>border</code>
<code src="./demo/padding.tsx" debug>padding</code>
<code src="./demo/size.tsx">Custom size</code>
<code src="./demo/responsive.tsx">responsive</code>
<code src="./demo/vertical.tsx">Vertical</code>

1
components/descriptions/index.zh-CN.md
View File

@ -64,6 +64,7 @@ const items: DescriptionsProps['items'] = [
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/border.tsx">带边框的</code>
<code src="./demo/text.tsx" debug>复杂文本的情况</code>
<code src="./demo/padding.tsx" debug>间距</code>
<code src="./demo/size.tsx">自定义尺寸</code>
<code src="./demo/responsive.tsx">响应式</code>
<code src="./demo/vertical.tsx">垂直</code>

14
components/descriptions/style/index.ts
View File

@ -28,6 +28,11 @@ export interface ComponentToken {
* @descEN Bottom padding of item
*/
itemPaddingBottom: number;
/**
* @desc 子项结束间距
* @descEN End padding of item
*/
itemPaddingEnd: number;
/**
* @desc 冒号右间距
* @descEN Right margin of colon
@ -105,6 +110,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
componentCls,
extraColor,
itemPaddingBottom,
itemPaddingEnd,
colonMarginRight,
colonMarginLeft,
titleMarginBottom,
@ -146,9 +152,16 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
[`${componentCls}-row`]: {
'> th, > td': {
paddingBottom: itemPaddingBottom,
paddingInlineEnd: itemPaddingEnd,
},
'> th:last-child, > td:last-child': {
paddingInlineEnd: 0,
},
'&:last-child': {
borderBottom: 'none',
'> th, > td': {
paddingBottom: 0,
},
},
},
[`${componentCls}-item-label`]: {
@ -223,6 +236,7 @@ export const prepareComponentToken: GetDefaultToken<'Descriptions'> = (token) =>
titleColor: token.colorText,
titleMarginBottom: token.fontSizeSM * token.lineHeightSM,
itemPaddingBottom: token.padding,
itemPaddingEnd: token.padding,
colonMarginRight: token.marginXS,
colonMarginLeft: token.marginXXS / 2,
contentColor: token.colorText,