feat(core): add right icon into notification

taiga-family · Feb 7, 2024 · 9162566 · 9162566
1 parent ff86243
commit 9162566
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 32 deletions.
diff --git a/projects/core/components/notification/notification.component.ts b/projects/core/components/notification/notification.component.ts
@@ -16,10 +16,12 @@ import {
     TuiNotificationDefaultOptions,
 } from '@taiga-ui/core/tokens';
 import {TuiNotificationT} from '@taiga-ui/core/types';
+import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 import {Observable} from 'rxjs';
 
 @Component({
-    selector: 'tui-notification',
+    selector:
+        'tui-notification,[tuiNotification],[tuiNotification][tuiNotificationChevron]',
     templateUrl: './notification.template.html',
     styleUrls: ['./notification.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -31,6 +33,9 @@ export class TuiNotificationComponent {
     @Input()
     hasIcon = this.options.hasIcon;
 
+    /**
+     * @deprecated use {@link TuiNotificationComponent.leftIcon}
+     */
     @Input()
     icon = this.options.icon;
 
@@ -45,6 +50,12 @@ export class TuiNotificationComponent {
     @Input()
     hideClose = false;
 
+    @Input()
+    leftIcon = this.icon;
+
+    @Input()
+    rightIcon: PolymorpheusContent = '';
+
     @Output()
     // eslint-disable-next-line @angular-eslint/no-output-native
     readonly close = new EventEmitter<void>();

diff --git a/projects/core/components/notification/notification.style.less b/projects/core/components/notification/notification.style.less
@@ -11,6 +11,11 @@
     box-sizing: border-box;
     overflow: hidden;
 
+    &button {
+        border: none;
+        cursor: pointer;
+    }
+
     &[data-size='s'] {
         padding: 0.375rem 0.625rem;
 
@@ -26,7 +31,8 @@
     }
 
     &[data-size='m'] {
-        padding: 0.75rem;
+        padding: 0.75rem 1rem;
+        border-radius: 0.75rem;
 
         .t-icon {
             width: 1.25rem;
@@ -42,7 +48,7 @@
     &[data-size='l'] {
         padding: 1rem;
         font: var(--tui-font-text-m);
-        border-radius: var(--tui-radius-l);
+        border-radius: 1rem;
 
         .t-icon {
             width: 1.5rem;
@@ -75,10 +81,27 @@
         color: var(--tui-neutral-fill);
         background: linear-gradient(var(--tui-neutral-bg), var(--tui-neutral-bg)), var(--tui-base-01);
     }
+
+    &[tuiNotificationChevron] {
+        &::ng-deep .t-content + tui-icon {
+            margin-right: -0.375rem;
+        }
+    }
 }
 
 .t-content {
     flex: 1;
     word-break: break-word;
     color: var(--tui-text-01);
+    text-align: left;
+
+    &::ng-deep + tui-icon {
+        display: flex;
+        align-self: center;
+        width: 1rem;
+        height: 1rem;
+        margin-left: 0.75rem;
+        color: var(--tui-text-01);
+        opacity: 0.5;
+    }
 }
diff --git a/projects/core/components/notification/notification.template.html b/projects/core/components/notification/notification.template.html
@@ -11,7 +11,7 @@
     <ng-content></ng-content>
 </div>
 <button
-    *ngIf="hasClose"
+    *ngIf="hasClose; else rightIconTpl"
     appearance="icon"
     automation-id="tui-notification__close"
     size="xs"
@@ -22,3 +22,8 @@
     [title]="closeWord$ | async"
     (click)="close.emit()"
 ></button>
+<ng-template #rightIconTpl>
+    <ng-container *polymorpheusOutlet="rightIcon as text">
+        {{ text }}
+    </ng-container>
+</ng-template>
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.html b/projects/demo/src/modules/components/notification/examples/1/index.html
@@ -1,26 +1,49 @@
-<tui-notification>
-    A short simple
-    <code>informative</code>
-    message
-</tui-notification>
-<tui-notification
-    status="success"
-    class="tui-space_vertical-4"
->
-    A short simple
-    <code>informative</code>
-    message
-</tui-notification>
-<tui-notification
-    status="error"
-    class="tui-space_vertical-4"
->
-    A short simple
-    <code>informative</code>
-    message
-</tui-notification>
-<tui-notification status="warning">
-    A short simple
-    <code>informative</code>
-    message
-</tui-notification>
+<ng-container *ngFor="let status of statuses; let last = last">
+    <tui-notification
+        *ngFor="let size of sizes"
+        [size]="size"
+        [status]="status"
+    >
+        {{ status | titlecase }} label ({{ size | uppercase }})
+    </tui-notification>
+
+    <hr />
+
+    <button
+        *ngFor="let size of sizes"
+        tuiNotification
+        [rightIcon]="help"
+        [size]="size"
+        [status]="status"
+    >
+        {{ status | titlecase }} label ({{ size | uppercase }})
+        <ng-template #help>
+            <tui-icon
+                icon="tuiIconHelpCircle"
+                tuiHintAppearance="onDark"
+                tuiHintDirection="right"
+                [tuiHint]="tooltip"
+            ></tui-icon>
+            <ng-template #tooltip>Hello world</ng-template>
+        </ng-template>
+    </button>
+
+    <hr />
+
+    <a
+        *ngFor="let size of sizes"
+        size="l"
+        tuiNotification
+        tuiNotificationChevron
+        [rightIcon]="chevron"
+        [size]="size"
+        [status]="status"
+    >
+        {{ status | titlecase }} label ({{ size | uppercase }})
+        <ng-template #chevron>
+            <tui-icon icon="tuiIconChevronRightLarge"></tui-icon>
+        </ng-template>
+    </a>
+
+    <hr *ngIf="!last" />
+</ng-container>
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.less b/projects/demo/src/modules/components/notification/examples/1/index.less
@@ -0,0 +1,5 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
diff --git a/projects/demo/src/modules/components/notification/examples/1/index.ts b/projects/demo/src/modules/components/notification/examples/1/index.ts
@@ -5,7 +5,11 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 @Component({
     selector: 'tui-notification-example-1',
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
-export class TuiNotificationExample1 {}
+export class TuiNotificationExample1 {
+    readonly statuses = ['neutral', 'info', 'success', 'warning', 'error'] as const;
+    readonly sizes = ['s', 'm', 'l'] as const;
+}
diff --git a/projects/demo/src/modules/components/notification/notification.module.ts b/projects/demo/src/modules/components/notification/notification.module.ts
@@ -4,11 +4,12 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {
-    TuiButtonModule,
+    TuiHintModule,
     TuiLinkModule,
     TuiModeModule,
     TuiNotificationModule,
 } from '@taiga-ui/core';
+import {TuiButtonModule, TuiIconModule} from '@taiga-ui/experimental';
 
 import {TuiNotificationExample1} from './examples/1';
 import {TuiNotificationExample2} from './examples/2';
@@ -26,6 +27,8 @@ import {ExampleTuiNotificationComponent} from './notification.component';
         ReactiveFormsModule,
         TuiAddonDocModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiNotificationComponent)),
+        TuiIconModule,
+        TuiHintModule,
     ],
     declarations: [
         ExampleTuiNotificationComponent,