fix: typography expanded should not break lines (#48340)

ant-design · Apr 8, 2024 · 61c8a43 · 61c8a43
1 parent 4a25c9f
commit 61c8a43
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/BUG_VERSIONS.json b/BUG_VERSIONS.json
@@ -52,5 +52,6 @@
   "5.12.6": ["https://github.com/ant-design/ant-design/issues/46719"],
   "5.13.0": ["https://github.com/ant-design/ant-design/pull/46962"],
   "5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"],
-  "5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"]
+  "5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"],
+  ">= 5.16.0 <= 5.16.1": ["https://github.com/ant-design/ant-design/issues/48200"]
 }
diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
@@ -461,7 +461,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
                 [`${prefixCls}-${type}`]: type,
                 [`${prefixCls}-disabled`]: disabled,
                 [`${prefixCls}-ellipsis`]: enableEllipsis,
-                [`${prefixCls}-single-line`]: mergedEnableEllipsis && rows === 1,
+                [`${prefixCls}-single-line`]: mergedEnableEllipsis && rows === 1 && !expanded,
                 [`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
                 [`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
               },

diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx
@@ -507,4 +507,18 @@ describe('Typography.Ellipsis', () => {
     await waitFakeTimer();
     expect(document.querySelector('.ant-tooltip')).toBeTruthy();
   });
+
+  it('not force single line if expanded', () => {
+    const renderDemo = (expanded: boolean) => (
+      <Base ellipsis={{ rows: 1, expanded, expandable: 'collapsible' }} component="p">
+        {fullStr}
+      </Base>
+    );
+
+    const { container, rerender } = render(renderDemo(false));
+    expect(container.querySelector('.ant-typography-single-line')).toBeTruthy();
+
+    rerender(renderDemo(true));
+    expect(container.querySelector('.ant-typography-single-line')).toBeFalsy();
+  });
 });