fix(comp:pagination): sync design (#1101)

IDuxFE · Sep 1, 2022 · 44de517 · 44de517
1 parent 06c02b6
commit 44de517
Show file tree

Hide file tree

Showing 12 changed files with 69 additions and 70 deletions.
diff --git a/packages/components/alert/demo/Loop.vue b/packages/components/alert/demo/Loop.vue
@@ -2,7 +2,7 @@
   <IxAlert :pagination="pagination" @mouseenter="stopTimer" @mouseleave="startTimer">
     <div v-for="(item, index) in titles" :key="index">
       {{ item }}
-      <IxButton mode="link" size="sm">{{ index === 0 ? '查看详情' : '忽略' }}</IxButton>
+      <IxButton mode="link" size="xs">{{ index === 0 ? '查看详情' : '忽略' }}</IxButton>
     </div>
   </IxAlert>
 </template>

diff --git a/packages/components/alert/demo/Pagination.vue b/packages/components/alert/demo/Pagination.vue
@@ -2,21 +2,21 @@
   <IxAlert pagination>
     <div v-for="(item, index) in titles" :key="index">
       {{ item }}
-      <IxButton mode="link" size="sm">{{ index === 0 ? '查看详情' : '忽略' }}</IxButton>
+      <IxButton mode="link" size="xs">{{ index === 0 ? '查看详情' : '忽略' }}</IxButton>
     </div>
   </IxAlert>
   <IxAlert pagination type="warning">
     <div :key="1">
       上次看到这句话的时候还是上次。
-      <IxButton mode="link" size="sm">查看详情</IxButton>
+      <IxButton mode="link" size="xs">查看详情</IxButton>
     </div>
     <div :key="2">
       上次看到这么无语的话，还是在上次。
-      <IxButton mode="link" size="sm">忽略</IxButton>
+      <IxButton mode="link" size="xs">忽略</IxButton>
     </div>
     <div :key="3">
       上次看到这么的发言还是上次。
-      <IxButton mode="link" size="sm">忽略</IxButton>
+      <IxButton mode="link" size="xs">忽略</IxButton>
     </div>
   </IxAlert>
 </template>

diff --git a/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap b/packages/components/pagination/__tests__/__snapshots__/pagination.spec.ts.snap
@@ -35,7 +35,7 @@ exports[`Pagination > render work 3`] = `
   <li class=\\"ix-pagination-item\\" title=\\"50\\"><button class=\\"ix-button ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><span>50</span></button></li>
   <li class=\\"ix-pagination-item ix-pagination-item-button\\" title=\\"下一页\\"><button class=\\"ix-button ix-button-icon-only ix-button-text ix-button-circle ix-button-sm\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" role=\\"img\\" aria-label=\\"right\\"></i></button></li>
   <li class=\\"ix-pagination-sizes\\">每页<div class=\\"ix-pagination-sizes-select-wrapper\\">
-      <div class=\\"ix-select ix-selector ix-selector-single ix-selector-md\\">
+      <div class=\\"ix-select ix-selector ix-selector-single ix-selector-sm\\">
         <!---->
         <div class=\\"ix-selector-content\\">
           <div class=\\"ix-selector-item\\"><span class=\\"ix-selector-item-label\\">10</span>
@@ -49,6 +49,6 @@ exports[`Pagination > render work 3`] = `
       </div>
       <!---->
     </div>项</li>
-  <li class=\\"ix-pagination-jumper\\">前往<input class=\\"ix-input ix-input-md\\">页</li>
+  <li class=\\"ix-pagination-jumper\\">前往<input class=\\"ix-input ix-input-sm\\">页</li>
 </ul>"
 `;
diff --git a/packages/components/pagination/src/Pagination.tsx b/packages/components/pagination/src/Pagination.tsx
@@ -45,7 +45,6 @@ export default defineComponent({
       config,
       locale,
       mergedPrefixCls,
-      size,
       activeIndex,
       activeSize,
       lastIndex,
@@ -76,12 +75,7 @@ export default defineComponent({
         children.push(
           <li class={`${prefixCls}-item`}>
             {showQuickJumper.value ? (
-              <ɵInput
-                disabled={props.disabled}
-                size={size.value}
-                value={_activeIndex.toString()}
-                onKeydown={jumpToIndex}
-              />
+              <ɵInput disabled={props.disabled} size="sm" value={_activeIndex.toString()} onKeydown={jumpToIndex} />
             ) : (
               _activeIndex
             )}

diff --git a/packages/components/pagination/src/contents/Jumper.tsx b/packages/components/pagination/src/contents/Jumper.tsx
@@ -13,7 +13,7 @@ import { paginationToken } from '../token'
 
 export default defineComponent({
   setup() {
-    const { props, locale, mergedPrefixCls, size, jumpToIndex } = inject(paginationToken)!
+    const { props, locale, mergedPrefixCls, jumpToIndex } = inject(paginationToken)!
 
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-jumper`
@@ -22,7 +22,7 @@ export default defineComponent({
       return (
         <li class={prefixCls}>
           {jumpTo}
-          <ɵInput disabled={disabled} size={size.value} onKeydown={jumpToIndex} />
+          <ɵInput disabled={disabled} size="sm" onKeydown={jumpToIndex} />
           {page}
         </li>
       )

diff --git a/packages/components/pagination/src/contents/Sizes.tsx b/packages/components/pagination/src/contents/Sizes.tsx
@@ -13,7 +13,7 @@ import { paginationToken } from '../token'
 
 export default defineComponent({
   setup() {
-    const { props, config, locale, mergedPrefixCls, size, activeSize, changePageSize } = inject(paginationToken)!
+    const { props, config, locale, mergedPrefixCls, activeSize, changePageSize } = inject(paginationToken)!
 
     const sizeData = computed(() => {
       const { pageSizes = config.pageSizes } = props
@@ -33,7 +33,7 @@ export default defineComponent({
             <IxSelect
               disabled={props.disabled}
               dataSource={sizeData.value}
-              size={size.value}
+              size="sm"
               value={activeSize.value}
               onChange={changePageSize}
             />

diff --git a/packages/components/pagination/src/token.ts b/packages/components/pagination/src/token.ts
@@ -6,7 +6,7 @@
  */
 
 import type { PagesContext } from './composables/usePages'
-import type { PaginationProps, PaginationSize } from './types'
+import type { PaginationProps } from './types'
 import type { PaginationConfig } from '@idux/components/config'
 import type { Locale } from '@idux/components/locales'
 import type { ComputedRef, InjectionKey, Slots } from 'vue'
@@ -17,7 +17,6 @@ export interface PaginationContext extends PagesContext {
   config: PaginationConfig
   locale: Locale
   mergedPrefixCls: ComputedRef<string>
-  size: ComputedRef<PaginationSize>
   jumpToIndex: (event: KeyboardEvent) => void
 }
 

diff --git a/packages/components/pagination/style/index.less b/packages/components/pagination/style/index.less
@@ -4,38 +4,48 @@
 .@{pagination-prefix} {
   .reset-component();
 
-  font-size: @pagination-font-size;
   display: flex;
 
   &-item,
   &-total,
-  &-sizes,
   &-jumper {
     display: inline-block;
   }
 
+  &-total {
+    margin-right: 8px;
+  }
+
+  &-sizes,
+  &-jumper {
+    margin-left: 8px;
+  }
+
   &-sizes {
     display: inline-flex;
 
-
     &-select-wrapper {
       flex: auto;
       margin: 0 4px;
       min-width: 64px;
     }
   }
 
+  &-item,
+  &-jumper {
+    .@{idux-prefix}-input {
+      margin: 0 4px;
+      width: 40px;
+    }
+  }
+
   &-item {
     .@{button-prefix} {
       transition: none;
     }
 
-    .@{button-prefix}.@{button-prefix}-icon-only {
-      font-size: @pagination-item-icon-font-size;
-    }
-
     &-slash {
-      margin: 0 @pagination-item-margin-right-md;
+      margin: 0 4px;
     }
 
     &-jumper {
@@ -91,29 +101,19 @@
   }
 
   &-total {
-    margin-right: @pagination-item-margin-right-md;
     color: @pagination-total-color;
   }
 
   &-sizes,
   &-jumper {
-    margin-left: @pagination-item-margin-right-md;
     color: @pagination-sizes-color;
   }
 
   &-md {
-    .pagination-size(@pagination-item-height-md, @pagination-item-input-width-md, @pagination-item-margin-right-md);
+    .pagination-size(@pagination-font-size-md, @pagination-item-size-md, @pagination-item-padding-md);
   }
 
   &-sm {
-    .pagination-size(@pagination-item-height-sm, @pagination-item-input-width-sm, @pagination-item-margin-right-sm);
-
-    font-size: @pagination-font-size-sm;
-
-    .@{button-prefix} {
-      min-width: @pagination-item-spacing-sm;
-      height: @pagination-item-spacing-sm;
-      line-height: @pagination-item-spacing-sm;
-    }
+    .pagination-size(@pagination-font-size-sm, @pagination-item-size-sm, @pagination-item-padding-sm);
   }
 }
diff --git a/packages/components/pagination/style/mixin.less b/packages/components/pagination/style/mixin.less
@@ -1,25 +1,25 @@
-.pagination-size(@height, @width, @margin) {
-  .@{pagination-prefix}-item,
-  .@{pagination-prefix}-total,
-  .@{pagination-prefix}-sizes,
-  .@{pagination-prefix}-jumper {
-    height: @height;
-    line-height: @height;
-  }
+.pagination-size(@font-size, @item-size, @item-padding) {
+  font-size: @font-size;
+  @item-button-size: @item-size - @item-padding * 2;
 
-  .@{pagination-prefix}-item,
-  .@{pagination-prefix}-jumper {
-    .@{idux-prefix}-input {
-      width: @width;
+  .@{pagination-prefix}-item {
+    padding: @item-padding;
+
+    .@{button-prefix} {
+      min-width: @item-button-size;
+      height: @item-button-size;
+      line-height: @item-button-size;
     }
-  }
 
-  .@{pagination-prefix}-jumper .@{idux-prefix}-input {
-    margin: 0 (@margin / 2);
+    .@{button-prefix}.@{button-prefix}-icon-only {
+      width: @item-button-size;
+    }
   }
 
-  .@{pagination-prefix}-item {
-    margin-right: @margin;
-    margin-left: 0
+  .@{pagination-prefix}-total,
+  .@{pagination-prefix}-sizes,
+  .@{pagination-prefix}-jumper {
+    height: @item-size;
+    line-height: @item-size;
   }
 }
diff --git a/packages/components/pagination/style/themes/default.variable.less b/packages/components/pagination/style/themes/default.variable.less
@@ -1,13 +1,15 @@
-@pagination-font-size: @font-size-md;
+@pagination-font-size-md: @font-size-md;
 @pagination-font-size-sm: @font-size-sm;
 @pagination-item-icon-font-size: @font-size-sm;
-@pagination-item-height-md: @height-md;
-@pagination-item-height-sm: @height-sm;
-@pagination-item-margin-right-md: @spacing-sm;
-@pagination-item-margin-right-sm: @spacing-xs;
+
+@pagination-item-size-md: 32px;
+@pagination-item-size-sm: 24px;
+@pagination-item-padding-md: 4px;
+@pagination-item-padding-sm: 0;
+
 @pagination-item-input-width-md: 48px;
 @pagination-item-input-width-sm: 40px;
-@pagination-item-spacing-sm: 20px;
+
 @pagination-item-active-color: @button-primary;
 @pagination-item-active-background-color: @button-primary-background-color;
 @pagination-item-color: @color-graphite-d40;

diff --git a/packages/components/pagination/style/themes/seer.variable.less b/packages/components/pagination/style/themes/seer.variable.less
@@ -1,7 +1,4 @@
-@import './default.variable.less'; 
-
-@pagination-item-height-sm: 24px;
-@pagination-item-spacing-sm: 24px;
+@import './default.variable.less';
 
 @pagination-item-active-color: @color-primary;
 @pagination-item-active-background-color: @color-primary-l50;

diff --git a/packages/components/table/demo/AutoHeight.vue b/packages/components/table/demo/AutoHeight.vue
@@ -1,5 +1,12 @@
 <template>
-  <IxInputNumber v-model:value="containerHeight" :min="200" :max="600" :step="100"></IxInputNumber>
+  <IxInputNumber
+    v-model:value="containerHeight"
+    style="width: 120px; margin-bottom: 8px"
+    :min="200"
+    :max="800"
+    :step="100"
+  ></IxInputNumber>
+
   <div :style="{ height: `${containerHeight}px` }">
     <IxTable :columns="columns" :dataSource="data" autoHeight :scroll="scroll">
       <template #name="{ value }">
@@ -17,7 +24,7 @@ import { ref } from 'vue'
 
 import { TableColumn, TableScroll } from '@idux/components/table'
 
-const containerHeight = ref(300)
+const containerHeight = ref(400)
 
 interface Data {
   key: number