From 351eec71d0c4e5e09f1f8635de513ffe3bda1a25 Mon Sep 17 00:00:00 2001
From: pandoralink <2593876610@qq.com>
Date: Fri, 27 Sep 2024 17:58:18 +0800
Subject: [PATCH] fix: Incorrect suffix position calculation when Typography
 strong attribute is true (#2506)

* fix: Incorrect suffix position calculation when Typography strong attribute is true

* fix: [Typography] Fix the problem of omitting text of strong type

---------

Co-authored-by: zhangyumei.0319 <zhangyumei.0319@bytedance.com>
---
 .../typography/_story/typography.stories.jsx  | 53 +++++++++++++++++++
 packages/semi-ui/typography/base.tsx          |  5 +-
 packages/semi-ui/typography/util.tsx          |  4 +-
 3 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/packages/semi-ui/typography/_story/typography.stories.jsx b/packages/semi-ui/typography/_story/typography.stories.jsx
index 502584efa5..48405e56ba 100644
--- a/packages/semi-ui/typography/_story/typography.stories.jsx
+++ b/packages/semi-ui/typography/_story/typography.stories.jsx
@@ -918,4 +918,57 @@ export const SizeAffectIcon = () => {
           <Text size="small"  icon={<IconLink />} underline>带下划线的网页链接</Text>
       </>
   )
+}
+
+export const StrongEllipsis = () =>{
+    return (
+      // 用于测试 strong 类型的 ellipsis 效果是否符合预期
+      // https://github.com/DouyinFE/semi-design/pull/2506
+      <div className="App">
+        <Typography.Title heading={2}>windows</Typography.Title>
+        {/* case 1 */}
+        <Typography.Paragraph
+          strong
+          ellipsis={{ rows: 3, suffix: "HELLO WORLD" }}
+          style={{ width: 300 }}
+        >
+          这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED
+          团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+          Web 应用。
+        </Typography.Paragraph>
+        <br />
+        {/* case 2 */}
+        <Typography.Paragraph
+          strong
+          ellipsis={{ rows: 3, suffix: "HELLO WORLD" }}
+          style={{ width: 300, wordBreak: "break-all" }}
+        >
+          这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED
+          团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+          Web 应用。
+        </Typography.Paragraph>
+        <Typography.Title heading={2}>macOS</Typography.Title>
+        {/* case 3 */}
+        <Typography.Paragraph
+          strong
+          ellipsis={{ rows: 3, suffix: "1234567891011" }}
+          style={{ width: 300 }}
+        >
+          这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED
+          团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+          Web 应用。
+        </Typography.Paragraph>
+        <br />
+        {/* case 4 */}
+        <Typography.Paragraph
+          strong
+          ellipsis={{ rows: 3, suffix: "123456" }}
+          style={{ width: 300, wordBreak: "break-all" }}
+        >
+          这是一个多行截断的例子：Semi Design 是由抖音前端团队与 UED
+          团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的
+          Web 应用。
+        </Typography.Paragraph>
+      </div>
+    );
 }
\ No newline at end of file
diff --git a/packages/semi-ui/typography/base.tsx b/packages/semi-ui/typography/base.tsx
index f33880a663..d6a1d36dfb 100644
--- a/packages/semi-ui/typography/base.tsx
+++ b/packages/semi-ui/typography/base.tsx
@@ -351,7 +351,7 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
 
     getEllipsisState = async ()=> {
         const { rows, suffix, pos } = this.getEllipsisOpt();
-        const { children } = this.props;
+        const { children, strong } = this.props;
         // wait until element mounted
         if (!this.wrapperRef || !this.wrapperRef.current) {
             await this.onResize();
@@ -406,7 +406,8 @@ export default class Base extends Component<BaseTypographyProps, BaseTypographyS
             extraNode,
             ELLIPSIS_STR,
             suffix,
-            pos
+            pos,
+            strong
         );
         return new Promise<void>(resolve=>{
             this.setState({
diff --git a/packages/semi-ui/typography/util.tsx b/packages/semi-ui/typography/util.tsx
index d1ec118594..6df50c5003 100644
--- a/packages/semi-ui/typography/util.tsx
+++ b/packages/semi-ui/typography/util.tsx
@@ -38,7 +38,8 @@ const getRenderText = (
     },
     ellipsisStr: string,
     suffix: string,
-    ellipsisPos: string
+    ellipsisPos: string,
+    isStrong: boolean,
 ) => {
     if (content.length === 0) {
         return '';
@@ -66,6 +67,7 @@ const getRenderText = (
     ellipsisContainer.style.height = 'auto';
     ellipsisContainer.style.top = '-999999px';
     ellipsisContainer.style.zIndex = '-1000';
+    isStrong && (ellipsisContainer.style.fontWeight = '600');
 
     // clean up css overflow
     ellipsisContainer.style.textOverflow = 'clip';