fix(radio): [radio] resolve the issue of text wrapping not being centered in radio components #2884
Conversation
…ered in radio components
WalkthroughThis pull request modifies the Vue radio component's styling token. The update removes the Changes
Suggested reviewers
Poem
✨ Finishing Touches
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 radio component where text wrapping was not centered. The change involves modifying the CSS class responsible for text alignment, ensuring that the text is properly centered within the radio component. Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| '[&_path:nth-of-type(2)]:fill-color-icon-disabled [&_path:nth-of-type(1)]:fill-color-bg-3 cursor-not-allowed', | ||
| 'radio-input': 'absolute left-0 right-0 top-0 bottom-0 w-0 h-0 -z-10 opacity-0', | ||
| 'radio-text-common': 'sm:h-4 text-center text-color-text-primary align-middle text-sm', | ||
| 'radio-text-common': 'sm:h-4 text-color-text-primary align-middle text-sm', |
There was a problem hiding this comment.
The removal of 'text-center' from 'radio-text-common' class may affect the text alignment in other components using this class. Please ensure that this change does not introduce any unintended side effects in other parts of the application.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/vue/src/radio/src/token.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
| '[&_path:nth-of-type(2)]:fill-color-icon-disabled [&_path:nth-of-type(1)]:fill-color-bg-3 cursor-not-allowed', | ||
| 'radio-input': 'absolute left-0 right-0 top-0 bottom-0 w-0 h-0 -z-10 opacity-0', | ||
| 'radio-text-common': 'sm:h-4 text-center text-color-text-primary align-middle text-sm', | ||
| 'radio-text-common': 'sm:h-4 text-color-text-primary align-middle text-sm', |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify if removing text-center achieves the desired text wrapping behavior.
The PR aims to fix text wrapping not being centered, but removing the text-center class might have the opposite effect. The align-middle property only handles vertical alignment, not horizontal text alignment.
Could you please:
- Confirm if removing
text-centeris intentional - Provide a screenshot or description of how this change improves the text wrapping behavior
- Consider if we need a different approach to center the wrapped text
🌐 Web query:
What's the difference between text-center and align-middle in CSS?
💡 Result:
In CSS, text-align: center and vertical-align: middle serve fundamentally different purposes:
Horizontal vs. Vertical Alignment
-
text-align: center- Horizontally centers text or inline/inline-block elements within their container[1][6][8].
- Works on block-level containers (
<div>,<p>, etc.)[2][6]. - Example:
.container { text-align: center; }
-
vertical-align: middle- Vertically aligns inline/inline-block elements relative to their siblings/container[3][7][9].
- Primarily used for:
- Table cells (
<td>,<th>)[3] - Inline elements (images/icons in text)[7]
- Table cells (
- Example:
img { vertical-align: middle; }
Key Differences
| Property | Axis | Applies To | Common Use Cases |
|---|---|---|---|
text-align |
Horizontal | Block containers | Centering paragraphs/headings |
vertical-align |
Vertical | Inline/table-cell elements | Aligning icons with text |
Important Notes
vertical-align: middle≠ full vertical centering of block elements - use Flexbox (align-items: center) or Grid for modern layouts[3][9].text-aligninherits by default, whilevertical-aligndoesn’t[8].- Avoid deprecated HTML attributes like
<center>oralign="center"- use CSS instead[1][5].
Citations:
- 1: https://www.codecademy.com/forum_questions/5397a5d07c82cadf2b000544
- 2: https://blogs.purecode.ai/blogs/css-center-text
- 3: https://www.w3.org/Style/Examples/007/center.en.html
- 4: https://forum.freecodecamp.org/t/shouldnt-this-be-justify-content-and-not-text-align/519190
- 5: https://www.youtube.com/watch?v=sLAunIX5RXw
- 6: https://blog.hubspot.com/website/center-text-in-css?code=xxx
- 7: https://www.sololearn.com/en/Discuss/1810669/there-any-difference-between-align-center-and-align-middle
- 8: https://www.w3schools.com/cssref/pr_text_text-align.php
- 9: https://www.w3schools.com/css/css_align.asp
- 10: https://www.simplilearn.com/tutorials/css-tutorial/how-to-align-center-work-css
Review the horizontal centering of the radio text alignment
The removal of the text-center class, which applies horizontal centering via text-align: center, appears contradictory to the PR’s stated objective of fixing text wrapping alignment. The align-middle class only affects vertical alignment. Could you please confirm if removing text-center was intentional? If so, please provide additional context (e.g., a screenshot or description) showing how text wrapping is now correctly aligned. Otherwise, we might need to reconsider the approach to ensure horizontal centering remains effective.
2 participants
…ered in radio components
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit