Carousel support show dot duration #52672

yellowryan · 2025-02-06T10:44:42Z

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

The specific problem to be addressed.

List the final API implementation and usage if needed.

If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Read Keep a Changelog like a cat tracks a laser pointer.

Describe the impact of the changes on developers, not the solution approach.

Reference: https://ant.design/changelog

Language	Changelog
🇺🇸 English	feat: Carousel support show dot duration
🇨🇳 Chinese	feat: Carousel支持展示指示点进度

stackblitz · 2025-02-06T10:44:45Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2025-02-06T10:44:53Z

github-actions · 2025-02-06T10:44:54Z

👁 Visual Regression Report for PR #52672 Failed ❌

🎯 Target branch: feature (d45c6d2)
📖 View Full Report ↗︎
📊 Summary: 🔄 2 changed, 🆕 6 added

Expected (Branch feature)	Actual (Current PR)	Diff
input-group.compact.png	input-group.compact.css-var.png
input-otp.compact.png	input-otp.compact.css-var.png
	carousel-dot-duration.compact.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	carousel-dot-duration.compact.png	🆕🆕🆕 Added 🆕🆕🆕
	carousel-dot-duration.dark.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	carousel-dot-duration.dark.png	🆕🆕🆕 Added 🆕🆕🆕
	carousel-dot-duration.default.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	carousel-dot-duration.default.png	🆕🆕🆕 Added 🆕🆕🆕

Important

There are 8 diffs found in this PR: 🔄 2 changed, 🆕 6 added.
Please check all items:

Visual diff is acceptable

petercat-assistant · 2025-02-06T10:45:01Z

Walkthrough

This pull request introduces a new feature to the Carousel component, allowing it to support the display of dot progress duration. This feature is controlled by the showDotDuration prop, which works in conjunction with the autoplay and autoplaySpeed properties to visually indicate the duration of each slide.

Changes

Files	Summary
components/carousel/tests/snapshots/demo-extend.test.ts.snap, components/carousel/tests/snapshots/demo.test.ts.snap	Updated snapshots to include new feature tests.
components/carousel/tests/index.test.tsx	Added unit tests for the `showDotDuration` feature, testing various configurations.
components/carousel/demo/dot-duration.md, components/carousel/demo/dot-duration.tsx	Added new demo files showcasing the `showDotDuration` feature.
components/carousel/index.en-US.md, components/carousel/index.zh-CN.md	Updated documentation to include the new `showDotDuration` API.
components/carousel/index.tsx	Implemented the `showDotDuration` feature in the Carousel component.
components/carousel/style/index.ts	Added styles to support the dot duration progress feature.

components/carousel/__tests__/index.test.tsx

pkg-pr-new · 2025-02-06T10:50:06Z

Open in Stackblitz

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@52672

commit: 961fdda

codecov · 2025-02-06T10:50:15Z

Bundle Report

Changes will decrease total bundle size by 1.81kB (-0.05%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.37MB	-1.81kB (-0.05%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`antd-with-locales.min.js`	-898 bytes	1.84MB	-0.05%
`antd.min.js`	-915 bytes	1.54MB	-0.06%

Files in antd-with-locales.min.js:

./components/carousel/style/index.ts → Total Size: 9.74kB

Files in antd.min.js:

./components/carousel/style/index.ts → Total Size: 9.74kB

codecov · 2025-02-06T16:30:18Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.97%. Comparing base (97cc776) to head (961fdda).
Report is 11 commits behind head on feature.

❌ Your project status has failed because the head coverage (99.97%) is below the target coverage (100.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files

@@             Coverage Diff             @@
##           feature   #52672      +/-   ##
===========================================
- Coverage   100.00%   99.97%   -0.03%     
===========================================
  Files          767      767              
  Lines        13823    13835      +12     
  Branches      3612     3621       +9     
===========================================
+ Hits         13823    13832       +9     
- Misses           0        3       +3

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

afc163 · 2025-02-07T03:01:12Z

效果相当好！

components/carousel/index.zh-CN.md

Signed-off-by: afc163 <afc163@gmail.com>

components/carousel/index.en-US.md

Signed-off-by: afc163 <afc163@gmail.com>

github-actions · 2025-02-10T03:18:10Z

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。

* feat: carousel support show dot duration * docs: add carousel dot duration demo * test: add carousel dot duration test * chore: add jest snap * docs: fix typos in test file * feat(api): redesign API for dot duration * test: update dot duration test items * docs: update md file for dot duration * chore: set default false to autoplay * Update components/carousel/index.zh-CN.md Signed-off-by: afc163 <afc163@gmail.com> * Update components/carousel/index.en-US.md Signed-off-by: afc163 <afc163@gmail.com> --------- Signed-off-by: afc163 <afc163@gmail.com> Co-authored-by: afc163 <afc163@gmail.com> (cherry picked from commit 16bedba)

li-jia-nan · 2025-02-15T11:44:47Z

components/carousel/style/index.ts

+              position: 'absolute',
+              top: 0,
+              insetInlineStart: 0,
+              width: 0,


这个不应该用 width 实现，看起来有点卡顿，应该用 transform: translate3d 做，性能会好一点

refactor: improve animation performance #52881

ok! 学习到了 😄

li-jia-nan · 2025-02-15T12:10:18Z

components/carousel/index.tsx

+  const mergedShowDuration =
+    autoplay && (typeof autoplay === 'object' ? autoplay.dotDuration : false);
+  const dotDurationStyle = mergedShowDuration
+    ? ({ [DotDuration]: `${autoplaySpeed / 1000}s` } as React.CSSProperties)


CSS 本身就支持 ms 做时间单位，没必要转成 s

yellowryan added 4 commits February 6, 2025 18:31

feat: carousel support show dot duration

f15ce28

docs: add carousel dot duration demo

96bb3c1

test: add carousel dot duration test

a0217d6

chore: add jest snap

afcc04f

petercat-assistant bot reviewed Feb 6, 2025

View reviewed changes

components/carousel/__tests__/index.test.tsx Outdated Show resolved Hide resolved

docs: fix typos in test file

1a33414

afc163 reviewed Feb 7, 2025

View reviewed changes

components/carousel/index.zh-CN.md Outdated Show resolved Hide resolved

yellowryan added 4 commits February 7, 2025 16:39

feat(api): redesign API for dot duration

429b4e8

test: update dot duration test items

bd9a3a6

docs: update md file for dot duration

388ae54

chore: set default false to autoplay

442408d

afc163 reviewed Feb 7, 2025

View reviewed changes

components/carousel/index.zh-CN.md Outdated Show resolved Hide resolved

Update components/carousel/index.zh-CN.md

d9dfbac

Signed-off-by: afc163 <afc163@gmail.com>

afc163 reviewed Feb 10, 2025

View reviewed changes

components/carousel/index.en-US.md Outdated Show resolved Hide resolved

Update components/carousel/index.en-US.md

961fdda

Signed-off-by: afc163 <afc163@gmail.com>

afc163 approved these changes Feb 10, 2025

View reviewed changes

afc163 merged commit 16bedba into ant-design:feature Feb 10, 2025
39 of 40 checks passed

MadCcc mentioned this pull request Feb 10, 2025

docs: changelog 5.24.0 #52734

Merged

16 tasks

li-jia-nan reviewed Feb 15, 2025

View reviewed changes

li-jia-nan mentioned this pull request Feb 15, 2025

doc: update duration version #52832

Merged

16 tasks

li-jia-nan reviewed Feb 15, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Carousel support show dot duration #52672

Carousel support show dot duration #52672

yellowryan commented Feb 6, 2025 •

edited by yoyo837

Loading

stackblitz bot commented Feb 6, 2025

github-actions bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited by afc163

Loading

petercat-assistant bot commented Feb 6, 2025

pkg-pr-new bot commented Feb 6, 2025 •

edited

Loading

codecov bot commented Feb 6, 2025 •

edited

Loading

Assets Changed:

codecov bot commented Feb 6, 2025 •

edited

Loading

afc163 commented Feb 7, 2025

github-actions bot commented Feb 10, 2025

li-jia-nan Feb 15, 2025 •

edited

Loading

li-jia-nan Feb 18, 2025

yellowryan Feb 24, 2025

li-jia-nan Feb 15, 2025

Carousel support show dot duration #52672

Carousel support show dot duration #52672

Conversation

yellowryan commented Feb 6, 2025 • edited by yoyo837 Loading

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

stackblitz bot commented Feb 6, 2025

github-actions bot commented Feb 6, 2025 • edited Loading

github-actions bot commented Feb 6, 2025 • edited by afc163 Loading

👁 Visual Regression Report for PR #52672 Failed ❌

petercat-assistant bot commented Feb 6, 2025

Walkthrough

Changes

pkg-pr-new bot commented Feb 6, 2025 • edited Loading

codecov bot commented Feb 6, 2025 • edited Loading

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

codecov bot commented Feb 6, 2025 • edited Loading

Codecov Report

afc163 commented Feb 7, 2025

github-actions bot commented Feb 10, 2025

li-jia-nan Feb 15, 2025 • edited Loading

Choose a reason for hiding this comment

li-jia-nan Feb 18, 2025

Choose a reason for hiding this comment

yellowryan Feb 24, 2025

Choose a reason for hiding this comment

li-jia-nan Feb 15, 2025

Choose a reason for hiding this comment

yellowryan commented Feb 6, 2025 •

edited by yoyo837

Loading

github-actions bot commented Feb 6, 2025 •

edited

Loading

github-actions bot commented Feb 6, 2025 •

edited by afc163

Loading

pkg-pr-new bot commented Feb 6, 2025 •

edited

Loading

codecov bot commented Feb 6, 2025 •

edited

Loading

codecov bot commented Feb 6, 2025 •

edited

Loading

li-jia-nan Feb 15, 2025 •

edited

Loading