style: improve tooltip/toast/notification word wrap rules (#1623)

* style: [Tooltip] Modify the word-wrap rule of Tooltip so that long URLs and Hash value can automatically wrap

* docs: [Tooltip] Update and Tooltip newline related documentation description

* style: [Toast][Notification] add default newline rules

* style: [Tooltip] add default newline rules

* style: Set default line break rules

content/basic/typography/index-en-US.md

@@ -371,7 +371,7 @@ function Demo() {
 ```
 
 <Notice type="primary" title="Tips">
-    <div>When the tooltip does not wrap in the pop-up tooltip when the long text occurs, please set it manually <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break" target="_blank"  rel="noopener noreferrer">word-break</a>. The reason why we did not have built-in content is that different language content (pure English, Chinese, mixed Chinese and English) have different requirements for word-break, so the component layer does not make this preset.</div>
+    <div>When the tooltip does not wrap in the pop-up tooltip when the long text occurs, please set it manually through <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break" target="_blank"  rel="noopener noreferrer">word-break</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target= "_blank" rel="noopener noreferrer">word-wrap</a>, more details can be found in the FAQ section of Tooltip</div>
 </Notice>
 
 ```jsx live=true

content/basic/typography/index.md

@@ -371,7 +371,7 @@ function Demo() {
 ```
 
 <Notice type="primary" title="注意事项">
-    <div>当发生超长文本在弹出的 tooltip 没有换行时，请手动设置一下 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break" target="_blank" rel="noopener noreferrer">word-break</a>。我们没有内置的原因是不同语言内容（纯英文、中文、中英文混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。</div>
+    <div>当发生超长文本在弹出的 tooltip 没有换行时，可通过手动设置一下 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/word-break" target="_blank" rel="noopener noreferrer">word-break</a> 或者 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target= "_blank" rel="noopener noreferrer">word-wrap</a> 等换行相关属性进行调整, 更多细节可查看 Tooltip 的 FAQ 部分</div>
 </Notice>
 
 ```jsx live=true

content/show/tooltip/index-en-US.md

@@ -394,9 +394,8 @@ import { Popconfirm, Tooltip, Button } from '@douyinfe/semi-ui';
 <DesignToken/>
 
 ## FAQ
-
--   **Why Tooltip does not set style word-break to all or word?**  
-    Content in difference languages (e.g. English, Chinese, combination of English and Chinese) may require different styles in terms of word-break, so Semi does not use a default setting. You could use corresponding CSS styles to your own needs.
+-   **Why do some forms of content not wrap when the content in Tooltip and Typography is very long?**    
+    Before the v2.36.0 version, considering that different language content (e.g. English, Chinese, combination of English and Chinese) have inconsistent requirements for line breaks, so Semi does not use a default setting. After receiving a lot of usage feedback, since the v2.36.0 version, Tooltip has internally set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target= "_blank" rel="noopener noreferrer">word-wrap</a> handles text wrapping for break-word. For any version, if the default settings are not as expected, the user can adjust the line break related CSS properties through the style/className API.
 
 <!-- ## Related Material
 

content/show/tooltip/index.md

@@ -424,8 +424,8 @@ function Demo() {
 
 ## FAQ
 
--   **为什么 Tooltip content 配置很长很长的内容时，会超出显示 / 不默认配置 word-break 样式?**  
-    不同语言内容（纯英文、中文、中英文混合、其他语种混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。使用方可以根据自己当前语言需求，使用 CSS 进行设置。
+-   **为什么 Tooltip content 配置很长很长的内容时，某些情况下内容会超出显示区域?**  
+    在 v2.36.0 版本以前，考虑到不同语言内容（纯英文、中文、中英文混合、其他语种混合）对换行的需求不太一致，所以组件层没有做这个预设。在接收到较多使用反馈后，自 v2.36.0 版本，Tooltip 内部通过设置 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target="_blank" rel="noopener noreferrer">word-wrap</a> 为 break-word 处理文本换行。对于任意版本，如果默认设置不符合预期，使用方都可以通过 style/className API 设置换行相关 CSS 属性进行调整。
 
 
 <!-- ## 相关物料

content/start/faq/index-en-US.md

@@ -53,8 +53,8 @@ Welcome to ours [Customer Service Lark Group](https://bytedance.feishu.cn/docs/d
 
 Our style is based on Scss, and we also use CSS Variable as the color wheel variable. Color variables and common variables are mounted under `body`. CSS Module is not used because we want to have a fixed className and retain the ability to modify / override Semi style for our users(although it is not recommended, it is really needed sometime).
 
-#### Why Tooltip、Typography does not set style word-break to all or word?  
-   Content in difference languages (e.g. English, Chinese, combination of English and Chinese) may require different styles in terms of word-break, so Semi does not use a default setting. You could use corresponding CSS styles to your own needs.
+#### Why do some forms of content not wrap when the content in Tooltip and Typography is very long?  
+Before the v2.36.0 version, considering that different language content (e.g. English, Chinese, combination of English and Chinese) have inconsistent requirements for line breaks, so Semi does not use a default setting. After receiving a lot of usage feedback, since the v2.36.0 version, Tooltip has internally set <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target= "_blank" rel="noopener noreferrer">word-wrap</a> handles text wrapping for break-word. For any version, if the default settings are not as expected, the user can adjust the line break related CSS properties through the style/className API.
 
 #### More FAQ
 Please refer to https://bytedance.feishu.cn/docs/doccnMRDbkhde6p3dMokfFpcNug

content/start/faq/index.md

@@ -53,9 +53,9 @@ Semi 目前支持 21 种语言，具体使用可以查阅 [Semi·LocaleProvider]
 
 我们的样式基于 Scss，与此我们还使用了 CSS Variable 作为色盘变量。色盘变量和通用变量挂载在 body 下。不使用 CSS Module 是因为我们希望有固定的 className，为业务方保留修改/覆盖 Semi 样式的能力（虽然不提倡，但有些业务场景下确实需要）
 
-#### 为什么 Tooltip、Typography 不默认配置 word-break 样式？
+#### 为什么 Tooltip content 配置很长很长的内容时，某些情况下内容会超出显示区域?
 
-不同语言内容（纯英文、中文、中英文混合）对 word-break 的需求不太一致，所以组件层没有做这个预设。可以根据需求，使用 CSS 进行设置。
+在 v2.36.0 版本以前，考虑到不同语言内容（纯英文、中文、中英文混合、其他语种混合）对换行的需求不太一致，所以组件层没有做这个预设。在接收到较多使用反馈后，自 v2.36.0 版本，Tooltip 内部通过设置 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap" target="_blank" rel="noopener noreferrer">word-wrap</a> 为 break-word 处理文本换行。对于任意版本，如果默认设置不符合预期，使用方都可以通过 style/className API 设置换行相关 CSS 属性进行调整。
 
 #### 有新组件需求、或者现有组件 Feature 不能满足我的业务需求，该找谁？
 

packages/semi-foundation/notification/notification.scss

@@ -123,16 +123,21 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_title-fontWeight;
             color: $color-notification_title-text;
             margin-bottom: $spacing-notification_notice_title-marginBottom;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-inner {
             display: flex;
             width: 100%;
+            min-width: 0;
         }
 
         &-content-wrapper {
             flex: 1 1 auto;
             margin-right: $spacing-notification_notice_content_wrapper-marginRight;
+            min-width: 0;
         }
 
         &-content {
@@ -140,6 +145,9 @@ $module: #{$prefix}-notification;
             font-weight: $font-notification_notice_content-fontWeight;
             color: $color-notification_content-text;
             // padding-top: $spacing-extra-tight;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
 
         &-icon-close {

packages/semi-foundation/toast/toast.scss

@@ -39,6 +39,9 @@ $icon: #{$prefix}-toast-icon;
             margin-left: $spacing-toast_content_text-marginLeft;
             margin-right: $spacing-toast_content_text-marginRight;
             text-align: left;
+            // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+            word-wrap: break-word;
+            overflow-wrap: break-word;
         }
     }
 

packages/semi-foundation/tooltip/tooltip.scss

@@ -65,6 +65,9 @@ $module-icon: #{$module}-icon-arrow;
         font-size: $font-tooltip-fontSize;
         left: 0;
         top: 0;
+        // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+        word-wrap: break-word;
+        overflow-wrap: break-word;
 
         @include font-size-regular;
         opacity: 0;
@@ -75,6 +78,10 @@ $module-icon: #{$module}-icon-arrow;
         }
     }
 
+    &-content {
+        min-Width: 0
+    }
+
     &-trigger {
         display: inline-block;
         width: auto;

packages/semi-ui/notification/_story/notification.stories.jsx

@@ -223,3 +223,16 @@ export const AsyncCallback = () => <Demo />;
 AsyncCallback.story = {
   name: '二次异步回调'
 }
+
+export const TestOverFlow = () => {
+  let opts = {
+      title: 'Test long word Title, TestLongWordTestLongWordTestLongWordTestLongWordTestLongWord',
+      content: 'Test long word Title, TestLongWordTestLongWordTestLongWordTestLongWordTestLongWord',
+      duration: 0,
+      theme: 'light',
+      style: { width: 320 }
+  };
+  return (
+    <Button onClick={() => Notification.info(opts)}>Info</Button>
+  )
+}

packages/semi-ui/toast/_story/toast.stories.jsx

@@ -101,6 +101,16 @@ export const _Toast = () => (
         Toast in popup-container
       </Button>
     </div>
+    <div style={{ margin: '10px' }}>
+      <Button
+        type="primary"
+        onClick={() => {
+          Toast.error({ ...opts, content: 'I have a very long word testLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord' });
+        }}
+      >
+        test overflow wrap
+      </Button>
+    </div>
   </>
 );
 

packages/semi-ui/tooltip/_story/tooltip.stories.jsx

@@ -1529,4 +1529,108 @@ export const Fix1557 = () =>{
           <Tag>Hover Me</Tag>
       </Dropdown>
   );
-}
+}
+
+export const wordBreak = () => {
+  const gapElement = (gap=200) => <div style={{ marginTop: gap }}></div>;
+
+  const tooltipShowProps = { 
+    trigger: "custom",  
+    visible: true ,
+    // showArrow: false
+  };
+
+  const testContent = {
+    '长hash': 'ide2d3a4e9d7b7d93fc4c3b8e4b1b4b08e4f5a9f13ed8b8d6f7c5b7c4c7e4b9e6b9e6e5d4e4c5f6e3b1e7b3a3e3e5c5f4e9c8',
+    'url测试': 'https://semi.bytedance.net/zh-CN/show/tooltip#%E4%BB%85%E5%BD%93%E5%86%85%E5%AE%B9%E5%AE%BD%E5%BA%A6%E8%B6%85%E5%87%BA%E6%97%B6%E5%B1%95%E7%A4%BA%20Tooltip',
+    '中文测试': '中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试',
+    // 以下为英文中最长的单词
+    '英文测试': 'pneumonoultramicroscopicsilicovolcanoconiosis',
+    '日语测试': '超音波検査による胸部エコー検査結果、心拍数や脈波などの検査結果から、緊急性はないものの肺炎の可能性があるため、抗生物質の処方箋を出します。',
+    '韩语测试': '인공지능과 빅데이터 기술을 활용한 자율주행 자동차의 개발은 현재 국내외에서 많은 관심을 받고 있습니다.',
+    '泰语测试': 'เทคโนโลยีการผลิตอาหารและสารสกัดจากพืชชนิดต่าง ๆ กำลังเป็นที่สนใจในวงการอาหารทั่วโลก',
+    '阿拉伯语测试': 'تطور التكنولوجيا والذكاء الاصطناعي يؤثر بشكل كبير على صناعة العمليات الإنتاجية ونمط الحياة الحديثة.',
+    '越南语': 'Ứng dụng công nghệ thông tin và trí tuệ nhân tạo đang ngày càng được sử dụng rộng rãi trong lĩnh vực sản xuất và dịch vụ. không-gian-phi-trụ-điện-từ',
+    '俄罗斯语': 'Разработка новейших технологий искусственного интеллекта и машинного обучения становится все более важной в наши дни.',
+    '印尼语': 'Pemanfaatan teknologi informasi dan kecerdasan buatan semakin penting dalam industri modern.',
+    '马来语': 'Penggunaan teknologi maklumat dan kecerdasan buatan semakin penting dalam industri moden.',
+    '泰语': 'บริการจัดส่งสินค้าทางไปรษณีย์ภายในประเทศไทยมีความสะดวกสบายและรวดเร็วมากยิ่งขึ้นด้วยการใช้เทคโนโลยีที่ทันสมัยในการติดตามสถานะและการจัดส่งสินค้า นอกจากนี้ยังมีการให้บริการเพิ่มเติมอย่างต่างๆ เช่น การจัดส่งพิเศษ การรับส่งเอกสาร การจัดส่งด่วน เป็นต้น',
+    '土耳其语': "Otomobil endüstrisi, Türkiye'nin en önemli sanayi kollarından biridir. Türkiye, yılda yaklaşık 1 milyon adet otomobil üretimiyle Avrupa'nın önde gelen üreticileri arasındadır.",
+    '葡萄牙语': "A eletricidade é uma fonte de energia renovável e limpa, que é produzida a partir de fontes como a energia solar, eólica, hidroelétrica e geotérmica.",
+    '西班牙语': "La biotecnología es una rama de la ciencia que utiliza organismos vivos o partes de ellos para desarrollar productos y servicios que mejoren la calidad de vida.",
+    '意大利语': "L'ingegneria genetica è una branca della biologia molecolare che si occupa di manipolare il DNA per creare organismi con caratteristiche specifiche.",
+    '法语': 'La pharmacologie est la science qui étudie les effets des médicaments sur les êtres vivants et leur utilisation pour la prévention, le diagnostic et le traitement des maladies.',
+    '德语': 'Die Kernenergie ist eine umstrittene Energiequelle, die durch die Nutzung der Energie aus Atomkernen Strom erzeugt.',
+    '罗马尼亚语': 'Ingineria software este o ramură a informaticii care se ocupă cu dezvoltarea de programe și aplicații software.',
+    '瑞典语': 'Neurovetenskap är studiet av nervsystemet och dess funktioner, inklusive dess relationer till beteende och kognition.',
+    '波兰语': 'Archeologia jest nauką humanistyczną zajmującą się badaniem śladów pozostawionych przez człowieka w przeszłości.',
+    '荷兰语': 'Psychologie is de wetenschappelijke studie van het menselijk gedrag en de processen die daaraan ten grondslag liggen.',
+  };
+
+  const longWordContent = {
+    '英文测试': "pneumonoultramicroscopicsilicovolcanoconiosis",
+    '泰语测试': "หน้าต่างจอภาพ",
+    '阿拉伯语测试': "أفاستسقيناكموها",
+    '越南语': "bấtđồngxứngđáng",
+    '俄罗斯语': "человеконенавистничество",
+    '印尼语': "melipatgandakan",
+    '马来语': "pengangkutan",
+    '土耳其语': "çekoslovakyalılaştıramadıklarımızdanmışsınızcasına",
+    '葡萄牙语': "otorrinolaringologista",
+    '西班牙语': "electroencefalografista",
+    '意大利语': "precipitevolissimevolmente",
+    '法语': "anticonstitutionnellement ",
+    '德语': "Donaudampfschifffahrtsgesellschaftskapitän",
+    '罗马尼亚语': "neîncorporabile",
+    '瑞典语': "realisationsvinstbeskattning",
+    '波兰语': "najedźcieżżebrzącychświniątkach",
+    '荷兰语': "Kindercarnavalsoptochtvoorbereidingswerkzaamheden"
+  }
+
+  return (
+  <>
+    {['bottom','top'].map((item, index) => {
+      return <div key={`${index}`}>
+        <Tooltip {...tooltipShowProps} content={'中'} position={item}>
+          <span style={{ marginRight: 10 }}>中文测试</span>
+        </Tooltip>
+        <Tooltip {...tooltipShowProps} content={'-'} position={item}>
+          <span style={{ marginRight: 10 }}>高度测试</span>
+        </Tooltip>
+        <Tooltip showArrow={false} {...tooltipShowProps} content={'中'} position={item} >
+          <span style={{ marginRight: 10 }}>中文无 arrow 测试</span>
+        </Tooltip>
+        <Tooltip showArrow={false} {...tooltipShowProps} content={'t'} position={item}>
+          <span style={{ marginRight: 10 }}>英文无 arrow 测试</span>
+        </Tooltip>
+        {gapElement(100)}
+      </div>
+    })}
+    <p style={{ marginTop: 50 }}>以下为 word-wrap: break-word <strong>VS</strong> word-wrap: normal </p>
+    {Object.entries(testContent).map((item, index) => {
+      const [key, value] = item;
+      return <div key={`${index}`}>
+        {gapElement(200)}
+        <Tooltip {...tooltipShowProps} content={value} position={'top'}>
+        {`${key}`}
+        </Tooltip>
+        <Tooltip {...tooltipShowProps} content={value} position={'top'} style={{ wordWrap: 'normal' }}>
+          <span style={{ marginLeft: 350 }}>{`${key}`}</span>
+        </Tooltip>
+      </div>
+    })}
+    {Object.entries(longWordContent).map((item, index) => {
+      const [key, value] = item;
+      return <div key={`${index}`}>
+        {gapElement(100)}
+        <Tooltip {...tooltipShowProps} content={value} position={'top'} style={{ width: 50 }}>
+        {`${key}`}
+        </Tooltip>
+        <Tooltip {...tooltipShowProps} content={value} position={'top'} style={{ wordWrap: 'normal', width: 50 }}>
+          <span style={{ marginLeft: 350 }}>{`${key}`}</span>
+        </Tooltip>
+      </div>
+    })}
+  </>
+  );
+}

packages/semi-ui/tooltip/index.tsx

@@ -649,7 +649,7 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                             x-placement={placement}
                             id={id}
                         >
-                            {contentNode}
+                            <div className={`${prefix}-content`} >{contentNode}</div>
                             {icon}
                         </div>;
                     }