chore: style ellipsis

Author: zombieJ

assets/index.less

@@ -34,6 +34,7 @@
   }
 
   &-icon {
+    flex: none;
     border: 1px solid @wait-icon-color;
     width: 26px;
     height: 26px;
@@ -96,10 +97,6 @@
 
 .@{stepsPrefixClass}-horizontal:not(.@{stepsPrefixClass}-label-vertical) {
   .@{stepsPrefixClass}-item {
-    margin-right: 10px;
-    &:last-child {
-      margin-right: 0;
-    }
     &-description {
       max-width: @stepDescriptionMaxWidth;
     }
@@ -146,18 +143,32 @@
 
 .@{stepsPrefixClass} {
   .@{stepsPrefixClass}-item {
+    &-section {
+      min-width: 0;
+    }
+
     &-header {
       display: flex;
       gap: 8px;
       align-items: center;
     }
+
+    // Ellipsis
+    &-title,
+    &-subtitle,
+    &-description {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   }
 }
 
 .@{stepsPrefixClass}-horizontal {
   .@{stepsPrefixClass}-item {
     flex: 1;
     position: relative;
+    min-width: 0;
 
     &-rail {
       height: 1px;
@@ -183,6 +194,26 @@
       }
     }
   }
+
+  // Label Horizontal
+  &.@{stepsPrefixClass}-label-horizontal {
+    .@{stepsPrefixClass}-item {
+      display: flex;
+
+      &:last-child {
+        flex: none;
+      }
+
+      &-section {
+        flex: 1;
+      }
+
+      &-rail {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
 }
 
 // ======================== Vertical ========================

src/Step.tsx

@@ -150,7 +150,7 @@ export default function Step(props: StepProps) {
               prefixCls={itemCls}
               classNames={classNames}
               styles={styles}
-              status={mergedStatus}
+              status={nextStatus}
             />
           )}
         </div>

src/Steps.tsx

@@ -2,7 +2,6 @@
 import cls from 'classnames';
 import React from 'react';
 import Step from './Step';
-import Rail from './Rail';
 
 export type Status = 'error' | 'process' | 'finish' | 'wait';
 
@@ -145,27 +144,23 @@ export default function Steps(props: StepsProps) {
     };
 
     return (
-      <React.Fragment key={stepIndex}>
-        {/* {index !== 0 && (
-          <Rail prefixCls={prefixCls} classNames={classNames} styles={styles} status={itemStatus} />
-        )} */}
-        <Step
-          // Style
-          prefixCls={prefixCls}
-          classNames={classNames}
-          styles={styles}
-          // Data
-          data={data}
-          nextStatus={nextStatus}
-          active={stepIndex === current}
-          index={stepIndex}
-          last={mergedItems.length - 1 === index}
-          // Render
-          iconRender={iconRender}
-          itemRender={itemRender}
-          onClick={onChange && onStepClick}
-        />
-      </React.Fragment>
+      <Step
+        key={stepIndex}
+        // Style
+        prefixCls={prefixCls}
+        classNames={classNames}
+        styles={styles}
+        // Data
+        data={data}
+        nextStatus={nextStatus}
+        active={stepIndex === current}
+        index={stepIndex}
+        last={mergedItems.length - 1 === index}
+        // Render
+        iconRender={iconRender}
+        itemRender={itemRender}
+        onClick={onChange && onStepClick}
+      />
     );
   };