chore: toast 默认放中间 (#2608)

scss/_properties.scss

@@ -1240,8 +1240,9 @@
   --Toast-close-color: var(--white);
   --Toast-color: var(--white);
 
+  --Toast-icon-width: #{px2rem(16px)};
   --Toast-icon-height: var(--Toast-icon-width);
-  --Toast-icon-width: #{px2rem(30px)};
+
   --Toast-opacity: 0.8;
   --Toast-paddingL: #{px2rem(40px)};
   --Toast-paddingX: var(--gap-sm);

scss/_variables.scss

@@ -412,6 +412,5 @@ $zindex-top: 3000 !default;
 
 $Form--horizontal-columns: 12;
 $Table-strip-bg: lighten(#f6f8f8, 1%) !default;
-$Toast-icon-fillHeight: true !default;
 $Number-handler-mode: 'vertical';
 $Wizard-steps-liAfterBorder: px2rem(18px) solid transparent !default;

scss/components/_toast.scss

@@ -63,18 +63,11 @@
     z-index: $zindex-toast;
   }
 
-  width: var(--Toast-width);
+  max-width: var(--Toast-width);
   pointer-events: auto;
   margin-bottom: var(--gap-xs);
 
-  @if $Toast-icon-fillHeight {
+  padding: var(--Toast-paddingY) var(--Toast-paddingX);
-    padding: var(--Toast-paddingY)
-      var(--Toast-paddingX)
-      var(--Toast-paddingY)
-      calc(var(--Toast-paddingX) + var(--Toast-paddingL));
-  } @else {
-    padding: var(--Toast-paddingY) var(--Toast-paddingX);
-  }
 
   box-shadow: var(--Toast-box-shadow);
   border-radius: var(--Toast-borderRadius);
@@ -103,7 +96,8 @@
 
   &-close {
     color: var(--Toast-close-color);
-    line-height: 1;
+    display: inline-flex;
+    margin-left: var(--gap-xs);
     opacity: 0.8;
 
     &:hover {
@@ -125,17 +119,7 @@
     -webkit-font-smoothing: antialiased;
     vertical-align: middle;
 
-    @if $Toast-icon-fillHeight {
+    margin-right: var(--gap-xs);
-      position: absolute;
-      left: var(--Toast-paddingX);
-      top: var(--Toast-paddingY);
-      width: calc(var(--Toast-paddingL) - var(--Toast-paddingX));
-      height: calc(var(--Toast-paddingL) - var(--Toast-paddingX));
-      align-items: center;
-      justify-content: center;
-    } @else {
-      margin-right: var(--gap-xs);
-    }
 
     > svg {
       top: 0;

scss/themes/_cxd-variables.scss

@@ -19,7 +19,6 @@ $danger-bg: #fff5f5;
 
 $text-color: #666;
 
-$Toast-icon-fillHeight: false;
 $Number-handler-mode: 'horizontal';
 // css 变量似乎没法用 !important，所以这里用 sass 变量
 $Wizard-steps-liAfterBorder: none !important;
@@ -408,8 +407,6 @@ $Wizard-steps-liAfterBorder: none !important;
   --Toast-paddingL: #{px2rem(26px)};
   --Toast--info-paddingL: 0;
   --Toast-border-width: #{px2rem(1px)};
-  --Toast-icon-width: #{px2rem(16px)};
-  --Toast-icon-height: #{px2rem(16px)};
   --Toast-opacity: 1;
   --Toast-title-display: inline;
 

src/components/Toast.tsx

@@ -80,7 +80,7 @@ export class ToastComponent extends React.Component<
     ToastComponentProps,
     'position' | 'closeButton' | 'timeout'
   > = {
-    position: 'top-right',
+    position: 'top-center',
     closeButton: false,
     timeout: 5000
   };
@@ -228,7 +228,7 @@ export class ToastMessage extends React.Component<
   static defaultProps = {
     timeout: 5000,
     classPrefix: '',
-    position: 'top-right',
+    position: 'top-center',
     allowHtml: true,
     level: 'info'
   };