Common notification styles for animation and positioning

[KristianMariyanov]

Is your feature request related to a problem? Please describe. At this point, there are no common styles for animations and positioning of the notification component. All of the consumers of the kendo-themes should deal with this problem by themself.

Describe the solution you would like to see implemented I think it will be a good addition if we implement common styles for these features.

Additional context Here are some examples: In React- Animations are done with the animation container. The positions are done using inline flex styles: https://www.telerik.com/kendo-react-ui/components/notification/positioning/

In Angular - Animations aren't using Animation container. The positions are done other type of inline styles: https://www.telerik.com/kendo-angular-ui/components/notification/

[elena-gancheva]

@KristianMariyanov the Notification component for Angular is using js animations through Angular Animations module which stays on top of the Web Animations API (not styles from the themes). This allows us to expose flexible, customisable calculating animations (for example: duration, easing functions, directions, etc.). For more complex animations, this is the preferred Angular way of making things happen and allows us to calculate the stacking of the notifications on the screen/dismissing a notification and repositioning the visible ones on the screen. Keeping this technical details in mind, I am not sure which common styles should be added to the themes? Do you have any suggestions?

[KristianMariyanov]

@elena-gancheva My suggestion is to analyze the component styles and rendering in the different suites and unify as much as possible. I saw a difference in these two features and I mention them, but I believe you have more context to decide if they are applicable for change.

Here are a bit more concrete thoughts about positioning. Using Kendo React approach it's possible to have a single class which is responsible for the position styles of the notification component. Currently, we have a lot of inline styles which are changed for each different position. And these styles are different in Angular and React for example.

Using the react notification approach, you can have these classes:

.k-notification-position-top-left {
 align-items: flex-start; 
 flex-wrap: wrap; 
 top: 0px; 
 left: 0px;
}

.k-notification-position-bottom-left {
 align-items: flex-start; 
 flex-wrap: wrap; 
 bottom: 0px; 
 left: 0px;
}

Also, this issue was logged after a discussion with @joneff and agreement that the change in this direction is desired. Maybe he has some additional thoughts.