fix: Descriptions lost border style when children is falsy (#47191)

This commit is contained in:
afc163 2024-01-27 23:01:44 +08:00 committed by GitHub
parent 25eda833fb
commit c9d53f7a99
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 26 additions and 3 deletions

View File

@ -17,6 +17,7 @@ export interface CellProps {
label?: React.ReactNode;
content?: React.ReactNode;
colon?: boolean;
type?: 'label' | 'content' | 'item';
}
const Cell: React.FC<CellProps> = (props) => {
@ -32,6 +33,7 @@ const Cell: React.FC<CellProps> = (props) => {
label,
content,
colon,
type,
} = props;
const Component = component as keyof JSX.IntrinsicElements;
@ -41,8 +43,8 @@ const Cell: React.FC<CellProps> = (props) => {
<Component
className={classNames(
{
[`${itemPrefixCls}-item-label`]: notEmpty(label),
[`${itemPrefixCls}-item-content`]: notEmpty(content),
[`${itemPrefixCls}-item-label`]: type === 'label',
[`${itemPrefixCls}-item-content`]: type === 'content',
},
className,
)}

View File

@ -7,7 +7,7 @@ import DescriptionsContext from './DescriptionsContext';
interface CellConfig {
component: string | [string, string];
type: string;
type: 'label' | 'content' | 'item';
showLabel?: boolean;
showContent?: boolean;
}
@ -54,6 +54,7 @@ function renderCells(
bordered={bordered}
label={showLabel ? label : null}
content={showContent ? children : null}
type={type}
/>
);
}
@ -69,6 +70,7 @@ function renderCells(
itemPrefixCls={itemPrefixCls}
bordered={bordered}
label={label}
type="label"
/>,
<Cell
key={`content-${key || index}`}
@ -79,6 +81,7 @@ function renderCells(
itemPrefixCls={itemPrefixCls}
bordered={bordered}
content={children}
type="content"
/>,
];
},

View File

@ -377,4 +377,22 @@ describe('Descriptions', () => {
expect.anything(),
);
});
// https://github.com/ant-design/ant-design/issues/47151
it('should has .ant-descriptions-item-content className when children is falsy', () => {
const wrapper = render(
<Descriptions
bordered
items={[
{
key: '1',
label: null,
children: null,
},
]}
/>,
);
expect(wrapper.container.querySelectorAll('.ant-descriptions-item-label')).toHaveLength(1);
expect(wrapper.container.querySelectorAll('.ant-descriptions-item-content')).toHaveLength(1);
});
});