Skip to content

fix(list): adjust bordered list overflow styling#55075

Merged
li-jia-nan merged 4 commits intoant-design:masterfrom
Jiyur:fix/bordered-list-overflow-styling
Oct 1, 2025
Merged

fix(list): adjust bordered list overflow styling#55075
li-jia-nan merged 4 commits intoant-design:masterfrom
Jiyur:fix/bordered-list-overflow-styling

Conversation

@Jiyur
Copy link
Copy Markdown
Contributor

@Jiyur Jiyur commented Sep 18, 2025

🤔 This is a ...

  • 💄 Component style improvement

🔗 Related Issues

None

💡 Background and Solution

  • List with bordered has overflow issue styling with it's header and footer

Solution:
Apply overflow hidden to bordered List to avoid this issue

Before
image
image

After
image
image

📝 Change Log

Language Changelog
🇺🇸 English fix(list): adjust bordered list overflow styling
🇨🇳 Chinese 修复(列表):调整有边框的列表溢出样式

@bolt-new-by-stackblitz
Copy link
Copy Markdown

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Sep 18, 2025

Preview is ready

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Sep 18, 2025

👁 Visual Regression Report for PR #55075 Failed ❌

🎯 Target branch: master (b5d72b5)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 8 changed

Expected (Branch master) Actual (Current PR) Diff
list-component-token.compact.png list-component-token.compact.png list-component-token.compact.png list-component-token.compact.png
list-component-token.compact.png list-component-token.compact.png list-component-token.compact.css-var.png list-component-token.compact.css-var.png
list-component-token.dark.png list-component-token.dark.png list-component-token.dark.png list-component-token.dark.png
list-component-token.dark.png list-component-token.dark.png list-component-token.dark.css-var.png list-component-token.dark.css-var.png
list-component-token.default.png list-component-token.default.png list-component-token.default.png list-component-token.default.png
list-component-token.default.png list-component-token.default.png list-component-token.default.css-var.png list-component-token.default.css-var.png
list-vertical.dark.png list-vertical.dark.png list-vertical.dark.png list-vertical.dark.png
list-vertical.dark.png list-vertical.dark.png list-vertical.dark.css-var.png list-vertical.dark.css-var.png

Important

There are 8 diffs found in this PR: 🔄 8 changed.
Please check all items:

  • Visual diff is acceptable

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Summary of Changes

Hello @Jiyur, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves a visual glitch where the header and footer content of bordered lists could overflow their designated areas. By introducing a simple styling adjustment, the change ensures that all content within bordered lists is properly contained, leading to a cleaner and more consistent user interface.

Highlights

  • Bordered List Overflow Fix: Addressed an overflow styling issue affecting the header and footer of bordered lists by applying overflow: hidden to the list container.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Copy Markdown
Contributor

@gemini-code-assist gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request addresses a styling issue where the header and footer of a bordered list overflowed the container's rounded corners. The addition of overflow: 'hidden' to the bordered list's style is a correct and standard approach to fix this visual bug by clipping the internal content to the container's bounds. The change is minimal, effective, and I approve it.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Sep 18, 2025

@codecov
Copy link
Copy Markdown

codecov Bot commented Sep 18, 2025

Bundle Report

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

Detailed changes
Bundle name Size Change
antd.min-array-push 3.38MB -2.41kB (-0.07%) ⬇️

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 -1.21kB 1.84MB -0.07%
antd.min.js -1.2kB 1.53MB -0.08%

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

  • ./components/list/style/index.ts → Total Size: 10.48kB

Files in antd.min.js:

  • ./components/list/style/index.ts → Total Size: 10.48kB

@codecov
Copy link
Copy Markdown

codecov Bot commented Sep 18, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (b5d72b5) to head (4a9a0fe).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##            master    #55075    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          777       776     -1     
  Lines        14479     14123   -356     
  Branches      3897      3752   -145     
==========================================
- Hits         14479     14123   -356     

☔ View full report in Codecov by Sentry.
📢 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.

Comment thread components/list/style/index.ts Outdated
} = token;
return {
[listBorderedCls]: {
overflow: 'hidden',
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

尽量不加 overflow

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank for the suggestion, I tried new approach and it worked well (by apply border radius to both list header and footer). Please help me review it

Comment thread components/list/style/index.ts Outdated
Comment on lines +101 to +102
borderTopLeftRadius: calc(borderRadiusLG).sub(1).equal(),
borderTopRightRadius: calc(borderRadiusLG).sub(1).equal(),
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
borderTopLeftRadius: calc(borderRadiusLG).sub(1).equal(),
borderTopRightRadius: calc(borderRadiusLG).sub(1).equal(),
borderTopLeftRadius: borderRadiusLG,
borderTopRightRadius: borderRadiusLG,

Copy link
Copy Markdown
Contributor Author

@Jiyur Jiyur Sep 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@afc163 If I apply original borderRadiusLG, it still has bug on the UI like this

With original borderRadiusLG (still have white space on the top left and top right not covered by pink background - please zoom in too see the issue):
image
=> I think this happened because of the list container border width

With subtract by 1 borderRadiusLG:
image

Do you think we need to keep the original borderRadiusLG or subtract it by 1 (list container border with) in this case?

@Jiyur Jiyur requested a review from afc163 September 22, 2025 10:09
@Jiyur Jiyur force-pushed the fix/bordered-list-overflow-styling branch from 6fa3218 to dffb07c Compare September 23, 2025 01:51
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Sep 23, 2025

📝 Walkthrough

Summary by CodeRabbit

  • Style
    • 优化列表组件在带边框样式下的圆角展示:根据边框宽度自动计算内圆角;头部仅保留顶部圆角、底部为直角;底部仅保留底部圆角、顶部为直角。
    • 保持既有内边距与其他样式一致,无公开 API 变更。

Walkthrough

为带边框的列表计算并应用内侧圆角:新增 topCornerBorderRadius 与 bottomCornerBorderRadius(外层半径减去边框宽度),分别用于 header 的上角和 footer 的下角;保持其余 padding 与项样式不变,未修改公共接口。

Changes

Cohort / File(s) Change Summary
List 边框圆角增强
components/list/style/index.ts
genBorderedStyle 中新增 topCornerBorderRadiusbottomCornerBorderRadius(使用 token.calc(borderRadiusLG).sub(token.lineWidth).equal() 计算),将其分别应用到 header 的左上/右上 和 footer 的左下/右下 圆角;保留原有 padding 与 item 样式,并添加注释。

Sequence Diagram(s)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • afc163
  • li-jia-nan
  • thinkasany

Poem

我是小兔修边角,轻描圆弧不留伤。
头顶弯弯如月亮,脚下稳稳若山冈。
列表缝隙渐无恙,前端窗里见春光。 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Title Check ✅ Passed 该标题 succinctly 概述了此次 PR 的核心变更,即修复有边框列表的溢出样式问题,言简意赅且直接对应改动内容,能够让团队成员一眼了解主要目的。
Description Check ✅ Passed 该描述清晰关联到对有边框列表溢出问题的修复,包含问题背景、解决方案说明以及前后效果对比截图,完全集中在本次变更上,能够帮助审阅者理解改动意图和效果。
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fd0b3f6 and 4a9a0fe.

📒 Files selected for processing (1)
  • components/list/style/index.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • components/list/style/index.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
  • GitHub Check: build preview
  • GitHub Check: build
  • GitHub Check: test lib/es module (es, 2/2)
  • GitHub Check: test lib/es module (es, 1/2)
  • GitHub Check: test-react-latest (dom, 2/2)
  • GitHub Check: test-react-legacy (16, 2/2)
  • GitHub Check: test-react-legacy (17, 1/2)
  • GitHub Check: test-react-latest (dom, 1/2)
  • GitHub Check: test-react-legacy (17, 2/2)
  • GitHub Check: test-react-legacy (16, 1/2)
  • GitHub Check: visual-diff snapshot (2/2)
  • GitHub Check: visual-diff snapshot (1/2)
  • GitHub Check: lint
  • GitHub Check: build
  • GitHub Check: size

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 and usage tips.

@coderabbitai coderabbitai Bot added the lgtm This PR has been approved by a maintainer label Sep 23, 2025
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
components/list/style/index.ts (1)

99-107: 可选:考虑逻辑圆角以统一 RTL 语义

后续可评估使用逻辑属性(如 border-start-start-radius/border-start-end-radius 等)与现有的 paddingInlinemarginInlineStart 风格保持一致;当前实现与历史风格一致可暂不改。

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 625e034 and dffb07c.

📒 Files selected for processing (1)
  • components/list/style/index.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript and React for implementation
Use early returns to improve readability
Props and variable names use camelCase
Props naming: initialization as default + PropName (e.g., defaultValue)
Props naming: forceRender for forced render
Props naming: child force render as force + SubComponentName + Render
Props naming: child render as SubComponentName + Render
Props naming: dataSource for data source
Props naming: use open instead of visible for open state
Props naming: display-related as show + PropName
Props naming: capability as PropName + able
Props naming: disabled for disabled state
Props naming: extra for extra content
Props naming: icon for icon
Props naming: trigger for trigger elements
Props naming: className for CSS class
Event naming: on + EventName
Event naming: child component events on + SubComponentName + EventName
Event naming: before + EventName for pre events
Event naming: after + EventName for post events
Event naming: on + EventName + Complete for completion
Component token naming: variant(optional) + semantic parts + css property + size/disabled(optional)
Provide accurate TypeScript types for all components and functions
Avoid any; prefer precise types
Use interfaces instead of type aliases for object shapes
Export all public interface types
No TypeScript errors or warnings in compilation
Component props must be defined with interface named ComponentNameProps
Define component state interfaces like ComponentNameState where applicable
All callback types must declare parameter and return types explicitly
Use generics appropriately for flexibility
Use intersection types (&) to combine types when needed
Use literal union types for finite option sets
Avoid enum; prefer union types with as const
Prefer type inference; use assertions only when necessary

Files:

  • components/list/style/index.ts
components/**/style/**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

components/**/style/**/*.ts: Use @ant-design/cssinjs for styling
Keep each component’s styles under its style/ directory and mirror component structure
Name style generator functions as gen[ComponentName]Style
Prefer class selectors over tag selectors to increase specificity
Use Ant Design token system; avoid hardcoded colors, sizes, spacing
Component styles should be based on global and component-level tokens; propagate token changes downward
Component-level token naming: Component + property (e.g., buttonPrimaryColor)

Files:

  • components/list/style/index.ts
components/**/style/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

components/**/style/**/*.{ts,tsx}: Support responsive layouts, dark mode, and RTL; prefer CSS logical properties (e.g., margin-inline-start)
Use CSS transitions for simple animations; use rc-motion for complex ones; respect prefers-reduced-motion; keep duration/easing consistent
Accessibility styling: visible focus states, adequate contrast, avoid color-only cues, support 200% zoom, avoid flicker

Files:

  • components/list/style/index.ts
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (15)
  • GitHub Check: test lib/es module (es, 2/2)
  • GitHub Check: test lib/es module (es, 1/2)
  • GitHub Check: build
  • GitHub Check: test-react-latest (dom, 2/2)
  • GitHub Check: test-react-latest (dom, 1/2)
  • GitHub Check: lint
  • GitHub Check: test-react-legacy (17, 2/2)
  • GitHub Check: test-react-legacy (16, 1/2)
  • GitHub Check: test-react-legacy (17, 1/2)
  • GitHub Check: test-react-legacy (16, 2/2)
  • GitHub Check: visual-diff snapshot (2/2)
  • GitHub Check: build preview
  • GitHub Check: visual-diff snapshot (1/2)
  • GitHub Check: build
  • GitHub Check: size

Comment thread components/list/style/index.ts
@Jiyur Jiyur force-pushed the fix/bordered-list-overflow-styling branch 2 times, most recently from 4fedb2a to 2a9984e Compare September 23, 2025 02:13
Comment thread components/list/style/index.ts Outdated
Comment thread components/list/style/index.ts Outdated
@coderabbitai coderabbitai Bot requested review from afc163 and li-jia-nan September 23, 2025 14:54
@Jiyur Jiyur force-pushed the fix/bordered-list-overflow-styling branch from e70dd89 to fd0b3f6 Compare September 26, 2025 04:04
@Jiyur Jiyur force-pushed the fix/bordered-list-overflow-styling branch from fd0b3f6 to 4a9a0fe Compare October 1, 2025 10:18
@li-jia-nan li-jia-nan merged commit 85812ed into ant-design:master Oct 1, 2025
42 checks passed
Comment thread components/list/style/index.ts
@PeachScript PeachScript mentioned this pull request Oct 13, 2025
17 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lgtm This PR has been approved by a maintainer

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants