新设计主分支

.storybook/global.scss

@@ -1,5 +1,4 @@
 @import '../src/theme/style';
-@import '../src/theme/colors';
 
 storybook-dynamic-app-root {
   &:first-child,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alauda/ui",
-  "version": "5.7.3",
+  "version": "6.0.0",
   "description": "Angular UI components by Alauda Frontend Team.",
   "repository": "git+https://github.com/alauda/alauda-ui.git",
   "author": "Alauda Frontend",

src/inline-alert/inline-alert.component.html

@@ -1,7 +1,9 @@
-<div *ngIf="visible" [class]="bem.block(type)">
-  <div class="aui-inline-alert__icon">
-    <aui-icon [icon]="iconKey"></aui-icon>
-  </div>
+<div
+  *ngIf="visible"
+  [class]="bem.block(type)"
+  [class.hasTitle]="title || titleRef"
+>
+  <aui-icon class="aui-inline-alert__icon" [icon]="iconMap(type)"></aui-icon>
   <div class="aui-inline-alert__body">
     <div class="aui-inline-alert__title" *ngIf="title || titleRef">
       <ng-container *ngIf="title">{{ title }}</ng-container>
@@ -12,7 +14,10 @@
       <ng-content></ng-content>
     </div>
   </div>
-  <div class="aui-inline-alert__close" *ngIf="closable" (click)="closeSelf()">
-    <aui-icon icon="close"></aui-icon>
-  </div>
+  <aui-icon
+    *ngIf="closable"
+    class="aui-inline-alert__close"
+    icon="close"
+    (click)="closeSelf()"
+  ></aui-icon>
 </div>

src/inline-alert/inline-alert.component.scss

@@ -1,66 +1,87 @@
 @import '../theme/var';
 @import '../theme/mixin';
 
-.aui-inline-alert {
-  display: flex;
-  padding: $inline-alert-padding;
-  margin-bottom: $inline-alert-vertical-margin;
-  border-radius: $inline-alert-border-radius;
-  border: $inline-alert-border-width $inline-alert-border-style
-    $inline-alert-primary-color;
-  color: $color-text-main;
-  background-color: $color-white;
-
-  @each $status, $color in $status-color-map {
-    &--#{$status} {
-      border-color: $color;
-    }
+$padding-h: 16px - 1px;
+$padding-v: 12px - 1px;
+
+@mixin color-of-types() {
+  $types: (
+    primary: primary,
+    success: success,
+    warning: warning,
+    danger: danger,
+    error: danger,
+    info: primary,
+  );
 
-    &--#{$status} &__icon {
-      color: $color;
+  @each $name, $value in $types {
+    &--#{$name} {
+      background-color: get-color($value, 7);
+      border-color: get-color($value);
+    }
+    &--#{$name} &__icon {
+      color: get-color($value);
     }
   }
+}
+
+.aui-inline-alert {
+  display: flex;
+  margin: 0 0 get-size(spacing, xl);
+  padding: $padding-v $padding-h;
+  border-radius: get-size(border-radius);
+  border-width: 1px;
+  border-style: solid;
+
+  @include color-of-types;
 
   &__icon {
     display: flex;
+    margin: 0 8px 0 0;
     align-items: center;
-    height: $inline-alert-title-line-height;
-    font-size: $font-size-large;
+    height: get-size(line-height, m);
+    font-size: get-size(font-size, l);
   }
-  &__close {
-    display: flex;
-    align-items: center;
-    height: $inline-alert-title-line-height;
-    font-size: $font-size-small;
-    color: $inline-alert-close-color;
-    cursor: pointer;
-    &:hover {
-      color: $inline-alert-close-color-hover;
-    }
+
+  &.hasTitle &__icon {
+    height: get-size(line-height, xl);
   }
 
   &__body {
-    max-width: 100%;
-    flex-grow: 1;
-    flex-shrink: 1;
+    flex: 1;
+    width: 100%;
     overflow: hidden;
-    padding: 0 8px;
+  }
+
+  &__close {
+    display: block;
+    margin: 4px 0 0 $padding-h;
+    height: 1em;
+    line-height: 1em;
+    font-size: get-size(font-size, s);
+    color: get-color(neutral, 4);
+    cursor: pointer;
+
+    &:hover {
+      color: get-color(neutral, 2);
+    }
   }
 
   &__title {
-    font-size: $inline-alert-title-font-size;
-    line-height: $inline-alert-title-line-height;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include text-size(xl);
+    @include text-overflow;
+
+    color: get-color(text, main);
   }
 
   &__content {
-    margin-top: (
-        $inline-alert-title-line-height - $inline-alert-content-line-height
-      ) / 2;
-    font-size: $inline-alert-content-font-size;
-    line-height: $inline-alert-content-line-height;
+    @include text-size(m);
+
+    color: get-color(text, main);
+  }
+
+  &.hasTitle &__content {
+    color: get-color(text, secondary);
   }
 
   &__title + &__content {

src/inline-alert/inline-alert.component.ts

@@ -11,7 +11,6 @@ import {
 import { Bem, buildBem } from '../utils';
 
 import { InlineAlertTitleDirective } from './helper-directives';
-import { iconMap } from './icon-map';
 import { InlineAlertType } from './inline-alert.types';
 
 @Component({
@@ -40,13 +39,25 @@ export class InlineAlertComponent {
   @Output()
   close = new EventEmitter<void>();
 
-  @ContentChild(InlineAlertTitleDirective, { static: true })
+  @ContentChild(InlineAlertTitleDirective)
   titleRef: InlineAlertTitleDirective;
 
   visible = true;
 
-  get iconKey() {
-    return iconMap[this.type || InlineAlertType.Info];
+  iconMap(type: InlineAlertType) {
+    switch (type) {
+      case InlineAlertType.Success:
+        return 'check_circle_s';
+      case InlineAlertType.Warning:
+        return 'exclamation_circle_s';
+      case InlineAlertType.Danger:
+      case InlineAlertType.Error:
+        return 'exclamation_triangle_s';
+      case InlineAlertType.Primary:
+      case InlineAlertType.Info:
+      default:
+        return 'info_circle_s';
+    }
   }
 
   closeSelf() {

src/inline-alert/inline-alert.types.ts

@@ -1,12 +1,10 @@
 import { ValueOf } from '../types';
 
 export const InlineAlertType = {
-  /**
-   * @deprecated use `InlineAlertType.Info` instead
-   */
-  Primary: 'info',
+  Primary: 'primary',
   Success: 'success',
   Warning: 'warning',
+  Danger: 'danger',
   Error: 'error',
   Info: 'info',
 } as const;