Skip to content

fix: avoid selected item text color lagging behind thumb motion - #342

Merged
zombieJ merged 1 commit into
react-component:masterfrom
EmilyyyLiu:segmented-text-color-delay
Aug 18, 2026
Merged

fix: avoid selected item text color lagging behind thumb motion#342
zombieJ merged 1 commit into
react-component:masterfrom
EmilyyyLiu:segmented-text-color-delay

Conversation

@EmilyyyLiu

@EmilyyyLiu EmilyyyLiu commented Aug 17, 2026

Copy link
Copy Markdown
Contributor

背景

修复 ant-design/ant-design#37192

当选中项使用自定义深色背景 + 浅色文字时,切换项会导致文字颜色滞后于 thumb 动画——文字只有在动画结束后才变色。维护者已确认期望行为:「点击后就应该直接更新」。

根因

InternalSegmentedOption 中,item-selected class(同时承载背景色文字色)受 thumbShow 闸门控制:

```js
[`${prefixCls}-item-selected`]: optionValue === rawValue && !thumbShow,
```

thumbShow 在 thumb 动画期间为 true,因此新选中项故意延迟挂载该 class,以避免出现双背景(新项自身的白色背景 + 移动中的 MotionThumb)。副作用是:文字色也被一起延迟了。

修复

将文字色拆分到独立的 item-selected-text class,让它立即跟随值,不受 thumbShow 控制:

  • `src/index.tsx`:在选中项上新增 `item-selected-text` class(`optionValue === rawValue`,无 `thumbShow` 闸门)。
  • `assets/index.less` / `assets/index.css`:新增 `&-selected-text { color: @text-color }`。保留 `&-selected` 原有的 `color` 以做向后兼容。

这样把文字色(立即)与背景色(延迟到动画结束)解耦,文字不再滞后于 thumb 动画。

测试

  • 更新了快照。
  • 将断言替换为针对 `item-selected-text` 的断言,并新增一条断言验证:当 thumb 动画进行中(`thumbShow` 隐藏 `item-selected`)时,新选中项仍持有 `item-selected-text`。

```
Tests: 31 passed
Snapshots: 13 passed
```

cc @afc163 @vagusX

🤖 Generated with Claude Code

Split the text color of the selected item into a dedicated
`item-selected-text` class that follows the value immediately, instead of
being gated by `thumbShow` like the background. This prevents the text
color from lagging behind the thumb animation when a custom dark
background + light text is used.

ant-design/ant-design#37192

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

vercel Bot commented Aug 17, 2026

Copy link
Copy Markdown

Someone is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 17, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 18c96c7d-fafb-4151-9805-a32c462ec610

📥 Commits

Reviewing files that changed from the base of the PR and between b59ce60 and c98bf95.

⛔ Files ignored due to path filters (1)
  • tests/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (3)
  • assets/index.less
  • src/index.tsx
  • tests/index.test.tsx

Included review availability: Your plan includes up to 1 review per rolling hour; 0 remain after this review.


Walkthrough

Changes

分段项选中文本状态

Layer / File(s) Summary
选中文本状态与样式
src/index.tsx, assets/index.less, tests/index.test.tsx
当前值对应的项目始终获得 rc-segmented-item-selected-text 类名。该类名使用 @text-color。测试验证 thumb 动画期间保留文本选中样式,且不添加 rc-segmented-item-selected

Estimated code review effort: 1(简单)| ~5 分钟

Merge Risk: ⚪ Minimal · up to c98bf

This localized styling fix separates immediate text-color updates from the animated background behavior, with no actionable merge-blocking risk remaining after normal checks and review.

Suggested reviewers: afc163, qdyanbing

Poem

小兔轻点 Web3,
文字选中不迟疑。
thumb 滑过深色底,
白字稳稳守位置。
类名清晰,测试齐。

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Linked Issues check ✅ Passed 代码新增即时更新的选中文本样式类,并保留动画期间的 thumb 样式,符合问题 #37192 的修复目标。
Out of Scope Changes check ✅ Passed 修改仅涉及选中文本样式、组件类名和对应测试,均与问题 #37192 直接相关。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题准确概括了修复选中项文本颜色滞后于 thumb 动画的问题,与主要变更一致且表达清晰。
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Aug 17, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.39%. Comparing base (13dcd71) to head (c98bf95).
⚠️ Report is 17 commits behind head on master.

Additional details and impacted files
@@           Coverage Diff           @@
##           master     #342   +/-   ##
=======================================
  Coverage   99.38%   99.39%           
=======================================
  Files           2        2           
  Lines         163      164    +1     
  Branches       39       40    +1     
=======================================
+ Hits          162      163    +1     
  Misses          1        1           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@zombieJ
zombieJ merged commit 2174553 into react-component:master Aug 18, 2026
9 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants