feat: progress add inside and bottom text position

components/progress/Line.tsx

@@ -1,9 +1,16 @@
 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,
+ PercentAlignType,
+ PercentPositionType,
+} from './progress';
 import { getSize, getSuccessPercent, validProgress } from './utils';
 import { LineStrokeColorVar, Percent } from './style';
 
@@ -12,6 +19,7 @@ interface LineProps extends ProgressProps {
  direction?: DirectionType;
  children: React.ReactNode;
  strokeColor?: string | ProgressGradient;
+ percentPosition: [PercentAlignType, PercentPositionType];
 }
 
 /**
@@ -82,9 +90,12 @@ const Line: React.FC<LineProps> = (props) => {
  strokeLinecap = 'round',
  children,
  trailColor = null,
+ percentPosition,
  success,
  } = props;
 
+ const [infoAlign, infoPosition] = percentPosition;
+
  const backgroundProps =
  strokeColor && typeof strokeColor !== 'string'
  ? handleGradient(strokeColor, directionConfig)
@@ -129,17 +140,32 @@ const Line: React.FC<LineProps> = (props) => {
  height,
  };
 
- return (
+ const lineInner = (
+ <div className={`${prefixCls}-inner`} style={trailStyle}>
+ <div
+ className={classNames(`${prefixCls}-bg`, `${prefixCls}-bg-${infoPosition}`)}
+ style={percentStyle}
+ >
+ {infoPosition === 'inner' ? children : null}
+ </div>
+ {successPercent !== undefined ? (
+ <div className={`${prefixCls}-success-bg`} style={successPercentStyle} />
+ ) : null}
+ </div>
+ );
+
+ return infoPosition === 'outer' && infoAlign === 'center' ? (
+ <div className={`${prefixCls}-layout-bottom`}>
+ {lineInner}
+ {children}
+ </div>
+ ) : (
  <>
+ {infoPosition === 'outer' && infoAlign === 'start' && children}
  <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>
+ {lineInner}
  </div>
- {children}
+ {infoPosition === 'outer' && infoAlign === 'end' && children}
  </>
  );
 };

components/progress/__tests__/index.test.tsx

@@ -414,4 +414,26 @@ describe('Progress', () => {
  const { container } = render(<Progress percent={70} steps={5} />);
  expect(container.firstChild).toMatchSnapshot();
  });
+
+ it('should show inner info position', () => {
+ const { container: wrapper, rerender } = render(
+ <Progress percent={0} percentPosition={['center', 'inner']} size={[200, 20]} />,
+ );
+ expect(
+ wrapper.querySelectorAll('.ant-progress-line-align-center.ant-progress-line-position-inner'),
+ ).toHaveLength(1);
+
+ rerender(<Progress percent={100} percentPosition={['center', 'inner']} size={[400, 20]} />);
+ expect(wrapper.querySelectorAll('.ant-progress-text-inner')).toHaveLength(1);
+
+ rerender(<Progress percent={100} percentPosition={['center', 'outer']} />);
+ expect(wrapper.querySelectorAll('.ant-progress-layout-bottom')).toHaveLength(1);
+ });
+
+ it('render inner info position', () => {
+ const { container } = render(
+ <Progress percent={100} percentPosition={['center', 'inner']} size={[400, 20]} />,
+ );
+ expect(container.firstChild).toMatchSnapshot();
+ });
 });

components/progress/demo/info-position.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+改变进度数值位置，可使用 `percentPosition` 调整，使进度条数值在进度条内部、外部或底部。
+
+## en-US
+
+Change the position of the progress value, you can use `percentPosition` to adjust it so that the progress bar value is inside, outside or at the bottom of the progress bar.

components/progress/demo/info-position.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Flex, Progress } from 'antd';
+
+const App: React.FC = () => (
+ <Flex gap="small" vertical>
+ <Progress percent={0} percentPosition={['center', 'inner']} size={[200, 20]} />
+ <Progress percent={10} percentPosition={['center', 'inner']} size={[300, 20]} />
+ <Progress percent={50} percentPosition={['start', 'inner']} size={[300, 20]} />
+ <Progress percent={60} percentPosition={['end', 'inner']} size={[300, 20]} />
+ <Progress percent={100} percentPosition={['center', 'inner']} size={[400, 20]} />
+ <Progress percent={60} percentPosition={['start', 'outer']} />
+ <Progress percent={100} percentPosition={['start', 'outer']} />
+ <Progress percent={60} percentPosition={['center', 'outer']} size="small" />
+ <Progress percent={100} percentPosition={['center', 'outer']} />
+ </Flex>
+);
+
+export default App;

components/progress/index.en-US.md

@@ -33,6 +33,7 @@ If it will take a long time to complete an operation, you can use `Progress` to
 <code src="./demo/steps.tsx">Progress bar with steps</code>
 <code src="./demo/circle-steps.tsx" version="5.16.0">Circular progress bar whit steps</code>
 <code src="./demo/size.tsx">Progress size</code>
+<code src="./demo/info-position.tsx" version="5.17.0">Change progress value position</code>
 
 ## API
 
@@ -59,6 +60,7 @@ Properties that shared by all types.
 | --- | --- | --- | --- | --- |
 | steps | The total step count | number | - | - |
 | strokeColor | The color of progress bar, render `linear-gradient` when passing an object, could accept `string[]` when has `steps`. | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: `string[]` |
+| percentPosition | Position of the progress value is passed into the array. The first element represents the horizontal position of the value, and the second element represents whether the value is inside or outside the progress bar | \[\"start\" \| \"center\" \| \"end\", \"inner\" \| \"outer\"\] | \[\"end\", \"outer\"\] | 5.17.0 |
 
 ### `type="circle"`
 

components/progress/index.zh-CN.md

@@ -34,6 +34,7 @@ demo:
 <code src="./demo/steps.tsx">步骤进度条</code>
 <code src="./demo/circle-steps.tsx" version="5.16.0">步骤进度圈</code>
 <code src="./demo/size.tsx">尺寸</code>
+<code src="./demo/info-position.tsx" version="5.17.0">改变进度数值位置</code>
 
 ## API
 
@@ -60,6 +61,7 @@ demo:
 | --- | --- | --- | --- | --- |
 | steps | 进度条总共步数 | number | - | - |
 | strokeColor | 进度条的色彩，传入 object 时为渐变。当有 `steps` 时支持传入一个数组。 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: `string[]` |
+| percentPosition | 进度数值位置，传入数组，第一个元素代表数值的水平位置，第二个元素代表数值在进度条内部还是外部 | \[\"start\" \| \"center\" \| \"end\", \"inner\" \| \"outer\"\] | \[\"end\", \"outer\"\] | 5.17.0 |
 
 ### `type="circle"`
 

components/progress/progress.tsx

@@ -18,9 +18,10 @@ import { getSize, getSuccessPercent, validProgress } from './utils';
 export const ProgressTypes = ['line', 'circle', 'dashboard'] as const;
 export type ProgressType = (typeof ProgressTypes)[number];
 const ProgressStatuses = ['normal', 'exception', 'active', 'success'] as const;
+export type PercentPositionType = 'inner' | 'outer';
+export type PercentAlignType = 'start' | 'center' | 'end';
 export type ProgressSize = 'default' | 'small';
 export type StringGradients = Record<string, string>;
-
 type FromToGradients = { from: string; to: string };
 export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
 
@@ -56,6 +57,7 @@ export interface ProgressProps extends ProgressAriaProps {
  steps?: number | { count: number; gap: number };
  /** @deprecated Use `success` instead */
  successPercent?: number;
+ percentPosition?: [PercentAlignType, PercentPositionType];
  children?: React.ReactNode;
 }
 
@@ -73,9 +75,12 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  status,
  format,
  style,
+ percentPosition = [],
  ...restProps
  } = props;
 
+ const [infoAlign = 'end', infoPosition = 'outer'] = percentPosition;
+
  const percentNumber = React.useMemo<number>(() => {
  const successPercent = getSuccessPercent(props);
  return parseInt(
@@ -107,7 +112,11 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  let text: React.ReactNode;
  const textFormatter = format || ((number) => `${number}%`);
  const isLineType = type === 'line';
- if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {
+ if (
+ infoPosition === 'inner' ||
+ format ||
+ (progressStatus !== 'exception' && progressStatus !== 'success')
+ ) {
  text = textFormatter(validProgress(percent), validProgress(successPercent));
  } else if (progressStatus === 'exception') {
  text = isLineType ? <CloseCircleFilled /> : <CloseOutlined />;
@@ -116,7 +125,14 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  }
 
  return (
- <span className={`${prefixCls}-text`} title={typeof text === 'string' ? text : undefined}>
+ <span
+ className={classNames(
+ `${prefixCls}-text`,
+ `${prefixCls}-text-${infoPosition}`,
+ `${prefixCls}-text-${infoAlign}`,
+ )}
+ title={typeof text === 'string' ? text : undefined}
+ >
  {text}
  </span>
  );
@@ -162,6 +178,7 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  strokeColor={strokeColorNotArray}
  prefixCls={prefixCls}
  direction={direction}
+ percentPosition={[infoAlign, infoPosition]}
  >
  {progressInfo}
  </Line>
@@ -182,6 +199,8 @@ const Progress = React.forwardRef<HTMLDivElement, ProgressProps>((props, ref) =>
  const classString = classNames(
  prefixCls,
  `${prefixCls}-status-${progressStatus}`,
+ `${prefixCls}-line-align-${infoAlign}`,
+ `${prefixCls}-line-position-${infoPosition}`,
  {
  [`${prefixCls}-${(type === 'dashboard' && 'circle') || type}`]: type !== 'line',
  [`${prefixCls}-inline-circle`]: type === 'circle' && getSize(size, 'circle')[0] <= 20,

components/progress/style/index.ts

@@ -36,6 +36,16 @@ export interface ComponentToken {
  * @descEN Icon size of circular progress bar
  */
  circleIconFontSize: string;
+ /**
+ * @desc 线形进度条内部信息内边距
+ * @descEN Linear progress bar internal information padding
+ */
+ innerInfoPadding: number;
+ /**
+ * @desc 线形进度条底部信息顶部外边距
+ * @descEN Linear progress bar bottom information top margin
+ */
+ bottomInfoMarginTop: number;
 }
 
 export const LineStrokeColorVar = '--progress-line-stroke-color';
@@ -90,9 +100,17 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
  },
 
  [`&${progressCls}-show-info`]: {
- [`${progressCls}-outer`]: {
- marginInlineEnd: `calc(-2em - ${unit(token.marginXS)})`,
- paddingInlineEnd: `calc(2em + ${unit(token.paddingXS)})`,
+ [`&${progressCls}-line-align-end, &${progressCls}-line-align-center`]: {
+ [`${progressCls}-outer`]: {
+ marginInlineEnd: `calc(-2em - ${unit(token.marginXS)})`,
+ paddingInlineEnd: `calc(2em + ${unit(token.paddingXS)})`,
+ },
+ },
+ [`&${progressCls}-line-align-start`]: {
+ [`${progressCls}-outer`]: {
+ marginInlineStart: `calc(-2em - ${unit(token.marginXS)})`,
+ paddingInlineStart: `calc(2em + ${unit(token.paddingXS)})`,
+ },
  },
  },
 
@@ -119,11 +137,23 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
  transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
  },
 
+ [`${progressCls}-layout-bottom`]: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ [`${progressCls}-text`]: {
+ marginInlineStart: 0,
+ marginTop: token.bottomInfoMarginTop,
+ },
+ },
+
  [`${progressCls}-bg`]: {
  overflow: 'hidden',
-
  '&::after': {
  content: '""',
+ position: 'absolute',
+ top: 0,
  background: {
  _multi_value_: true,
  value: ['inherit', `var(${LineStrokeColorVar})`],
@@ -132,6 +162,9 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
  width: `calc(1 / var(${Percent}) * 100%)`,
  display: 'block',
  },
+ [`&${progressCls}-bg-inner`]: {
+ minWidth: 'max-content',
+ },
  },
 
  [`${progressCls}-success-bg`]: {
@@ -154,6 +187,26 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
  [iconPrefixCls]: {
  fontSize: token.fontSize,
  },
+ [`&${progressCls}-text-outer${progressCls}-text-start`]: {
+ marginInlineStart: 0,
+ marginInlineEnd: token.marginXS,
+ },
+ },
+
+ [`${progressCls}-text-inner`]: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: '100%',
+ height: '100%',
+ marginInlineStart: 0,
+ padding: `0 ${token.innerInfoPadding}`,
+ [`&${progressCls}-inner-start`]: {
+ justifyContent: 'left',
+ },
+ [`&${progressCls}-inner-end`]: {
+ justifyContent: 'right',
+ },
  },
 
  [`&${progressCls}-status-active`]: {
@@ -199,6 +252,9 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
  },
  [`${progressCls}-text`]: {
  color: token.colorSuccess,
+ [`&${progressCls}-text-inner`]: {
+ color: token.colorText,
+ },
  },
  },
 
@@ -314,6 +370,8 @@ export const prepareComponentToken: GetDefaultToken<'Progress'> = (token) => ({
  lineBorderRadius: 100, // magic for capsule shape, should be a very large number
  circleTextFontSize: '1em',
  circleIconFontSize: `${token.fontSize / token.fontSizeSM}em`,
+ innerInfoPadding: 4,
+ bottomInfoMarginTop: 4,
 });
 
 export default genStyleHooks(