fix(comp:modal): modal title should have word break (#1888)

IDuxFE · Apr 12, 2024 · 62b606a · 62b606a
1 parent a122a31
commit 62b606a
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 17 deletions.
diff --git a/packages/components/dark.full.css b/packages/components/dark.full.css
@@ -679,6 +679,7 @@
   --ix-modal-title-font-size: 14px;
   --ix-modal-title-font-weight: 400;
   --ix-modal-title-color: #f4f8ff;
+  --ix-modal-title-word-break: break-word;
   --ix-modal-content-color: #808999;
   --ix-modal-icon-size: 40px;
 }

diff --git a/packages/components/default.full.css b/packages/components/default.full.css
@@ -679,6 +679,7 @@
   --ix-modal-title-font-size: 14px;
   --ix-modal-title-font-weight: 400;
   --ix-modal-title-color: #2f3540;
+  --ix-modal-title-word-break: break-word;
   --ix-modal-content-color: #6f7785;
   --ix-modal-icon-size: 40px;
 }

diff --git a/packages/components/modal/docs/Theme.zh.md b/packages/components/modal/docs/Theme.zh.md
@@ -1,7 +1,8 @@
 | 名称 | 描述 | 类型 | default | dark |
 |---|---|---|---|---|
-| `contentColor` |  | `string` | `#6f7785` | `#808999` |
-| `iconSize` |  | `number` | `40` | `40` |
-| `titleColor` |  | `string` | `#2f3540` | `#F4F8FF` |
-| `titleFontSize` |  | `number` | `14` | `14` |
-| `titleFontWeight` |  | `number` | `400` | `400` |
+| `contentColor` | 内容字体颜色 | `string` | `#6f7785` | `#808999` |
+| `iconSize` | 图标尺寸 | `number` | `40` | `40` |
+| `titleColor` | 标题的字体颜色 | `string` | `#2f3540` | `#F4F8FF` |
+| `titleFontSize` | 标题的字体大小 | `number` | `14` | `14` |
+| `titleFontWeight` | 标题的字重 | `number` | `400` | `400` |
+| `titleWordBreak` | 标题word-break | `string` | `break-word` | `break-word` |
diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less
@@ -9,7 +9,7 @@
   position: relative;
   pointer-events: none;
   width: auto;
-  max-width: calc(100vw - 32px);
+  max-width: calc(100vw - var(--ix-margin-size-2xl));
   margin: 0 auto;
 
   &-wrapper {
@@ -41,30 +41,31 @@
     box-shadow: var(--ix-box-shadow-lg);
 
     > .@{header-prefix} {
-      padding-left: 16px;
-      padding-right: 16px;
+      padding-left: var(--ix-padding-size-lg);
+      padding-right: var(--ix-padding-size-lg);
     }
   }
 
   &-body {
     flex: 1;
-    padding: 8px 16px;
+    padding: var(--ix-padding-size-sm) var(--ix-padding-size-lg);
     overflow: auto;
 
     &-title {
       .reset-font-size(var(--ix-modal-title-font-size));
 
       font-weight: var(--ix-modal-title-font-weight);
       color: var(--ix-modal-title-color);
-      margin-bottom: 4px;
+      margin-bottom: var(--ix-margin-size-xs);
+      word-break: var(--ix-modal-title-word-break);
     }
 
     &-content {
       display: flex;
       flex-direction: column;
       justify-content: center;
       width: 100%;
-      padding-right: 16px;
+      padding-right: var(--ix-padding-size-lg);
       color: var(--ix-modal-content-color);
 
       &-only-title {
@@ -84,14 +85,14 @@
     &-warning,
     &-error {
       display: flex;
-      padding: 0 16px;
+      padding: 0 var(--ix-padding-size-lg);
     }
 
     &-icon {
       font-size: var(--ix-modal-icon-size);
       height: calc(var(--ix-modal-icon-size) + var(--ix-line-height-gutter));
       line-height: calc(var(--ix-modal-icon-size) + var(--ix-line-height-gutter));
-      margin: 0 16px;
+      margin: 0 var(--ix-padding-size-lg);
     }
 
     &-confirm {
@@ -128,10 +129,10 @@
   &-footer {
     display: flex;
     justify-content: flex-end;
-    padding: 12px 16px;
+    padding: var(--ix-padding-size-md) var(--ix-padding-size-lg);
 
     .@{button-prefix} + .@{button-prefix} {
-      margin-left: 8px;
+      margin-left: var(--ix-margin-size-sm);
     }
   }
 
@@ -156,8 +157,8 @@
 
 @media (max-width: @screen-sm-max) {
   .@{modal-prefix} {
-    max-width: calc(100vw - 16px);
-    margin: 8px auto;
+    max-width: calc(100vw - var(--ix-padding-size-lg));
+    margin: var(--ix-margin-size-sm) auto;
   }
 
   .@{modal-prefix}-centered {

diff --git a/packages/components/modal/theme/dark.css b/packages/components/modal/theme/dark.css
@@ -3,6 +3,7 @@
   --ix-modal-title-font-size: 14px;
   --ix-modal-title-font-weight: 400;
   --ix-modal-title-color: #f4f8ff;
+  --ix-modal-title-word-break: break-word;
   --ix-modal-content-color: #808999;
   --ix-modal-icon-size: 40px;
 }
diff --git a/packages/components/modal/theme/default.css b/packages/components/modal/theme/default.css
@@ -3,6 +3,7 @@
   --ix-modal-title-font-size: 14px;
   --ix-modal-title-font-weight: 400;
   --ix-modal-title-color: #2f3540;
+  --ix-modal-title-word-break: break-word;
   --ix-modal-content-color: #6f7785;
   --ix-modal-icon-size: 40px;
 }
diff --git a/packages/components/modal/theme/default.ts b/packages/components/modal/theme/default.ts
@@ -13,6 +13,7 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
     titleFontSize: fontSizeMd,
     titleFontWeight: fontWeightMd,
     titleColor: colorTextTitle,
+    titleWordBreak: 'break-word',
 
     contentColor: colorTextInfo,
     iconSize: 40,

diff --git a/packages/components/modal/theme/tokens.ts b/packages/components/modal/theme/tokens.ts
@@ -6,10 +6,29 @@
  */
 
 export interface ModalThemeTokens {
+  /**
+   * @desc 标题的字体大小
+   */
   titleFontSize: number
+  /**
+   * @desc 标题的字重
+   */
   titleFontWeight: number
+  /**
+   * @desc 标题的字体颜色
+   */
   titleColor: string
+  /**
+   * @desc 标题word-break
+   */
+  titleWordBreak: string
 
+  /**
+   * @desc 内容字体颜色
+   */
   contentColor: string
+  /**
+   * @desc 图标尺寸
+   */
   iconSize: number
 }