feat(comp:divider): add size prop (#742)

BREAKING CHANGE: `position` was deprecated, please use `labelPlacement` instead, `type` was
deprecated, please use `vertical` instead

packages/components/config/src/defaultConfig.ts

@@ -74,9 +74,10 @@ const tag: TagConfig = {}
 // --------------------- Layout ---------------------
 const divider: DividerConfig = {
   dashed: false,
+  labelPlacement: 'center',
   plain: false,
-  position: 'center',
-  type: 'horizontal',
+  size: 'md',
+  vertical: false,
 }
 
 const space: SpaceConfig = { size: 'sm', wrap: true }

packages/components/config/src/types.ts

@@ -13,7 +13,6 @@ import type { AvatarShape, AvatarSize } from '@idux/components/avatar'
 import type { CardSize } from '@idux/components/card'
 import type { DotPlacement, DotTrigger } from '@idux/components/carousel'
 import type { DatePickerType } from '@idux/components/date-picker/src/types'
-import type { DividerPosition, DividerType } from '@idux/components/divider'
 import type { FormLabelAlign, FormLayout, FormSize } from '@idux/components/form'
 import type { ListSize } from '@idux/components/list'
 import type { MenuTheme } from '@idux/components/menu'
@@ -52,8 +51,9 @@ export interface TagConfig {
 export interface DividerConfig {
   dashed: boolean
   plain: boolean
-  position: DividerPosition
-  type: DividerType
+  labelPlacement: 'start' | 'center' | 'end'
+  size: 'sm' | 'md' | 'lg'
+  vertical: boolean
 }
 
 export interface SpaceConfig {

packages/components/divider/__tests__/__snapshots__/divider.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Divider render work 1`] = `
-"<div class=\\"ix-divider-horizontal ix-divider\\">
+"<div class=\\"ix-divider ix-divider-md ix-divider-horizontal\\">
   <!---->
 </div>"
 `;

packages/components/divider/__tests__/divider.spec.ts

@@ -7,178 +7,83 @@ import { DividerProps } from '../src/types'
 
 describe('Divider', () => {
   const DividerMount = (options?: MountingOptions<Partial<DividerProps>>) => mount(IxDivider, { ...options })
-  renderWork(IxDivider)
-
-  test('type work', async () => {
-    const wrapper = DividerMount()
-    expect(wrapper.classes()).toContain('ix-divider-horizontal')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).toContain('ix-divider-horizontal')
 
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).toContain('ix-divider-vertical')
-  })
+  renderWork(IxDivider)
 
   test('dashed work', async () => {
-    const wrapper = DividerMount()
-    expect(wrapper.classes()).not.toContain('ix-divider-dashed')
+    const wrapper = DividerMount({ props: { dashed: true } })
 
-    await wrapper.setProps({ dashed: true })
     expect(wrapper.classes()).toContain('ix-divider-dashed')
 
     await wrapper.setProps({ dashed: false })
     expect(wrapper.classes()).not.toContain('ix-divider-dashed')
   })
 
-  test('slot work', async () => {
-    const text = 'Text'
-    let wrapper = DividerMount()
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text')
-    expect(wrapper.text()).not.toEqual(text)
-    expect(wrapper.find('.ix-divider-inner-text').exists()).toBeFalsy()
-
-    wrapper = DividerMount({ slots: { default: text } })
-    expect(wrapper.classes()).toContain('ix-divider-with-text')
-    expect(wrapper.text()).toEqual(text)
-    expect(wrapper.find('.ix-divider-inner-text').exists()).toBeTruthy()
+  test('label work', async () => {
+    const label = 'label'
+    const wrapper = DividerMount({ props: { label } })
+
+    expect(wrapper.classes()).toContain('ix-divider-with-label')
+    expect(wrapper.text()).toEqual(label)
+
+    const label2 = `label2`
+    await wrapper.setProps({ label: label2 })
+
+    expect(wrapper.text()).toEqual(label2)
   })
 
-  test('plain work', async () => {
-    const text = 'Text'
-    let wrapper = DividerMount()
-    expect(wrapper.classes()).not.toContain('ix-divider-plain')
+  test('label slot work', async () => {
+    const label = 'label'
+    const labelSlot = 'label slot'
+    const wrapper = DividerMount({ props: { label }, slots: { default: labelSlot } })
 
-    wrapper = DividerMount({ slots: { default: text } })
-    expect(wrapper.classes()).not.toContain('ix-divider-plain')
+    expect(wrapper.text()).toEqual(labelSlot)
+  })
+
+  test('labelPlacement work', async () => {
+    const wrapper = DividerMount({ props: { label: 'label', labelPlacement: 'start' } })
+
+    expect(wrapper.classes()).toContain('ix-divider-with-label-start')
+
+    await wrapper.setProps({ labelPlacement: 'end' })
+
+    expect(wrapper.classes()).toContain('ix-divider-with-label-end')
+
+    await wrapper.setProps({ label: undefined })
+
+    expect(wrapper.classes()).not.toContain('ix-divider-with-label-end')
+  })
+
+  test('plain work', async () => {
+    const wrapper = DividerMount({ props: { label: 'label', plain: true } })
 
-    await wrapper.setProps({ plain: true })
     expect(wrapper.classes()).toContain('ix-divider-plain')
 
     await wrapper.setProps({ plain: false })
+
+    expect(wrapper.classes()).not.toContain('ix-divider-plain')
+
+    await wrapper.setProps({ label: undefined, plain: true })
+
     expect(wrapper.classes()).not.toContain('ix-divider-plain')
   })
 
-  test('position work', async () => {
-    const text = 'Text'
-    let wrapper = DividerMount()
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    wrapper = DividerMount({ slots: { default: text } })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    wrapper = DividerMount({ slots: { default: text }, props: { position: 'left' } })
-    expect(wrapper.classes()).toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    wrapper = DividerMount({ props: { position: 'left' } })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    wrapper = DividerMount({ slots: { default: text }, props: { position: 'center' } })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    wrapper = DividerMount({ props: { position: 'center' } })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    wrapper = DividerMount({ slots: { default: text }, props: { position: 'right' } })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    wrapper = DividerMount({ props: { position: 'right' } })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'horizontal' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
-
-    await wrapper.setProps({ type: 'vertical' })
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-left')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-center')
-    expect(wrapper.classes()).not.toContain('ix-divider-with-text-right')
+  test('size work', async () => {
+    const wrapper = DividerMount({ props: { size: 'sm' } })
+
+    expect(wrapper.classes()).toContain('ix-divider-sm')
+
+    await wrapper.setProps({ size: 'lg' })
+
+    expect(wrapper.classes()).toContain('ix-divider-lg')
+  })
+
+  test('vertical work', async () => {
+    const wrapper = DividerMount({ props: { vertical: true } })
+
+    expect(wrapper.classes()).toContain('ix-divider-vertical')
+
+    await wrapper.setProps({ vertical: false })
+    expect(wrapper.classes()).toContain('ix-divider-horizontal')
   })
 })

packages/components/divider/demo/Horizontal.md

@@ -7,4 +7,4 @@ title:
 
 ## zh
 
-默认为水平分割线，可在中间加入文字。
+默认为水平分割线，可在通过 `dashed` 设置为虚线。

packages/components/divider/demo/Horizontal.vue

@@ -1,16 +1,7 @@
 <template>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
-    te dicta? Refert tamen, quo modo.
-  </p>
+  <p>见山是山，见水是水；见山不是山，见水不是水；见山还是山，见水还是水。</p>
   <IxDivider />
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
-    te dicta? Refert tamen, quo modo.
-  </p>
+  <p>见山是山，见水是水；见山不是山，见水不是水；见山还是山，见水还是水。</p>
   <IxDivider dashed />
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
-    te dicta? Refert tamen, quo modo.
-  </p>
+  <p>见山是山，见水是水；见山不是山，见水不是水；见山还是山，见水还是水。</p>
 </template>

packages/components/divider/demo/Plain.md

@@ -1,8 +1,8 @@
 ---
-order: 1
+order: 3
 title: 
   zh: 分割线使用正文样式
-  en: divider text use plain style
+  en: Divider label use plain style
 ---
 
 ## zh

packages/components/divider/demo/Plain.vue

@@ -1,21 +1,5 @@
 <template>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
-    te dicta? Refert tamen, quo modo.
-  </p>
-  <IxDivider plain>Text</IxDivider>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
-    te dicta? Refert tamen, quo modo.
-  </p>
-  <IxDivider position="left" plain>Left Text</IxDivider>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
-    te dicta? Refert tamen, quo modo.
-  </p>
-  <IxDivider position="right" plain>Right Text</IxDivider>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a
-    te dicta? Refert tamen, quo modo.
-  </p>
+  <p>见山是山，见水是水；见山不是山，见水不是水；见山还是山，见水还是水。</p>
+  <IxDivider label="iDux" plain />
+  <p>见山是山，见水是水；见山不是山，见水不是水；见山还是山，见水还是水。</p>
 </template>

packages/components/divider/demo/Size.md

@@ -0,0 +1,10 @@
+---
+order: 4
+title: 
+  zh: 分割线大小
+  en: Divider size
+---
+
+## zh
+
+使用 `size` 可以设置分割线的大小。

packages/components/divider/demo/Size.vue

@@ -0,0 +1,24 @@
+<template>
+  <IxRadioGroup v-model:value="size" buttoned>
+    <IxRadio value="sm">Small</IxRadio>
+    <IxRadio value="md">Medium</IxRadio>
+    <IxRadio value="lg">Large</IxRadio>
+  </IxRadioGroup>
+
+  <IxDivider :size="size" label="iDux" />
+  <p>见山是山，见水是水；见山不是山，见水不是水；见山还是山，见水还是水。</p>
+  <IxDivider :size="size" label="iDux" />
+  <div>
+    <span>Text</span>
+    <IxDivider :size="size" vertical />
+    <a href="#">Link</a>
+    <IxDivider :size="size" vertical dashed />
+    <a href="#">Link</a></div
+  >
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const size = ref('md')
+</script>

packages/components/divider/demo/Vertical.md

@@ -1,10 +1,10 @@
 ---
-order: 3
+order: 1
 title:
   zh: 垂直分割线
-  en: vertical divider
+  en: Vertical divider
 ---
 
 ## zh
 
-使用 `type="vertical"`设置为行内的垂直分割线
+使用 `vertical` 设置为行内的垂直分割线