feat(layout): AppBar add auto size directive (#9119)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Sep 23, 2024 · d5628e7 · d5628e7
1 parent 7c2872c
commit d5628e7
Show file tree

Hide file tree

Showing 66 changed files with 257 additions and 262 deletions.
diff --git a/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts b/projects/addon-mobile/directives/elastic-sticky/elastic-sticky.service.ts
@@ -1,26 +1,16 @@
-import {
-    afterNextRender,
-    ChangeDetectorRef,
-    DestroyRef,
-    inject,
-    Injectable,
-    INJECTOR,
-    NgZone,
-} from '@angular/core';
+import {afterNextRender, DestroyRef, inject, Injectable, INJECTOR} from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
-import {tuiScrollFrom, tuiZonefree} from '@taiga-ui/cdk/observables';
+import {tuiScrollFrom} from '@taiga-ui/cdk/observables';
 import {tuiGetElementOffset, tuiInjectElement} from '@taiga-ui/cdk/utils/dom';
 import {SCROLL_REF_SELECTOR} from '@taiga-ui/core/components/scrollbar';
 import {TUI_SCROLL_REF} from '@taiga-ui/core/tokens';
-import {map, Observable, Subscription, tap} from 'rxjs';
+import {map, Observable, Subscription} from 'rxjs';
 
 @Injectable()
 export class TuiElasticStickyService extends Observable<number> {
     private readonly injector = inject(INJECTOR);
     private readonly el = tuiInjectElement();
     private readonly scrollRef = inject(TUI_SCROLL_REF).nativeElement;
-    private readonly zone = inject(NgZone);
-    private readonly cd = inject(ChangeDetectorRef);
     private readonly destroyRef = inject(DestroyRef);
 
     constructor() {
@@ -34,7 +24,6 @@ export class TuiElasticStickyService extends Observable<number> {
                     const {offsetHeight} = this.el;
                     const teardown = tuiScrollFrom(host)
                         .pipe(
-                            tuiZonefree(this.zone),
                             map(() =>
                                 Math.max(
                                     1 -
@@ -46,7 +35,6 @@ export class TuiElasticStickyService extends Observable<number> {
                                     0,
                                 ),
                             ),
-                            tap(() => this.cd.detectChanges()),
                             takeUntilDestroyed(this.destroyRef),
                         )
                         .subscribe(subscriber);

diff --git a/projects/core/components/dialog/dialog.component.ts b/projects/core/components/dialog/dialog.component.ts
@@ -1,21 +1,23 @@
-import type {AnimationOptions} from '@angular/animations';
 import {AsyncPipe, NgIf} from '@angular/common';
-import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
-import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
+import {ChangeDetectionStrategy, Component, computed, inject} from '@angular/core';
+import {takeUntilDestroyed, toSignal} from '@angular/core/rxjs-interop';
 import {TUI_TRUE_HANDLER} from '@taiga-ui/cdk/constants';
 import {TuiAutoFocus} from '@taiga-ui/cdk/directives/auto-focus';
 import type {TuiPopover} from '@taiga-ui/cdk/services';
-import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens';
 import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations';
 import {TuiButton} from '@taiga-ui/core/components/button';
+import {TuiBreakpointService} from '@taiga-ui/core/services';
 import {
     TUI_ANIMATIONS_SPEED,
     TUI_CLOSE_WORD,
     TUI_COMMON_ICONS,
 } from '@taiga-ui/core/tokens';
 import {tuiGetDuration} from '@taiga-ui/core/utils';
-import {injectContext, type PolymorpheusContent} from '@taiga-ui/polymorpheus';
-import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
+import {
+    injectContext,
+    type PolymorpheusContent,
+    PolymorpheusOutlet,
+} from '@taiga-ui/polymorpheus';
 import type {Observable} from 'rxjs';
 import {filter, isObservable, map, merge, of, Subject, switchMap} from 'rxjs';
 
@@ -41,16 +43,15 @@ function toObservable<T>(valueOrStream: Observable<T> | T): Observable<T> {
     providers: [TuiDialogCloseService],
     animations: [tuiSlideInTop, tuiFadeIn],
     host: {
-        '[@tuiSlideInTop]': 'slideInTop',
-        '[@tuiFadeIn]': 'slideInTop',
+        '[@tuiSlideInTop]': 'slideInTop()',
+        '[@tuiFadeIn]': 'slideInTop()',
         '[attr.data-appearance]': 'context.appearance',
         '[attr.data-size]': 'size',
         '[class._centered]': 'header',
     },
 })
 export class TuiDialogComponent<O, I> {
     private readonly speed = inject(TUI_ANIMATIONS_SPEED);
-    private readonly isMobile = inject(TUI_IS_MOBILE);
 
     private readonly animation = {
         value: '',
@@ -69,11 +70,18 @@ export class TuiDialogComponent<O, I> {
     } as const;
 
     protected readonly close$ = new Subject<void>();
-
     protected readonly context = injectContext<TuiPopover<TuiDialogOptions<I>, O>>();
-
     protected readonly closeWord$ = inject(TUI_CLOSE_WORD);
     protected readonly icons = inject(TUI_COMMON_ICONS);
+    protected readonly slideInTop = computed(() =>
+        this.size === 'fullscreen' || this.size === 'page' || this.isMobile()
+            ? this.fullscreenAnimation
+            : this.animation,
+    );
+
+    protected readonly isMobile = toSignal(
+        inject(TuiBreakpointService).pipe(map((breakpoint) => breakpoint === 'mobile')),
+    );
 
     constructor() {
         merge(
@@ -97,16 +105,6 @@ export class TuiDialogComponent<O, I> {
         return this.context.header;
     }
 
-    protected get slideInTop(): AnimationOptions {
-        return this.fullscreen || this.isMobile
-            ? this.fullscreenAnimation
-            : this.animation;
-    }
-
-    protected get fullscreen(): boolean {
-        return !this.isMobile && (this.size === 'fullscreen' || this.size === 'page');
-    }
-
     private close(): void {
         if (this.context.required) {
             this.context.$implicit.error(REQUIRED_ERROR);

diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less
@@ -7,7 +7,7 @@
     flex-direction: column;
     box-sizing: border-box;
     margin: auto;
-    border-radius: 1rem;
+    border-radius: 1.5rem;
     border: 2.5rem solid transparent;
 
     &::after {
@@ -31,26 +31,16 @@
         }
 
         .t-heading {
-            margin-bottom: 0.5rem;
             font: var(--tui-font-heading-5);
         }
     }
 
     &[data-size='m'] {
         inline-size: 42.5rem;
-
-        .t-heading {
-            margin-bottom: 0.75rem;
-            font: var(--tui-font-heading-4);
-        }
     }
 
     &[data-size='l'] {
         inline-size: 55rem;
-
-        .t-heading {
-            margin-bottom: 1rem;
-        }
     }
 
     &[data-size='fullscreen'],
@@ -70,7 +60,7 @@
         }
 
         .t-heading {
-            margin-bottom: 1rem;
+            font: var(--tui-font-heading-3);
         }
     }
 
@@ -88,11 +78,10 @@
             margin: auto 0 0;
 
             .t-content {
-                padding: 1.5rem;
+                padding: 1rem;
             }
 
             .t-heading {
-                margin-bottom: 0.5rem;
                 font: var(--tui-font-heading-5);
             }
         }
@@ -107,9 +96,9 @@
 }
 
 .t-heading {
-    margin: 0;
+    margin: 0 0 0.5rem;
     word-wrap: break-word;
-    font: var(--tui-font-heading-3);
+    font: var(--tui-font-heading-4);
 
     &:empty {
         display: none;
@@ -131,7 +120,7 @@
 
 .t-content {
     border-radius: inherit;
-    padding: 2rem;
+    padding: 1.75rem;
     background: var(--tui-background-elevation-1);
 
     &:not(:first-child) {
@@ -154,41 +143,9 @@
 .t-close {
     .transition(background);
 
-    position: fixed;
-    top: 1.5rem;
-    right: 1.5rem;
-    display: none;
-
-    :host-context(.t-dialog:last-of-type) & {
-        display: inline-flex;
-    }
-
-    :host:not([data-size='fullscreen']):not([data-size='page']) & {
-        animation: tuiFadeIn var(--tui-duration);
-        background: rgba(104, 104, 104, 0.96);
-        color: var(--tui-background-base);
-
-        &:hover {
-            background: rgba(159, 159, 159, 0.86);
-        }
-    }
-
-    :host:not([data-size='fullscreen']).ng-animating & {
-        display: none;
-    }
-
-    :host-context(tui-root._mobile) & {
-        &[data-size] {
-            --tui-fade-end: 0.5;
-
-            position: absolute;
-            top: 0;
-            right: 0;
-            background: transparent !important;
-            color: var(--tui-text-primary);
-            opacity: 0.5;
-        }
-    }
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
 }
 
 .t-buttons {

diff --git a/projects/core/components/dialog/dialog.template.html b/projects/core/components/dialog/dialog.template.html
@@ -38,12 +38,12 @@
 >
     <button
         automation-id="tui-dialog__close"
-        size="s"
         tuiIconButton
         type="button"
         class="t-close"
-        [appearance]="fullscreen ? 'secondary' : ''"
+        [appearance]="isMobile() ? 'icon' : 'neutral'"
         [iconStart]="icons.close"
+        [size]="isMobile() ? 'xs' : 's'"
         [style.border-radius.%]="100"
         (click)="close$.next()"
         (mousedown.prevent.silent)="(0)"

diff --git a/projects/demo/src/modules/app/home/home.component.ts b/projects/demo/src/modules/app/home/home.component.ts
@@ -3,12 +3,11 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiDemo} from '@demo/utils';
 import {TuiAccordion, TuiTabs} from '@taiga-ui/kit';
-import {TuiAsideItemDirective} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
     selector: 'demo-home',
-    imports: [TuiAccordion, TuiAsideItemDirective, TuiDemo, TuiTabs],
+    imports: [TuiAccordion, TuiDemo, TuiTabs],
     templateUrl: './home.template.html',
     styleUrls: ['./home.style.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.ts b/projects/demo/src/modules/components/action-bar/examples/1/index.ts
@@ -12,7 +12,6 @@ import {
     TuiLink,
 } from '@taiga-ui/core';
 import {TuiActionBar, TuiFilter} from '@taiga-ui/kit';
-import {TuiAsideItemDirective} from '@taiga-ui/layout';
 import {map} from 'rxjs';
 
 @Component({
@@ -21,7 +20,6 @@ import {map} from 'rxjs';
         NgIf,
         ReactiveFormsModule,
         TuiActionBar,
-        TuiAsideItemDirective,
         TuiButton,
         TuiDataList,
         TuiFilter,

diff --git a/projects/demo/src/modules/components/alert/examples/6/index.ts b/projects/demo/src/modules/components/alert/examples/6/index.ts
@@ -2,12 +2,11 @@ import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiAlert, TuiButton} from '@taiga-ui/core';
-import {TuiAsideItemDirective} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
     selector: 'tui-alerts-example-6',
-    imports: [TuiAlert, TuiAsideItemDirective, TuiButton],
+    imports: [TuiAlert, TuiButton],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,

diff --git a/projects/demo/src/modules/components/app-bar/examples/1/index.ts b/projects/demo/src/modules/components/app-bar/examples/1/index.ts
@@ -3,11 +3,11 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiPlatform} from '@taiga-ui/cdk';
 import {TuiButton, TuiTitle} from '@taiga-ui/core';
-import {TuiAppBar, TuiAsideItemDirective} from '@taiga-ui/layout';
+import {TuiAppBar} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
-    imports: [TuiAppBar, TuiAsideItemDirective, TuiButton, TuiPlatform, TuiTitle],
+    imports: [TuiAppBar, TuiButton, TuiPlatform, TuiTitle],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,

diff --git a/projects/demo/src/modules/components/app-bar/examples/3/index.html b/projects/demo/src/modules/components/app-bar/examples/3/index.html
@@ -3,7 +3,6 @@ <h3>Customization</h3>
     <progress
         size="s"
         tuiProgressBar
-        class="bar"
         [max]="100"
         [value]="35"
     ></progress>

diff --git a/projects/demo/src/modules/components/app-bar/examples/3/index.less b/projects/demo/src/modules/components/app-bar/examples/3/index.less
@@ -6,10 +6,6 @@ tui-app-bar {
     margin-bottom: 1rem;
 }
 
-.bar {
-    inline-size: 8.75rem;
-}
-
 .gray {
     box-shadow: none;
     background: var(--tui-background-base-alt);

diff --git a/projects/demo/src/modules/components/app-bar/examples/3/index.ts b/projects/demo/src/modules/components/app-bar/examples/3/index.ts
@@ -4,19 +4,11 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiPlatform} from '@taiga-ui/cdk';
 import {TuiButton, TuiTitle} from '@taiga-ui/core';
 import {TuiFade, TuiProgress} from '@taiga-ui/kit';
-import {TuiAppBar, TuiAsideItemDirective} from '@taiga-ui/layout';
+import {TuiAppBar} from '@taiga-ui/layout';
 
 @Component({
     standalone: true,
-    imports: [
-        TuiAppBar,
-        TuiAsideItemDirective,
-        TuiButton,
-        TuiFade,
-        TuiPlatform,
-        TuiProgress,
-        TuiTitle,
-    ],
+    imports: [TuiAppBar, TuiButton, TuiFade, TuiPlatform, TuiProgress, TuiTitle],
     templateUrl: './index.html',
     styleUrls: ['./index.less'],
     encapsulation,