feat: progress add inside and bottom text position

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -21792,196 +21792,189 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `
 exports[`ConfigProvider components Progress configProvider 1`] = `
 <div
   aria-valuenow="0"
-  class="config-progress config-progress-status-normal config-progress-line config-progress-show-info config-progress-default"
+  class="config-progress config-progress-status-normal config-progress-line config-progress-line-align-end config-progress-line-position-outer config-progress-show-info config-progress-default"
   role="progressbar"
 >
   <div
     class="config-progress-outer"
-    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
     >
       <div
-        class="config-progress-bg"
+        class="config-progress-bg config-progress-bg-outer"
         style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
+    <span
+      class="config-progress-text config-progress-text-outer config-progress-text-end"
+      title="0%"
+    >
+      0%
+    </span>
   </div>
-  <span
-    class="config-progress-text"
-    title="0%"
-  >
-    0%
-  </span>
 </div>
 `;
 
 exports[`ConfigProvider components Progress configProvider componentDisabled 1`] = `
 <div
   aria-valuenow="0"
-  class="config-progress config-progress-status-normal config-progress-line config-progress-show-info config-progress-default"
+  class="config-progress config-progress-status-normal config-progress-line config-progress-line-align-end config-progress-line-position-outer config-progress-show-info config-progress-default"
   role="progressbar"
 >
   <div
     class="config-progress-outer"
-    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
     >
       <div
-        class="config-progress-bg"
+        class="config-progress-bg config-progress-bg-outer"
         style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
+    <span
+      class="config-progress-text config-progress-text-outer config-progress-text-end"
+      title="0%"
+    >
+      0%
+    </span>
   </div>
-  <span
-    class="config-progress-text"
-    title="0%"
-  >
-    0%
-  </span>
 </div>
 `;
 
 exports[`ConfigProvider components Progress configProvider componentSize large 1`] = `
 <div
   aria-valuenow="0"
-  class="config-progress config-progress-status-normal config-progress-line config-progress-show-info config-progress-default"
+  class="config-progress config-progress-status-normal config-progress-line config-progress-line-align-end config-progress-line-position-outer config-progress-show-info config-progress-default"
   role="progressbar"
 >
   <div
     class="config-progress-outer"
-    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
     >
       <div
-        class="config-progress-bg"
+        class="config-progress-bg config-progress-bg-outer"
         style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
+    <span
+      class="config-progress-text config-progress-text-outer config-progress-text-end"
+      title="0%"
+    >
+      0%
+    </span>
   </div>
-  <span
-    class="config-progress-text"
-    title="0%"
-  >
-    0%
-  </span>
 </div>
 `;
 
 exports[`ConfigProvider components Progress configProvider componentSize middle 1`] = `
 <div
   aria-valuenow="0"
-  class="config-progress config-progress-status-normal config-progress-line config-progress-show-info config-progress-default"
+  class="config-progress config-progress-status-normal config-progress-line config-progress-line-align-end config-progress-line-position-outer config-progress-show-info config-progress-default"
   role="progressbar"
 >
   <div
     class="config-progress-outer"
-    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
     >
       <div
-        class="config-progress-bg"
+        class="config-progress-bg config-progress-bg-outer"
         style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
+    <span
+      class="config-progress-text config-progress-text-outer config-progress-text-end"
+      title="0%"
+    >
+      0%
+    </span>
   </div>
-  <span
-    class="config-progress-text"
-    title="0%"
-  >
-    0%
-  </span>
 </div>
 `;
 
 exports[`ConfigProvider components Progress configProvider componentSize small 1`] = `
 <div
   aria-valuenow="0"
-  class="config-progress config-progress-status-normal config-progress-line config-progress-show-info config-progress-default"
+  class="config-progress config-progress-status-normal config-progress-line config-progress-line-align-end config-progress-line-position-outer config-progress-show-info config-progress-default"
   role="progressbar"
 >
   <div
     class="config-progress-outer"
-    style="width: 100%; height: 8px;"
   >
     <div
       class="config-progress-inner"
     >
       <div
-        class="config-progress-bg"
+        class="config-progress-bg config-progress-bg-outer"
         style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
+    <span
+      class="config-progress-text config-progress-text-outer config-progress-text-end"
+      title="0%"
+    >
+      0%
+    </span>
   </div>
-  <span
-    class="config-progress-text"
-    title="0%"
-  >
-    0%
-  </span>
 </div>
 `;
 
 exports[`ConfigProvider components Progress normal 1`] = `
 <div
   aria-valuenow="0"
-  class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-default"
+  class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-line-align-end ant-progress-line-position-outer ant-progress-show-info ant-progress-default"
   role="progressbar"
 >
   <div
     class="ant-progress-outer"
-    style="width: 100%; height: 8px;"
   >
     <div
       class="ant-progress-inner"
     >
       <div
-        class="ant-progress-bg"
+        class="ant-progress-bg ant-progress-bg-outer"
         style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
+    <span
+      class="ant-progress-text ant-progress-text-outer ant-progress-text-end"
+      title="0%"
+    >
+      0%
+    </span>
   </div>
-  <span
-    class="ant-progress-text"
-    title="0%"
-  >
-    0%
-  </span>
 </div>
 `;
 
 exports[`ConfigProvider components Progress prefixCls 1`] = `
 <div
   aria-valuenow="0"
-  class="prefix-Progress prefix-Progress-status-normal prefix-Progress-line prefix-Progress-show-info prefix-Progress-default"
+  class="prefix-Progress prefix-Progress-status-normal prefix-Progress-line prefix-Progress-line-align-end prefix-Progress-line-position-outer prefix-Progress-show-info prefix-Progress-default"
   role="progressbar"
 >
   <div
     class="prefix-Progress-outer"
-    style="width: 100%; height: 8px;"
   >
     <div
       class="prefix-Progress-inner"
     >
       <div
-        class="prefix-Progress-bg"
+        class="prefix-Progress-bg prefix-Progress-bg-outer"
         style="width: 0%; height: 8px; --progress-percent: 0;"
       />
     </div>
+    <span
+      class="prefix-Progress-text prefix-Progress-text-outer prefix-Progress-text-end"
+      title="0%"
+    >
+      0%
+    </span>
   </div>
-  <span
-    class="prefix-Progress-text"
-    title="0%"
-  >
-    0%
-  </span>
 </div>
 `;
 

components/progress/Line.tsx

@@ -1,9 +1,14 @@
 import * as React from 'react';
 import { presetPrimaryColors } from '@ant-design/colors';
-
+import classNames from 'classnames';
 import { devUseWarning } from '../_util/warning';
 import type { DirectionType } from '../config-provider';
-import type { ProgressGradient, ProgressProps, StringGradients } from './progress';
+import type {
+  ProgressGradient,
+  ProgressProps,
+  StringGradients,
+  PercentPositionType,
+} from './progress';
 import { LineStrokeColorVar, Percent } from './style';
 import { getSize, getSuccessPercent, validProgress } from './utils';
 
@@ -12,6 +17,7 @@ interface LineProps extends ProgressProps {
   direction?: DirectionType;
   children: React.ReactNode;
   strokeColor?: string | ProgressGradient;
+  percentPosition: PercentPositionType;
 }
 
 /**
@@ -82,9 +88,12 @@ const Line: React.FC<LineProps> = (props) => {
     strokeLinecap = 'round',
     children,
     trailColor = null,
+    percentPosition,
     success,
   } = props;
 
+  const { align: infoAlign, type: infoPosition } = percentPosition;
+
   const backgroundProps =
     strokeColor && typeof strokeColor !== 'string'
       ? handleGradient(strokeColor, directionConfig)
@@ -94,7 +103,7 @@ const Line: React.FC<LineProps> = (props) => {
 
   const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
 
-  const [width, height] = getSize(mergedSize, 'line', { strokeWidth });
+  const height = getSize(mergedSize, 'line', { strokeWidth })[1];
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Progress');
@@ -124,23 +133,31 @@ const Line: React.FC<LineProps> = (props) => {
     backgroundColor: success?.strokeColor,
   } as React.CSSProperties;
 
-  const outerStyle: React.CSSProperties = {
-    width: width < 0 ? '100%' : width,
-    height,
-  };
-
-  return (
-    <>
-      <div className={`${prefixCls}-outer`} style={outerStyle}>
-        <div className={`${prefixCls}-inner`} style={trailStyle}>
-          <div className={`${prefixCls}-bg`} style={percentStyle} />
-          {successPercent !== undefined ? (
-            <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
-          ) : null}
-        </div>
+  const lineInner = (
+    <div className={`${prefixCls}-inner`} style={trailStyle}>
+      <div
+        className={classNames(`${prefixCls}-bg`, `${prefixCls}-bg-${infoPosition}`)}
+        style={percentStyle}
+      >
+        {infoPosition === 'inner' && children}
       </div>
+      {successPercent !== undefined && (
+        <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
+      )}
+    </div>
+  );
+
+  return infoPosition === 'outer' && infoAlign === 'center' ? (
+    <div className={`${prefixCls}-layout-bottom`}>
+      {lineInner}
       {children}
-    </>
+    </div>
+  ) : (
+    <div className={`${prefixCls}-outer`}>
+      {infoPosition === 'outer' && infoAlign === 'start' && children}
+      {lineInner}
+      {infoPosition === 'outer' && infoAlign === 'end' && children}
+    </div>
   );
 };