refactor: Support semantic structure (#371)

* chore: bump react

* chore: init

* chore: classNames

* chore: item semantic part

* chore: render icon

* chore: next status

* chore: line shify

* chore: style ellipsis

* chore: bump version

* chore: fix click logic

* chore: bump version to 0.0.0-alpha.1

* chore: more layout

* chore: bump version to 0.0.0-alpha.2

* chore: add itemWrapperRender

* chore: bump version to 0.0.0-alpha.3

* chore: update render logic

* chore: bump version to 0.0.0-alpha.4

* chore: link with semantic content

* chore: bump version to 0.0.0-alpha.5

* test: add test case

* test: add test case

* chore: fix def

Author: zombieJ

assets/index.less

@@ -17,46 +17,34 @@
   display: inline-block;
   vertical-align: top;
   flex: 1;
-  overflow: hidden;
-
-  &-container[role='button'] {
-    cursor: pointer;
-    transition: opacity .3s;
-
-    &:hover {
-      opacity: 0.7;
-    }
-  }
+  // overflow: hidden;
 
   &:last-child {
     flex: none;
   }
 
-  &:last-child &-tail,
   &:last-child &-title:after {
     display: none;
   }
 
-  &-container {
-    display: inline-block;
-  }
-
   &-icon,
-  &-content {
+  &-section {
     display: inline-block;
     vertical-align: top;
   }
 
   &-icon {
+    flex: none;
     border: 1px solid @wait-icon-color;
     width: 26px;
     height: 26px;
     line-height: 26px;
     text-align: center;
     border-radius: 26px;
     font-size: 14px;
-    margin-right: 8px;
-    transition: background-color .3s, border-color .3s;
+    transition:
+      background-color 0.3s,
+      border-color 0.3s;
 
     > .@{stepsPrefixClass}-icon {
       line-height: 1;
@@ -72,49 +60,20 @@
     }
   }
 
-  &-tail {
-    position: absolute;
-    left: 0;
-    width: 100%;
-    top: 12px;
-    padding: 0 10px;
-    &:after {
-      content: '';
-      display: inline-block;
-      background: @wait-tail-color;
-      height: 1px;
-      border-radius: 1px;
-      width: 100%;
-      transition: background .3s;
-    }
-  }
-  &-content {
+  &-section {
     margin-top: 3px;
   }
   &-title {
     font-size: 14px;
-    margin-bottom: 4px;
     color: #666;
     font-weight: bold;
     display: inline-block;
-    padding-right: 10px;
     position: relative;
-    &:after {
-      content: '';
-      height: 1px;
-      width: 1000px;
-      background: @wait-tail-color;
-      display: block;
-      position: absolute;
-      top: 0.55em;
-      left: 100%;
-    }
   }
   &-subtitle {
     font-size: 12px;
     display: inline-block;
     color: #999;
-    margin-left: 8px;
   }
   &-description {
     font-size: 12px;
@@ -138,24 +97,17 @@
 
 .@{stepsPrefixClass}-horizontal:not(.@{stepsPrefixClass}-label-vertical) {
   .@{stepsPrefixClass}-item {
-    margin-right: 10px;
-    &:last-child {
-      margin-right: 0;
-    }
-    &-tail {
-      display: none;
-    }
     &-description {
       max-width: @stepDescriptionMaxWidth;
     }
   }
 }
 
 .step-item-status(@status) {
-  @icon-color: "@{status}-icon-color";
-  @title-color: "@{status}-title-color";
-  @description-color: "@{status}-description-color";
-  @tail-color: "@{status}-tail-color";
+  @icon-color: '@{status}-icon-color';
+  @title-color: '@{status}-title-color';
+  @description-color: '@{status}-description-color';
+  @tail-color: '@{status}-tail-color';
   &-@{status} &-icon {
     border-color: @@icon-color;
     background-color: #fff;
@@ -168,22 +120,102 @@
   }
   &-@{status} &-title {
     color: @@title-color;
-    &:after {
-      background-color: @@tail-color;
-    }
   }
   &-@{status} &-description {
     color: @@description-color;
   }
-  &-@{status} &-tail:after {
-    background-color: @@tail-color;
+}
+
+// @import 'custom-icon';
+// @import 'small';
+// @import 'vertical';
+// @import 'label-placement';
+// @import 'progress-dot';
+// @import 'nav';
+// @import 'inline';
+
+// ======================= Horizontal =======================
+.verticalFlex() {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.@{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;
+    }
   }
 }
 
-@import 'custom-icon';
-@import 'small';
-@import 'vertical';
-@import 'label-placement';
-@import 'progress-dot';
-@import 'nav';
-@import 'inline';
+.@{stepsPrefixClass}-horizontal {
+  .@{stepsPrefixClass}-item {
+    flex: 1;
+    position: relative;
+    min-width: 0;
+
+    &-rail {
+      height: 1px;
+      background: @process-tail-color;
+    }
+  }
+
+  // Label Vertical
+  &.@{stepsPrefixClass}-label-vertical {
+    .@{stepsPrefixClass}-item {
+      .verticalFlex();
+      padding-inline: 8px;
+
+      &-section {
+        .verticalFlex();
+      }
+
+      &-rail {
+        position: absolute;
+        top: 13px;
+        left: calc(50% + 13px);
+        width: 100%;
+      }
+    }
+  }
+
+  // Label Horizontal
+  &.@{stepsPrefixClass}-label-horizontal {
+    .@{stepsPrefixClass}-item {
+      display: flex;
+
+      &:last-child {
+        flex: none;
+      }
+
+      &-section {
+        flex: 1;
+      }
+
+      &-rail {
+        flex: 1;
+        min-width: 0;
+      }
+    }
+  }
+}
+
+// ======================== Vertical ========================
+.@{stepsPrefixClass}-vertical {
+}

assets/inline.less

@@ -7,18 +7,6 @@
   .@{stepsPrefixClass}-item {
     flex: none;
 
-    &-container {
-      padding: 9px 4px 0;
-      margin: 0 2px;
-      border-radius: 4px;
-      cursor: pointer;
-      &:hover {
-        background: rgba(0, 0, 0, 0.04);
-      }
-      &[role='button']:hover {
-        opacity: 1;
-      }
-    }
 
     &-icon {
       width: 6px;
@@ -32,7 +20,7 @@
       }
     }
 
-    &-content {
+    &-section {
       width: auto;
       margin-top: 7px;
     }
@@ -47,26 +35,7 @@
       display: none;
     }
 
-    &-tail {
-      margin-left: 0;
-      top: 11px;
-      &:after {
-        height: 1px;
-      }
-    }
-    &:first-child .@{stepsPrefixClass}-item-tail{
-      width: 50%;
-      margin-left: 50%;
-    }
-    &:last-child .@{stepsPrefixClass}-item-tail{
-      display: block;
-      width: 50%;
-    }
-
     &-finish {
-      .@{stepsPrefixClass}-item-tail:after {
-        background-color: @process-tail-color;
-      }
       .@{stepsPrefixClass}-item-icon .@{stepsPrefixClass}-icon .@{stepsPrefixClass}-icon-dot {
         background-color: @process-tail-color;
       }

assets/label-placement.less

@@ -3,11 +3,7 @@
 .@{stepsPrefixClass}-label-vertical {
   .@{stepsPrefixClass}-item {
     overflow: visible;
-    &-tail {
-      padding: 0px 24px;
-      margin-left: 48px;
-    }
-    &-content {
+    &-section {
       display: block;
       text-align: center;
       margin-top: 8px;

assets/nav.less

@@ -13,11 +13,6 @@
     text-align: center;
     overflow: visible;
 
-    &-container {
-      text-align: left;
-      padding-bottom: 8px;
-      outline: none;
-    }
 
     &-title {
       max-width: @stepNavContentMaxWidth;
@@ -53,11 +48,5 @@
       margin-left: -8px;
     }
 
-    &-active {
-      .@{stepsPrefixClass}-item-container {
-        padding-bottom: 5px;
-        border-bottom: 3px solid @primary-color;
-      }
-    }
   }
 }

assets/progress-dot.less

@@ -2,16 +2,6 @@
 
 .@{stepsPrefixClass}-dot {
   .@{stepsPrefixClass}-item {
-    &-tail {
-      width: 100%;
-      top: 1px;
-      margin: 0 0 0 @stepDescriptionMaxWidth / 2;
-      padding: 0;
-
-      &:after {
-        height: 3px;
-      }
-    }
     &-icon {
       padding-right: 0;
       width: 5px;

assets/small.less

@@ -16,7 +16,7 @@
       top: -1px;
     }
   }
-  .@{stepsPrefixClass}-item-content {
+  .@{stepsPrefixClass}-item-section {
     margin-top: 0;
   }
   .@{stepsPrefixClass}-item-title {
@@ -29,15 +29,6 @@
     font-size: 12px;
     color: #999;
   }
-  .@{stepsPrefixClass}-item-tail {
-    top: 8px;
-    padding: 0 8px;
-    &:after {
-      height: 1px;
-      border-radius: 1px;
-      width: 100%;
-    }
-  }
 
   .@{stepsPrefixClass}-item-custom .@{stepsPrefixClass}-item-icon  {
     width: inherit;