fix(tag): remove mini size of tag #2468
Conversation
|
Caution Review failedThe pull request is closed. WalkthroughThe pull request includes changes to several Vue components and their corresponding test files, primarily focusing on the removal of the "mini" tag size from the tag group. This involves deleting related template elements, test assertions, and updating descriptions in documentation. The overall structure of the components remains intact, and no changes were made to the script or style sections of the affected files. CSS variables in the Changes
Possibly related PRs
Suggested reviewers
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 (
|
|
[e2e-test-warn] The title of the Pull request should look like "fix(vue-renderless): [action-menu, alert] fix xxx bug". Please make sure you've read our contributing guide |
![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
🧹 Outside diff range and nitpick comments (1)
packages/theme/src/tag/vars.less (1)
51-61: Default tag size reduced significantly
The default tag size has been made more compact with several changes:
- Font size reduced from md to sm
- Horizontal padding reduced from 11px to 7px
- Vertical padding reduced from 2.5px to 2px
- Border radius reduced from md to sm
- Icon size reduced from 16px to 14px
This is a significant visual change that affects all tags by default.
Consider:
- Adding a migration guide in the changelog
- Updating the component documentation
- Adding visual examples of the new sizes in the documentation
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (8)
- examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue (0 hunks)
- examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js (0 hunks)
- examples/sites/demos/pc/app/tag-group/tag-group-size.vue (0 hunks)
- examples/sites/demos/pc/app/tag/size-composition-api.vue (0 hunks)
- examples/sites/demos/pc/app/tag/size.spec.ts (0 hunks)
- examples/sites/demos/pc/app/tag/size.vue (0 hunks)
- examples/sites/demos/pc/app/tag/webdoc/tag.js (1 hunks)
- packages/theme/src/tag/vars.less (2 hunks)
💤 Files with no reviewable changes (6)
- examples/sites/demos/pc/app/tag-group/tag-group-size-composition-api.vue
- examples/sites/demos/pc/app/tag-group/tag-group-size.spec.js
- examples/sites/demos/pc/app/tag-group/tag-group-size.vue
- examples/sites/demos/pc/app/tag/size-composition-api.vue
- examples/sites/demos/pc/app/tag/size.spec.ts
- examples/sites/demos/pc/app/tag/size.vue
🔇 Additional comments (4)
examples/sites/demos/pc/app/tag/webdoc/tag.js (1)
72-73: LGTM, but this is a breaking change!
The description update correctly reflects the removal of the 'mini' size option. However, this is a breaking change that could affect existing applications using the 'mini' size. Consider:
- Adding a migration guide for users
- Documenting this in the changelog as a breaking change
- Ensuring proper semantic versioning bump (major version)
Let's verify the consistency of size options across the codebase:
✅ Verification successful
Based on the search results, I can now provide a final response regarding the tag size documentation:
Documentation correctly reflects available size options
The changes to the size documentation are accurate and consistent with the codebase:
- The original documentation mentioned
medium/small/minioptions - The updated documentation now only lists
medium/smallas available options - This aligns with the PR's objective of removing the 'mini' size option
- The change is consistently documented in both zh-CN and en-US translations
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for any remaining references to 'mini' size in tag-related files
# Test 1: Search for 'mini' size references in tag component files
echo "Checking for 'mini' size references in tag files..."
rg -i "(?:size.*mini|mini.*size)" --type vue --type js --type ts
# Test 2: Search for specific CSS classes or variables related to mini size
echo "Checking for mini-related CSS classes..."
rg -i "(?:--ti-tag.*mini|\.ti-tag.*mini)" --type css --type less
Length of output: 371
Script:
#!/bin/bash
# Let's try a different approach to search for 'mini' references
# Search for any mentions of 'mini' in relation to tags
echo "Searching for 'mini' in files containing 'tag'..."
rg -l "tag" | xargs rg -i "mini"
# Search specifically in the tag component directory
echo "Searching in component source files..."
fd "tag" --type f | xargs rg -i "size.*=.*['\"]mini['\"]|mini.*size"
# Look for size-related props in tag component
echo "Checking size prop definitions..."
ast-grep --pattern 'props: {
$$$
size: {
$$$
}
$$$
}'
Length of output: 610
Script:
#!/bin/bash
# Let's try simpler commands without piping
# Search for 'mini' in all files
echo "Searching for any 'mini' references..."
rg -i "mini"
# Search for size prop definitions
echo "Searching for size prop definitions..."
rg -i "size.*prop" -A 5 -B 5
# Search for tag component size documentation
echo "Searching for tag size documentation..."
rg -i "size.*medium.*small"
Length of output: 289597
packages/theme/src/tag/vars.less (3)
Line range hint 20-61: Breaking Changes Alert: Tag Size System Overhaul
This PR introduces significant breaking changes to the tag component's size system:
- Removal of mini size (with fallback to small)
- Reduction in small tag size dimensions
- Reduction in default tag size dimensions
These changes will affect:
- Visual appearance of all tags
- Layout calculations in existing applications
- Design system consistency
Let's check for proper documentation of these breaking changes:
#!/bin/bash
# Search for changelog and documentation files
fd -e md -e mdx "changelog|breaking|migration|upgrade"40-48: Significant visual changes to small tags
The small tag size has been made more compact with:
- Reduced horizontal padding (3px)
- Removed vertical padding (0)
- Smaller border radius (xs instead of sm)
- Smaller icon size (12px)
These changes will noticeably affect the appearance of existing small tags.
Let's check for any visual regression tests:
#!/bin/bash
# Search for visual regression tests for tag component
rg -l "tag.*test|test.*tag" --type spec
rg -l "tag.*snapshot|snapshot.*tag" --type spec20-22: Verify fallback behavior for mini size
The comment indicates that when users use "mini" size, it should fallback to "small" size. This is a breaking change that needs proper handling.
Let's verify the fallback implementation:
* fix(tag): remove mini size * fix(tag): update tag's demo, which is relate to size * fix(tag): fix api * fix(tag): fix
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
Release Notes
New Features
Bug Fixes
Documentation
Style