diff --git a/README.md b/README.md index 2fa9834..4b3a400 100644 --- a/README.md +++ b/README.md @@ -83,16 +83,16 @@ export default () => ( Stroke color. - trailWidth + railWidth Number 1 - Width of the trail stroke. Unit is percentage of SVG canvas size. Trail is always centered relative to actual progress path. If trailWidth is not defined, it is the same as strokeWidth. + Width of the rail stroke. Unit is percentage of SVG canvas size. Rail is always centered relative to actual progress path. If railWidth is not defined, it is the same as strokeWidth. - trailColor + railColor String #D9D9D9 - Color for lighter trail stroke underneath the actual progress path. + Color for lighter rail stroke underneath the actual progress path. strokeLinecap diff --git a/docs/examples/gap.tsx b/docs/examples/gap.tsx index 45e8ac0..9ffa4ce 100644 --- a/docs/examples/gap.tsx +++ b/docs/examples/gap.tsx @@ -79,7 +79,7 @@ class Example extends React.Component { gapDegree={70} gapPosition="bottom" strokeWidth={6} - trailWidth={6} + railWidth={6} strokeLinecap="round" strokeColor={multiPercentageStrokeColors} /> diff --git a/src/Circle/index.tsx b/src/Circle/index.tsx index ff179e0..c421aef 100644 --- a/src/Circle/index.tsx +++ b/src/Circle/index.tsx @@ -20,10 +20,10 @@ const Circle: React.FC = (props) => { styles = {}, steps, strokeWidth, - trailWidth, + railWidth, gapDegree = 0, gapPosition, - trailColor, + railColor, strokeLinecap, style, className, @@ -68,7 +68,7 @@ const Circle: React.FC = (props) => { rotateDeg, gapDegree, gapPosition, - trailColor, + railColor, mergedStrokeLinecap, strokeWidth, ); @@ -129,7 +129,7 @@ const Circle: React.FC = (props) => { let stackPtg = 0; return new Array(stepCount).fill(null).map((_, index) => { - const color = index <= current - 1 ? strokeColorList[0] : trailColor; + const color = index <= current - 1 ? strokeColorList[0] : railColor; const stroke = color && typeof color === 'object' ? `url(#${gradientId})` : undefined; const circleStyleForStack = getCircleStyle( perimeter, @@ -181,13 +181,13 @@ const Circle: React.FC = (props) => { > {!stepCount && ( = (props) => { strokeLinecap, strokeWidth, style, - trailColor, - trailWidth, + railColor, + railWidth, transition, loading, ...restProps @@ -57,11 +57,11 @@ const Line: React.FC = (props) => { {...restProps} > {percentList.map((ptg, index) => { diff --git a/src/common.ts b/src/common.ts index 5d320fa..5da51ff 100644 --- a/src/common.ts +++ b/src/common.ts @@ -7,8 +7,8 @@ export const defaultProps: Partial = { strokeColor: '#2db7f5', strokeLinecap: 'round', strokeWidth: 1, - trailColor: '#D9D9D9', - trailWidth: 1, + railColor: '#D9D9D9', + railWidth: 1, gapPosition: 'bottom', loading: false, }; diff --git a/src/interface.ts b/src/interface.ts index 5dbe32d..a4eef68 100644 --- a/src/interface.ts +++ b/src/interface.ts @@ -3,13 +3,13 @@ export type SemanticName = 'root' | 'rail' | 'track'; export interface ProgressProps { id?: string; strokeWidth?: number; - trailWidth?: number; + railWidth?: number; className?: string; classNames?: Partial>; styles?: Partial>; percent?: number | number[]; strokeColor?: StrokeColorType; - trailColor?: string; + railColor?: string; strokeLinecap?: StrokeLinecapType; prefixCls?: string; style?: React.CSSProperties; diff --git a/tests/__snapshots__/conic.spec.tsx.snap b/tests/__snapshots__/conic.spec.tsx.snap index 0e474ea..cb685a3 100644 --- a/tests/__snapshots__/conic.spec.tsx.snap +++ b/tests/__snapshots__/conic.spec.tsx.snap @@ -8,7 +8,7 @@ exports[`Circle.conic gapDegree 1`] = ` viewBox="0 0 100 100" > { steps={steps} percent={percent} strokeColor="red" - trailColor="grey" + railColor="grey" strokeWidth={20} />, ); @@ -199,7 +199,7 @@ describe('Progress', () => { '0%': '#108ee9', '100%': '#87d068', }} - trailColor="grey" + railColor="grey" strokeWidth={20} />, ); @@ -215,7 +215,7 @@ describe('Progress', () => { gapDegree={60} percent={50} strokeColor="red" - trailColor="grey" + railColor="grey" strokeWidth={20} />, ); diff --git a/tests/semantic.spec.tsx b/tests/semantic.spec.tsx index 4429876..fac219b 100644 --- a/tests/semantic.spec.tsx +++ b/tests/semantic.spec.tsx @@ -26,7 +26,7 @@ describe('Semantic', () => { ); expect(container.querySelector('.rc-progress-circle')).toHaveClass(classNames.root); - expect(container.querySelector('.rc-progress-circle-trail')).toHaveClass(classNames.rail); + expect(container.querySelector('.rc-progress-circle-rail')).toHaveClass(classNames.rail); expect(container.querySelector('.rc-progress-circle-path')).toHaveClass(classNames.track); expect(container.querySelector('.my-root')).toHaveStyle(styles.root);