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:progress-style #936

Merged
merged 4 commits into from
May 31, 2022
Merged

fix:progress-style #936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e0ce468
fix:progress-style
Isabella327 May 31, 2022
4150255
fix:progress-style-new
Isabella327 May 31, 2022
903fb9c
fix:progress-style-style
Isabella327 May 31, 2022
1e7e7cf
test(progress): update-snap
Isabella327 May 31, 2022
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
6 changes: 5 additions & 1 deletion src/progress/progress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@ export default Vue.extend({
},
trackBgStyle(): Styles {
const { strokeWidth } = this;
const height = typeof strokeWidth === 'string' ? strokeWidth : `${strokeWidth}px`;
let height = typeof strokeWidth === 'string' ? strokeWidth : `${strokeWidth}px`;
const Plump = PRO_THEME.PLUMP;
if (this.theme === Plump) {
height = '';
}
return {
height,
backgroundColor: this.trackColor,
Expand Down
26 changes: 13 additions & 13 deletions test/ssr/__snapshots__/ssr.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10615,7 +10615,7 @@ exports[`ssr snapshot test renders ./examples/progress/demos/custom.vue correctl
<div class="t-progress-domo-margin">
<div>自定义颜色</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:30%;background:linear-gradient(to right, #7B7BE0 0%,#6392F7 100%);">
<div class="t-progress__info">30%</div>
</div>
Expand Down Expand Up @@ -10725,15 +10725,15 @@ exports[`ssr snapshot test renders ./examples/progress/demos/line.vue correctly
<div>
<div class="t-progress-domo-margin">默认样式</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:30%;background:;">
<div class="t-progress__info">30%</div>
</div>
</div>
</div>
<div class="t-progress-domo-margin">进度0-10%时数字数字位置出现在目前进度的右边区域</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--under-ten" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--under-ten" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:5%;background:;"></div>
<div class="t-progress__info">5%</div>
</div>
Expand All @@ -10747,54 +10747,54 @@ exports[`ssr snapshot test renders ./examples/progress/demos/plump.vue correctly
<div>
<div class="t-progress-domo-margin">默认样式</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:30%;background:;">
<div class="t-progress__info">30%</div>
</div>
</div>
</div>
<div class="t-progress-domo-margin">进度0-10%时数字数字位置出现在目前进度的右边区域</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--under-ten" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--under-ten" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:5%;background:;"></div>
<div class="t-progress__info">5%</div>
</div>
</div>
<div class="t-progress-domo-margin">100%</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:100%;background:;">
<div class="t-progress__info">100%</div>
</div>
</div>
</div>
<div class="t-progress-domo-margin">进度完成</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:30%;background:;">
<div class="t-progress__info">30%</div>
</div>
</div>
</div>
<div class="t-progress-domo-margin">进度状态发生重大错误</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:30%;background:;">
<div class="t-progress__info">30%</div>
</div>
</div>
</div>
<div class="t-progress-domo-margin">进度被中断</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:30%;background:;">
<div class="t-progress__info">30%</div>
</div>
</div>
</div>
<div class="t-progress-domo-margin">渐变色</div>
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--active" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--active" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:30%;background:linear-gradient(to right, #0052D9, #00A870);">
<div class="t-progress__info">30%</div>
</div>
Expand Down Expand Up @@ -10894,7 +10894,7 @@ exports[`ssr snapshot test renders ./examples/progress/demos/status.vue correctl
</div>
</div>
<div class="t-progress-domo-margin t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:80%;background:;">
<div class="t-progress__info">80%</div>
</div>
Expand Down Expand Up @@ -10924,7 +10924,7 @@ exports[`ssr snapshot test renders ./examples/progress/demos/status.vue correctl
</div>
</div>
<div class="t-progress-domo-margin t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:80%;background:;">
<div class="t-progress__info">80%</div>
</div>
Expand Down Expand Up @@ -10954,7 +10954,7 @@ exports[`ssr snapshot test renders ./examples/progress/demos/status.vue correctl
</div>
</div>
<div class="t-progress-domo-margin t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning" style="height:undefinedpx;background-color:;border-radius:undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning" style="height:;background-color:;border-radius:;">
<div class="t-progress__inner" style="width:80%;background:;">
<div class="t-progress__info">80%</div>
</div>
Expand Down
13 changes: 0 additions & 13 deletions test/unit/progress/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -674,7 +674,6 @@ exports[`Progress Progress customVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand Down Expand Up @@ -1045,7 +1044,6 @@ exports[`Progress Progress lineVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand All @@ -1071,7 +1069,6 @@ exports[`Progress Progress lineVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--under-ten"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand Down Expand Up @@ -1102,7 +1099,6 @@ exports[`Progress Progress plumpVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand All @@ -1128,7 +1124,6 @@ exports[`Progress Progress plumpVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--under-ten"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand All @@ -1153,7 +1148,6 @@ exports[`Progress Progress plumpVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand All @@ -1179,7 +1173,6 @@ exports[`Progress Progress plumpVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand All @@ -1205,7 +1198,6 @@ exports[`Progress Progress plumpVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand All @@ -1231,7 +1223,6 @@ exports[`Progress Progress plumpVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand All @@ -1257,7 +1248,6 @@ exports[`Progress Progress plumpVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--active"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand Down Expand Up @@ -1648,7 +1638,6 @@ exports[`Progress Progress statusVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--success"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand Down Expand Up @@ -1762,7 +1751,6 @@ exports[`Progress Progress statusVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--error"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand Down Expand Up @@ -1876,7 +1864,6 @@ exports[`Progress Progress statusVue demo works fine 1`] = `
>
<div
class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status--warning"
style="border-radius: undefinedpx;"
>
<div
class="t-progress__inner"
Expand Down
8 changes: 4 additions & 4 deletions test/unit/progress/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ exports[`Progress :props :theme :theme line and plump progress have t-progress__

exports[`Progress :props :theme :theme line and plump progress have t-progress__inner class 2`] = `
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--under-ten" style="border-radius: undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--under-ten">
<div class="t-progress__inner" style="width: 0%;"></div>
<div class="t-progress__info">0%</div>
</div>
Expand All @@ -259,7 +259,7 @@ exports[`Progress :props :theme :theme line and plump progress have t-progress__

exports[`Progress :props :theme :theme line and plump progress have t-progress__inner class 3`] = `
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--under-ten" style="border-radius: undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--under-ten">
<div class="t-progress__inner" style="width: 10%;"></div>
<div class="t-progress__info">10%</div>
</div>
Expand All @@ -268,7 +268,7 @@ exports[`Progress :props :theme :theme line and plump progress have t-progress__

exports[`Progress :props :theme :theme line and plump progress have t-progress__inner class 4`] = `
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--over-ten" style="border-radius: undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--over-ten">
<div class="t-progress__inner" style="width: 11%;">
<div class="t-progress__info">11%</div>
</div>
Expand Down Expand Up @@ -299,7 +299,7 @@ exports[`Progress :props :theme :theme:line 1`] = `

exports[`Progress :props :theme :theme:plump 1`] = `
<div class="t-progress">
<div class="t-progress__bar t-progress--plump t-progress--under-ten" style="border-radius: undefinedpx;">
<div class="t-progress__bar t-progress--plump t-progress--under-ten">
<div class="t-progress__inner" style="width: 0%;"></div>
<div class="t-progress__info">0%</div>
</div>
Expand Down