feat(alert): [alert] Adapting to the SMB theme (#2169)

opentiny · Sep 24, 2024 · 3e868bf · 3e868bf
1 parent f559970
commit 3e868bf
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 24 deletions.
diff --git a/examples/sites/demos/pc/app/alert/basic-usage.spec.ts b/examples/sites/demos/pc/app/alert/basic-usage.spec.ts
@@ -8,14 +8,14 @@ test('基本用法', async ({ page }) => {
   const alertBox = demo.locator('.tiny-alert')
 
   // 颜色边框正确
-  await expect(alertBox.first()).toHaveCSS('background-color', 'rgb(235, 246, 255)')
-  await expect(alertBox.first()).toHaveCSS('border-bottom-color', 'rgb(190, 204, 250)')
-  await expect(alertBox.nth(1)).toHaveCSS('background-color', 'rgb(255, 238, 237)')
-  await expect(alertBox.nth(1)).toHaveCSS('border-bottom-color', 'rgb(255, 188, 186)')
-  await expect(alertBox.nth(2)).toHaveCSS('background-color', 'rgb(237, 255, 249)')
-  await expect(alertBox.nth(2)).toHaveCSS('border-bottom-color', 'rgb(172, 242, 220)')
-  await expect(alertBox.nth(3)).toHaveCSS('background-color', 'rgb(255, 243, 232)')
-  await expect(alertBox.nth(3)).toHaveCSS('border-bottom-color', 'rgb(255, 208, 166)')
+  await expect(alertBox.first()).toHaveCSS('background-color', 'rgb(222, 236, 255)')
+  await expect(alertBox.first()).toHaveCSS('border-bottom-color', 'rgb(222, 236, 255)')
+  await expect(alertBox.nth(1)).toHaveCSS('background-color', 'rgb(252, 227, 225)')
+  await expect(alertBox.nth(1)).toHaveCSS('border-bottom-color', 'rgb(252, 227, 225)')
+  await expect(alertBox.nth(2)).toHaveCSS('background-color', 'rgb(230, 242, 213)')
+  await expect(alertBox.nth(2)).toHaveCSS('border-bottom-color', 'rgb(230, 242, 213)')
+  await expect(alertBox.nth(3)).toHaveCSS('background-color', 'rgb(255, 235, 209)')
+  await expect(alertBox.nth(3)).toHaveCSS('border-bottom-color', 'rgb(255, 235, 209)')
 
   // 警告可见
   const alertSuccess = demo.locator('.tiny-alert--success')

diff --git a/examples/sites/demos/pc/app/alert/size.spec.ts b/examples/sites/demos/pc/app/alert/size.spec.ts
@@ -6,5 +6,5 @@ test('尺寸', async ({ page }) => {
 
   const largeAlert = page.locator('.tiny-alert').nth(1)
   await expect(largeAlert).toHaveClass(/tiny-alert--large/)
-  await expect(largeAlert).toHaveCSS('height', '68px')
+  await expect(largeAlert).toHaveCSS('height', '77px')
 })
diff --git a/packages/theme/src/alert/index.less b/packages/theme/src/alert/index.less
@@ -31,6 +31,7 @@
     margin: var(--ti-alert-normal-margin-vertical) var(--ti-alert-normal-margin-horizontal);
     display: flex;
     justify-content: flex-start;
+    align-items: center;
 
     .@{alert-prefix-cls}__content {
       padding: var(--ti-alert-normal-content-padding-vertical) var(--ti-alert-normal-content-padding-horizontal);
@@ -64,7 +65,6 @@
 
     .@{alert-prefix-cls}__icon {
       font-size: var(--ti-alert-large-icon-font-size);
-      margin-top: var(--ti-alert-large-icon-margin-top);
       vertical-align: top;
       flex-shrink: 0;
     }
@@ -146,13 +146,10 @@
   &__icon {
     font-size: var(--ti-alert-icon-font-size);
   }
-  &__icon:first-child {
-    margin-top: var(--ti-alert-icon-margin-top);
-  }
 
   &.is-center {
     justify-content: center;
-    text-align: center;
+    align-items: center;
   }
 
   .is-custom {
@@ -192,7 +189,7 @@
     font-size: var(--ti-alert-title-font-size);
     color: var(--ti-alert-title-text-color);
     font-weight: bold;
-    margin-top: var(--ti-alert-title-margin-top);
+    line-height: 20px;
   }
 
   & &__description {

diff --git a/packages/theme/src/alert/vars.less b/packages/theme/src/alert/vars.less
@@ -48,8 +48,6 @@
   --ti-alert-simple-title-text-color: var(--ti-common-color-text-primary, #252b3a);
   // 标题字号
   --ti-alert-title-font-size: var(--ti-common-font-size-2);
-  // 标题图标顶部外边距
-  --ti-alert-icon-margin-top: calc(var(--ti-common-space-6) / 2);
   // 标题图标字号
   --ti-alert-icon-font-size: var(--ti-common-font-size-2, 16px);
   // 描述内容行高
@@ -89,9 +87,7 @@
   // large尺寸操作字号
   --ti-alert-opration-font-size: var(--ti-common-font-size-base, 12px);
   // large尺寸图标字号
-  --ti-alert-large-icon-font-size: var(--ti-common-font-size-5, 24px);
-  // large尺寸图标顶部外边距
-  --ti-alert-large-icon-margin-top: var(--ti-common-space-0);
+  --ti-alert-large-icon-font-size: var(--ti-common-font-size-4, 24px);
   // large尺寸描述内容左内边距
   --ti-alert-large-content-padding-left: var(--ti-common-space-2x);
   // 大尺寸关闭图标字号
@@ -150,7 +146,7 @@
   // simple类型边框色
   --ti-alert-simple-border-color: var(--ti-common-color-info-border, #d3d4d6);
   // simple类型图标色
-  --ti-alert-simple-icon-color: var(--ti-common-color-text-secondary, #575d6c);
+  --ti-alert-simple-icon-color: #808080;
   // simple类型链接色(hide)
   --ti-alert-simple-link-text-color: var(--ti-common-color-primary-active, #7693f5);
   // simple类型背景色
@@ -159,6 +155,4 @@
   --ti-alert-simple-close-icon-color: var(--ti-alert-simple-icon-color);
   // simple类型悬浮关闭图标色
   --ti-alert-simple-close-hover-icon-color: var(--ti-alert-simple-icon-color);
-  // 标题的上边距
-  --ti-alert-title-margin-top: var(--ti-common-size-base);
 }
diff --git a/packages/vue/src/alert/src/index.ts b/packages/vue/src/alert/src/index.ts
@@ -17,7 +17,8 @@ export const $constants = {
     success: 'icon-success',
     error: 'icon-error',
     info: 'icon-help',
-    warning: 'icon-warning'
+    warning: 'icon-warning',
+    simple: 'icon-help'
   },
   TITLE_MAP: {
     success: 'ui.alert.success',