feat(core): Dialog move close button inside dialog (#9712)

taiga-family · Nov 7, 2024 · 446e2ea · 446e2ea
2 parents f8811cf + 4cb002c
commit 446e2ea
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 35 deletions.
diff --git a/projects/core/components/dialog/dialog.component.ts b/projects/core/components/dialog/dialog.component.ts
@@ -104,6 +104,10 @@ export class TuiDialogComponent<O, I> {
             : this.animation;
     }
 
+    get mobile(): boolean {
+        return this.isMobile;
+    }
+
     get fullscreen(): boolean {
         return !this.isMobile && (this.size === 'fullscreen' || this.size === 'page');
     }

diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less
@@ -106,6 +106,7 @@
 
 .t-heading {
     margin: 0;
+    padding-inline-end: 2rem;
     word-wrap: break-word;
     font: var(--tui-font-heading-3);
 
@@ -151,33 +152,32 @@
 
 .t-close {
     .transition(background);
-    position: fixed;
-    top: 1.5rem;
-    right: 1.5rem;
+
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+
     display: none;
-    color: var(--tui-base-01);
+    color: var(--tui-neutral-fill);
 
     :host-context(.t-dialog:last-of-type) & {
         display: block;
     }
 
-    :host:not([data-size='fullscreen']):not([data-size='page']) & {
+    :host:not([data-size='page']) & {
         animation: tuiFadeIn var(--tui-duration);
-        background: rgba(104, 104, 104, 0.96);
+        background: var(--tui-neutral-bg);
 
         &:hover {
-            background: rgba(159, 159, 159, 0.86);
+            background: var(--tui-neutral-bg-hover);
         }
     }
 
-    :host:not([data-size='fullscreen']).ng-animating & {
+    :host.ng-animating & {
         display: none;
     }
 
     :host-context(tui-root._mobile) & {
-        position: absolute;
-        top: 0;
-        right: 0;
         background: transparent !important;
         color: var(--tui-text-01);
         opacity: 0.5;

diff --git a/projects/core/components/dialog/dialog.template.html b/projects/core/components/dialog/dialog.template.html
@@ -33,21 +33,17 @@
 <div class="t-filler"></div>
 
 <!-- Close button is insensitive to `context.closeable === Observable<false>` by design -->
-<div
+<button
     *ngIf="context.closeable"
-    class="t-wrapper"
->
-    <button
-        automation-id="tui-dialog__close"
-        shape="rounded"
-        size="s"
-        tuiIconButton
-        type="button"
-        class="t-close"
-        [appearance]="fullscreen ? 'secondary' : ''"
-        [icon]="icons.close"
-        [title]="closeWord$ | async"
-        (click)="close$.next()"
-        (mousedown.prevent.silent)="(0)"
-    ></button>
-</div>
+    automation-id="tui-dialog__close"
+    shape="rounded"
+    size="s"
+    tuiIconButton
+    type="button"
+    class="t-close"
+    [appearance]="mobile ? 'icon' : ''"
+    [icon]="icons.close"
+    [title]="closeWord$ | async"
+    (click)="close$.next()"
+    (mousedown.prevent.silent)="(0)"
+></button>
diff --git a/projects/demo/src/modules/components/dialog/dialog.component.ts b/projects/demo/src/modules/components/dialog/dialog.component.ts
@@ -145,7 +145,7 @@ export class ExampleTuiDialogComponent {
 
     size: TuiDialogSize = this.sizeVariants[1];
 
-    label = '';
+    label = 'Form';
 
     appearance = '';
 

diff --git a/projects/demo/src/modules/components/dialog/examples/8/index.ts b/projects/demo/src/modules/components/dialog/examples/8/index.ts
@@ -33,11 +33,13 @@ export class TuiDialogExampleComponent8 {
             },
         });
 
-        this.dialogs.open(content, {closeable, dismissible: closeable}).subscribe({
-            complete: () => {
-                this.value = '';
-                this.dialogForm.markAsPristine();
-            },
-        });
+        this.dialogs
+            .open(content, {label: 'Form', closeable, dismissible: closeable})
+            .subscribe({
+                complete: () => {
+                    this.value = '';
+                    this.dialogForm.markAsPristine();
+                },
+            });
     }
 }