mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

fix(Descriptions): nested Descriptions are affected by the external border style (#43454)

Browse Source 
* fix: nested Descriptions are affected by the external border style

* chore: add test case
This commit is contained in:
JiaQi 2023-08-10 14:06:13 +08:00 committed by GitHub
parent 8d1a41709f
commit aa7c45fb26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/descriptions/__tests__/index.test.tsx
View File

@ -269,7 +269,7 @@ describe('Descriptions', () => {
expect(container).toHaveAttribute('aria-describedby', 'some-label');
});
it('Descriptions should inherit the size from ConfigProvider if the componentSize is set ', () => {
it('Descriptions should inherit the size from ConfigProvider if the componentSize is set', () => {
const { container } = render(
<ConfigProvider componentSize="small">
<Descriptions bordered>
@ -306,4 +306,18 @@ describe('Descriptions', () => {
expect(container.querySelectorAll('.ant-descriptions-item')).toHaveLength(3);
expect(container).toMatchSnapshot();
});
it('Descriptions nested within an Item are unaffected by the external borderless style', () => {
const { container } = render(
<Descriptions bordered>
<Descriptions.Item>
<Descriptions bordered={false} />
</Descriptions.Item>
</Descriptions>,
);
const nestDesc = container.querySelectorAll('.ant-descriptions')?.[1];
const view = nestDesc.querySelector('.ant-descriptions-view');
expect(getComputedStyle(view!).border).toBeFalsy();
});
});

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

@ -44,41 +44,45 @@ const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
const { componentCls, labelBg } = token;
return {
[`&${componentCls}-bordered`]: {
[`${componentCls}-view`]: {
[`> ${componentCls}-view`]: {
border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
'> table': {
tableLayout: 'auto',
borderCollapse: 'collapse',
},
},
[`${componentCls}-item-label, ${componentCls}-item-content`]: {
padding: `${token.padding}px ${token.paddingLG}px`,
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
'&:last-child': {
borderInlineEnd: 'none',
},
},
[`${componentCls}-item-label`]: {
color: token.colorTextSecondary,
backgroundColor: labelBg,
'&::after': {
display: 'none',
},
},
[`${componentCls}-row`]: {
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
'&:last-child': {
borderBottom: 'none',
[`${componentCls}-row`]: {
borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
'&:last-child': {
borderBottom: 'none',
},
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${token.padding}px ${token.paddingLG}px`,
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
'&:last-child': {
borderInlineEnd: 'none',
},
},
[`> ${componentCls}-item-label`]: {
color: token.colorTextSecondary,
backgroundColor: labelBg,
'&::after': {
display: 'none',
},
},
},
},
[`&${componentCls}-middle`]: {
[`${componentCls}-item-label, ${componentCls}-item-content`]: {
padding: `${token.paddingSM}px ${token.paddingLG}px`,
[`${componentCls}-row`]: {
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${token.paddingSM}px ${token.paddingLG}px`,
},
},
},
[`&${componentCls}-small`]: {
[`${componentCls}-item-label, ${componentCls}-item-content`]: {
padding: `${token.paddingXS}px ${token.padding}px`,
[`${componentCls}-row`]: {
[`> ${componentCls}-item-label, > ${componentCls}-item-content`]: {
padding: `${token.paddingXS}px ${token.padding}px`,
},
},
},
},