feat: support Steps responsive prop (#28459)

close #28409

components/steps/index.en-US.md

@@ -35,6 +35,7 @@ The whole of the step bar.
 | labelPlacement | Place title and description with `horizontal` or `vertical` direction | string | `horizontal` |  |
 | percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 |
 | progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false |  |
+| responsive | change to vertical direction when screen width smaller than `532px` | boolean | - | true |
 | size | To specify the size of the step bar, `default` and `small` are currently supported | string | `default` |  |
 | status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |  |
 | type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` |  |

components/steps/index.tsx

@@ -18,6 +18,7 @@ export interface StepsProps {
   labelPlacement?: 'horizontal' | 'vertical';
   prefixCls?: string;
   progressDot?: boolean | Function;
+  responsive?: boolean;
   size?: 'default' | 'small';
   status?: 'wait' | 'process' | 'finish' | 'error';
   style?: React.CSSProperties;
@@ -42,11 +43,14 @@ interface StepsType extends React.FC<StepsProps> {
 }
 
 const Steps: StepsType = props => {
-  const { percent, size, className, direction } = props;
+  const { percent, size, className, direction, responsive } = props;
   const { xs } = useBreakpoint();
   const { getPrefixCls, direction: rtlDirection } = React.useContext(ConfigContext);
 
-  const getDirection = React.useCallback(() => (xs ? 'vertical' : direction), [xs, direction]);
+  const getDirection = React.useCallback(() => (responsive && xs ? 'vertical' : direction), [
+    xs,
+    direction,
+  ]);
 
   const prefixCls = getPrefixCls('steps', props.prefixCls);
   const iconPrefix = getPrefixCls('', props.iconPrefix);

components/steps/index.zh-CN.md

@@ -36,6 +36,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
 | labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` |  |
 | percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 |
 | progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false |  |
+| responsive | 当屏幕宽度小于 532px 时自动变为垂直模式 | boolean | - | true |
 | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | `default` |  |
 | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` |  |
 | type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` |  |

components/steps/style/nav.less

@@ -90,35 +90,33 @@
   }
 }
 
-@media (max-width: @screen-xs) {
-  .@{steps-prefix-cls}-navigation {
-    > .@{steps-prefix-cls}-item {
-      margin-right: 0 !important;
-      &::before {
-        display: none;
-      }
-      &.@{steps-prefix-cls}-item-active::before {
-        top: 0;
-        right: 0;
-        left: unset;
-        display: block;
-        width: 3px;
-        height: calc(100% - 24px);
-      }
-      &::after {
-        position: relative;
-        top: -2px;
-        left: 50%;
-        display: block;
-        width: 8px;
-        height: 8px;
-        margin-bottom: 8px;
-        text-align: center;
-        transform: rotate(135deg);
-      }
-      > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
-        visibility: hidden;
-      }
+.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
+  > .@{steps-prefix-cls}-item {
+    margin-right: 0 !important;
+    &::before {
+      display: none;
+    }
+    &.@{steps-prefix-cls}-item-active::before {
+      top: 0;
+      right: 0;
+      left: unset;
+      display: block;
+      width: 3px;
+      height: calc(100% - 24px);
+    }
+    &::after {
+      position: relative;
+      top: -2px;
+      left: 50%;
+      display: block;
+      width: 8px;
+      height: 8px;
+      margin-bottom: 8px;
+      text-align: center;
+      transform: rotate(135deg);
+    }
+    > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
+      visibility: hidden;
     }
   }
 }