Skip to content
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

fix(docs): [progress] The document is modified to meet the requirements of the new specifications. #2306

Merged
merged 1 commit into from
Oct 19, 2024
Merged

fix(docs): [progress] The document is modified to meet the requirements of the new specifications. #2306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<br />
<tiny-progress class="progress-first" :stroke-width="4" :percentage="percentage"></tiny-progress>
<br />
<tiny-progress class="progress-second" :stroke-width="24" :percentage="percentage"></tiny-progress>
<tiny-progress class="progress-second" :stroke-width="12" :percentage="percentage"></tiny-progress>
<div class="tip" v-if="percentage !== 100">努力加载中，请稍后...</div>
</div>
</template>
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/progress/basic-usage.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ test('基础用法，是否可动态控制进度条', async ({ page }) => {
await expect(progress1).toBeVisible()
await expect(progress2).toBeVisible()
await expect(progress1).toHaveCSS('height', '4px')
await expect(progress2).toHaveCSS('height', '24px')
await expect(progress2).toHaveCSS('height', '12px')
await expect(progress1).toHaveCSS('border-radius', '2px')
await expect(progress2).toHaveCSS('border-radius', '12px')
await expect(progress2).toHaveCSS('border-radius', '6px')
await expect(page.getByText('90%')).toHaveCount(2)
await expect(page.getByText('努力加载中，请稍后...')).toBeVisible()

Expand Down
2 changes: 1 addition & 1 deletion examples/sites/demos/pc/app/progress/basic-usage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<br />
<tiny-progress class="progress-first" :stroke-width="4" :percentage="percentage"></tiny-progress>
<br />
<tiny-progress class="progress-second" :stroke-width="24" :percentage="percentage"></tiny-progress>
<tiny-progress class="progress-second" :stroke-width="12" :percentage="percentage"></tiny-progress>
<div class="tip" v-if="percentage !== 100">努力加载中，请稍后...</div>
</div>
</template>
Expand Down
12 changes: 9 additions & 3 deletions examples/sites/demos/pc/app/progress/custom-color-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div>
<tiny-button @click="add" class="mb10"> 点击增加改变颜色 </tiny-button>
<tiny-progress :percentage="value" :color="customColor" :stroke-width="24"></tiny-progress>
<tiny-progress :percentage="value" :color="customColor" :stroke-width="12"></tiny-progress>
<br />
<tiny-progress :percentage="value" :color="customColorMethod" :stroke-width="24"></tiny-progress>
<tiny-progress :percentage="value" :color="customColorMethod" :stroke-width="12"></tiny-progress>
<br />
<tiny-progress :percentage="value" :color="customColors" :stroke-width="24"></tiny-progress>
<tiny-progress :percentage="value" :color="customColors" :stroke-width="12"></tiny-progress>
</div>
</template>

Expand Down Expand Up @@ -42,3 +42,9 @@ function customColorMethod(percentage) {
}
}
</script>

<style scoped>
.tiny-progress :deep(.tiny-progress__text) {
font-size: 14px !important;
}
</style>
12 changes: 9 additions & 3 deletions examples/sites/demos/pc/app/progress/custom-color.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<template>
<div>
<tiny-button @click="add" class="mb10"> 点击增加改变颜色 </tiny-button>
<tiny-progress :percentage="value" :color="customColor" :stroke-width="24"></tiny-progress>
<tiny-progress :percentage="value" :color="customColor" :stroke-width="12"></tiny-progress>
<br />
<tiny-progress :percentage="value" :color="customColorMethod" :stroke-width="24"></tiny-progress>
<tiny-progress :percentage="value" :color="customColorMethod" :stroke-width="12"></tiny-progress>
<br />
<tiny-progress :percentage="value" :color="customColors" :stroke-width="24"></tiny-progress>
<tiny-progress :percentage="value" :color="customColors" :stroke-width="12"></tiny-progress>
</div>
</template>

Expand Down Expand Up @@ -51,3 +51,9 @@ export default {
}
}
</script>

<style scoped>
.tiny-progress :deep(.tiny-progress__text) {
font-size: 14px !important;
}
</style>
11 changes: 7 additions & 4 deletions examples/sites/demos/pc/app/progress/custom-status-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
type="line"
:percentage="percentage"
status="exception"
:stroke-width="24"
:stroke-width="12"
></tiny-progress>
<div class="tiny-progress-demo-status">
<tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
Expand All @@ -32,7 +32,7 @@
<div class="tiny-progress-content-des-on" @click="cancel">取消</div>
</div>
</div>
<tiny-progress class="progress" type="line" :percentage="percentage1" :stroke-width="24"></tiny-progress>
<tiny-progress class="progress" type="line" :percentage="percentage1" :stroke-width="12"></tiny-progress>
</div>
</div>
</div>
Expand All @@ -49,7 +49,7 @@
type="line"
:percentage="percentage2"
status="exception"
:stroke-width="24"
:stroke-width="12"
></tiny-progress>
<div class="tiny-progress-demo-status">
<tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
Expand All @@ -73,7 +73,7 @@
type="line"
:percentage="percentage3"
status="success"
:stroke-width="24"
:stroke-width="12"
></tiny-progress>
<div class="tiny-progress-demo-status">
<tiny-icon-successfull class="tiny-progress-demo-status-icon"></tiny-icon-successfull>
Expand Down Expand Up @@ -143,6 +143,9 @@ onMounted(() => {
</script>

<style lang="less" scoped>
.tiny-progress :deep(.tiny-progress__text) {
font-size: 14px !important;
}
.error {
.tiny-progress-demo {
display: flex;
Expand Down
11 changes: 7 additions & 4 deletions examples/sites/demos/pc/app/progress/custom-status.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
type="line"
:percentage="percentage"
status="exception"
:stroke-width="24"
:stroke-width="12"
></tiny-progress>
<div class="tiny-progress-demo-status">
<tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
Expand All @@ -32,7 +32,7 @@
<div class="tiny-progress-content-des-on" @click="cancel">取消</div>
</div>
</div>
<tiny-progress class="progress" type="line" :percentage="percentage1" :stroke-width="24"></tiny-progress>
<tiny-progress class="progress" type="line" :percentage="percentage1" :stroke-width="12"></tiny-progress>
</div>
</div>
</div>
Expand All @@ -49,7 +49,7 @@
type="line"
:percentage="percentage2"
status="exception"
:stroke-width="24"
:stroke-width="12"
></tiny-progress>
<div class="tiny-progress-demo-status">
<tiny-icon-operationfaild-l class="tiny-progress-demo-status-icon"></tiny-icon-operationfaild-l>
Expand All @@ -73,7 +73,7 @@
type="line"
:percentage="percentage3"
status="success"
:stroke-width="24"
:stroke-width="12"
></tiny-progress>
<div class="tiny-progress-demo-status">
<tiny-icon-successfull class="tiny-progress-demo-status-icon"></tiny-icon-successfull>
Expand Down Expand Up @@ -146,6 +146,9 @@ export default {
</script>

<style lang="less" scoped>
.tiny-progress :deep(.tiny-progress__text) {
font-size: 14px !important;
}
.error {
.tiny-progress-demo {
display: flex;
Expand Down
5 changes: 4 additions & 1 deletion examples/sites/demos/pc/app/progress/format-text-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<tiny-progress
class="progress"
:show-text="showTest"
:stroke-width="24"
:stroke-width="12"
:format="formatText"
:text-inside="testInside"
:percentage="percentageText"
Expand All @@ -36,4 +36,7 @@ function formatText() {
display: inline-block;
width: 70%;
}
.tiny-progress :deep(.tiny-progress__text) {
font-size: 14px !important;
}
</style>
5 changes: 4 additions & 1 deletion examples/sites/demos/pc/app/progress/format-text.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<tiny-progress
class="progress"
:show-text="showTest"
:stroke-width="24"
:stroke-width="12"
:format="formatText"
:text-inside="testInside"
:percentage="percentageText"
Expand Down Expand Up @@ -46,4 +46,7 @@ export default {
display: inline-block;
width: 70%;
}
.tiny-progress :deep(.tiny-progress__text) {
font-size: 14px !important;
}
</style>
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/progress/progress-status-composition-api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,23 @@
<tiny-progress
class="progress"
:text-inside="textInside"
:stroke-width="24"
:stroke-width="12"
:percentage="100"
status="success"
></tiny-progress>
<br />
<tiny-progress
class="progress"
:text-inside="textInside"
:stroke-width="22"
:stroke-width="12"
:percentage="80"
status="warning"
></tiny-progress>
<br />
<tiny-progress
class="progress"
:text-inside="textInside"
:stroke-width="20"
:stroke-width="12"
:percentage="50"
status="exception"
></tiny-progress>
Expand Down
4 changes: 2 additions & 2 deletions examples/sites/demos/pc/app/progress/progress-status.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ test('三种状态是否正常显示', async ({ page }) => {
await expect(icons).toHaveCount(3)
for (let i = 0; i < 3; i++) {
const { width, height } = await icons.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(20)
await expect(height).toBeGreaterThanOrEqual(20)
await expect(width).toBeGreaterThanOrEqual(16)
await expect(height).toBeGreaterThanOrEqual(16)
}
await button.click()
await expect(success).toHaveAttribute('aria-valuenow', '100')
Expand Down
6 changes: 3 additions & 3 deletions examples/sites/demos/pc/app/progress/progress-status.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,23 @@
<tiny-progress
class="progress"
:text-inside="textInside"
:stroke-width="24"
:stroke-width="12"
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

Inconsistent stroke-width values detected in progress components

Some <tiny-progress> components still use a different stroke-width value:

  • examples/sites/demos/pc/app/progress/basic-usage.vue: :stroke-width="4"
  • examples/sites/demos/pc/app/progress/basic-usage-composition-api.vue: :stroke-width="4"

Please ensure all progress components are updated to use a stroke-width of 12 for consistency.

🔗 Analysis chain

Standardization of stroke-width across progress bars

The stroke-width property has been uniformly set to 12 for all three <tiny-progress> components. This change promotes consistency in the appearance of progress bars within this component.

However, consider the following points:

  1. Ensure this change aligns with the overall design system and doesn't negatively impact the visual hierarchy.
  2. Verify if this change should be applied globally to all progress bars in the application for consistency.
  3. Consider adding a comment explaining the rationale behind choosing 12 as the standard width.

To ensure consistency across the codebase, let's check for other occurrences of stroke-width in progress components:

Also applies to: 20-20, 28-28

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for other occurrences of stroke-width in progress components
# Expected result: All progress components should use a stroke-width of 12

rg --type vue 'stroke-width' examples/sites/demos/pc/app/progress

Length of output: 93

Script:

#!/bin/bash
# Description: Search for other occurrences of stroke-width in .vue progress components
# Expected result: All progress components should use a stroke-width of 12

rg 'stroke-width' -g "*.vue" examples/sites/demos/pc/app/progress

Length of output: 3333

:percentage="100"
status="success"
></tiny-progress>
<br />
<tiny-progress
class="progress"
:text-inside="textInside"
:stroke-width="22"
:stroke-width="12"
:percentage="80"
status="warning"
></tiny-progress>
<br />
<tiny-progress
class="progress"
:text-inside="textInside"
:stroke-width="20"
:stroke-width="12"
:percentage="50"
status="exception"
></tiny-progress>
Expand Down
Loading