fix: Progress.Line strokeColor direction in rtl (#27515)

components/config-provider/context.tsx

@@ -8,6 +8,8 @@ export interface CSPConfig {
   nonce?: string;
 }
 
+export type DirectionType = 'ltr' | 'rtl' | undefined;
+
 export interface ConfigConsumerProps {
   getTargetContainer?: () => HTMLElement;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
@@ -23,7 +25,7 @@ export interface ConfigConsumerProps {
   pageHeader?: {
     ghost: boolean;
   };
-  direction?: 'ltr' | 'rtl';
+  direction?: DirectionType;
   space?: {
     size?: SizeType | number;
   };

components/config-provider/index.tsx

@@ -7,13 +7,26 @@ import { ValidateMessages } from 'rc-field-form/lib/interface';
 import { RenderEmptyHandler } from './renderEmpty';
 import LocaleProvider, { Locale, ANT_MARK } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import { ConfigConsumer, ConfigContext, CSPConfig, ConfigConsumerProps } from './context';
+import {
+  ConfigConsumer,
+  ConfigContext,
+  CSPConfig,
+  DirectionType,
+  ConfigConsumerProps,
+} from './context';
 import { SizeType, SizeContextProvider } from './SizeContext';
 import message from '../message';
 import notification from '../notification';
 import { RequiredMark } from '../form/Form';
 
-export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, ConfigConsumerProps };
+export {
+  RenderEmptyHandler,
+  ConfigContext,
+  ConfigConsumer,
+  CSPConfig,
+  DirectionType,
+  ConfigConsumerProps,
+};
 
 export const configConsumerProps = [
   'getTargetContainer',
@@ -47,7 +60,7 @@ export interface ConfigProviderProps {
     ghost: boolean;
   };
   componentSize?: SizeType;
-  direction?: 'ltr' | 'rtl';
+  direction?: DirectionType;
   space?: {
     size?: SizeType | number;
   };

components/progress/Line.tsx

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { presetPrimaryColors } from '@ant-design/colors';
 import { ProgressGradient, ProgressProps, StringGradients } from './progress';
 import { validProgress, getSuccessPercent } from './utils';
+import { DirectionType } from '../config-provider';
 
 interface LineProps extends ProgressProps {
   prefixCls: string;
+  direction?: DirectionType;
   children: React.ReactNode;
 }
 
@@ -47,11 +49,11 @@ export const sortGradient = (gradients: StringGradients) => {
  * And...
  * Besides women, there is the code.
  */
-export const handleGradient = (strokeColor: ProgressGradient) => {
+export const handleGradient = (strokeColor: ProgressGradient, directionConfig: DirectionType) => {
   const {
     from = presetPrimaryColors.blue,
     to = presetPrimaryColors.blue,
-    direction = 'to right',
+    direction = directionConfig === 'rtl' ? 'to left' : 'to right',
     ...rest
   } = strokeColor;
   if (Object.keys(rest).length !== 0) {
@@ -64,6 +66,7 @@ export const handleGradient = (strokeColor: ProgressGradient) => {
 const Line: React.FC<LineProps> = props => {
   const {
     prefixCls,
+    direction: directionConfig,
     percent,
     strokeWidth,
     size,
@@ -76,7 +79,7 @@ const Line: React.FC<LineProps> = props => {
 
   const backgroundProps =
     strokeColor && typeof strokeColor !== 'string'
-      ? handleGradient(strokeColor)
+      ? handleGradient(strokeColor, directionConfig)
       : {
           background: strokeColor,
         };

components/progress/progress.tsx

@@ -137,7 +137,7 @@ export default class Progress extends React.Component<ProgressProps> {
           {progressInfo}
         </Steps>
       ) : (
-        <Line {...this.props} prefixCls={prefixCls}>
+        <Line {...this.props} prefixCls={prefixCls} direction={direction}>
           {progressInfo}
         </Line>
       );