Skip to content

fix(icon): [icon] added the content of the show-title example #2390

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

Merged
merged 2 commits into from
Oct 25, 2024
Merged

fix(icon): [icon] added the content of the show-title example #2390

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
22607a6
fix(icon): added the content of the show-title example and improved s…
shenjunjian Oct 25, 2024
dc82f3d
fix(icon): fix
shenjunjian Oct 25, 2024
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
13 changes: 10 additions & 3 deletions examples/sites/demos/pc/app/icon/show-title-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<template>
<div title="复制" class="icon-demo">
<tiny-icon-copy></tiny-icon-copy>
<div class="icon-demo">
<div title="可见提示">
<tiny-icon-copy></tiny-icon-copy>
</div>

<tiny-icon-copy title="不可见提示"></tiny-icon-copy>
</div>
</template>

Expand All @@ -11,8 +15,11 @@ const TinyIconCopy = iconCopy()
</script>

<style scoped>
.icon-demo {
display: flex;
}
.icon-demo .tiny-svg {
margin: 20px 83px;
margin: 20px 40px;
font-size: 24px;
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/icon/show-title.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@ test('显示title', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('icon#show-title')

await expect(page.getByTitle('复制')).toHaveCount(1)
await expect(page.getByTitle('可见提示')).toHaveCount(1)
})
15 changes: 11 additions & 4 deletions examples/sites/demos/pc/app/icon/show-title.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<template>
<div title="复制" class="icon-demo">
<icon-copy></icon-copy>
<div class="icon-demo">
<div title="可见提示">
<tiny-icon-copy></tiny-icon-copy>
</div>

<tiny-icon-copy title="不可见提示"></tiny-icon-copy>
Comment on lines +2 to +7
Copy link

@coderabbitai coderabbitai bot Oct 25, 2024

Choose a reason for hiding this comment

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

⚠️ Potential issue

Improve consistency and accessibility of icon implementations.

There are several concerns with the current implementation:

  1. Inconsistent title implementation: one uses a wrapper div with title, another uses direct title attribute
  2. Missing ARIA labels for better accessibility
  3. Component naming inconsistency between import (IconCopy) and usage (tiny-icon-copy)

Consider applying these improvements:

 <div class="icon-demo">
-    <div title="可见提示">
-      <tiny-icon-copy></tiny-icon-copy>
-    </div>
-
-    <tiny-icon-copy title="不可见提示"></tiny-icon-copy>
+    <tiny-icon-copy
+      title="可见提示"
+      aria-label="可见提示"
+    ></tiny-icon-copy>
+
+    <tiny-icon-copy
+      title="不可见提示"
+      aria-label="不可见提示"
+    ></tiny-icon-copy>
 </div>
📝 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
<div class="icon-demo">
<div title="可见提示">
<tiny-icon-copy></tiny-icon-copy>
</div>
<tiny-icon-copy title="不可见提示"></tiny-icon-copy>
<div class="icon-demo">
<tiny-icon-copy
title="可见提示"
aria-label="可见提示"
></tiny-icon-copy>
<tiny-icon-copy
title="不可见提示"
aria-label="不可见提示"
></tiny-icon-copy>
</div>

</div>
</template>

Expand All @@ -9,14 +13,17 @@ import { IconCopy } from '@opentiny/vue-icon'

export default {
components: {
IconCopy: IconCopy()
TinyIconCopy: IconCopy()
}
}
</script>

<style scoped>
.icon-demo {
display: flex;
}
.icon-demo .tiny-svg {
margin: 20px 83px;
margin: 20px 40px;
font-size: 24px;
}
</style>
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/icon/webdoc/icon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default {
},
desc: {
'zh-CN':
'图标组件自身上指定 <code>title</code> 属性无效，需要通过给其父元素的 <code>title</code> 属性实现提示功能。',
'图标组件自身上指定 <code>title</code> 属性无效，需要通过其父元素的 <code>title</code> 属性实现提示功能。',
'en-US':
'The <code>title</code> attribute specified on the icon component is invalid. You need to give the <code>title</code> attribute of its parent element to realize the prompt function.'
},
Expand Down
2 changes: 1 addition & 1 deletion packages/theme/build/release.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ let cssStr = fs.readFileSync(path.resolve(root, 'dist/old-theme-index.css'), 'ut

jsStr = jsStr.replace('#CSS#', cssStr)
fs.writeFileSync(path.resolve(root, 'src/old-theme-index.js'), jsStr) // 供开发时(pnpm site)， 可以访问到最新的定制主题变量
fs.writeFileSync(path.resolve(root, 'dist/old-theme-index.js'), jsStr)
fs.writeFileSync(path.resolve(root, 'dist/old-theme-index.js'), jsStr) // 打包发布用

// 3、复制 package.json
const content = fs.readFileSync(path.resolve(root, 'package.json'), 'utf8')
Expand Down
4 changes: 2 additions & 2 deletions packages/theme/src/button/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
// 圆形时按钮圆角
--tv-Button-border-radius-circle: var(--tv-border-radius-round); // 50% 会造成椭圆，此次common变量用 999px代替

//------------------------------------------------------ 场景2、尺寸 height, font-size,padding-x,min-width----
//--------------------------------------------------- 场景2、尺寸 height, font-size,padding-x,min-width,仅图标时的 icon-size
// 默认时按钮字号
--tv-Button-font-size: var(--tv-font-size-md);
// 默认时按钮高度
Expand Down Expand Up @@ -78,7 +78,7 @@
// 超小按钮内图标的大小
--tv-Button-size-icon-font-size-mini: 12px;

//------------------------------------------------------ 场景3、颜色 text-color bg-color border-color icon-color----
//------------------------------------------------------ 场景3、颜色 text-color bg-color border-color icon-color
//------ 状态： 默认+primary+4主题 ghost plain (hover active) disabled
// 1、ghost中只影响 bg 2、active 只影响（主题+plain) 3、 disabled 优先级高过 （主题+plain+激活)

Expand Down
Loading