fix(notification): leave animation if content height overflows screen

CHANGELOG.en-US.md

@@ -10,12 +10,14 @@
 - Fix `n-cascader`'s filter menu doesn't show option path, closes [#3220](https://github.com/TuSimple/naive-ui/issues/3220).
 - Fix `n-cascader`'s `filter` prop may not get correct `path`.
 - Fix `n-date-picker` menu's quarter text isn't same having `type="quarterrange"` and `type="quarter"`, closes [#3217](https://github.com/TuSimple/naive-ui/issues/3217).
+- Fix `n-notification`'s leave animation if content height overflows screen.
 
 ### Feats
 
 - `n-avatar` adds `lazy` prop.
 - `n-avatar` adds `intersection-observer-options` prop.
 - `n-number-animation` adds `on-finish` prop.
+- `n-notification` supports RTL.
 
 ## 2.30.8
 

CHANGELOG.zh-CN.md

@@ -10,12 +10,14 @@
 - 修复 `n-cascader` 的搜索菜单没有显示节点路径，关闭 [#3220](https://github.com/TuSimple/naive-ui/issues/3220)
 - 修复 `n-cascader` 的 `filter` 属性接收到的 `path` 可能有误
 - 修复 `n-date-picker` 在 `type="quarterrange"` 和 `type="quarter"` 时菜单季度文案不一致，关闭 [#3217](https://github.com/TuSimple/naive-ui/issues/3217)
+- 修复 `n-notification` 在内容高度超过屏幕后的关闭动画
 
 ### Feats
 
 - `n-avatar` 新增 `lazy` 属性
 - `n-avatar` 新增 `intersection-observer-options` 属性
 - `n-number-animation` 新增 `on-finish` 属性
+- `n-notification` 支持 RTL
 
 ## 2.30.8
 

src/_internal/scrollbar/src/styles/index.cssr.ts

@@ -30,6 +30,7 @@ export default cB('scrollbar', `
       `),
       c('>', [
         cB('scrollbar-content', `
+          overflow: hidden;
           box-sizing: border-box;
           min-width: 100%;
         `)

src/avatar/src/Avatar.tsx

@@ -252,6 +252,7 @@ export default defineComponent({
     } = this
     onRender?.()
     let img: VNodeChild
+    const placeholderNode = this.$slots.placeholder?.()
     if (this.hasLoadError) {
       img = <img src={this.fallbackSrc} style={{ objectFit: this.objectFit }} />
     } else {
@@ -290,7 +291,6 @@ export default defineComponent({
         }
       })
     }
-    const placeholderNode = this.$slots.placeholder?.()
     return (
       <span
         ref="selfRef"

src/notification/src/Notification.tsx

@@ -14,11 +14,11 @@ import {
   WarningIcon,
   ErrorIcon
 } from '../../_internal/icons'
+import useRtl from '../../_mixins/use-rtl'
 import { createKey, keysOf, render } from '../../_utils'
 import { NBaseIcon, NBaseClose } from '../../_internal'
-import { notificationProviderInjectionKey } from './context'
 import { useConfig, useThemeClass } from '../../_mixins'
-import useRtl from '../../_mixins/use-rtl'
+import { notificationProviderInjectionKey } from './context'
 
 const iconRenderMap = {
   info: () => <InfoIcon />,

src/notification/src/styles/index.cssr.ts

@@ -263,9 +263,7 @@ export default c([
         align-items: center;
         justify-content: center;
       `, [
-        cB('icon', {
-          transition: 'color .3s var(--n-bezier)'
-        })
+        cB('icon', 'transition: color .3s var(--n-bezier);')
       ]),
       cB('notification-main', `
         padding-top: var(--n-padding-top);

src/notification/src/styles/rtl.cssr.ts

@@ -4,37 +4,36 @@ export default cB('notification', [
   cM('rtl', `
     direction: rtl;
   `, [
-    cB('notification-main', {
-      marginLeft: 'unset',
-      marginRight: '8px'
-    }, [
-      cE('header', {
-        margin: 'var(--n-icon-margin)',
-        marginRight: 0
-      })
+    cB('notification-main', `
+      margin-left: unset;
+      margin-right: 8px;
+    `, [
+      cE('header', `
+        margin: var(--n-icon-margin);
+        margin-right: 0;
+      `)
     ]),
-    cE('avatar', {
-      left: 'unset',
-      right: 'var(--n-padding-left)'
-    }),
+    cE('avatar', `
+      left: unset;
+      right: var(--n-padding-left);
+    `),
     cM('show-avatar', [
-      cB('notification-main', {
-        marginRight: '40px',
-        marginLeft: 'unset'
-      }
-      )
+      cB('notification-main', `
+        margin-right: 40px;
+        margin-reft: unset;
+      `)
     ]),
     cM('closable', [
       cB('notification-main', [
-        c('> *:first-child', {
-          paddingLeft: '20px',
-          paddingRight: 'unset'
-        })
+        c('> *:first-child', `
+          padding-left: 20px;
+          padding-right: unset;
+        `)
       ]),
-      cE('close', {
-        right: 'unset',
-        left: 0
-      })
+      cE('close', `
+        right: unset;
+        left: 0;
+      `)
     ])
   ])
 ])