Skip to content

fix(x-pro): pin message-scroller preview cards to one grid cell #238

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cc-hearts merged 1 commit into from
Oct 9, 2026
Merged

fix(x-pro): pin message-scroller preview cards to one grid cell #238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion packages/x-pro/src/message-scroller/style/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,11 @@ const genMessageScrollerStyle: GenerateStyle<
},

/**
* 轨道用单格网格承载卡片：交叉淡入淡出期间新旧卡片重叠，轨道高度不会叠加跳动。
* 轨道承载卡片并负责滑动；卡片本身用 `grid-area` 钉在同一个网格单元里。
*
* `Transition` 默认模式在新旧卡片交叉淡入淡出期间同时保留两个节点，网格若不显式指定
* 单元，自动排布会把它们放进两行，轨道高度翻倍，居中的预览层随即被顶起再落回——每次
* 切换都抖一下。钉在同一格后轨道高度取两者较大值，不再叠加。
*/
[`${componentCls}-preview-track`]: {
display: "grid",
Expand All @@ -207,6 +211,7 @@ const genMessageScrollerStyle: GenerateStyle<
},

[`${componentCls}-preview`]: {
gridArea: "1 / 1",
width: "100%",
padding: `${unit(token.paddingXS)} ${unit(token.paddingSM)}`,
border: `${lineWidth} solid ${token.previewBorderColor}`,
Expand Down
16 changes: 16 additions & 0 deletions packages/x-pro/tests/theme.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { h } from "vue";
import { MessageScroller } from "../src";

const VIEWPORT_SELECTOR = ".ant-message-scroller-viewport";
const PREVIEW_SELECTOR = ".ant-message-scroller-preview";

function collectStyleText() {
return [...document.querySelectorAll("style")]
Expand Down Expand Up @@ -57,4 +58,19 @@ describe("x-pro theme registration", () => {

expect(collectStyleText()).toContain("@layer antdx");
});

/**
* 预览卡片必须钉在轨道的同一个网格单元里。
*
* `Transition` 默认模式在交叉淡入淡出期间同时保留新旧两张卡片，若网格自动排布把它们放进
* 两行，轨道高度翻倍，居中的预览层会被顶起再落回，每次切换都抖一下。`@vue/test-utils`
* 默认 stub 掉 `Transition`，DOM 层只能看到单张卡片，因此这条不变量只能落在样式表上。
*/
it("pins the preview card to a single track cell so the crossfade cannot stack", () => {
mountScrollerIn(children => children);

expect(collectStyleText()).toMatch(
new RegExp(`${PREVIEW_SELECTOR}\\s*\\{[^}]*grid-area:\\s*1\\s*\\/\\s*1`),
);
});
});
Loading