fix(badge): [badge] fixed the incorrect dot badge style for values #3009
Conversation
WalkthroughThis pull request updates both the Badge component tests and its rendering logic. In the test file, JSX syntax is refactored by replacing closing tags with self-closing tags in the content and default slot tests; the assignment of the Changes
Sequence Diagram(s)sequenceDiagram
participant C as Badge Component
participant T as Content Slot
C->>C: Evaluate state.href
alt state.href is false
C->>C: Check isDot flag
alt isDot is false
C->>T: Render state.content within <span>
else isDot is true
C->>T: Render dot indicator (omit state.content)
end
else
C->>C: Render as hyperlink (using state.href)
end
Suggested labels
Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
packages/vue/src/badge/__tests__/badge.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. packages/vue/src/badge/src/pc.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. ✨ 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 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| <slot name="content"> | ||
| <a v-if="state.href" :href="state.href" :target="target" rel="noopener noreferrer">{{ state.content }}</a> | ||
| <span class="tiny-badge__content-text" v-if="!state.href">{{ state.content }}</span> | ||
| <span class="tiny-badge__content-text" v-if="!state.href"> |
There was a problem hiding this comment.
Ensure that the isDot condition is correctly applied to prevent content text from displaying when isDot is true. This change addresses the issue with the dot badge style.
![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 (1)
packages/vue/src/badge/src/pc.vue (1)
29-33: Fixed the badge display logic for dot badges with values.This change correctly implements the requirement that dot badges should not display value content. By conditionally rendering the content only when
!isDotis true, the component now properly hides values when the badge is in dot mode, which aligns with the UX design pattern for dot badges.For better readability, consider using a v-else-if pattern instead of a nested template:
-<span class="tiny-badge__content-text" v-if="!state.href"> - <template v-if="!isDot"> - {{ state.content }} - </template> -</span> +<span class="tiny-badge__content-text" v-if="!state.href && !isDot"> + {{ state.content }} +</span>This simplifies the template structure while maintaining the same conditional rendering logic.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/vue/src/badge/__tests__/badge.test.tsx(4 hunks)packages/vue/src/badge/src/pc.vue(1 hunks)
🔇 Additional comments (6)
packages/vue/src/badge/__tests__/badge.test.tsx (6)
47-48: Improved JSX syntax with self-closing tags.The change from a full closing tag to a self-closing tag makes the JSX syntax more concise and is a standard approach for elements without children.
58-62: Enhanced code formatting with proper indentation.The updated formatting improves readability by properly nesting JSX elements with consistent indentation.
75-75: Consistent usage of self-closing tags.Similar to the earlier change, this improves JSX syntax consistency by using a self-closing tag for elements with no children.
98-98: Explicit prop assignment improves clarity.Setting
hidden: falseexplicitly rather than using a conditional expression improves code readability and makes the test intent clearer.
104-104: Direct boolean assignment is more readable.Changed from a potentially confusing conditional expression to a direct
hidden: trueassignment, which is clearer and more maintainable.
108-112: Added critical test case for the bugfix.This test directly addresses the bug being fixed - ensuring that a dot badge with a value doesn't display the value content. The test verifies two key aspects:
- The badge element exists when both
is-dotand a value are provided- The content text is empty as expected for dot badges
This test is essential for preventing regression and documenting the expected behavior.
2 participants
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?
https://opentiny.design/vue-playground?mode=pc&theme=os#3.21|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxuLy8g5byV5YWlIEBvcGVudGlueS92dWUg57uE5Lu2XG5pbXBvcnQgeyBCdXR0b24sIExpbmsgfSBmcm9tICdAb3BlbnRpbnkvdnVlJ1xuXG5leHBvcnQgZGVmYXVsdCB7XG4gIGNvbXBvbmVudHM6IHtcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXG4gICAgVGlueUxpbms6IExpbmtcbiAgfSxcbiAgZGF0YSgpIHtcbiAgICByZXR1cm4ge1xuICAgICAgbXNnOiAnaGVsbG8gd29ybGQhJ1xuICAgIH1cbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxuICA8aDE+e3sgbXNnIH19PC9oMT5cbiAgPGRpdiBjbGFzcz1cInRpbnl2dWVcIj5cbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XG4gICAgICB0aW55dnVlXG4gICAgICA8dGlueS1saW5rIHR5cGU9XCJzdWNjZXNzXCIgaHJlZj0naHR0cHM6Ly9naXRodWIuY29tL29wZW50aW55L3RpbnktdnVlJz5cbiAgICAgICAgdGlueXZ1ZVxuICAgICAgPC90aW55LWxpbms+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxuICBoMXtcbiAgICBjb2xvcjojNWU3Y2UwO1xuICB9XG4gIC50aW55dnVle1xuICAgIGZvbnQtc2l6ZTogMTh4cDtcbiAgICAmLXBhZ2V7XG4gICAgICBjb2xvcjojNWU3Y2UwO1xuICAgIH1cbiAgfVxuPC9zdHlsZT5cbiIsIiI6IntcImltcG9ydHNcIjp7XCJ2dWVcIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS92dWUvMy40LjI3L2ZpbGVzL2Rpc3QvdnVlLnJ1bnRpbWUuZXNtLWJyb3dzZXIuanNcIixcImVjaGFydHNcIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9lY2hhcnRzLzUuNC4xL2ZpbGVzL2Rpc3QvZWNoYXJ0cy5lc20uanNcIixcIkB2dWUvY29tcGlsZXItc2ZjXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQHZ1ZS9jb21waWxlci1zZmMvMy40LjI3L2ZpbGVzL2Rpc3QvY29tcGlsZXItc2ZjLmVzbS1icm93c2VyLmpzXCIsXCJAb3BlbnRpbnkvdnVlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMjEvZmlsZXMvZGlzdDMvdGlueS12dWUtcGMubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWljb25cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJ1bnRpbWUvMy4yMS9maWxlcy9kaXN0My90aW55LXZ1ZS1pY29uLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1sb2NhbGVcIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJ1bnRpbWUvMy4yMS9maWxlcy9kaXN0My90aW55LXZ1ZS1sb2NhbGUubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWNvbW1vblwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjIxL2ZpbGVzL2Rpc3QzL3RpbnktdnVlLWNvbW1vbi5tanNcIixcIkBvcGVudGlueS92dWUtZGlyZWN0aXZlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMjEvZmlsZXMvZGlzdDMvdGlueS12dWUtZGlyZWN0aXZlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS10aGVtZS9cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXRoZW1lLzMuMjEvZmlsZXMvXCIsXCJAb3BlbnRpbnkvdnVlLXRoZW1lLW1vYmlsZS9cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXRoZW1lLW1vYmlsZS8zLjIxL2ZpbGVzL1wiLFwiQG9wZW50aW55L3Z1ZS1yZW5kZXJsZXNzL1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcmVuZGVybGVzcy8zLjIxL2ZpbGVzL1wiLFwic29ydGFibGVqc1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL3NvcnRhYmxlanMvMS4xNS4wL2ZpbGVzL21vZHVsYXIvc29ydGFibGUuZXNtLmpzXCJ9fSIsInRzY29uZmlnLmpzb24iOiJ7XHJcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJhbGxvd0pzXCI6IHRydWUsXHJcbiAgICBcImNoZWNrSnNcIjogdHJ1ZSxcclxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcclxuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXHJcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxyXG4gICAgXCJhbGxvd0ltcG9ydGluZ1RzRXh0ZW5zaW9uc1wiOiB0cnVlXHJcbiAgfSxcclxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XHJcbiAgICBcInRhcmdldFwiOiAzLjNcclxuICB9XHJcbn1cclxuIiwiYmFzaWMtdXNhZ2UudnVlIjoiPHRlbXBsYXRlPlxuICA8dGlueS1iYWRnZSA6dmFsdWU9XCIyXCIgZGF0YT1cIuaIkeeahOW+heWKnlwiIGlzLWRvdD48L3RpbnktYmFkZ2U+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwPlxuaW1wb3J0IHsgVGlueUJhZGdlIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcbjwvc2NyaXB0PlxuIiwiX28iOnt9fQ==
Issue Number: #3005
What is the new behavior?
expected successfully
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit