feat(comp:stepper): redesign api (#760)

* feat(comp:stepper): redesign api * ci: fix test
IDuxFE · Feb 18, 2022 · 623569d · 623569d
1 parent aafa8f8
commit 623569d
Show file tree

Hide file tree

Showing 40 changed files with 736 additions and 1,092 deletions.
diff --git a/packages/cdk/utils/__tests__/vNode.spec.ts b/packages/cdk/utils/__tests__/vNode.spec.ts
@@ -1,17 +1,13 @@
 import type { VNode, VNodeChild } from 'vue'
 
-import { Comment, Fragment, Slots, Text } from 'vue'
+import { Comment, Fragment, Text } from 'vue'
 
-import { getFirstValidNode, getSlotNodes } from '../src/vNode'
+import { getFirstValidNode } from '../src/vNode'
 
 const TEMPLATE = 'template'
 
 type FakeVNode = Partial<Pick<VNode, 'type'>> & { children?: FakeVNode[] }
 
-type Writable<T> = {
-  -readonly [P in keyof T]: T[P]
-}
-
 const vNode: FakeVNode = {
   type: Comment,
 }
@@ -45,19 +41,4 @@ describe('vNode.ts', () => {
     expect(getFirstValidNode(arrayValue as VNodeChild, 1)).toEqual(vNode)
     expect(getFirstValidNode(vNode as VNodeChild, 1)).toEqual(vNode)
   })
-
-  test('getSlotNodes work', () => {
-    const slots: Writable<Slots> = {}
-    expect(getSlotNodes(slots)).toEqual([])
-
-    slots.default = () => [{ type: Fragment, dynamicChildren: [] as VNode[] }] as VNode[]
-    expect(getSlotNodes(slots)).toEqual([])
-
-    slots.default = () => [{ type: Fragment }] as VNode[]
-    expect(getSlotNodes(slots)).toEqual([])
-
-    const vNodes: VNode[] = [{ type: Text }] as VNode[]
-    slots.default = () => vNodes
-    expect(getSlotNodes(slots)).toEqual(vNodes)
-  })
 })
diff --git a/packages/cdk/utils/src/vNode.ts b/packages/cdk/utils/src/vNode.ts
@@ -46,27 +46,6 @@ export function getFirstValidNode(nodes: VNodeChild, maxDepth = 3): VNode | unde
   return getChildren(nodes as VNode, maxDepth)
 }
 
-/**
- * get all child node (Whatever dynamic or not)
- *
- * @param slots slots of the component
- * @param key key of slots, default is 'default'
- * @param options the property of the render function
- */
-export function getSlotNodes(slots: Slots, key = 'default', ...options: unknown[]): VNode[] {
-  const slot = slots[key]
-  if (!slot) {
-    return []
-  }
-
-  let vNodes = slot(...options)
-  if (vNodes.length === 1 && isFragment(vNodes[0])) {
-    vNodes = (vNodes[0].children as VNode[]) ?? vNodes[0].dynamicChildren ?? []
-  }
-
-  return vNodes
-}
-
 /**
  * checks whether a slot exists
  *
@@ -88,7 +67,7 @@ export function isEmptyNode(node: VNodeChild): boolean {
 
 export function flattenNode(
   nodes: VNodeChild,
-  filterOptions: { empty?: boolean; key?: string | string[] } = {},
+  filterOptions: { empty?: boolean; key?: string | symbol | Array<string | symbol> } = {},
 ): VNode[] {
   const result: VNode[] = []
 

diff --git a/packages/components/button/style/themes/default.less b/packages/components/button/style/themes/default.less
@@ -1,3 +1,3 @@
 @import '../../../style/themes/default.less';
-@import './default.variable.less';
 @import '../index.less';
+@import './default.variable.less';
diff --git a/packages/components/checkbox/docs/Index.zh.md b/packages/components/checkbox/docs/Index.zh.md
@@ -52,41 +52,41 @@ cover:
 | `size` | 设置组内 `IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| `'md'` | - | - |
 | `onChange` | 选中值发生变化后的回调 | `(newValue: any[], oldValue: any[]) => void`| - | - | - |
 
-<!--- insert less variable begin  --->
-## 主题变量
-
-| 名称 | `default` | `dark` | 备注 |
-| --- | --- | --- | --- |
-| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
-| `@checkbox-font-size-md` | `@form-font-size-md` | - | - |
-| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
-| `@checkbox-line-height` | `@form-line-height` | - | - |
-| `@checkbox-height-sm` | `@form-height-sm` | - | - |
-| `@checkbox-height-md` | `@form-height-md` | - | - |
-| `@checkbox-height-lg` | `@form-height-lg` | - | - |
-| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
-| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
-| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
-| `@checkbox-border-width` | `@form-border-width` | - | - |
-| `@checkbox-border-style` | `@form-border-style` | - | - |
-| `@checkbox-border-color` | `@form-border-color` | - | - |
-| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-color` | `@form-color` | - | - |
-| `@checkbox-background-color` | `@form-background-color` | - | - |
-| `@checkbox-hover-color` | `@form-hover-color` | - | - |
-| `@checkbox-active-color` | `@form-active-color` | - | - |
-| `@checkbox-focus-color` | `@form-focus-color` | - | - |
-| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
-| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
-| `@checkbox-font-size` | `@font-size-md` | - | - |
-| `@checkbox-inner-zindex` | `@zindex-l1-1` | - | - |
-| `@checkbox-box-size` | `16px` | - | - |
-| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-indeterminate-width` | `8px` | - | - |
-| `@checkbox-indeterminate-height` | `2px` | - | - |
-| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
-| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
-| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
-| `@checkbox-label-padding` | `0 @spacing-sm` | - | - |
-| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
+<!--- insert less variable begin  --->
+## 主题变量
+
+| 名称 | `default` | `dark` | 备注 |
+| --- | --- | --- | --- |
+| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
+| `@checkbox-font-size-md` | `@form-font-size-md` | - | - |
+| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
+| `@checkbox-line-height` | `@form-line-height` | - | - |
+| `@checkbox-height-sm` | `@form-height-sm` | - | - |
+| `@checkbox-height-md` | `@form-height-md` | - | - |
+| `@checkbox-height-lg` | `@form-height-lg` | - | - |
+| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
+| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
+| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
+| `@checkbox-border-width` | `@form-border-width` | - | - |
+| `@checkbox-border-style` | `@form-border-style` | - | - |
+| `@checkbox-border-color` | `@form-border-color` | - | - |
+| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
+| `@checkbox-color` | `@form-color` | - | - |
+| `@checkbox-background-color` | `@form-background-color` | - | - |
+| `@checkbox-hover-color` | `@form-hover-color` | - | - |
+| `@checkbox-active-color` | `@form-active-color` | - | - |
+| `@checkbox-focus-color` | `@form-focus-color` | - | - |
+| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
+| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
+| `@checkbox-font-size` | `@font-size-md` | - | - |
+| `@checkbox-inner-zindex` | `@zindex-l1-1` | - | - |
+| `@checkbox-box-size` | `16px` | - | - |
+| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
+| `@checkbox-indeterminate-width` | `8px` | - | - |
+| `@checkbox-indeterminate-height` | `2px` | - | - |
+| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
+| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
+| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
+| `@checkbox-label-padding` | `0 @spacing-sm` | - | - |
+| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
 <!--- insert less variable end  --->
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -394,6 +394,8 @@ const progress: ProgressConfig = {
 }
 
 const stepper: StepperConfig = {
+  clickable: false,
+  labelPlacement: 'end',
   size: 'md',
 }
 

diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -24,7 +24,7 @@ import type { ProgressFormat, ProgressIcons, ProgressSize } from '@idux/componen
 import type { ResultStatus } from '@idux/components/result'
 import type { SpaceSize } from '@idux/components/space'
 import type { SpinSize, SpinTipAlignType } from '@idux/components/spin'
-import type { StepperSize } from '@idux/components/stepper'
+import type { StepperLabelPlacement, StepperSize } from '@idux/components/stepper'
 import type { TableColumnAlign, TableColumnSortOrder, TablePaginationPosition, TableSize } from '@idux/components/table'
 import type { TagShape } from '@idux/components/tag'
 import type { TextareaAutoRows, TextareaResize } from '@idux/components/textarea'
@@ -412,6 +412,8 @@ export interface ProgressConfig {
 // Stepper
 
 export interface StepperConfig {
+  clickable: boolean
+  labelPlacement: StepperLabelPlacement
   size: StepperSize
 }
 

diff --git a/packages/components/progress/src/ProgressInfo.tsx b/packages/components/progress/src/ProgressInfo.tsx
@@ -50,10 +50,10 @@ export default defineComponent({
       if (props.hideInfo) {
         return null
       }
-
+      const slot = slots.format ?? slots.default
       return (
         <div class={`${mergedPrefixCls.value}-info`}>
-          {slots.format?.({ percent: percent.value, successPercent: formattedSuccess.value.percent }) ?? renderInfo()}
+          {slot ? slot({ percent: percent.value, successPercent: formattedSuccess.value.percent }) : renderInfo()}
         </div>
       )
     }

diff --git a/packages/components/progress/src/types.ts b/packages/components/progress/src/types.ts
@@ -6,12 +6,12 @@
  */
 
 import type { IxInnerPropTypes, IxPublicPropTypes } from '@idux/cdk/utils'
-import type { DefineComponent, HTMLAttributes, VNode } from 'vue'
+import type { DefineComponent, HTMLAttributes, VNode, VNodeChild } from 'vue'
 
 import { IxPropTypes } from '@idux/cdk/utils'
 
 export type ProgressSize = 'sm' | 'md' | 'lg'
-export type ProgressFormat = (percent: number, successPercent?: number) => string
+export type ProgressFormat = (percent: number, successPercent?: number) => VNodeChild
 export type ProgressType = 'line' | 'circle' | 'dashboard'
 export type ProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right'
 export type ProgressStatus = 'normal' | 'success' | 'exception' | 'active'

diff --git a/packages/components/stepper/__tests__/__snapshots__/steps.spec.ts.snap b/packages/components/stepper/__tests__/__snapshots__/steps.spec.ts.snap
@@ -1,28 +1,159 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Stepper percent work 1`] = `
+"<div class=\\"ix-stepper ix-stepper-label-end ix-stepper-md ix-stepper-with-percent\\">
+  <div class=\\"ix-stepper-item ix-stepper-item-finish\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"></i></div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">Finished</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+  <div class=\\"ix-stepper-item ix-stepper-item-process ix-stepper-item-active\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\">
+      <div class=\\"ix-progress-circle ix-progress ix-progress-normal\\" style=\\"width: 40px; height: 40px; font-size: 12px;\\"><svg viewBox=\\"0 0 100 100\\">
+          <!---->
+          <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 301.59289474462014px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"#f5f5f5\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"4\\" d=\\"M 50,50 m 0,-48
+       a 48,48 0 1 1 0,96
+       a 48,48 0 1 1 0,-96\\"></path>
+          <path class=\\"ix-progress-circle-path ix-progress-circle-bg\\" style=\\"transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s; stroke-dasharray: 30.159289474462014px 301.59289474462014px; stroke-dashoffset: -0px;\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"4\\" d=\\"M 50,50 m 0,-48
+       a 48,48 0 1 1 0,96
+       a 48,48 0 1 1 0,-96\\"></path>
+        </svg>
+        <div class=\\"ix-progress-info\\">
+          <!---->
+        </div>
+      </div><span>2</span>
+    </div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">In Progress</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+  <div class=\\"ix-stepper-item ix-stepper-item-wait\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\"><span>3</span></div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">Waiting</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Stepper percent work 2`] = `
+"<div class=\\"ix-stepper ix-stepper-label-end ix-stepper-md ix-stepper-with-percent\\">
+  <div class=\\"ix-stepper-item ix-stepper-item-finish\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"></i></div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">Finished</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+  <div class=\\"ix-stepper-item ix-stepper-item-process ix-stepper-item-active\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\">
+      <div class=\\"ix-progress-circle ix-progress ix-progress-normal\\" style=\\"width: 40px; height: 40px; font-size: 12px;\\"><svg viewBox=\\"0 0 100 100\\">
+          <!---->
+          <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 301.59289474462014px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"#f5f5f5\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"4\\" d=\\"M 50,50 m 0,-48
+       a 48,48 0 1 1 0,96
+       a 48,48 0 1 1 0,-96\\"></path>
+          <path class=\\"ix-progress-circle-path ix-progress-circle-bg\\" style=\\"transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s; stroke-dasharray: 150.79644737231007px 301.59289474462014px; stroke-dashoffset: -0px;\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"4\\" d=\\"M 50,50 m 0,-48
+       a 48,48 0 1 1 0,96
+       a 48,48 0 1 1 0,-96\\"></path>
+        </svg>
+        <div class=\\"ix-progress-info\\">
+          <!---->
+        </div>
+      </div><span>2</span>
+    </div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">In Progress</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+  <div class=\\"ix-stepper-item ix-stepper-item-wait\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\"><span>3</span></div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">Waiting</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`Stepper percent work 3`] = `
+"<div class=\\"ix-stepper ix-stepper-label-end ix-stepper-md ix-stepper-with-percent\\">
+  <div class=\\"ix-stepper-item ix-stepper-item-finish\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" aria-hidden=\\"true\\" data-icon=\\"check\\">
+          <path d=\\"M167.29 445.278 437.84 715.83a10.779 10.779 0 0 0 15.2 0l403.886-403.78a10.779 10.779 0 0 1 15.253 0l22.85 22.852a10.779 10.779 0 0 1 0 15.252L453.094 792.091a10.779 10.779 0 0 1-15.252 0L129.13 483.38a10.779 10.779 0 0 1 0-15.251l22.906-22.852a10.779 10.779 0 0 1 15.252 0z\\"></path>
+        </svg></i></div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">Finished</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+  <div class=\\"ix-stepper-item ix-stepper-item-process ix-stepper-item-active\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\">
+      <div class=\\"ix-progress-circle ix-progress ix-progress-success\\" style=\\"width: 40px; height: 40px; font-size: 12px;\\"><svg viewBox=\\"0 0 100 100\\">
+          <!---->
+          <path class=\\"ix-progress-circle-trail\\" style=\\"stroke-dasharray: 301.59289474462014px 301.59289474462014px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s;\\" stroke=\\"#f5f5f5\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"4\\" d=\\"M 50,50 m 0,-48
+       a 48,48 0 1 1 0,96
+       a 48,48 0 1 1 0,-96\\"></path>
+          <path class=\\"ix-progress-circle-path ix-progress-circle-bg\\" style=\\"transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s; stroke-dasharray: 301.59289474462014px 301.59289474462014px; stroke-dashoffset: -0px;\\" fill-opacity=\\"0\\" stroke-linecap=\\"round\\" stroke-width=\\"4\\" d=\\"M 50,50 m 0,-48
+       a 48,48 0 1 1 0,96
+       a 48,48 0 1 1 0,-96\\"></path>
+        </svg>
+        <div class=\\"ix-progress-info\\">
+          <!---->
+        </div>
+      </div><span>2</span>
+    </div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">In Progress</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+  <div class=\\"ix-stepper-item ix-stepper-item-wait\\">
+    <div class=\\"ix-stepper-item-tail\\"></div>
+    <div class=\\"ix-stepper-item-icon\\"><span>3</span></div>
+    <div class=\\"ix-stepper-item-content\\">
+      <div class=\\"ix-stepper-item-title\\">Waiting</div>
+      <div class=\\"ix-stepper-item-description\\">This is a description.</div>
+    </div>
+  </div>
+</div>"
+`;
+
 exports[`Stepper render work 1`] = `
-"<div class=\\"ix-stepper ix-stepper-horizontal ix-stepper-md\\">
+"<div class=\\"ix-stepper ix-stepper-label-end ix-stepper-md\\">
   <div class=\\"ix-stepper-item ix-stepper-item-finish\\">
     <div class=\\"ix-stepper-item-tail\\"></div>
-    <div class=\\"ix-stepper-item-head\\"><span class=\\"ix-stepper-item-head-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"></i></span></div>
+    <div class=\\"ix-stepper-item-icon\\"><i class=\\"ix-icon ix-icon-check\\" role=\\"img\\" aria-label=\\"check\\"></i></div>
     <div class=\\"ix-stepper-item-content\\">
-      <div class=\\"ix-stepper-item-title\\">Finish<span class=\\"ix-stepper-item-subtitle\\">20:20:01</span></div>
+      <div class=\\"ix-stepper-item-title\\">Finished</div>
       <div class=\\"ix-stepper-item-description\\">This is a description.</div>
     </div>
   </div>
-  <div class=\\"ix-stepper-item ix-stepper-item-process\\">
+  <div class=\\"ix-stepper-item ix-stepper-item-process ix-stepper-item-active\\">
     <div class=\\"ix-stepper-item-tail\\"></div>
-    <div class=\\"ix-stepper-item-head\\"><span class=\\"ix-stepper-item-head-text\\">2</span></div>
+    <div class=\\"ix-stepper-item-icon\\"><span>2</span></div>
     <div class=\\"ix-stepper-item-content\\">
-      <div class=\\"ix-stepper-item-title\\">In Progress<span class=\\"ix-stepper-item-subtitle\\"><!----></span></div>
+      <div class=\\"ix-stepper-item-title\\">In Progress</div>
       <div class=\\"ix-stepper-item-description\\">This is a description.</div>
     </div>
   </div>
   <div class=\\"ix-stepper-item ix-stepper-item-wait\\">
     <div class=\\"ix-stepper-item-tail\\"></div>
-    <div class=\\"ix-stepper-item-head\\"><span class=\\"ix-stepper-item-head-text\\">3</span></div>
+    <div class=\\"ix-stepper-item-icon\\"><span>3</span></div>
     <div class=\\"ix-stepper-item-content\\">
-      <div class=\\"ix-stepper-item-title\\">Waiting<span class=\\"ix-stepper-item-subtitle\\"><!----></span></div>
+      <div class=\\"ix-stepper-item-title\\">Waiting</div>
       <div class=\\"ix-stepper-item-description\\">This is a description.</div>
     </div>
   </div>