fix(list): adjust bordered list overflow styling#55075
fix(list): adjust bordered list overflow styling#55075li-jia-nan merged 4 commits intoant-design:masterfrom
Conversation
|
|
👁 Visual Regression Report for PR #55075 Failed ❌
Important There are 8 diffs found in this PR: 🔄
|
There was a problem hiding this comment.
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: hiddento 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
-
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. ↩
There was a problem hiding this comment.
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.
More templates
commit: |
Bundle ReportChanges will decrease total bundle size by 2.41kB (-0.07%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
Files in
Files in
|
Codecov Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
| } = token; | ||
| return { | ||
| [listBorderedCls]: { | ||
| overflow: 'hidden', |
There was a problem hiding this comment.
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
| borderTopLeftRadius: calc(borderRadiusLG).sub(1).equal(), | ||
| borderTopRightRadius: calc(borderRadiusLG).sub(1).equal(), |
There was a problem hiding this comment.
| borderTopLeftRadius: calc(borderRadiusLG).sub(1).equal(), | |
| borderTopRightRadius: calc(borderRadiusLG).sub(1).equal(), | |
| borderTopLeftRadius: borderRadiusLG, | |
| borderTopRightRadius: borderRadiusLG, |
There was a problem hiding this comment.
@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):

=> I think this happened because of the list container border width
With subtract by 1 borderRadiusLG:

Do you think we need to keep the original borderRadiusLG or subtract it by 1 (list container border with) in this case?
6fa3218 to
dffb07c
Compare
📝 WalkthroughSummary by CodeRabbit
Walkthrough为带边框的列表计算并应用内侧圆角:新增 topCornerBorderRadius 与 bottomCornerBorderRadius(外层半径减去边框宽度),分别用于 header 的上角和 footer 的下角;保持其余 padding 与项样式不变,未修改公共接口。 Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ 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)
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
components/list/style/index.ts (1)
99-107: 可选:考虑逻辑圆角以统一 RTL 语义后续可评估使用逻辑属性(如
border-start-start-radius/border-start-end-radius等)与现有的paddingInline、marginInlineStart风格保持一致;当前实现与历史风格一致可暂不改。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 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 asdefault+ PropName (e.g., defaultValue)
Props naming: forceRender for forced render
Props naming: child force render asforce+ SubComponentName +Render
Props naming: child render asSubComponentName+Render
Props naming: dataSource for data source
Props naming: useopeninstead ofvisiblefor open state
Props naming: display-related asshow+ PropName
Props naming: capability asPropName+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 eventson+ SubComponentName + EventName
Event naming: before + EventName for pre events
Event naming: after + EventName for post events
Event naming:on+ EventName +Completefor completion
Component token naming: variant(optional) + semantic parts + css property + size/disabled(optional)
Provide accurate TypeScript types for all components and functions
Avoidany; 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 namedComponentNameProps
Define component state interfaces likeComponentNameStatewhere 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 withas 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 itsstyle/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
4fedb2a to
2a9984e
Compare
e70dd89 to
fd0b3f6
Compare
fd0b3f6 to
4a9a0fe
Compare

























🤔 This is a ...
🔗 Related Issues
None
💡 Background and Solution
Solution:
Apply overflow hidden to
borderedList to avoid this issueBefore


After


📝 Change Log