fix(comp:progress): trailColor not work

IDuxFE · Dec 8, 2022 · b63b954 · b63b954
1 parent 6eeffb8
commit b63b954
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/packages/components/progress/__tests__/__snapshots__/progress.spec.ts.snap b/packages/components/progress/__tests__/__snapshots__/progress.spec.ts.snap
@@ -3,7 +3,7 @@
 exports[`Progress > gapPosition work 1`] = `
 "<div class=\\"ix-progress-circle ix-progress ix-progress-normal\\" style=\\"width: 132px; height: 132px; font-size: 25.8px;\\"><svg viewBox=\\"0 0 100 100\\">
     <!---->
-    <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"#f5f5f5\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m 0,47
+    <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"red\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m 0,47
        a 47,47 0 1 1 0,-94
        a 47,47 0 1 1 0,94\\"></path>
     <path class=\\"ix-progress-circle-path ix-progress-circle-bg\\" style=\\"transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s; stroke-dasharray: 110.15485471872029px 295.3097094374406px; stroke-dashoffset: -37.5px;\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m 0,47
@@ -17,7 +17,7 @@ exports[`Progress > gapPosition work 1`] = `
 exports[`Progress > gapPosition work 2`] = `
 "<div class=\\"ix-progress-circle ix-progress ix-progress-normal\\" style=\\"width: 132px; height: 132px; font-size: 25.8px;\\"><svg viewBox=\\"0 0 100 100\\">
     <!---->
-    <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"#f5f5f5\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m -47,0
+    <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"red\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m -47,0
        a 47,47 0 1 1 94,0
        a 47,47 0 1 1 -94,0\\"></path>
     <path class=\\"ix-progress-circle-path ix-progress-circle-bg\\" style=\\"transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s; stroke-dasharray: 110.15485471872029px 295.3097094374406px; stroke-dashoffset: -37.5px;\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m -47,0
@@ -31,7 +31,7 @@ exports[`Progress > gapPosition work 2`] = `
 exports[`Progress > gapPosition work 3`] = `
 "<div class=\\"ix-progress-circle ix-progress ix-progress-normal\\" style=\\"width: 132px; height: 132px; font-size: 25.8px;\\"><svg viewBox=\\"0 0 100 100\\">
     <!---->
-    <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"#f5f5f5\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m 47,0
+    <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"red\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m 47,0
        a 47,47 0 1 1 -94,0
        a 47,47 0 1 1 94,0\\"></path>
     <path class=\\"ix-progress-circle-path ix-progress-circle-bg\\" style=\\"transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s; stroke-dasharray: 110.15485471872029px 295.3097094374406px; stroke-dashoffset: -37.5px;\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"6\\" d=\\"M 50,50 m 47,0
@@ -152,7 +152,7 @@ exports[`Progress > strokeColor work 4`] = `
 exports[`Progress > trailColor work 1`] = `
 "<div class=\\"ix-progress-line ix-progress-line-md ix-progress-line-round ix-progress ix-progress-normal\\">
   <div class=\\"ix-progress-line-outer\\">
-    <div class=\\"ix-progress-line-inner\\">
+    <div class=\\"ix-progress-line-inner\\" style=\\"background: red;\\">
       <!---->
       <div class=\\"ix-progress-line-bg\\" style=\\"width: 50%;\\"></div>
     </div>

diff --git a/packages/components/progress/demo/Segment.vue b/packages/components/progress/demo/Segment.vue
@@ -1,10 +1,10 @@
 <template>
   <div>
     <IxTooltip title="3 done / 3 in progress / 4 to do">
-      <IxProgress :percent="60" :success="{ percent: 30 }" />
+      <IxProgress :percent="60" :success="{ percent: 30, strokeColor: 'green' }" />
     </IxTooltip>
     <IxTooltip title="3 done / 3 in progress / 4 to do">
-      <IxProgress :percent="60" :success="{ percent: 30 }" type="circle" />
+      <IxProgress :percent="60" :success="{ percent: 30, strokeColor: 'green' }" type="circle" />
     </IxTooltip>
     <IxTooltip title="3 done / 3 in progress / 4 to do">
       <IxProgress :percent="60" :success="{ percent: 30, strokeColor: 'red' }" type="dashboard" />

diff --git a/packages/components/progress/src/Circle.tsx b/packages/components/progress/src/Circle.tsx
@@ -63,7 +63,7 @@ export default defineComponent({
     const strokePath = useCirclePath(calcSharedProperties, computedProps.value, percent, formattedSuccess)
 
     const trailPathAttr = computed(() => ({
-      stroke: '#f5f5f5',
+      stroke: computedProps.value.trailColor ?? '#f5f5f5',
       'fill-opacity': '0',
       'stroke-linecap': computedProps.value.strokeLinecap,
       'stroke-width': strokeWidth.value,

diff --git a/packages/components/progress/src/Line.tsx b/packages/components/progress/src/Line.tsx
@@ -31,6 +31,9 @@ export default defineComponent({
         [`${prefixCls}-round`]: computedProps.value.strokeLinecap === 'round',
       }
     })
+    const innerStyle = computed(() => ({
+      background: computedProps.value.trailColor ?? '',
+    }))
     const successStyle = computed(() => ({
       height: computedProps.value.strokeWidth && `${computedProps.value.strokeWidth}px`,
       width: `${formattedSuccess.value.percent ?? 0}%`,
@@ -50,7 +53,7 @@ export default defineComponent({
       return (
         <div ref={elementRef} class={lineClasses.value}>
           <div class={`${prefixCls}-outer`}>
-            <div class={`${prefixCls}-inner`}>
+            <div class={`${prefixCls}-inner`} style={innerStyle.value}>
               {computedProps.value.success?.percent && (
                 <div class={`${prefixCls}-success-bg`} style={successStyle.value}></div>
               )}