@kdcloudjs/kdesign 1.5.8 → 1.5.11

package/es/button/style/index.css

@@ -118,6 +118,9 @@
   text-align: center;
   background-color: transparent;
   cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   -webkit-transition: color 0.3s, background-color 0.3s, border-color 0.3s;
   transition: color 0.3s, background-color 0.3s, border-color 0.3s;
 }

package/es/button/style/mixin.less

@@ -14,6 +14,9 @@
 	text-align: center;
 	background-color: transparent;
 	cursor: pointer;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
   &,
   &:active,
   &:focus {

package/es/carousel/slidebar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface slideProps {
     currentIndex: number;
     dotPosition?: string;

package/es/checkbox/checkbox.d.ts

@@ -16,6 +16,7 @@ export interface CheckboxProps {
     disabled?: boolean;
     children?: React.ReactNode;
     name?: string;
+    onClick?: (e: React.MouseEvent) => void;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<unknown>>;

package/es/checkbox/checkbox.js

@@ -1,6 +1,22 @@
+import _extends from "@babel/runtime-corejs3/helpers/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof _Object$getOwnPropertySymbols === "function") for (var i = 0, p = _Object$getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
 import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
@@ -21,6 +37,7 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       userDefaultProps = _useContext.compDefaultProps;
 
   var CheckboxProps = getCompProps('Checkbox', userDefaultProps, props);
+
   var checkboxType = CheckboxProps.checkboxType,
       className = CheckboxProps.className,
       customPrefixcls = CheckboxProps.prefixCls,
@@ -33,7 +50,8 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
       style = CheckboxProps.style,
       value = CheckboxProps.value,
       indeterminate = CheckboxProps.indeterminate,
-      name = CheckboxProps.name;
+      name = CheckboxProps.name,
+      rest = __rest(CheckboxProps, ["checkboxType", "className", "prefixCls", "defaultChecked", "checked", "size", "onChange", "disabled", "children", "style", "value", "indeterminate", "name"]);
 
   var getChecked = function getChecked() {
     return isBoolean(checked) ? checked : defaultChecked;
@@ -97,11 +115,11 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line
-      React.createElement("label", {
+      React.createElement("label", _extends({
         className: getRootClassName,
         style: style,
         ref: labelRef
-      }, /*#__PURE__*/React.createElement("span", {
+      }, rest), /*#__PURE__*/React.createElement("span", {
         className: checkedWrapperClassName
       }, selected && /*#__PURE__*/React.createElement("span", {
         className: innerIconClassName

package/es/city-picker/no-data.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const NoData: () => JSX.Element;
 export default NoData;

package/es/config-provider/compDefaultProps.d.ts

@@ -106,6 +106,7 @@ declare const compDefaultProps: {
         placement: string;
         width: number;
         zIndex: number;
+        disableScroll: boolean;
     };
     Empty: {};
     Filter: {

package/es/config-provider/compDefaultProps.js

@@ -111,7 +111,8 @@ var compDefaultProps = {
     maskClosable: true,
     placement: 'right',
     width: 320,
-    zIndex: 1050
+    zIndex: 1050,
+    disableScroll: true
   },
   Empty: {},
   Filter: {

package/es/date-picker/calendar.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType, PickerMode, SharedTimeProps } from './interface';
 import { RangeShowTimeObject } from './range-picker';
 export interface CalendarProps {

package/es/date-picker/date-picker.js

@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import React, { useContext, useEffect } from 'react';
 import classnames from 'classnames';
-import parse from 'date-fns/parse';
 import ConfigContext from '../config-provider/ConfigContext';
 import { useMergedState, useOnClickOutside } from '../_utils/hooks';
 import { getCompProps } from '../_utils';
@@ -168,19 +167,21 @@ function DatePicker(props) {
   var _useTextValueMapping = useTextValueMapping({
     valueText: valueText,
     onTextChange: function onTextChange(newText) {
-      // if (typeof _format !== 'function') {
-      var inputDate;
-
-      if (picker !== 'year') {
-        inputDate = parseDate(newText, _format);
-      } else {
-        var year = parse(newText, _format, newDate());
-        inputDate = isValid(year) ? year : null;
-      }
-
-      if (inputDate && (!disabledDate || !disabledDate(inputDate))) {
-        setSelectedValue(inputDate);
-        setViewDate(inputDate);
+      if (newText === '') {
+        setSelectedValue(null);
+        setDateValue(null);
+      } else if (newText && newText.length === _format.length) {
+        var inputTempDate = parseDate(newText, _format);
+
+        if (inputTempDate && (!disabledDate || !disabledDate(inputTempDate))) {
+          if (picker !== 'year') {
+            setSelectedValue(inputTempDate);
+            setDateValue(inputTempDate);
+          } else if (isValid(inputTempDate)) {
+            setSelectedValue(inputTempDate);
+            setDateValue(inputTempDate);
+          }
+        }
       }
     }
   }),

package/es/date-picker/hooks/use-picker-input.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
-import { useState, useEffect, useRef } from 'react'; // import KeyCode from '../../_utils/KeyCode'
-
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import { useState, useEffect, useRef } from 'react';
+import KeyCode from '../../_utils/KeyCode';
 export default function usePickerInput(_ref) {
   var preventBlurRef = _ref.preventBlurRef,
       open = _ref.open,
@@ -29,42 +30,47 @@ export default function usePickerInput(_ref) {
       setTyping(true);
       triggerOpen(true);
     },
-    // onKeyDown: (e) => {
-    //   switch (e.which) {
-    //     case KeyCode.ENTER: {
-    //       if (!open) {
-    //         triggerOpen(true)
-    //       } else if (onSubmit() !== false) {
-    //         setTyping(true)
-    //       }
-    //       e.preventDefault()
-    //       return
-    //     }
-    //     case KeyCode.TAB: {
-    //       if (typing && open && !e.shiftKey) {
-    //         setTyping(false)
-    //         e.preventDefault()
-    //       } else if (!typing && open) {
-    //         if (!forwardKeyDown(e) && e.shiftKey) {
-    //           setTyping(true)
-    //           e.preventDefault()
-    //         }
-    //       }
-    //       return
-    //     }
-    //     case KeyCode.ESC: {
-    //       setTyping(true)
-    //       onCancel()
-    //       return
-    //     }
-    //   }
-    //   if (!open && ![KeyCode.SHIFT].includes(e.which)) {
-    //     triggerOpen(true)
-    //   } else if (!typing) {
-    //     // Let popup panel handle keyboard
-    //     forwardKeyDown(e)
-    //   }
-    // },
+    onKeyDown: function onKeyDown(e) {
+      var _context;
+
+      setTyping(true);
+      triggerOpen(true);
+
+      switch (e.which) {
+        case KeyCode.ENTER:
+          {
+            if (!open) {
+              triggerOpen(true);
+            } else if (onSubmit() !== false) {
+              setTyping(true);
+            }
+
+            e.preventDefault();
+            return;
+          }
+
+        case KeyCode.TAB:
+          {
+            if (typing && open && !e.shiftKey) {
+              setTyping(false);
+              e.preventDefault();
+            }
+
+            return;
+          }
+
+        case KeyCode.ESC:
+          {
+            setTyping(true);
+            onCancel();
+            return;
+          }
+      }
+
+      if (!open && !_includesInstanceProperty(_context = [KeyCode.SHIFT]).call(_context, e.which)) {
+        triggerOpen(true);
+      }
+    },
     onFocus: function onFocus(e) {
       setTyping(true);
       setFocused(true);

package/es/date-picker/panel/month/month.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType } from '../../interface';
 export declare const monthsNumToText: string[];
 export interface MonthProps {

package/es/date-picker/panel/quarter/quarter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType } from '../../interface';
 interface QuarterProps {
     disabledDate?: (date: DateType) => boolean;

package/es/date-picker/panel/time/time.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType, DisabledTimes, PanelSharedProps, PickerMode } from '../../interface';
 export interface SharedTimeProps extends DisabledTimes {
     format?: string;

package/es/date-picker/panel/week/week.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType, PickerMode } from '../../interface';
 export interface WeekProps {
     day: DateType;

package/es/date-picker/panel/year/year.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DateType } from '../../interface';
 export interface YearProps {
     yearItemNumber: number;

package/es/date-picker/range-picker.js

@@ -6,7 +6,6 @@ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useContext, useEffect } from 'react';
 import isSameWeek from 'date-fns/isSameWeek';
-import parse from 'date-fns/parse';
 import ConfigContext from '../config-provider/ConfigContext';
 import { useMergedState, useOnClickOutside } from '../_utils/hooks';
 import { getCompProps } from '../_utils';
@@ -249,20 +248,32 @@ function DatePicker(props) {
   });
 
   var _onTextChange = function onTextChange(newText, index) {
-    var inputDate;
+    var inputTempDate;
 
-    if (picker !== 'year') {
-      inputDate = parseDate(newText, _format);
-    } else {
-      var year = parse(newText, _format, newDate());
-      inputDate = isValid(year) ? year : null;
-    }
-
-    var disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
+    if (newText === '') {
+      if (index === 0 && selectedValue && selectedValue.length === 2) {
+        inputTempDate = selectedValue[1];
+      } else if (index === 1 && selectedValue && selectedValue.length === 2) {
+        inputTempDate = selectedValue[0];
+      }
 
-    if (inputDate && (!disabledFunc || !disabledFunc(inputDate))) {
-      setSelectedValue(updateValues(selectedValue, inputDate, index));
-      setViewDate(inputDate, index);
+      if (inputTempDate) {
+        setSelectedValue(updateValues(selectedValue, inputTempDate, index));
+        setViewDate(inputTempDate, index);
+      }
+    } else if (newText && newText.length === _format.length) {
+      inputTempDate = parseDate(newText, _format);
+      var disabledFunc = index === 0 ? disabledStartDate : disabledEndDate;
+
+      if (inputTempDate && (!disabledFunc || !disabledFunc(inputTempDate))) {
+        if (picker !== 'year') {
+          setSelectedValue(updateValues(selectedValue, inputTempDate, index));
+          setViewDate(inputTempDate, index);
+        } else if (isValid(inputTempDate)) {
+          setSelectedValue(updateValues(selectedValue, inputTempDate, index));
+          setViewDate(inputTempDate, index);
+        }
+      }
     }
   }; // input 展示
 

package/es/date-picker/utils/get-ranges.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Components, RangeList, InnerLocale } from '../interface';
 export interface RangesProps {
     prefixCls: string;

package/es/drawer/drawer.d.ts

@@ -36,6 +36,7 @@ export interface IDrawerProps {
     width?: string | number;
     height?: string | number;
     zIndex?: string | number;
+    disableScroll?: boolean;
 }
 declare const Drawer: React.ForwardRefExoticComponent<IDrawerProps & React.RefAttributes<unknown>>;
 export default Drawer;

package/es/drawer/drawer.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import devWarning from '../_utils/devwarning';
-import { useResizeObserver, useHideDocumentScrollBar } from '../_utils/hooks'; // import { usePrevious } from '../_utils/hooks'
+import { useResizeObserver, useOverflowHidden } from '../_utils/hooks'; // import { usePrevious } from '../_utils/hooks'
 
 import { toArray } from '../_utils/react-children';
 export var PlacementTypes = tuple('top', 'right', 'bottom', 'left');
@@ -37,6 +37,8 @@ var documentBody = document.body; // function transformSize(size: string | numbe
 var InternalDrawer = function InternalDrawer(props, ref) {
   var _classNames, _context2, _context3, _classNames2;
 
+  var _a;
+
   var _useContext = useContext(ConfigContext),
       getPrefixCls = _useContext.getPrefixCls,
       prefixCls = _useContext.prefixCls,
@@ -70,7 +72,8 @@ var InternalDrawer = function InternalDrawer(props, ref) {
       getContainer = drawerProps.getContainer,
       forceRender = drawerProps.forceRender,
       destroyOnClose = drawerProps.destroyOnClose,
-      customPrefixcls = drawerProps.prefixCls;
+      customPrefixcls = drawerProps.prefixCls,
+      disableScroll = drawerProps.disableScroll;
   var drawerPrefixCls = getPrefixCls(prefixCls, 'drawer', customPrefixcls);
 
   var _useState = useState(false),
@@ -138,7 +141,7 @@ var InternalDrawer = function InternalDrawer(props, ref) {
 
     return drawerContainer || ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentNode);
   }, handleContainerResize);
-  useHideDocumentScrollBar(!!visible, isBody, !!mask); // 为了单测
+  useOverflowHidden(drawerContainer || ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.parentNode), visible && mask, disableScroll); // 为了单测
 
   useEffect(function () {
     setCurrentWidth(width);

package/es/dropdown/dropdown.js

@@ -9,7 +9,7 @@ import { Menu, Item } from './menu';
 import usePopper from '../_utils/usePopper';
 
 var findItem = function findItem(element) {
-  var isItem = element.className === 'kd-dropdown-menu-item';
+  var isItem = /kd-dropdown-menu-item/.test(element.className);
 
   if (isItem) {
     return element;

package/es/empty/defaultEmptyImg.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare function DefaultEmptyImg(): JSX.Element;
 export default DefaultEmptyImg;

package/es/empty/illustrationEmptyImg.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare function IllustrationEmptyImg(): JSX.Element;
 export default IllustrationEmptyImg;

package/es/modal/style/index.css

@@ -236,14 +236,8 @@
   font-size: var(--kd-c-modal-footer-font-size, 14px);
   color: var(--kd-c-modal-footer-text-color, var(--kd-g-color-text-secondary, #666));
 }
-.kd-modal-ok-btn,
-.kd-modal-cancel-btn {
-  min-width: 88px;
-  min-height: 32px;
-  font-size: var(--kd-c-modal-footer-font-size, 14px);
-}
 .kd-modal-margin-btn {
-  margin-right: 20px;
+  margin-right: var(--kd-c-modal-footer-button-spacing, 12px);
 }
 .kd-modal-showline .kd-modal-header {
   border-bottom: var(--kd-c-modal-sizing-border, 1px) solid var(--kd-c-modal-color-border, var(--kd-g-color-border-strong-2, #d9d9d9));

package/es/modal/style/index.less

@@ -113,14 +113,8 @@
     // });
   }
 
-  &-ok-btn,
-  &-cancel-btn {
-    min-width: 88px;
-    min-height: 32px;
-    font-size: @modal-footer-font-size;
-  }
   &-margin-btn {
-    margin-right: 20px;
+    margin-right: @modal-footer-button-spacing;
   }
 }
 

package/es/modal/style/token.less

@@ -38,9 +38,12 @@
 @icon-circle-radiu: var(~'@{modal-prefix}-icon-circle-sizing', 6px);
 @modal-border-width: var(~'@{modal-prefix}-sizing-border', 1px);
 @modal-close-icon-size: var(~'@{modal-prefix}-close-icon-font-size', 16px);
-@modal-header-sizing-padding-horizontal: var(~'@{modal-prefix}-header-sizing-padding-horizontal', 20px);
-@modal-header-sizing-padding-vertical: var(~'@{modal-prefix}-header-sizing-padding-vertical', 0px);
 @modal-header-sizing-height: var(~'@{modal-prefix}-header-sizing-height', 50px);
-@modal-body-sizing-padding: var(~'@{modal-prefix}-body-sizing-padding', 20px);
 @modal-footer-sizing-height: var(~'@{modal-prefix}-footer-sizing-height', 50px);
-@modal-title-icon-sizing-margin-right: var(~'@{modal-prefix}-title-icon-sizing-margin-right', 8px);
+
+// spacing
+@modal-footer-button-spacing: var(~'@{modal-prefix}-footer-button-spacing', 12px);
+@modal-title-icon-sizing-margin-right: var(~'@{modal-prefix}-title-icon-sizing-margin-right', 8px);
+@modal-header-sizing-padding-horizontal: var(~'@{modal-prefix}-header-sizing-padding-horizontal', 20px);
+@modal-header-sizing-padding-vertical: var(~'@{modal-prefix}-header-sizing-padding-vertical', 0px);
+@modal-body-sizing-padding: var(~'@{modal-prefix}-body-sizing-padding', 20px);

package/es/notification-base/notification.js

@@ -60,11 +60,11 @@ var Notification = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var remove = function remove(key) {
-    var filter = _filterInstanceProperty(notices).call(notices, function (notice) {
-      return notice.key !== key;
+    setNotices(function (preNotices) {
+      return _filterInstanceProperty(preNotices).call(preNotices, function (notice) {
+        return notice.key !== key;
+      });
     });
-
-    setNotices(filter);
   };
 
   var _onClose = function onClose(notice) {

package/es/pagination/style/index.css

@@ -430,9 +430,7 @@
 }
 .kd-pagination.less .kd-pagination-pages-item:hover button,
 .kd-pagination.less .kd-pagination-pages-item:active button,
-.kd-pagination.less .kd-pagination-pages-item.active button,
-.kd-pagination.less .kd-pagination-pages-item:first-child button,
-.kd-pagination.less .kd-pagination-pages-item:last-child button {
+.kd-pagination.less .kd-pagination-pages-item.active button {
   color: var(--kd-g-color-theme, #5582f3);
 }
 .kd-pagination.less .kd-pagination-pages-item:first-child button,

package/es/pagination/style/index.less

@@ -314,9 +314,7 @@
 
         &:hover,
         &:active,
-        &.active,
-        &:first-child,
-        &:last-child {
+        &.active {
           button {
             color: @color-theme;
           }

package/es/progress/progress.js

@@ -57,7 +57,7 @@ var Progress = function Progress(props) {
 
   var progressStatus = getProgressStatus(progressProps);
   var progressPrefixCls = getPrefixCls(prefixCls, 'progress', customPrefixcls);
-  var progressClasses = classNames(progressPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(progressPrefixCls, "-type-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(progressPrefixCls, "-status-")).call(_context2, progressStatus), true), _defineProperty(_classNames, "".concat(progressPrefixCls, "-show-info"), showInfo), _classNames));
+  var progressClasses = classNames(progressPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, _concatInstanceProperty(_context = "".concat(progressPrefixCls, "-type-")).call(_context, type), type), _defineProperty(_classNames, _concatInstanceProperty(_context2 = "".concat(progressPrefixCls, "-status-")).call(_context2, progressStatus), true), _defineProperty(_classNames, "".concat(progressPrefixCls, "-show-info"), showInfo), _defineProperty(_classNames, "".concat(progressPrefixCls, "-position-bottom"), progressProps.infoPosition !== 'right' && progressStatus === 'normal'), _classNames));
 
   var renderProgressInfo = function renderProgressInfo(prefixCls, progressStatus, props) {
     var _props$type = props.type,

package/es/progress/style/index.css

@@ -115,9 +115,19 @@
 }
 .kd-progress-type-line {
   width: 100%;
+  color: var(--kd-c-progress-line-color-font, #212121);
+}
+.kd-progress-type-line .kd-progress-special-text {
+  margin-top: var(--kd-c-progress-line-text-spacing-margin-top, 12px);
+  line-height: 24px;
+}
+.kd-progress-type-circle {
+  color: var(--kd-c-progress-circle-color-font, #666);
 }
 .kd-progress-type-circle .kd-progress-special-text {
+  margin-top: var(--kd-c-progress-circle-text-spacing-margin-top, 8px);
   padding: 0;
+  line-height: 24px;
 }
 .kd-progress-outer {
   display: inline-block;
@@ -129,9 +139,9 @@
   padding-right: 0;
   font-size: 0;
 }
-.kd-progress-show-info .kd-progress-outer {
-  margin-right: calc(-1 * var(--kd-c-progress-line-text-font-size, 16px) * 3 - 8px);
-  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px) * 3 + 8px);
+.kd-progress-show-info:not(.kd-progress-position-bottom) .kd-progress-outer {
+  margin-right: calc(-1 * var(--kd-c-progress-line-text-font-size, 16px) * 2 - 8px);
+  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px) * 2 + 8px);
 }
 .kd-progress-inner {
   position: relative;
@@ -165,7 +175,7 @@
   display: inline-block;
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
-  width: calc(var(--kd-c-progress-line-text-font-size, 16px)*3);
+  width: calc(var(--kd-c-progress-line-text-font-size, 16px)*2);
   margin-left: var(--kd-c-progress-line-text-spacing-margin-left, 8px);
   white-space: nowrap;
   text-align: left;
@@ -176,7 +186,10 @@
   font-size: var(--kd-c-progress-line-special-text-font-size, 16px);
   text-align: center;
   overflow: hidden;
-  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px)*3 + 8px);
+  padding-right: calc(var(--kd-c-progress-line-text-font-size, 16px)*2 + 8px);
+}
+.kd-progress-position-bottom .kd-progress-special-text {
+  padding-right: 0;
 }
 .kd-progress-status-success .kd-progress-bg {
   background-color: var(--kd-c-progress-color-success, var(--kd-g-color-success, #1ba854));

package/es/progress/style/index.less

@@ -14,11 +14,21 @@
 
   &-type-line {
     width: 100%;
+    color: @progress-line-font-color;
+
+    .@{progress-prefix-cls}-special-text {
+      margin-top: @progress-line-text-margin-top;
+      line-height: 24px;
+    }
   }
 
   &-type-circle {
+    color: @progress-circle-font-color;
+
     .@{progress-prefix-cls}-special-text {
+      margin-top: @progress-circle-text-margin-top;
       padding: 0;
+      line-height: 24px;
     }
   }
 
@@ -31,9 +41,9 @@
     padding-right: 0;
     font-size: 0;
 
-    .@{progress-prefix-cls}-show-info & {
-      margin-right: calc(-1 * @progress-line-text-font-size * 3 - 8px);
-      padding-right: calc(@progress-line-text-font-size * 3 + 8px);
+    .@{progress-prefix-cls}-show-info:not(.@{progress-prefix-cls}-position-bottom) & {
+      margin-right: calc(-1 * @progress-line-text-font-size * 2 - 8px);
+      padding-right: calc(@progress-line-text-font-size * 2 + 8px);
     }
   }
 
@@ -71,7 +81,7 @@
   &-text {
     display: inline-block;
     box-sizing: border-box;
-    width: calc(@progress-line-text-font-size*3);
+    width: calc(@progress-line-text-font-size*2);
     margin-left: @progress-line-text-margin-left;
     // font-size: @progress-line-text-font-size;
     // line-height: 1;
@@ -85,7 +95,11 @@
     font-size: @progress-line-special-text-font-size;
     text-align: center;
     overflow: hidden;
-    padding-right: calc(@progress-line-text-font-size*3 + 8px);
+    padding-right: calc(@progress-line-text-font-size*2 + 8px);
+
+    .@{progress-prefix-cls}-position-bottom & {
+      padding-right: 0;
+    }
   }
 
   &-status-success {