fix(Progress): 修改CircleProgress的样式问题 (#2156)

* fix: 环形进度条实现自定义模式 * fix: 修改CircleProgress的颜色问题 * fix: 更新storybook
growingio · Jun 8, 2023 · 4cf3ef0 · 4cf3ef0 · vercel · Jun 8, 2023
1 parent 7bd8558
commit 4cf3ef0
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/progress/ProgressCircle.tsx b/src/progress/ProgressCircle.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { usePrefixCls } from '@gio-design/utils';
+import classNames from 'classnames';
 import { ProgressProps } from './interface';
 
 const sizeMapping = {
@@ -35,7 +36,12 @@ const ProgressCircle: React.FC<ProgressProps> = ({
   const perimeter = Math.PI * r * 2;
   const strokeDashOffset = perimeter - (perimeter * 75) / 100;
   return (
-    <div data-testid="progress" className={`${prefixCls} ${prefixCls}-${status}`} style={style} {...rest}>
+    <div
+      data-testid="progress"
+      className={classNames(prefixCls, { [`${prefixCls}-${status}`]: !strokeColor })}
+      style={style}
+      {...rest}
+    >
       <svg width={width} height={width} viewBox={`${-width / 2} ${-width / 2} ${width} ${width}`}>
         <circle
           cx="0"

diff --git a/src/progress/demos/Progress.stories.tsx b/src/progress/demos/Progress.stories.tsx
@@ -93,8 +93,9 @@ export const Circle: Story<ProgressProps> = () => (
       circleWidth={200}
       strokeWidth={10}
       strokeLinecap="butt"
-      strokeColor="#11123f"
+      strokeColor="#00123f"
       trailColor="#ddd"
+      showText // default
     />
   </>
 );