From 6086f8d3eb4585efb77ba15d5fef54173f4e1a65 Mon Sep 17 00:00:00 2001
From: liuzaijiang <530604689@qq.com>
Date: Mon, 27 Dec 2021 19:04:59 +0800
Subject: [PATCH] feat(comp: space): replace gap prop with size

---
 packages/components/back-top/style/index.less |  8 +++-
 .../style/themes/default.variable.less        |  6 +++
 .../components/config/src/defaultConfig.ts    |  2 +-
 packages/components/config/src/types.ts       |  2 +-
 .../__snapshots__/space.spec.ts.snap          |  8 ++--
 .../components/space/__tests__/space.spec.ts  | 38 +++++++++----------
 packages/components/space/demo/Basic.vue      |  1 -
 .../space/demo/{Gap.md => CustomSize.md}      |  0
 packages/components/space/demo/CustomSize.vue | 20 ++++++++++
 packages/components/space/demo/Direction.vue  |  1 -
 packages/components/space/demo/Gap.vue        | 16 --------
 packages/components/space/demo/Size.md        | 10 +++++
 packages/components/space/demo/Size.vue       | 19 ++++++++++
 packages/components/space/docs/Index.zh.md    |  6 +--
 packages/components/space/src/Space.tsx       | 17 +++++++--
 packages/components/space/src/types.ts        |  9 ++++-
 16 files changed, 109 insertions(+), 54 deletions(-)
 rename packages/components/space/demo/{Gap.md => CustomSize.md} (100%)
 create mode 100644 packages/components/space/demo/CustomSize.vue
 delete mode 100644 packages/components/space/demo/Gap.vue
 create mode 100644 packages/components/space/demo/Size.md
 create mode 100644 packages/components/space/demo/Size.vue

diff --git a/packages/components/back-top/style/index.less b/packages/components/back-top/style/index.less
index 7fbc5d7cb..e979fabb9 100644
--- a/packages/components/back-top/style/index.less
+++ b/packages/components/back-top/style/index.less
@@ -10,13 +10,19 @@
   background-color: @back-top-background-color;
   width: @back-top-width;
   height: @back-top-height;
-  color: @color-white;
+  color: @back-top-color;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: @back-top-font-size;
   border-radius: @back-top-border-radius;
+  box-shadow: @back-top-box-shadow;
   cursor: pointer;
+
+  &:hover {
+    background-color: @back-top-background-hover-color;
+    color: @back-top-hover-color;
+  }
 }
 
 @media screen and (min-width: @screen-lg) and (max-width: @screen-lg-max) {
diff --git a/packages/components/back-top/style/themes/default.variable.less b/packages/components/back-top/style/themes/default.variable.less
index e4e5c9c36..b31706216 100644
--- a/packages/components/back-top/style/themes/default.variable.less
+++ b/packages/components/back-top/style/themes/default.variable.less
@@ -15,4 +15,10 @@
 
 @back-top-bottom: 50px;
 
+@back-top-color: @color-white;
+@back-top-hover-color: @color-white;
 @back-top-background-color: @color-primary;
+@back-top-background-hover-color: @color-primary;
+
+
+@back-top-box-shadow: 0 2px 8px 0 rgba(30,35,43,0.12);
diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
index 19e96b3da..7ee59cad2 100644
--- a/packages/components/config/src/defaultConfig.ts
+++ b/packages/components/config/src/defaultConfig.ts
@@ -76,7 +76,7 @@ const divider: DividerConfig = {
   type: 'horizontal',
 }
 
-const space: SpaceConfig = { gap: 8, wrap: true }
+const space: SpaceConfig = { size: 'md', wrap: true }
 
 const row: RowConfig = { wrap: true }
 
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
index 823b799b8..e759ba945 100644
--- a/packages/components/config/src/types.ts
+++ b/packages/components/config/src/types.ts
@@ -55,7 +55,7 @@ export interface DividerConfig {
 }
 
 export interface SpaceConfig {
-  gap: number | string | [number | string, number | string]
+  size: number | [number, number] | FormSize
   wrap: boolean
 }
 
diff --git a/packages/components/space/__tests__/__snapshots__/space.spec.ts.snap b/packages/components/space/__tests__/__snapshots__/space.spec.ts.snap
index 25641cf53..deb2a870b 100644
--- a/packages/components/space/__tests__/__snapshots__/space.spec.ts.snap
+++ b/packages/components/space/__tests__/__snapshots__/space.spec.ts.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Space render work 1`] = `
-"<div class=\\"ix-space ix-space-align-center ix-space-horizontal ix-space-wrap\\" style=\\"margin-bottom: -8px;\\">
-  <div class=\\"ix-space-item\\" style=\\"margin-right: 8px; padding-bottom: 8px;\\">Space</div>
-  <div class=\\"ix-space-item\\" style=\\"margin-right: 8px; padding-bottom: 8px;\\"><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
-  <div class=\\"ix-space-item\\" style=\\"padding-bottom: 8px;\\"><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
+"<div class=\\"ix-space ix-space-align-center ix-space-horizontal ix-space-wrap\\" style=\\"margin-bottom: -16px;\\">
+  <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\">Space</div>
+  <div class=\\"ix-space-item\\" style=\\"margin-right: 16px; padding-bottom: 16px;\\"><button class=\\"ix-button ix-button-primary ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
+  <div class=\\"ix-space-item\\" style=\\"padding-bottom: 16px;\\"><button class=\\"ix-button ix-button-md\\" type=\\"button\\"><span>Button</span></button></div>
 </div>"
 `;
diff --git a/packages/components/space/__tests__/space.spec.ts b/packages/components/space/__tests__/space.spec.ts
index e9a48666b..973c132f2 100644
--- a/packages/components/space/__tests__/space.spec.ts
+++ b/packages/components/space/__tests__/space.spec.ts
@@ -54,22 +54,12 @@ describe('Space', () => {
     expect(wrapper.classes()).toContain('ix-space-vertical')
   })
 
-  test('gap work', async () => {
+  test('size work', async () => {
     const wrapper = SpaceMount()
 
     const wrapperElement = wrapper.element as HTMLElement
     const itemElements = wrapper.findAll('.ix-space-item').map(item => item.element as HTMLElement)
 
-    expect(wrapperElement.style.marginBottom).toBe('-8px')
-    expect(itemElements[0].style.marginRight).toBe('8px')
-    expect(itemElements[0].style.paddingBottom).toEqual('8px')
-    expect(itemElements[1].style.marginRight).toBe('8px')
-    expect(itemElements[1].style.paddingBottom).toEqual('8px')
-    expect(itemElements[2].style.marginRight).toBe('')
-    expect(itemElements[2].style.paddingBottom).toEqual('8px')
-
-    await wrapper.setProps({ gap: 16 })
-
     expect(wrapperElement.style.marginBottom).toBe('-16px')
     expect(itemElements[0].style.marginRight).toBe('16px')
     expect(itemElements[0].style.paddingBottom).toEqual('16px')
@@ -78,17 +68,27 @@ describe('Space', () => {
     expect(itemElements[2].style.marginRight).toBe('')
     expect(itemElements[2].style.paddingBottom).toEqual('16px')
 
-    await wrapper.setProps({ gap: `24px` })
+    await wrapper.setProps({ size: 'sm' })
+
+    expect(wrapperElement.style.marginBottom).toBe('-8px')
+    expect(itemElements[0].style.marginRight).toBe('8px')
+    expect(itemElements[0].style.paddingBottom).toEqual('8px')
+    expect(itemElements[1].style.marginRight).toBe('8px')
+    expect(itemElements[1].style.paddingBottom).toEqual('8px')
+    expect(itemElements[2].style.marginRight).toBe('')
+    expect(itemElements[2].style.paddingBottom).toEqual('8px')
+
+    await wrapper.setProps({ size: 30 })
 
-    expect(wrapperElement.style.marginBottom).toBe('-24px')
-    expect(itemElements[0].style.marginRight).toBe('24px')
-    expect(itemElements[0].style.paddingBottom).toEqual('24px')
-    expect(itemElements[1].style.marginRight).toBe('24px')
-    expect(itemElements[1].style.paddingBottom).toEqual('24px')
+    expect(wrapperElement.style.marginBottom).toBe('-30px')
+    expect(itemElements[0].style.marginRight).toBe('30px')
+    expect(itemElements[0].style.paddingBottom).toEqual('30px')
+    expect(itemElements[1].style.marginRight).toBe('30px')
+    expect(itemElements[1].style.paddingBottom).toEqual('30px')
     expect(itemElements[2].style.marginRight).toBe('')
-    expect(itemElements[2].style.paddingBottom).toEqual('24px')
+    expect(itemElements[2].style.paddingBottom).toEqual('30px')
 
-    await wrapper.setProps({ gap: [8, 16] })
+    await wrapper.setProps({ size: [8, 16] })
 
     expect(wrapperElement.style.marginBottom).toBe('-16px')
     expect(itemElements[0].style.marginRight).toBe('8px')
diff --git a/packages/components/space/demo/Basic.vue b/packages/components/space/demo/Basic.vue
index 1b14770e5..144c34069 100644
--- a/packages/components/space/demo/Basic.vue
+++ b/packages/components/space/demo/Basic.vue
@@ -1,6 +1,5 @@
 <template>
   <IxSpace>
-    Space
     <IxButton mode="primary">Button</IxButton>
     <IxButton>Button</IxButton>
     <IxButton danger>Button</IxButton>
diff --git a/packages/components/space/demo/Gap.md b/packages/components/space/demo/CustomSize.md
similarity index 100%
rename from packages/components/space/demo/Gap.md
rename to packages/components/space/demo/CustomSize.md
diff --git a/packages/components/space/demo/CustomSize.vue b/packages/components/space/demo/CustomSize.vue
new file mode 100644
index 000000000..550d976d2
--- /dev/null
+++ b/packages/components/space/demo/CustomSize.vue
@@ -0,0 +1,20 @@
+<template>
+  <IxSpace direction="vertical">
+    <IxSlider v-model:value="size" :tooltip-visible="true" :min="0" :max="50"></IxSlider>
+    <IxSpace :size="size">
+      <IxButton mode="primary">Button</IxButton>
+      <IxButton>Button</IxButton>
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const size = ref(8)
+</script>
+<style scoped>
+.ix-space {
+  width: 100%;
+}
+</style>
diff --git a/packages/components/space/demo/Direction.vue b/packages/components/space/demo/Direction.vue
index 82ec8f1ae..3a0807b86 100644
--- a/packages/components/space/demo/Direction.vue
+++ b/packages/components/space/demo/Direction.vue
@@ -1,6 +1,5 @@
 <template>
   <IxSpace direction="vertical">
-    Space
     <IxButton mode="primary">Button</IxButton>
     <IxButton>Button</IxButton>
   </IxSpace>
diff --git a/packages/components/space/demo/Gap.vue b/packages/components/space/demo/Gap.vue
deleted file mode 100644
index cb21eb3c9..000000000
--- a/packages/components/space/demo/Gap.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <!-- TODO IxInputNumber -->
-  <input v-model="gap" type="number" />
-  <br /><br />
-  <IxSpace :gap="gap">
-    Space
-    <IxButton mode="primary">Button</IxButton>
-    <IxButton>Button</IxButton>
-  </IxSpace>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const gap = ref(8)
-</script>
diff --git a/packages/components/space/demo/Size.md b/packages/components/space/demo/Size.md
new file mode 100644
index 000000000..c6d770961
--- /dev/null
+++ b/packages/components/space/demo/Size.md
@@ -0,0 +1,10 @@
+---
+order: 2
+title:
+  zh: 尺寸
+  en: Size
+---
+
+## zh
+
+提供了`sm`、`md`、`lg`三种间隔尺寸
diff --git a/packages/components/space/demo/Size.vue b/packages/components/space/demo/Size.vue
new file mode 100644
index 000000000..53a391d2c
--- /dev/null
+++ b/packages/components/space/demo/Size.vue
@@ -0,0 +1,19 @@
+<template>
+  <IxSpace direction="vertical">
+    <IxRadioGroup v-model:value="size">
+      <IxRadio value="sm">小</IxRadio>
+      <IxRadio value="md">正常</IxRadio>
+      <IxRadio value="lg">大</IxRadio>
+    </IxRadioGroup>
+    <IxSpace :size="size">
+      <IxButton mode="primary">Button</IxButton>
+      <IxButton>Button</IxButton>
+    </IxSpace>
+  </IxSpace>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const size = ref('md')
+</script>
diff --git a/packages/components/space/docs/Index.zh.md b/packages/components/space/docs/Index.zh.md
index a47767aab..50885cd20 100644
--- a/packages/components/space/docs/Index.zh.md
+++ b/packages/components/space/docs/Index.zh.md
@@ -16,14 +16,10 @@ cover:
 | --- | --- | --- | --- | --- | --- |
 | `align` | 对齐方式 | `'start' \| 'center' \| 'end' \| 'baseline'` | - | - | `horizontal` 时，默认为 `center` |
 | `direction` | 间距方向 | `'horizontal' \| 'vertical'` | `'horizontal'` | - | - |
-| `gap` | 间距大小 | `number \| string \| [number \| string, number \| string]` | `8` | ✅  | 默认使用 [`flex` 布局的 `gap` 属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap), 如果遇到不兼容的浏览器，会使用 `margin` 代替。 如果传入一个数组，那么分别表示 `[rowGap, columnGap]` |
+| `size` | 间距大小 | `number \| [number, number] \| 'sm' \| 'md' \| 'lg'` | `md` | ✅  | 默认使用 [`flex` 布局的 `gap` 属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gap), 如果遇到不兼容的浏览器，会使用 `margin` 代替。 如果传入一个数组，那么分别表示 `[rowGap, columnGap]` |
 | `split` | 设置间隔分割符 | `string \| #split` | - | - | - |
 | `wrap` | 是否自动换行 | `boolean` | `true` | ✅ | - |
 
-```ts
-export type SpaceSize = 'sm' | 'md' | 'lg' | number
-```
-
 #### SpaceSlots
 
 | 属性 | 说明 | 参数类型 | 备注 |
diff --git a/packages/components/space/src/Space.tsx b/packages/components/space/src/Space.tsx
index c0da33d6e..58e2b263c 100644
--- a/packages/components/space/src/Space.tsx
+++ b/packages/components/space/src/Space.tsx
@@ -6,6 +6,7 @@
  */
 
 import type { SpaceProps } from './types'
+import type { FormSize } from '@idux/components/form'
 import type { ComputedRef, Slots, VNode } from 'vue'
 
 import { computed, defineComponent, normalizeClass } from 'vue'
@@ -14,7 +15,7 @@ import { supportsFlexGap } from '@idux/cdk/platform'
 import { convertCssPixel, flattenNode } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 
-import { spaceProps } from './types'
+import { defaultSizeMap, spaceProps } from './types'
 
 const flexGapSupported = supportsFlexGap()
 
@@ -36,9 +37,17 @@ export default defineComponent({
     })
 
     const mergedGaps = computed(() => {
-      const { gap = config.gap } = props
-      const gaps = Array.isArray(gap) ? gap : [gap, gap]
-      return gaps.map(gap => convertCssPixel(gap))
+      const { size = config.size } = props
+
+      let _size = []
+
+      if (!Array.isArray(size)) {
+        const defaultSizeMapValue = defaultSizeMap[size as FormSize]
+        _size = defaultSizeMapValue ? [defaultSizeMapValue, defaultSizeMapValue] : [size, size]
+      } else {
+        _size = size
+      }
+      return _size.map(item => convertCssPixel(item))
     })
 
     const classes = computed(() => {
diff --git a/packages/components/space/src/types.ts b/packages/components/space/src/types.ts
index c8b668404..d9288b146 100644
--- a/packages/components/space/src/types.ts
+++ b/packages/components/space/src/types.ts
@@ -6,6 +6,7 @@
  */
 
 import type { IxInnerPropTypes, IxPublicPropTypes } from '@idux/cdk/utils'
+import type { FormSize } from '@idux/components/form'
 import type { DefineComponent, HTMLAttributes } from 'vue'
 
 import { IxPropTypes } from '@idux/cdk/utils'
@@ -13,10 +14,16 @@ import { IxPropTypes } from '@idux/cdk/utils'
 export type SpaceAlign = 'start' | 'center' | 'end' | 'baseline'
 export type SpaceDirection = 'vertical' | 'horizontal'
 
+export const defaultSizeMap = {
+  sm: 8,
+  md: 16,
+  lg: 24,
+} as const
+
 export const spaceProps = {
   align: IxPropTypes.oneOf<SpaceAlign>(['start', 'center', 'end', 'baseline']),
   direction: IxPropTypes.oneOf<SpaceDirection>(['vertical', 'horizontal']).def('horizontal'),
-  gap: IxPropTypes.oneOfType([Number, String, IxPropTypes.arrayOf(Number)]),
+  size: IxPropTypes.oneOfType([Number, IxPropTypes.arrayOf(Number), IxPropTypes.oneOf<FormSize>(['sm', 'md', 'lg'])]),
   split: IxPropTypes.oneOfType([String, IxPropTypes.vNode]),
   wrap: IxPropTypes.bool,
 }