fix(comp: stepper): vertical style error without description (#784)

IDuxFE · Mar 4, 2022 · 5ec4906 · 5ec4906
1 parent 3b8c9d9
commit 5ec4906
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 21 deletions.
diff --git a/packages/components/stepper/__tests__/steps.spec.ts b/packages/components/stepper/__tests__/steps.spec.ts
@@ -80,13 +80,17 @@ describe('Stepper', () => {
   })
 
   test('size work', async () => {
-    const wrapper = StepperMount({ props: { size: 'sm' } })
-
-    expect(wrapper.classes()).toContain('ix-stepper-sm')
+    const wrapper = StepperMount({ props: { percent: 10 } })
 
-    await wrapper.setProps({ size: 'md' })
+    const processWrapper = wrapper.find('.ix-progress-circle')
 
     expect(wrapper.classes()).toContain('ix-stepper-md')
+    expect(processWrapper.attributes('style')).toContain('width: 40px')
+
+    await wrapper.setProps({ size: 'sm' })
+
+    expect(wrapper.classes()).toContain('ix-stepper-sm')
+    expect(processWrapper.attributes('style')).toContain('width: 32px')
   })
 
   test('status work', async () => {
@@ -112,4 +116,18 @@ describe('Stepper', () => {
     expect(items[1].classes()).toContain('ix-stepper-item-error')
     expect(items[2].classes()).toContain('ix-stepper-item-wait')
   })
+
+  test('no desc work', async () => {
+    const wrapper = StepperMount({
+      slots: {
+        default: () => [
+          h(IxStepperItem, { key: 1, title: 'Finished' }),
+          h(IxStepperItem, { key: 2, title: 'In Progress' }),
+          h(IxStepperItem, { key: 3, title: 'Waiting' }),
+        ],
+      },
+    })
+
+    expect(wrapper.findAll('.ix-stepper-item-description').length).toBe(0)
+  })
 })
diff --git a/packages/components/stepper/docs/Index.zh.md b/packages/components/stepper/docs/Index.zh.md
@@ -40,6 +40,7 @@ subtitle: 步骤条
 | 名称 | `default` | `dark` | 备注 |
 | --- | --- | --- | --- |
 | `@stepper-background` | `@background-color-component` | - | - |
+| `@stepper-line-border` | `1px solid transparent` | - | - |
 | `@stepper-item-process-tail-color` | `@disabled-color` | - | - |
 | `@stepper-item-process-icon-color` | `@color-primary` | - | - |
 | `@stepper-item-process-title-color` | `@text-color` | - | - |
@@ -68,4 +69,6 @@ subtitle: 步骤条
 | `@stepper-item-icon-margin-sm` | `0 8px 0 0` | - | - |
 | `@stepper-item-title-font-size-sm` | `@font-size-md` | - | - |
 | `@stepper-item-description-font-size-sm` | `@font-size-sm` | - | - |
+| `@stepper-item-content-min-height-md` | `80px` | - | - |
+| `@stepper-item-content-min-height-sm` | `60px` | - | - |
 <!--- insert less variable end  --->
diff --git a/packages/components/stepper/src/Stepper.tsx b/packages/components/stepper/src/Stepper.tsx
@@ -5,7 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, normalizeClass, provide } from 'vue'
+import { computed, defineComponent, normalizeClass, provide, reactive, toRefs } from 'vue'
 
 import { flattenNode, useControlledProp } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
@@ -21,21 +21,22 @@ export default defineComponent({
     const mergedPrefixCls = computed(() => `${common.prefixCls}-stepper`)
     const config = useGlobalConfig('stepper')
 
+    const size = computed(() => props.size ?? config.size)
     const classes = computed(() => {
       const prefixCls = mergedPrefixCls.value
-      const { size = config.size, labelPlacement = config.labelPlacement, percent, vertical } = props
+      const { labelPlacement = config.labelPlacement, percent, vertical } = props
       return normalizeClass({
         [prefixCls]: true,
         [`${prefixCls}-label-${labelPlacement}`]: true,
-        [`${prefixCls}-${size}`]: true,
+        [`${prefixCls}-${size.value}`]: true,
         [`${prefixCls}-vertical`]: vertical,
         [`${prefixCls}-with-percent`]: percent != null,
       })
     })
 
     const [activeKey, setActiveKey] = useControlledProp(props, 'activeKey')
 
-    provide(stepperToken, { props, slots, activeKey, setActiveKey })
+    provide(stepperToken, { props: reactive({ ...toRefs(props), size }), slots, activeKey, setActiveKey })
 
     return () => {
       const children = flattenNode(slots.default?.(), { key: stepperItemKey }).map((item, index) => {

diff --git a/packages/components/stepper/style/index.less b/packages/components/stepper/style/index.less
@@ -47,10 +47,11 @@
 
     &::after {
       display: inline-block;
-      width: 1px;
       height: 100%;
       border-radius: 1px;
-      transition: background-color @transition-duration-base;
+      border-top: @stepper-line-border;
+      border-right: @stepper-line-border;
+      transition: border-color @transition-duration-base;
       content: '';
     }
   }
@@ -76,7 +77,7 @@
       position: absolute;
       left: 100%;
       width: 9999px;
-      height: 1px;
+      border-top: @stepper-line-border;
       content: '';
     }
   }

diff --git a/packages/components/stepper/style/labelPlacement.less b/packages/components/stepper/style/labelPlacement.less
@@ -2,15 +2,12 @@
   .@{stepper-item-prefix} {
     overflow: visible;
     &-tail {
-      display: block;
+      display: flex;
       width: 100%;
       height: 1px;
-      margin-left: 60px;
-      padding: 3.5px 24px;
 
       &::after {
         width: 100%;
-        height: 1px;
       }
     }
 
@@ -33,4 +30,38 @@
       }
     }
   }
+
+  &.@{stepper-prefix}-md {  
+    .@{stepper-item-prefix} {
+
+      &-tail {
+        margin-left: 65px;
+        padding: 16px 36px 0 24px;
+      }
+
+      &:first-child {
+        .ix-stepper-item-tail {
+          margin-left: 48px;
+          padding: 16px 20px;
+        }
+      }
+    }
+  }
+
+  &.@{stepper-prefix}-sm {
+    .@{stepper-item-prefix} {
+
+      &-tail {
+        margin-left: 54px;
+        padding: 12px 24px;
+      }
+
+      &:first-child {
+        .ix-stepper-item-tail {
+          margin-left: 48px;
+          padding: 12px 20px;
+        }
+      }
+    }
+  }
 }
diff --git a/packages/components/stepper/style/mixin.less b/packages/components/stepper/style/mixin.less
@@ -6,16 +6,12 @@
 
   &-@{status} &-tail::after,
   &-@{status} &-content &-title::after {
-    background-color: @@tail-color;
+    border-color: @@tail-color;
   }
 
   &-@{status} &-icon {
     border-color: @@icon-color;
     color: @@icon-color;
-
-    &-dot {
-      background-color: @@icon-color;
-    }
   }
 
   &-@{status} &-content &-title {

diff --git a/packages/components/stepper/style/size.less b/packages/components/stepper/style/size.less
@@ -3,6 +3,10 @@
     padding-left: @stepper-item-spacing-md;
   }
 
+  .@{stepper-item-prefix}-content {
+    min-height: @stepper-item-content-min-height-md;
+  }
+
   .@{stepper-item-prefix}-tail {
     left: @stepper-item-spacing-md;
     padding: @stepper-item-icon-size-md + 4px 0 4px;
@@ -43,6 +47,10 @@
     padding-left: @stepper-item-spacing-sm;
   }
 
+  .@{stepper-item-prefix}-content {
+    min-height: @stepper-item-content-min-height-sm;
+  }
+
   .@{stepper-item-prefix}-tail {
     left: @stepper-item-spacing-sm;
     padding: @stepper-item-icon-size-sm + 4px 0 4px;

diff --git a/packages/components/stepper/style/themes/default.variable.less b/packages/components/stepper/style/themes/default.variable.less
@@ -1,5 +1,7 @@
 @stepper-background: @background-color-component;
 
+@stepper-line-border: 1px solid transparent;
+
 @stepper-item-process-tail-color: @disabled-color;
 @stepper-item-process-icon-color: @color-primary;
 @stepper-item-process-title-color: @text-color;
@@ -30,3 +32,6 @@
 @stepper-item-icon-margin-sm: 0 8px 0 0;
 @stepper-item-title-font-size-sm: @font-size-md;
 @stepper-item-description-font-size-sm: @font-size-sm;
+
+@stepper-item-content-min-height-md: 80px;
+@stepper-item-content-min-height-sm: 60px;
diff --git a/packages/components/tabs/docs/Index.zh.md b/packages/components/tabs/docs/Index.zh.md
@@ -42,7 +42,6 @@ order: 0
 | `@tabs-selected-color` | `@color-primary` | - | - |
 | `@tabs-hover-color` | `@color-primary-l10` | - | - |
 | `@tabs-active-color` | `@color-primary-d10` | - | - |
-| `@tabs-active-font-size` | `@font-size-md` | - | - |
 | `@tabs-disabled-color` | `@color-graphite-l10` | - | - |
 | `@tabs-nav-font-size` | `@font-size-md` | - | - |
 | `@tabs-nav-background-color` | `@color-white` | - | - |