feat(notification): unify groups rendering

Important changes: - remove `k-notification-container` class and related styles
telerik · Dec 11, 2023 · 5749af0 · 5749af0
1 parent e8eb822
commit 5749af0
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 21 deletions.
diff --git a/packages/bootstrap/scss/notification/_variables.scss b/packages/bootstrap/scss/notification/_variables.scss
@@ -1,5 +1,9 @@
 // Notification
 
+/// The row-gap between the elements in the Notification group.
+/// @group notification
+$kendo-notification-group-gap: k-map-get( $kendo-spacing, 3 ) !default;
+
 /// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: $alert-padding-x !default;

diff --git a/packages/classic/scss/notification/_variables.scss b/packages/classic/scss/notification/_variables.scss
@@ -1,5 +1,10 @@
 // Notification
 
+
+/// The row-gap between the elements in the Notification group.
+/// @group notification
+$kendo-notification-group-gap: k-map-get( $kendo-spacing, 2 ) !default;
+
 /// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: 8px !default;

diff --git a/packages/default/scss/notification/_layout.scss b/packages/default/scss/notification/_layout.scss
@@ -7,17 +7,12 @@
         flex-flow: column-reverse wrap;
         position: fixed;
         z-index: 1000;
+        gap: $kendo-notification-group-gap 0;
     }
 
-    .k-notification-container {
-        margin-block: k-math-div( $kendo-notification-padding-y, 2 );
-        margin-inline: 0;
-        display: inline-flex;
-        vertical-align: top;
-
-        &-animating {
-            overflow: hidden;
-        }
+    // Needed due to the specifics in the implementation of animations in Angular
+    .k-notification-container-animating {
+        overflow: hidden;
     }
 
     .k-notification {

diff --git a/packages/default/scss/notification/_variables.scss b/packages/default/scss/notification/_variables.scss
@@ -1,5 +1,9 @@
 // Notification
 
+/// The row-gap between the elements in the Notification group.
+/// @group notification
+$kendo-notification-group-gap: k-map-get( $kendo-spacing, 2 ) !default;
+
 /// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: 8px !default;

diff --git a/packages/fluent/scss/notification/_layout.scss b/packages/fluent/scss/notification/_layout.scss
@@ -10,17 +10,12 @@
         flex-flow: column-reverse wrap;
         position: fixed;
         z-index: 1000;
+        gap: var( --kendo-notificaiton-group-gap, #{$kendo-notification-group-gap} ) 0;
     }
 
-    .k-notification-container {
-        margin-block: var( --kendo-notification-container-padding-y, #{$kendo-notification-container-padding-y} );
-        margin-inline: 0;
-        display: inline-flex;
-        vertical-align: top;
-
-        &-animating {
-            overflow: hidden;
-        }
+    // Needed due to the specifics in the implementation of animations in Angular
+    .k-notification-container-animating {
+        overflow: hidden;
     }
 
     .k-notification {

diff --git a/packages/fluent/scss/notification/_variables.scss b/packages/fluent/scss/notification/_variables.scss
@@ -1,9 +1,9 @@
 @use "sass:map";
 @use "../core/" as *;
 
-/// The vertical padding of the Notification container.
+/// The row-gap between the elements in the Notification group.
 /// @group notification
-$kendo-notification-container-padding-y: $kendo-padding-sm-y !default;
+$kendo-notification-group-gap: map.get( $kendo-spacing, 2 ) !default;
 
 /// The horizontal padding of the Notification.
 /// @group notification

diff --git a/packages/material/scss/notification/_variables.scss b/packages/material/scss/notification/_variables.scss
@@ -1,5 +1,9 @@
 // Notification
 
+/// The row-gap between the elements in the Notification group.
+/// @group notification
+$kendo-notification-group-gap: k-map-get( $kendo-spacing, 2 ) !default;
+
 /// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: 16px !default;
@@ -38,7 +42,6 @@ $kendo-notification-shadow: $kendo-popup-shadow !default;
 /// @group notification
 $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
-
 @function notification-theme( $colors ) {
     $_theme: ();