fix(carousel): [carousel] modify the vertical arrow display issue of the carousel component #2752
Conversation
WalkthroughThe pull request involves a minor CSS adjustment in the carousel component's styling. Specifically, the bottom arrow's positioning has been modified from Changes
Suggested labels
Suggested reviewers
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
WalkthroughThis pull request addresses a bug in the carousel component by modifying the vertical arrow display issue. The change specifically adjusts the positioning of the arrow to ensure correct alignment. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @@ -90,7 +90,7 @@ | |||
|
|
|||
| &.@{carousel-prefix-cls}__arrow-bottom { | |||
| bottom: 0; | |||
| left: -50%; | |||
| left: 50%; | |||
There was a problem hiding this comment.
The change from left: -50% to left: 50% corrects the alignment of the vertical arrow in the carousel component, ensuring it is displayed correctly. This is a critical fix for the display issue.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/theme/src/carousel/index.less (2)
93-95: Consider adding a comment to explain the positioning logic.The combination of
left: 50%andtransform: translateX(-50%)is a common CSS centering technique, but it might not be immediately obvious to all developers. Consider adding a comment to explain this pattern.&.@{carousel-prefix-cls}__arrow-bottom { bottom: 0; + // Center the arrow horizontally using the left/transform combination left: 50%; top: unset; transform: translateX(-50%); }
93-95: Consider using CSS custom properties for positioning values.For better maintainability and consistency, consider moving the hardcoded positioning values to CSS custom properties (variables) in the
vars.lessfile.&.@{carousel-prefix-cls}__arrow-bottom { bottom: 0; - left: 50%; + left: var(--tv-Carousel-arrow-horizontal-position, 50%); top: unset; - transform: translateX(-50%); + transform: translateX(var(--tv-Carousel-arrow-transform-offset, -50%)); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/theme/src/carousel/index.less(1 hunks)
🔇 Additional comments (2)
packages/theme/src/carousel/index.less (2)
93-95: LGTM! The positioning change correctly centers the bottom arrow.The change from
-50%to50%forleftproperty, combined withtransform: translateX(-50%), properly implements horizontal centering of the bottom arrow.
93-95: Update documentation to reflect the visual changes.Since this fixes a visual bug in the carousel component:
- Add an entry to the changelog describing the fix
- Update the component's documentation if it includes visual examples or demos showing vertical arrows
|
可以在PR下面贴上修复前与修复后效果，便于大家review代码与影响 |
You can post the pre-repair and post-repair effects below the PR so that everyone can review the code and impact. |
done! |
done! |
PR
Before:
Updated:
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
modify the vertical arrow display issue of the carousel component
What is the current behavior?
Issue Number: N/A
#1543
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit