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

ant-design · Jan 27, 2024 · c9d53f7 · c9d53f7
1 parent 25eda83
commit c9d53f7
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/components/descriptions/Cell.tsx b/components/descriptions/Cell.tsx
@@ -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,
         )}

diff --git a/components/descriptions/Row.tsx b/components/descriptions/Row.tsx
@@ -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"
         />,
       ];
     },

diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx
@@ -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);
+  });
 });