IDuxFE · danranVm · Dec 2, 2022 · Dec 2, 2022 · Dec 2, 2022
diff --git a/packages/components/cascader/style/themes/default.variable.less b/packages/components/cascader/style/themes/default.variable.less
@@ -24,4 +24,4 @@
 @cascader-overlay-background-color: @select-option-container-background-color;
 @cascader-overlay-border-radius: @select-option-container-border-radius;
 @cascader-overlay-box-shadow: @select-option-container-box-shadow;
-@cascader-overlay-search-wrapper-padding: @select-overlay-input-padding;
+@cascader-overlay-search-wrapper-padding: @select-overlay-search-wrapper-padding;
diff --git a/packages/components/checkbox/style/index.less b/packages/components/checkbox/style/index.less
@@ -158,8 +158,4 @@
       border-top-color: var(--ix-text-color-info);
     }
   }
-
-  &-group {
-    line-height: 0;
-  }
 }
diff --git a/packages/components/dropdown/style/index.less b/packages/components/dropdown/style/index.less
@@ -4,6 +4,11 @@
 .@{dropdown-prefix} {
   .reset-component-new();
 
+  background-color: @dropdown-background-color;
+  box-shadow: @dropdown-box-shadow;
+  border-radius: @dropdown-border-radius;
+  min-width: @dropdown-min-width;
+
   &-trigger {
     cursor: pointer;
   }
@@ -12,13 +17,7 @@
     color: @dropdown-background-color;
   }
 
-  &,
-  & .@{menu-prefix}-dropdown {
-    border-radius: @dropdown-border-radius;
-    min-width: @dropdown-min-width;
-  }
-
-  & .@{menu-prefix}-dropdown:not(.@{menu-prefix}-dark) {
-    box-shadow: @dropdown-box-shadow;
+  .@{menu-prefix}-dropdown {
+    box-shadow: none;
   }
 }
diff --git a/packages/components/header/demo/Basic.vue b/packages/components/header/demo/Basic.vue
@@ -1,7 +1,7 @@
 <template>
-  <IxHeader title="Title" description="This is a description" />
+  <IxHeader title="Title" suffix="close" />
   <IxHeader>
     Title
-    <template #description> This is a description </template>
+    <template #suffix> <IxIcon name="close"></IxIcon> </template>
   </IxHeader>
 </template>
diff --git a/packages/components/header/demo/PrefixSuffix.vue b/packages/components/header/demo/PrefixSuffix.vue
@@ -14,8 +14,12 @@
       <IxIcon name="caret-left-filled" @click="onPrefixClick" />
     </template>
     <template #suffix>
-      <IxButton icon="setting" mode="text" size="xs" @click="onSuffixClick" />
-      <IxButton icon="menu" mode="text" size="xs" @click="onSuffixClick" />
+      <IxButtonGroup :gap="8" size="xs">
+        <IxButton icon="setting" @click="onSuffixClick" />
+        <IxButton icon="setting" @click="onSuffixClick" />
+        <IxButton icon="setting" @click="onSuffixClick" />
+        <IxButton icon="menu" @click="onSuffixClick" />
+      </IxButtonGroup>
     </template>
   </IxHeader>
 </template>

diff --git a/packages/components/header/demo/SizeBar.vue b/packages/components/header/demo/SizeBar.vue
@@ -1,5 +1,11 @@
 <template>
   <IxHeader showBar size="lg"> Title </IxHeader>
   <IxHeader showBar> Title </IxHeader>
-  <IxHeader showBar size="sm"> Title </IxHeader>
+  <IxHeader showBar size="sm">
+    Title
+
+    <template #suffix>
+      <IxButton size="xs" icon="setting"></IxButton>
+    </template>
+  </IxHeader>
 </template>
diff --git a/packages/components/header/style/index.less b/packages/components/header/style/index.less
@@ -12,20 +12,20 @@
   width: 100%;
 
   &-sm {
-    .header-size(@header-height-sm, @header-font-size-sm);
+    .header-size(@header-height-sm, @header-font-size-sm, 8px);
   }
 
   &-md {
-    .header-size(@header-height-md, @header-font-size-md);
+    .header-size(@header-height-md, @header-font-size-md, 8px);
   }
 
   &-lg {
-    .header-size(@header-height-lg, @header-font-size-lg);
+    .header-size(@header-height-lg, @header-font-size-lg, 8px);
   }
 
   // @deprecated
   &-xl {
-    .header-size(@header-height-xl, @header-font-size-xl);
+    .header-size(@header-height-xl, @header-font-size-xl, 12px);
   }
 
   &-prefix {
@@ -34,7 +34,6 @@
 
   .@{avatar-prefix} {
     margin-right: 16px;
-    align-self: center;
   }
 
   &-title-wrapper {
@@ -61,19 +60,18 @@
 
   &-prefix,
   &-suffix {
-    align-self: flex-start;
     cursor: pointer;
 
-    &:hover > .@{icon-prefix} {
-      color: @header-color-hover;
+    .@{icon-prefix} {
+      font-size: @header-icon-font-size;
     }
 
-    &:active > .@{icon-prefix} {
-      color: @header-color-active;
+    &:hover {
+      color: @header-color-hover;
     }
 
-    > .@{icon-prefix} {
-      font-size: @header-icon-font-size;
+    &:active {
+      color: @header-color-active;
     }
   }
 
@@ -121,15 +119,22 @@
       content: '';
     }
   }
+
+  &-with-description {
+    .@{header-prefix}-prefix,
+    .@{header-prefix}-suffix {
+      align-self: flex-start;
+    }
+  }
 }
 
-.header-size(@height, @font-size) {
+.header-size(@height, @font-size, @padding) {
   @line-height: calc(@font-size + var(--ix-line-height-gutter));
 
   font-size: @font-size;
   line-height: @line-height;
-  padding-top: calc((@height - @line-height) / 2);
-  padding-bottom: calc((@height - @line-height) / 2);
+  min-height: @height;
+  padding: @padding 0;
 
   &.@{header-prefix}-with-bar {
     &::before {
@@ -139,9 +144,6 @@
   }
 
   &.@{header-prefix}-with-description {
-    @description-line-height: calc(@header-description-font-size + var(--ix-line-height-gutter));
-
-    padding-top: calc((@height + 16px - @line-height - @description-line-height) / 2);
-    padding-bottom: calc((@height + 16px - @line-height - @description-line-height) / 2);
+    min-height: calc(@height + 16px);
   }
 }
diff --git a/packages/components/radio/style/index.less b/packages/components/radio/style/index.less
@@ -120,8 +120,4 @@
       background-color: var(--ix-background-color-medium);
     }
   }
-
-  &-group {
-    line-height: 0;
-  }
 }
diff --git a/packages/components/select/style/index.less b/packages/components/select/style/index.less
@@ -56,7 +56,7 @@
     overflow: auto;
 
     &-search-wrapper {
-      padding: @select-overlay-input-padding;
+      padding: @select-overlay-search-wrapper-padding;
 
       .@{input-prefix}-clear,
       .@{input-prefix}-suffix {

diff --git a/packages/components/select/style/themes/default.variable.less b/packages/components/select/style/themes/default.variable.less
@@ -49,7 +49,7 @@
 @select-option-container-border-radius: @border-radius-sm;
 @select-option-container-box-shadow: @shadow-bottom-md;
 
-@select-overlay-input-padding: 0 @spacing-md @spacing-sm;
+@select-overlay-search-wrapper-padding: 4px 12px 8px;
 
 @select-icon-font-size: @font-size-lg;
 @select-icon-margin-right: @spacing-xs;

diff --git a/packages/components/table/style/index.less b/packages/components/table/style/index.less
@@ -194,11 +194,6 @@
 
   &-cell-sortable {
     cursor: pointer;
-    transition: background var(--ix-transition-duration-fast);
-
-    &:hover {
-      background: @table-body-row-background-color-hover;
-    }
   }
 
   &-sortable-trigger {
@@ -242,6 +237,7 @@
     margin: 0 -8px 0 4px;
     align-items: center;
     justify-content: center;
+    user-select: none;
     border-radius: @table-border-radius;
     color: @table-head-icon-color;
     transition: color var(--ix-transition-duration-fast), background var(--ix-transition-duration-fast);

diff --git a/packages/components/tree-select/src/content/Content.tsx b/packages/components/tree-select/src/content/Content.tsx
@@ -236,7 +236,8 @@ export default defineComponent({
         children.unshift(
           <div class={`${prefixCls}-overlay-search-wrapper`}>
             <IxButton
-              size="md"
+              size="xs"
+              shape="square"
               title={expandAllBtnStatus.value ? locale.treeSelect.expandAll : locale.treeSelect.collapseAll}
               icon={expandAllBtnStatus.value ? 'tree-expand' : 'tree-unexpand'}
               onClick={handleExpandAll}

diff --git a/packages/components/tree-select/style/themes/default.variable.less b/packages/components/tree-select/style/themes/default.variable.less
@@ -13,5 +13,5 @@
 @tree-select-option-container-background-color: @background-color-component;
 @tree-select-option-container-border-radius: @border-radius-sm;
 @tree-select-option-container-box-shadow: @shadow-bottom-md;
-@tree-select-option-container-search-wrapper-padding: 0 @spacing-md @spacing-md @spacing-md;
+@tree-select-option-container-search-wrapper-padding: @select-overlay-search-wrapper-padding;
 @tree-select-option-container-tree-node-padding: 0 0 0 @spacing-xs;
diff --git a/packages/pro/table/src/ProTable.tsx b/packages/pro/table/src/ProTable.tsx
@@ -13,9 +13,9 @@ import { isString } from 'lodash-es'
 
 import { type VirtualScrollToOptions } from '@idux/cdk/scroll'
 import { useState } from '@idux/cdk/utils'
+import { IxButtonGroup } from '@idux/components/button'
 import { useGlobalConfig as useComponentsGlobalConfig } from '@idux/components/config'
 import { IxHeader } from '@idux/components/header'
-import { IxSpace } from '@idux/components/space'
 import { IxTable, type TableCustomAdditional, type TableCustomTag, type TableInstance } from '@idux/components/table'
 import { useGlobalConfig } from '@idux/pro/config'
 
@@ -73,7 +73,11 @@ export default defineComponent({
       if (toolbar.length <= 1) {
         return toolbar
       }
-      return <IxSpace align="center">{toolbar}</IxSpace>
+      return (
+        <IxButtonGroup align="center" gap={8}>
+          {toolbar}
+        </IxButtonGroup>
+      )
     }
 
     const renderHeader = () => {

diff --git a/packages/pro/table/src/ProTableLayoutTool.tsx b/packages/pro/table/src/ProTableLayoutTool.tsx
@@ -9,6 +9,7 @@ import { defineComponent, inject, normalizeClass } from 'vue'
 
 import { IxIcon } from '@idux/components/icon'
 import { IxPopover } from '@idux/components/popover'
+import { IxSpace } from '@idux/components/space'
 import { TableSize } from '@idux/components/table'
 
 import LayoutToolContent from './contents/LayoutToolContent'
@@ -31,21 +32,30 @@ export default defineComponent({
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-layout-tool`
       const layoutLocale = locale.table.layout
-      const size = mergedSize.value
+
       const renderIcon = (type: TableSize) => {
         const name = defaultIconMap[type]
         const title = layoutLocale[type]
         return (
           <IxIcon
             key={name}
-            class={normalizeClass([`${prefixCls}-header-icon`, size === type ? `${prefixCls}-header-icon-active` : ''])}
+            class={normalizeClass([
+              `${prefixCls}-header-icon`,
+              mergedSize.value === type ? `${prefixCls}-header-icon-active` : '',
+            ])}
             name={name}
             title={title}
             onClick={() => setMergedSize(type)}
           />
         )
       }
-      const suffixNode = [renderIcon('sm'), renderIcon('md'), renderIcon('lg')]
+      const suffixNode = (
+        <IxSpace>
+          {renderIcon('sm')}
+          {renderIcon('md')}
+          {renderIcon('lg')}
+        </IxSpace>
+      )
       const popoverHeader = { title: layoutLocale.title, suffix: suffixNode }
 
       return (

diff --git a/packages/pro/table/style/index.less b/packages/pro/table/style/index.less
@@ -21,25 +21,17 @@
         color: @text-color;
         font-weight: @font-weight-md;
       }
+    }
 
-      &-suffix {
+    &-header {
+      &-icon {
         color: @text-color;
 
         &:hover {
-          .@{pro-table-prefix}-layout-tool-header-icon-active:not(:hover) {
-            color: @text-color;
-          }
-        }
-
-        .@{icon-prefix} + .@{icon-prefix} {
-          margin-left: @spacing-sm;
+          color: @color-primary;
         }
-      }
-    }
 
-    &-header {
-      &-icon {
-        &-active {
+        &&-active {
           color: @color-primary;
         }
       }

diff --git a/packages/pro/tree/__tests__/__snapshots__/proTree.spec.ts.snap b/packages/pro/tree/__tests__/__snapshots__/proTree.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`ProTree > render work 1`] = `
     <!---->
     <!---->
   </div>
-  <div class=\\"ix-pro-tree-search-wrapper\\"><button class=\\"ix-button ix-button-icon-only ix-button-default ix-button-xs\\" type=\\"button\\" title=\\"收起全部\\"><i class=\\"ix-icon ix-icon-tree-unexpand\\" role=\\"img\\" aria-label=\\"tree-unexpand\\"></i></button><span class=\\"ix-input ix-input-sm ix-input-clearable ix-input-with-suffix\\"><!----><input class=\\"ix-input-inner\\"><span class=\\"ix-input-suffix\\"><i class=\\"ix-icon ix-icon-search\\" role=\\"img\\" aria-label=\\"search\\"></i></span><span class=\\"ix-input-clear\\"><i class=\\"ix-icon ix-icon-close-circle\\" role=\\"img\\" aria-label=\\"close-circle\\"></i></span></span></div>
+  <div class=\\"ix-pro-tree-search-wrapper\\"><button class=\\"ix-button ix-button-icon-only ix-button-default ix-button-square ix-button-xs\\" type=\\"button\\" title=\\"收起全部\\"><i class=\\"ix-icon ix-icon-tree-unexpand\\" role=\\"img\\" aria-label=\\"tree-unexpand\\"></i></button><span class=\\"ix-input ix-input-sm ix-input-clearable ix-input-with-suffix\\"><!----><input class=\\"ix-input-inner\\"><span class=\\"ix-input-suffix\\"><i class=\\"ix-icon ix-icon-search\\" role=\\"img\\" aria-label=\\"search\\"></i></span><span class=\\"ix-input-clear\\"><i class=\\"ix-icon ix-icon-close-circle\\" role=\\"img\\" aria-label=\\"close-circle\\"></i></span></span></div>
   <div class=\\"ix-tree ix-tree-blocked ix-tree-auto-height ix-tree-show-line\\" role=\\"tree\\">
     <!----><input style=\\"width: 0px; height: 0px; display: flex; overflow: hidden; opacity: 0; border: 0px; padding: 0px; margin: 0px;\\" tabindex=\\"0\\" aria-label=\\"for screen reader\\">
     <div class=\\"ix-tree-content\\">

diff --git a/packages/pro/tree/src/ProTree.tsx b/packages/pro/tree/src/ProTree.tsx
@@ -162,6 +162,7 @@ export default defineComponent({
             <div class={`${prefixCls}-search-wrapper`}>
               <IxButton
                 size="xs"
+                shape="square"
                 title={expandAllBtnStatus.value ? locale.tree.expandAll : locale.tree.collapseAll}
                 icon={expandAllBtnStatus.value ? 'tree-expand' : 'tree-unexpand'}
                 onClick={handleExpandAll}

diff --git a/packages/site/src/styles/layout/header.less b/packages/site/src/styles/layout/header.less
@@ -5,22 +5,22 @@
   transition: @transition-all-base;
 
   &-logo {
-    display: inline-block;
-    height: @header-height;
-    line-height: @header-height;
+    display: flex;
+    align-items: center;
+    height: 100%;
     padding-left: @spacing-3xl;
     text-align: center;
     text-decoration: none;
 
     img {
       position: relative;
-      top: 12px;
-      width: 40px;
+      width: 36px;
       margin-right: @spacing-lg;
     }
 
     h2 {
       display: inline-block;
+      margin: 0;
     }
   }