feat: alert

DTStack · Jul 29, 2020 · 445a70d · 445a70d
1 parent 9ce199c
commit 445a70d
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 8 deletions.
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
@@ -16,6 +16,7 @@ ReactDOM.render(
     <Alert style={{ marginBottom: 20 }} message="Success Text" type="success" showIcon closable />
     <Alert style={{ marginBottom: 20 }} message="Warning Text" type="warning" showIcon closable />
     <Alert style={{ marginBottom: 20 }} message="Error Text" type="error" showIcon closable />
+    <Alert style={{ marginBottom: 20 }} message="Error Text" type="error" description="Error Description Error Description Error Description Error Description Error Description Error Description" showIcon closable />
   </div>,
   mountNode,
 );

diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md
@@ -10,8 +10,18 @@ subtitle: 警告提示
 
 ## 设计规范
 
+#### 默认主题
+
 警告提示 不带边框，高度为 44px。不同提示颜色不同。
 
 - 错误提示 背景色为 #FFF1F0
 - 警告提示 背景色为 #FFFBE6
 - 成功提示 背景色为 #DFFAE6
+
+#### 暗黑主题
+
+警告提示 带边框，背景色为 #1D1F2E，高度为 44px，不通提示颜色不同。
+
+- 错误提示 边框色为 #E25F5D
+- 警告提示 边框色为 #C28C3A
+- 成功提示 边框色为 #00A755
diff --git a/theme/dt-theme/dark/alert.less b/theme/dt-theme/dark/alert.less
@@ -0,0 +1,25 @@
+.ant-alert {
+    padding: 12px 16px 12px 40px;
+}
+.ant-alert.ant-alert-no-icon {
+    padding: 12px 16px;
+}
+.ant-alert-icon {
+    top: 13px;
+    left: 16px;
+    font-size: 16px;
+}
+.ant-alert-close-icon {
+    top: 10px;
+    right: 14px;
+}
+.ant-alert-with-description {
+    padding: 12px 16px 12px 54px;
+    .ant-alert-icon {
+        top: 13px;
+        left: 20px;
+    }
+    .ant-alert-close-icon {
+        top: 12px;
+    }
+}
diff --git a/theme/dt-theme/dark/index.less b/theme/dt-theme/dark/index.less
@@ -1,6 +1,7 @@
 @import './resetDark.less';
 @import './button.less';
 @import './modal.less';
+@import './alert.less';
 
 * {
     margin: 0;

diff --git a/theme/dt-theme/dark/resetDark.less b/theme/dt-theme/dark/resetDark.less
@@ -443,8 +443,10 @@
 // ---
 @mentions-dropdown-bg: @popover-background;
 
-// dt-theme
+// ==== dt-theme ====
 @primary-color: #3F87FF;
+@popover-background: #1D1F2E;
+@component-background: #1D1F2E;
 @heading-color: #F2F2F2;
 @font-size-base: 12px;
 @text-color: #BFBFBF;
@@ -460,13 +462,29 @@
 @input-placeholder-color: #666666;
 @input-height-lg: 36px;
 @input-height-sm: 28px;
-@input-hover-border-color: #3F87FF;
+@input-hover-border-color: @primary-color;
 @modal-footer-padding-horizontal: 20px;
 @form-item-margin-bottom: 20px;
-@label-required-color: #E25F5D;
+@label-required-color: @error-color;
 @table-header-bg: #222433;
 @table-padding-vertical: 19px;
 @item-hover-bg: #292D42;
 @select-item-selected-bg: #292D42;
 @select-item-selected-font-weight: normal;
 @modal-header-bg: #1A1C29;
+// Alert
+@alert-success-border-color: @success-color;
+@alert-success-bg-color: #1D1F2E;
+@alert-success-icon-color: @success-color;
+@alert-info-border-color: @info-color;
+@alert-info-bg-color: #1D1F2E;
+@alert-info-icon-color: @info-color;
+@alert-warning-border-color: @warning-color;
+@alert-warning-bg-color: #1D1F2E;
+@alert-warning-icon-color: @warning-color;
+@alert-error-border-color: @error-color;
+@alert-error-bg-color: #1D1F2E;
+@alert-error-icon-color: @error-color;
+@alert-text-color: @text-color;
+@alert-message-color: @text-color;
+@alert-close-color: #999999;
diff --git a/theme/dt-theme/default/notice.less b/theme/dt-theme/default/notice.less
@@ -1,25 +1,29 @@
 @import '../const.less';
 
 .ant-alert {
-    padding: 12px 15px 12px 36px;
+    padding: 12px 16px 12px 40px;
 }
 .ant-alert.ant-alert-no-icon {
-    padding: 12px 15px;
+    padding: 12px 16px;
 }
 .ant-alert-icon {
-    top: 15px;
-    left: 20px;
+    top: 13px;
+    left: 16px;
+    font-size: 16px;
 }
 .ant-alert-close-icon {
     top: 10px;
     right: 14px;
 }
 .ant-alert-with-description {
-    padding: 12px 15px 12px 54px;
+    padding: 12px 16px 12px 54px;
     .ant-alert-icon {
         top: 13px;
         left: 20px;
     }
+    .ant-alert-close-icon {
+        top: 12px;
+    }
 }
 .ant-alert-success {
     background-color: #DFFAE6;