Skip to content

feat(tag): [tag] add round prop to support circular border radius #3846

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

feat(tag): [tag] add round prop to support circular border radius #3846

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
28b9556
feat(tag): [tag] add round prop to support circular border radius
IKEYCY Nov 26, 2025
5659acb
test(tag): fix round attribute e2e test
IKEYCY Nov 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions examples/sites/demos/apis/tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,18 @@ export default {
mode: ['pc', 'mobile-first'],
pcDemo: 'basic-usage',
mfDemo: ''
},
{
name: 'round',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否为圆角的模式',
'en-US': 'Whether it is a circular mode'
},
Comment on lines +183 to +186
Copy link

@coderabbitai coderabbitai bot Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Clarify the English description.

The English description "Whether it is a circular mode" is ambiguous. "Circular" suggests a circle shape, but round here refers to rounded corners (border-radius). The Chinese "圆角" correctly translates to "rounded corners."

Apply this diff to improve clarity:

           desc: {
             'zh-CN': '是否为圆角的模式',
-            'en-US': 'Whether it is a circular mode'
+            'en-US': 'Whether to enable rounded corners'
           },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
desc: {
'zh-CN': '是否为圆角的模式',
'en-US': 'Whether it is a circular mode'
},
desc: {
'zh-CN': '是否为圆角的模式',
'en-US': 'Whether to enable rounded corners'
},
🤖 Prompt for AI Agents 
In examples/sites/demos/apis/tag.js around lines 183 to 186, the English
description "Whether it is a circular mode" is ambiguous; replace it with a
clear phrase that matches the Chinese "圆角" meaning rounded corners (e.g.,
"Whether it has rounded corners" or "Enable rounded corners"). Update the
'en-US' value to the chosen clear phrasing and keep the existing 'zh-CN' value
unchanged.

mode: ['pc'],
pcDemo: 'round',
mfDemo: ''
}
],
events: [
Expand Down
33 changes: 33 additions & 0 deletions examples/sites/demos/pc/app/tag/round-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<template>
<div class="tag-round-demo">
<h4>Round 属性示例</h4>

<tiny-tag type="primary" round>圆角标签</tiny-tag>
<tiny-tag type="success" round>成功标签</tiny-tag>
<tiny-tag type="warning" round>警告标签</tiny-tag>
<tiny-tag type="danger" round>危险标签</tiny-tag>

<tiny-tag type="info" round only-icon>
<tiny-icon-heartempty />
</tiny-tag>
</div>
</template>

<script setup>
import { TinyTag } from '@opentiny/vue'
import { IconHeartempty } from '@opentiny/vue-icon'
const tinyIconHeartempty = IconHeartempty()
</script>
Comment on lines +16 to +21
Copy link

@coderabbitai coderabbitai bot Nov 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove unused variable or register the component properly.

The variable tinyIconHeartempty is initialized but never used. The template directly references <tiny-icon-heartempty /> without explicit component registration, which may rely on auto-registration behavior.

Consider one of these solutions:

Option 1: Remove the unused variable and import (if auto-registration works):

 <script setup>
 import { TinyTag } from '@opentiny/vue'
-import { IconHeartempty } from '@opentiny/vue-icon'
-
-const tinyIconHeartempty = IconHeartempty()
 </script>

Option 2: Register and use the component explicitly:

 <script setup>
 import { TinyTag } from '@opentiny/vue'
 import { IconHeartempty } from '@opentiny/vue-icon'
 
-const tinyIconHeartempty = IconHeartempty()
+const TinyIconHeartempty = IconHeartempty()
 </script>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<script setup>
import { TinyTag } from '@opentiny/vue'
import { IconHeartempty } from '@opentiny/vue-icon'
const tinyIconHeartempty = IconHeartempty()
</script>
<script setup>
import { TinyTag } from '@opentiny/vue'
</script>
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/tag/round-composition-api.vue around lines 16 to
21, the variable tinyIconHeartempty is created but never used while the template
expects a <tiny-icon-heartempty /> component; either remove the unused
IconHeartempty import and tinyIconHeartempty constant (if relying on
auto-registration) or explicitly register the component and use the variable
(e.g., register IconHeartempty as tiny-icon-heartempty in the component context
or expose tinyIconHeartempty for the template) so the template reference matches
a registered component.


<style scoped>
.tiny-tag {
margin-right: 12px;
margin-bottom: 12px;
}
h4 {
margin-bottom: 16px;
color: #333;
}
</style>
12 changes: 12 additions & 0 deletions examples/sites/demos/pc/app/tag/round.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { test, expect } from '@playwright/test'

test('圆角', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
Copy link

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Improve error handling for better debugging.

Using expect(exception).toBeNull() will fail the test but hide the actual error details. Consider logging the exception or letting it propagate naturally for clearer failure messages.

Apply this diff to improve error visibility:

-  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  page.on('pageerror', (exception) => {
+    throw new Error(`Unexpected page error: ${exception}`)
+  })

Or simply remove the handler to let errors fail the test naturally with full stack traces.

🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/tag/round.spec.ts around line 4 the
page.on('pageerror', (exception) => expect(exception).toBeNull()) handler
swallows useful error details by asserting null; replace it with either removing
the handler so errors propagate naturally, or change it to log/throw the
exception (e.g., console.error(exception) and rethrow or call
fail(String(exception))) so test failures include the actual error message and
stack trace for debugging.

await page.goto('tag#round')

const tags = page.locator('.all-demos-container').locator('.tiny-tag')
const count = await tags.count()

// 动态创建与元素数量相同的期望数组
await expect(tags).toHaveClass(Array(count).fill(/tiny-tag--round/))
Comment on lines +10 to +11
Copy link

@coderabbitai coderabbitai bot Nov 28, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Test will pass with zero tags, losing validation effectiveness.

The dynamic assertion Array(count).fill(/tiny-tag--round/) creates an empty array when count = 0, causing toHaveClass([]) to pass without validating anything. Additionally, the previous version verified the actual border-radius CSS property, which is no longer checked.

Apply this diff to add meaningful validation:

   const tags = page.locator('.all-demos-container').locator('.tiny-tag')
   const count = await tags.count()
 
+  // Ensure at least one round tag exists
+  expect(count).toBeGreaterThan(0)
+
   // 动态创建与元素数量相同的期望数组
   await expect(tags).toHaveClass(Array(count).fill(/tiny-tag--round/))
+
+  // Verify the first tag has the expected border-radius
+  await expect(tags.first()).toHaveCSS('border-radius', '9999px')

This ensures:

  1. At least one tag is present
  2. All tags have the tiny-tag--round class
  3. The border-radius CSS property is actually applied
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// 动态创建与元素数量相同的期望数组
await expect(tags).toHaveClass(Array(count).fill(/tiny-tag--round/))
const tags = page.locator('.all-demos-container').locator('.tiny-tag')
const count = await tags.count()
// Ensure at least one round tag exists
expect(count).toBeGreaterThan(0)
// 动态创建与元素数量相同的期望数组
await expect(tags).toHaveClass(Array(count).fill(/tiny-tag--round/))
// Verify the first tag has the expected border-radius
await expect(tags.first()).toHaveCSS('border-radius', '9999px')
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/tag/round.spec.ts around lines 10-11, the test
currently uses Array(count).fill(/tiny-tag--round/) which passes when count is 0
and no CSS is validated; change the assertions to first assert that tags.length
is greater than 0, then assert that every tag element has the "tiny-tag--round"
class (not just an empty-array class check), and finally check the computed
style on a tag (e.g., getComputedStyle or equivalent) to verify the
border-radius value matches the expected rounded value; implement these three
checks in place of the current single toHaveClass line.

})
39 changes: 39 additions & 0 deletions examples/sites/demos/pc/app/tag/round.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<div class="tag-round-demo">
<h4>Round 属性示例</h4>

<tiny-tag type="primary" :round="true">圆角标签</tiny-tag>
<tiny-tag type="success" :round="true">成功标签</tiny-tag>
<tiny-tag type="warning" :round="true">警告标签</tiny-tag>
<tiny-tag type="danger" :round="true">危险标签</tiny-tag>

<tiny-tag type="info" :round="true" :only-icon="true">
<template #default>
<icon-heartempty />
</template>
</tiny-tag>
</div>
</template>

<script>
import { Tag, Icon } from '@opentiny/vue'

export default {
components: {
TinyTag: Tag,
IconHeartempty: Icon.IconHeartempty
}
}
</script>

<style scoped>
.tiny-tag {
margin-right: 12px;
margin-bottom: 12px;
}

h4 {
margin-bottom: 16px;
color: #333;
}
</style>
24 changes: 24 additions & 0 deletions examples/sites/demos/pc/app/tag/webdoc/tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,30 @@ export default {
},
codeFiles: ['delete.vue']
},
{
demoId: 'round',
name: {
'zh-CN': '圆角',
'en-US': 'Round'
},
desc: {
'zh-CN': '通过 <code>round</code> 设置圆角。',
'en-US': 'Set the round through <code>round</code> .'
},
codeFiles: ['round.vue'],
api: {
props: {
round: {
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否为圆角的模式',
'en-US': 'Whether it is a round mode'
}
}
}
}
},
{
demoId: 'slot-default',
name: {
Expand Down
4 changes: 4 additions & 0 deletions packages/vue/src/tag/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ export const tagProps = {
type: [String, Number],
default: null
},
round: {
type: Boolean,
default: false
},
// mobile
mini: {
type: Boolean,
Expand Down
13 changes: 10 additions & 3 deletions packages/vue/src/tag/src/pc.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ export default defineComponent({
'value',
'beforeDelete',
'onlyIcon',
'maxWidth'
'maxWidth',
'round'
],
setup(props, context) {
return setup({ props, context, renderless, api, h }) as unknown as ITagApi
Expand All @@ -53,7 +54,8 @@ export default defineComponent({
state,
value,
onlyIcon,
maxWidth
maxWidth,
round
} = this

let styles = {}
Expand All @@ -65,7 +67,8 @@ export default defineComponent({
effect ? `tiny-tag--${effect}` : '',
hit && 'is-hit',
disabled ? 'is-disabled' : '',
onlyIcon ? 'tiny-tag--only-icon' : ''
onlyIcon ? 'tiny-tag--only-icon' : '',
round ? 'tiny-tag--round' : ''
]

if (color) {
Expand All @@ -82,6 +85,10 @@ export default defineComponent({
styles.maxWidth = maxWidth
}

if (round) {
styles.borderRadius = '9999px'
}

const tagElement =
value || (slots.default && slots.default()) ? (
<span data-tag="tiny-tag" class={classes} style={styles} onClick={handleClick}>
Expand Down