feat: support CSS gap for notification list spacing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: zombieJ

assets/geek.less

@@ -22,6 +22,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    gap: 8px;
     width: 100%;
     pointer-events: none;
     will-change: transform;

src/NotificationList.tsx

@@ -92,12 +92,26 @@ const NotificationList: React.FC<NotificationListProps> = (props) => {
     };
   }, [expanded, offset, stackEnabled, threshold]);
 
-  const [notificationPosition, setNodeSize] = useListPosition(configList, stackPosition);
+  const [gap, setGap] = React.useState(0);
+  const [notificationPosition, setNodeSize] = useListPosition(configList, stackPosition, gap);
   const { contentRef, onWheel, scrollOffset, viewportRef } = useListScroll(
     keyList,
     notificationPosition,
   );
 
+  React.useEffect(() => {
+    const listNode = contentRef.current;
+
+    if (!listNode) {
+      return;
+    }
+
+    const { gap: cssGap, rowGap } = window.getComputedStyle(listNode);
+    const nextGap = parseFloat(rowGap || cssGap) || 0;
+
+    setGap((prevGap) => (prevGap === nextGap ? prevGap : nextGap));
+  }, [!!configList.length]);
+
   // ========================= Render =========================
   const listPrefixCls = `${prefixCls}-list`;
   const itemPrefixCls = `${listPrefixCls}-item`;

src/hooks/useListPosition/index.ts

@@ -7,7 +7,11 @@ export type NodePosition = {
   y: number;
 };
 
-export default function useListPosition(configList: { key: React.Key }[], stack?: StackConfig) {
+export default function useListPosition(
+  configList: { key: React.Key }[],
+  stack?: StackConfig,
+  gap = 0,
+) {
   const [sizeMap, setNodeSize] = useSizes();
 
   const notificationPosition = React.useMemo(() => {
@@ -26,10 +30,14 @@ export default function useListPosition(configList: { key: React.Key }[], stack?
 
         nextNotificationPosition.set(key, nodePosition);
         offsetY += (stack ? stack.offset : sizeMap[key]?.height) ?? 0;
+
+        if (!stack) {
+          offsetY += gap;
+        }
       });
 
     return nextNotificationPosition;
-  }, [configList, sizeMap, stack]);
+  }, [configList, gap, sizeMap, stack]);
 
   return [notificationPosition, setNodeSize] as const;
 }

tests/stack.test.tsx

@@ -1,6 +1,7 @@
 import { useNotification } from '../src';
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import NotificationList from '../src/NotificationList';
 
 require('../assets/index.less');
 
@@ -130,4 +131,62 @@ describe('stack', () => {
       notices.every((notice) => notice.style.getPropertyValue('--notification-y') === '0px'),
     ).toBeTruthy();
   });
+
+  it('passes list css gap to list position when expanded', () => {
+    const offsetHeightSpy = vi
+      .spyOn(HTMLElement.prototype, 'offsetHeight', 'get')
+      .mockImplementation(function mockOffsetHeight() {
+        return this.classList?.contains('rc-notification-notice-wrapper') ? 50 : 0;
+      });
+    const originGetComputedStyle = window.getComputedStyle;
+    const getComputedStyleSpy = vi
+      .spyOn(window, 'getComputedStyle')
+      .mockImplementation((element) => {
+        const style = originGetComputedStyle(element);
+
+        if ((element as HTMLElement).classList?.contains('rc-notification-list-content')) {
+          return new Proxy(style, {
+            get(target, prop, receiver) {
+              if (prop === 'gap' || prop === 'rowGap') {
+                return '8px';
+              }
+
+              return Reflect.get(target, prop, receiver);
+            },
+          }) as CSSStyleDeclaration;
+        }
+
+        return style;
+      });
+
+    render(
+      <NotificationList
+        configList={[
+          {
+            key: 'first',
+            content: <div className="context-content-first">First</div>,
+            duration: false,
+          },
+          {
+            key: 'second',
+            content: <div className="context-content-second">Second</div>,
+            duration: false,
+          },
+        ]}
+      />,
+    );
+
+    const firstNotice = document
+      .querySelector('.context-content-first')
+      ?.closest<HTMLElement>('.rc-notification-notice');
+    const secondNotice = document
+      .querySelector('.context-content-second')
+      ?.closest<HTMLElement>('.rc-notification-notice');
+
+    expect(firstNotice?.style.getPropertyValue('--notification-y')).toBe('58px');
+    expect(secondNotice?.style.getPropertyValue('--notification-y')).toBe('0px');
+
+    getComputedStyleSpy.mockRestore();
+    offsetHeightSpy.mockRestore();
+  });
 });