fix(core): Notification remove flex layout (#9580)

taiga-family · Oct 23, 2024 · b4f4f32 · b4f4f32
1 parent 7e3e6b9
commit b4f4f32
Show file tree

Hide file tree

Showing 57 changed files with 489 additions and 579 deletions.
diff --git a/projects/addon-doc/components/main/main.style.less b/projects/addon-doc/components/main/main.style.less
@@ -47,7 +47,7 @@ code:not(pre code) {
         .transition(background);
 
         display: inline-flex;
-        background: var(--tui-background-base-alt);
+        background: var(--tui-background-neutral-1);
         color: var(--tui-text-secondary);
         vertical-align: middle;
         align-items: center;
@@ -60,14 +60,6 @@ code:not(pre code) {
         //noinspection CssInvalidPropertyValue
         text-wrap: wrap;
 
-        tui-notification & {
-            mix-blend-mode: color-burn;
-        }
-
-        [tuiTheme='dark'] tui-notification & {
-            mix-blend-mode: luminosity;
-        }
-
         a & {
             color: var(--tui-text-action);
         }

diff --git a/projects/core/components/alert/alert.style.less b/projects/core/components/alert/alert.style.less
@@ -17,3 +17,7 @@
         margin-bottom: 0 !important;
     }
 }
+
+.t-closeable {
+    padding-inline-end: 2.5rem;
+}
diff --git a/projects/core/components/alert/alert.template.html b/projects/core/components/alert/alert.template.html
@@ -1,6 +1,7 @@
 <tui-notification
     size="m"
     [appearance]="item.appearance"
+    [class.t-closeable]="item.closeable"
     [icon]="item.icon"
 >
     <span tuiTitle>

diff --git a/projects/core/styles/components/notification.less b/projects/core/styles/components/notification.less
@@ -26,38 +26,66 @@ tui-notification,
     .button-clear();
 
     position: relative;
-    display: flex;
+    display: block;
     max-block-size: 100%;
     color: var(--tui-text-primary);
-    gap: 0.5rem;
     padding: 1rem;
     font: var(--tui-font-text-m);
     line-height: 1.5rem;
     border-radius: var(--tui-radius-l);
     box-sizing: border-box;
-    overflow: hidden;
     text-align: start;
     text-decoration: none;
+    border-inline-start: var(--t-left) solid transparent;
+    border-inline-end: var(--t-right) solid transparent;
+
+    --t-left: 0;
+    --t-right: 0;
+
+    &[style*='--t-icon-start:'] {
+        --t-left: 2rem;
+    }
+
+    &[style*='--t-icon-end:'] {
+        --t-right: 1.5rem;
+    }
+
+    &::before {
+        position: absolute;
+        left: -1rem;
+    }
 
     &::after {
+        .center-top();
+
+        right: -0.5rem;
         font-size: 1rem;
         margin: 0 -0.25rem 0 auto;
-        align-self: center;
         color: var(--tui-text-tertiary) !important;
     }
 
     &[data-size='s'] {
-        gap: 0.5rem;
         padding: 0.375rem 0.625rem;
         font: var(--tui-font-text-s);
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &::before,
+        &[style*='--t-icon-start:'] {
+            --t-left: 1.5rem;
+        }
+
+        &::before {
+            top: 0.5rem;
+            left: -0.875rem;
+            font-size: 1rem;
+        }
+
+        &::after {
+            right: -0.875rem;
+        }
+
         tui-icon {
             font-size: 1rem;
-            margin-top: 0.125rem;
-            margin-bottom: 0.125rem;
         }
 
         [tuiTitle] {
@@ -75,18 +103,30 @@ tui-notification,
         }
 
         > [tuiIconButton] {
-            margin: -0.375rem -0.625rem -0.375rem auto;
+            top: 0;
+            right: 0;
         }
     }
 
     &[data-size='m'] {
-        gap: 0.375rem;
         padding: 0.75rem;
         font: var(--tui-font-text-s);
         line-height: 1.25rem;
         border-radius: var(--tui-radius-m);
 
-        &::before,
+        &[style*='--t-icon-start:'] {
+            --t-left: 1.625rem;
+        }
+
+        &::before {
+            left: -0.875rem;
+            font-size: 1.25rem;
+        }
+
+        &::after {
+            right: -0.75rem;
+        }
+
         tui-icon {
             font-size: 1.25rem;
         }
@@ -106,7 +146,8 @@ tui-notification,
         }
 
         > [tuiIconButton] {
-            margin: -0.375rem -0.25rem -0.375rem auto;
+            top: 0.375rem;
+            right: 0.5rem;
         }
     }
 
@@ -129,9 +170,11 @@ tui-notification,
     }
 
     > [tuiIconButton] {
+        position: absolute;
+        top: 0.75rem;
+        right: 0.75rem;
         box-shadow: none !important;
         background: transparent !important;
-        margin: -0.25rem -0.25rem -0.25rem auto;
     }
 }
 

diff --git a/projects/demo/src/modules/app/home/home.template.html b/projects/demo/src/modules/app/home/home.template.html
@@ -34,15 +34,13 @@ <h2>Automatic install Taiga UI (recommended)</h2>
     />
 
     <tui-notification class="tui-space_top-5">
-        <span>
-            <strong>Note:</strong>
-            If you want to add Taiga UI to a project that is not using the latest major version of Angular, make sure to
-            install the appropriate version of
-            <code>&#64;angular/cdk</code>
-            and
-            <code>&#64;angular/animations</code>
-            first to prevent dependency conflicts.
-        </span>
+        <strong>Note:</strong>
+        If you want to add Taiga UI to a project that is not using the latest major version of Angular, make sure to
+        install the appropriate version of
+        <code>&#64;angular/cdk</code>
+        and
+        <code>&#64;angular/animations</code>
+        first to prevent dependency conflicts.
     </tui-notification>
 
     <h2 class="tui-space_top-10">Manual</h2>

diff --git a/projects/demo/src/modules/app/styles-info/index.html b/projects/demo/src/modules/app/styles-info/index.html
@@ -1,9 +1,7 @@
 <tui-notification class="tui-space_bottom-3">
-    <div>
-        To use this you need to add optional
-        <code>&#64;taiga-ui/styles</code>
-        package and include
-        <code>&#64;taiga-ui/styles/taiga-ui-global.less</code>
-        in your global styles
-    </div>
+    To use this you need to add optional
+    <code>&#64;taiga-ui/styles</code>
+    package and include
+    <code>&#64;taiga-ui/styles/taiga-ui-global.less</code>
+    in your global styles
 </tui-notification>
diff --git a/projects/demo/src/modules/components/bar-chart/index.html b/projects/demo/src/modules/components/bar-chart/index.html
@@ -29,17 +29,15 @@
             [content]="2 | tuiExample"
         >
             <tui-notification class="tui-space_bottom-6">
-                <div>
-                    Use
-                    <a
-                        tuiLink
-                        [routerLink]="routes.Hint"
-                    >
-                        <code>Hint</code>
-                    </a>
-                    directive to enable hints with
-                    <code>tuiHintContent</code>
-                </div>
+                Use
+                <a
+                    tuiLink
+                    [routerLink]="routes.Hint"
+                >
+                    <code>Hint</code>
+                </a>
+                directive to enable hints with
+                <code>tuiHintContent</code>
             </tui-notification>
         </tui-doc-example>
     </ng-template>

diff --git a/projects/demo/src/modules/components/cell/examples/7/index.html b/projects/demo/src/modules/components/cell/examples/7/index.html
@@ -1,8 +1,6 @@
 <tui-notification>
-    <div>
-        Don't forget import
-        <code>TuiCardLarge</code>
-    </div>
+    Don't forget import
+    <code>TuiCardLarge</code>
 </tui-notification>
 
 <div

diff --git a/projects/demo/src/modules/components/cell/examples/8/index.html b/projects/demo/src/modules/components/cell/examples/8/index.html
@@ -1,8 +1,6 @@
 <tui-notification>
-    <div>
-        Can be attached as host directive:
-        <code>hostDirectives: [TuiConnected]</code>
-    </div>
+    Can be attached as host directive:
+    <code>hostDirectives: [TuiConnected]</code>
 </tui-notification>
 
 <div

diff --git a/projects/demo/src/modules/components/checkbox/index.html b/projects/demo/src/modules/components/checkbox/index.html
@@ -13,11 +13,9 @@
             [content]="1 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
-                <div>
-                    Use
-                    <code>--tui-background-accent-2</code>
-                    CSS variable to customize color of native control emulation
-                </div>
+                Use
+                <code>--tui-background-accent-2</code>
+                CSS variable to customize color of native control emulation
             </tui-notification>
         </tui-doc-example>
 

diff --git a/projects/demo/src/modules/components/combo-box/index.html b/projects/demo/src/modules/components/combo-box/index.html
@@ -17,13 +17,11 @@
             [content]="1 | tuiExample: 'html,ts,less'"
         >
             <tui-notification class="tui-space_bottom-4">
-                <div>
-                    If you need to set some attributes or listen to events on native
-                    <code>input</code>
-                    , you can put it inside with
-                    <code>Textfield</code>
-                    directive as shown below
-                </div>
+                If you need to set some attributes or listen to events on native
+                <code>input</code>
+                , you can put it inside with
+                <code>Textfield</code>
+                directive as shown below
             </tui-notification>
         </tui-doc-example>
 
@@ -41,13 +39,11 @@
             [content]="8 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-4">
-                <div>
-                    If you receive your id to text mapping from the server, you would need to recreate
-                    <code>items</code>
-                    and
-                    <code>stringify</code>
-                    when new data comes, so they will be observables and you would need async pipe in the template
-                </div>
+                If you receive your id to text mapping from the server, you would need to recreate
+                <code>items</code>
+                and
+                <code>stringify</code>
+                when new data comes, so they will be observables and you would need async pipe in the template
             </tui-notification>
         </tui-doc-example>
 
@@ -89,12 +85,10 @@
                 .
             </ng-template>
             <tui-notification class="tui-space_bottom-3">
-                <div>
-                    Note that virtual scroll can imperatively remove focused option from DOM. This causes
-                    ExpressionChange errors and to solve those take a look at a tiny
-                    <code>IndexChange</code>
-                    directive included in this example.
-                </div>
+                Note that virtual scroll can imperatively remove focused option from DOM. This causes ExpressionChange
+                errors and to solve those take a look at a tiny
+                <code>IndexChange</code>
+                directive included in this example.
             </tui-notification>
         </tui-doc-example>
 

diff --git a/projects/demo/src/modules/components/confirm/index.html b/projects/demo/src/modules/components/confirm/index.html
@@ -16,17 +16,15 @@
         </p>
 
         <tui-notification>
-            <div>
-                See
-                <a
-                    fragment="confirm"
-                    tuiLink
-                    [routerLink]="routes.Dialog"
-                >
-                    this example
-                </a>
-                to learn how to use confirm to prevent data loss on forms inside other modals
-            </div>
+            See
+            <a
+                fragment="confirm"
+                tuiLink
+                [routerLink]="routes.Dialog"
+            >
+                this example
+            </a>
+            to learn how to use confirm to prevent data loss on forms inside other modals
         </tui-notification>
 
         <tui-doc-example

diff --git a/projects/demo/src/modules/components/data-list/index.html b/projects/demo/src/modules/components/data-list/index.html
@@ -23,11 +23,9 @@
             [content]="2 | tuiExample: 'html,ts'"
         >
             <tui-notification class="tui-space_bottom-3">
-                <div>
-                    Use
-                    <code>TuiDataListDropdownManager</code>
-                    for nested menus
-                </div>
+                Use
+                <code>TuiDataListDropdownManager</code>
+                for nested menus
             </tui-notification>
         </tui-doc-example>
 
@@ -52,11 +50,9 @@
             [content]="5 | tuiExample"
         >
             <tui-notification class="tui-space_bottom-3">
-                <div>
-                    Use
-                    <code>TuiDataListDropdownManager</code>
-                    for nested menus
-                </div>
+                Use
+                <code>TuiDataListDropdownManager</code>
+                for nested menus
             </tui-notification>
         </tui-doc-example>