mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
fix: Descriptions lost border style when children is falsy (#47191)
This commit is contained in:
parent
25eda833fb
commit
c9d53f7a99
@ -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,
|
||||
)}
|
||||
|
@ -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"
|
||||
/>,
|
||||
];
|
||||
},
|
||||
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user