feat(comp:header): update style and support css variable (#1251)

packages/components/_private/header/src/types.ts

@@ -12,6 +12,6 @@ export interface HeaderProps {
   closable?: boolean
   closeIcon?: string | VNode
   header?: string | IxHeaderProps
-  size?: 'xl' | 'lg' | 'md' | 'sm'
+  size?: 'lg' | 'md' | 'sm'
   onClose?: (evt: Event) => void
 }

packages/components/button/docs/Api.zh.md

@@ -11,13 +11,19 @@
 | `danger` | 设置危险状态 | `boolean` | - | - |- |
 | `disabled` | 设置禁用状态 | `boolean` | - | - |- |
 | `ghost` | 设置幽灵状态 | `boolean` | - | - |- |
-| `icon` | 设置图标类型 | `string \| #icon` | - | - | `loading` 为 `true` 时无效 |
+| `icon` | 设置图标类型 | `string` | - | - | `loading` 为 `true` 时无效 |
 | `loading` | 设置加载中状态 | `boolean` |  - | - |- |
 | `mode` | 设置按钮种类 | `'primary' \| 'default' \| 'dashed' \| 'text' \| 'link'` | `'default'` | - |- |
 | `shape` | 设置按钮形状 | `'square' \| 'circle' \| 'round'` | - | - |- |
 | `size` | 设置按钮大小 | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | - |- |
 | `type` | 原生 `button` 的 `type` 属性 | `'button' \| 'submit' \| 'reset'` | `'button'` | - | 参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) |
 
+#### ButtonSlots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `icon` | 自定义图标 | - | - |
+
 ### IxButtonGroup
 
 #### ButtonGroupProps

packages/components/button/docs/Theme.zh.md

@@ -21,7 +21,9 @@
 | `@button-padding-lg` | `0 var(--ix-spacing-xl)` | - | - |
 | `@button-padding-xl` | `0 var(--ix-spacing-2xl)` | - | - |
 | `@button-color` | `var(--ix-text-color)` | - | - |
+| `@button-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
 | `@button-background-color` | `var(--ix-background-color)` | - | - |
+| `@button-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
 | `@button-border-color` | `var(--ix-border-color)` | - | - |
 | `@button-border-radius` | `var(--ix-border-radius-sm)` | - | - |
 | `@button-primary-color` | `var(--ix-text-color-inverse)` | - | - |
@@ -35,7 +37,5 @@
 | `@button-ghost-background-color-hover` | `rgba(255, 255, 255, 0.2)` | - | - |
 | `@button-ghost-background-color-active` | `var(--ix-background-color)` | - | - |
 | `@button-ghost-background-color-disabled` | `rgba(255, 255, 255, 0.4)` | - | - |
-| `@button-disabled-color` | `var(--ix-text-color-disabled)` | - | - |
-| `@button-disabled-background-color` | `var(--ix-background-color-deep)` | - | - |
 | `@button-icon-color` | `inherit` | `var(--ix-text-color-title-secondary)` | - |
 | `@button-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |

packages/components/button/style/index.less

@@ -244,8 +244,8 @@
     &:hover,
     &:focus,
     &:active {
-      color: @button-disabled-color;
-      background-color: @button-disabled-background-color;
+      color: @button-color-disabled;
+      background-color: @button-background-color-disabled;
       border-color: @button-border-color;
     }
   }

packages/components/button/style/themes/default.variable.less

@@ -23,7 +23,9 @@
 @button-padding-xl: 0 var(--ix-spacing-2xl);
 
 @button-color: var(--ix-text-color);
+@button-color-disabled: var(--ix-text-color-disabled);
 @button-background-color: var(--ix-background-color);
+@button-background-color-disabled: var(--ix-background-color-deep);
 @button-border-color: var(--ix-border-color);
 @button-border-radius: var(--ix-border-radius-sm);
 
@@ -41,8 +43,5 @@
 @button-ghost-background-color-active: var(--ix-background-color);
 @button-ghost-background-color-disabled: rgba(255, 255, 255, 0.4);
 
-@button-disabled-color: var(--ix-text-color-disabled);
-@button-disabled-background-color: var(--ix-background-color-deep);
-
 @button-icon-color: inherit;
 @button-icon-font-size: inherit;

packages/components/header/demo/PrefixSuffix.vue

@@ -8,11 +8,11 @@
       <IxIcon name="caret-left-filled" @click="onPrefixClick" />
     </template>
     <template #suffix>
-      <IxSpace>
+      <IxButtonGroup size="xs" mode="text" :gap="8">
         <IxButton icon="setting" @click="onSuffixClick"></IxButton>
-        <IxButton icon="menu" @click="onSuffixClick"></IxButton>
-        <IxButton @click="onSuffixClick">More</IxButton>
-      </IxSpace>
+        <IxButton icon="menu" size="xs" @click="onSuffixClick"></IxButton>
+        <IxButton size="xs" @click="onSuffixClick">More</IxButton>
+      </IxButtonGroup>
     </template>
   </IxHeader>
 </template>

packages/components/header/demo/SizeBar.vue

@@ -1,5 +1,4 @@
 <template>
-  <IxHeader showBar size="xl"> Title </IxHeader>
   <IxHeader showBar size="lg"> Title </IxHeader>
   <IxHeader showBar> Title </IxHeader>
   <IxHeader showBar size="sm"> Title </IxHeader>

packages/components/header/docs/Api.zh.md

@@ -1,19 +1,28 @@
-## API
-
 ### IxHeader
 
 #### HeaderProps
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `avatar` | 自定义头像 | `string \| AvatarProps \| #avatar` | - | - | 传入 `string` 时，为头像的图标  |
-| `description` | 标题下方的说明文字 | `string \| #description` | - | - | - |
+| `avatar` | 设置头像 | `string \| AvatarProps` | - | - | 传入 `string` 时，为头像的图标  |
+| `description` | 标题下方的说明文字 | `string` | - | - | - |
 | `disabled` | 是否禁用 | `boolean` | `false` | - | - |
-| `prefix` | 标题前缀图标 | `string \| VNode \| #prefix` | - | - | - |
-| `size` | 标题大小 | `'xl' \| 'lg' \| 'md' \| 'sm'` | `'md'` | - | - |
+| `prefix` | 标题前缀图标 | `string \| VNode` | - | - | - |
+| `size` | 标题大小 | `'lg' \| 'md' \| 'sm'` | `'md'` | - | - |
 | `showBar` | 是否显示标题前的竖条 | `boolean` | `false` | - | - |
-| `subTitle` | 二级标题文字 | `string \| #subTitle` | - | - | - |
-| `suffix` | 标题后缀图标 | `string \| VNode \| #suffix` | - | - | 通常用于额外操作 |
+| `subTitle` | 二级标题文字 | `string` | - | - | - |
+| `suffix` | 标题后缀图标 | `string \| VNode` | - | - | 通常用于额外操作 |
 | `title` | 标题文字 | `string \| #default` | - | - | - |
 | `onPrefixClick` | 前缀图标被点击 | `(evt: MouseEvent) => void` | - | - | - |
 | `onSuffixClick` | 后缀图标被点击 | `(evt: MouseEvent) => void` | - | - | - |
+
+#### HeaderSlots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `avatar` | 自定义头像 | - | - |
+| `description` | 自定义说明文字 | - | - |
+| `prefix` | 自定义前缀图标 | - | - |
+| `subTitle` | 自定义二级标题文字 | - | - |
+| `suffix` | 自定义后缀图标 | - | - |
+| `title` | 自定义标题文字 | - | - |

packages/components/header/docs/Theme.zh.md

@@ -1,36 +1,23 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@header-line-height` | `@line-height-base` | - | - |
-| `@header-height-xl` | `@height-xl` | `@height-xl` | - |
-| `@header-height-lg` | `@height-xl` | `@height-xl` | - |
-| `@header-height-md` | `@height-lg` | `@height-lg` | - |
-| `@header-height-sm` | `@height-md` | `@height-md` | - |
-| `@header-font-size` | `@font-size-md` | - | - |
-| `@header-color` | `@text-color` | - | - |
-| `@header-background-color` | `@background-color-component` | - | - |
-| `@header-disabled-color` | `@disabled-color` | - | - |
-| `@header-bar-width` | `@spacing-xs` | - | - |
-| `@header-bar-margin` | `@spacing-sm 0` | - | - |
-| `@header-bar-background-color` | `@color-primary` | - | - |
-| `@header-prefix-color` | `@color-graphite-d10` | - | - |
-| `@header-prefix-margin-right` | `@spacing-sm` | - | - |
-| `@header-prefix-padding-right` | `@spacing-sm` | - | - |
-| `@header-prefix-border-right` | `@border-width-sm @border-style @border-color` | `none` | - |
-| `@header-prefix-font-size` | `@font-size-lg` | - | - |
-| `@header-prefix-active-color` | `@color-primary` | - | - |
-| `@header-avatar-margin-right` | `@spacing-lg` | - | - |
-| `@header-title-color` | `@color-graphite-d40` | - | - |
-| `@header-title-font-weight` | `@font-weight-xl` | - | - |
-| `@header-title-margin-right` | `@spacing-lg` | - | - |
-| `@header-title-font-size-xl` | `@font-size-3xl` | `@font-size-xl` | - |
-| `@header-title-font-size-lg` | `@font-size-2xl` | `@font-size-lg` | - |
-| `@header-title-font-size-md` | `@font-size-xl` | `@font-size-md` | - |
-| `@header-title-font-size-sm` | `@font-size-lg` | `@font-size-md` | - |
-| `@header-sub-title-color` | `@text-color-secondary` | - | - |
-| `@header-suffix-color` | `@text-color-secondary` | `@color-graphite-d20` | - |
-| `@header-suffix-padding` | `0 @spacing-xs 0 @spacing-sm` | - | - |
-| `@header-suffix-active-color` | `@header-title-color` | `@color-blue-l10` | - |
-| `@header-suffix-font-size` | `@font-size-lg` | - | - |
-| `@header-suffix-font-size-sm` | `@font-size-md` | - | - |
-| `@header-description-color` | `@text-color` | - | - |
-| `@header-icon-font-size` | `@font-size-lg` | - | - |
+| `@header-height-sm` | `var(--ix-height-lg)` | `var(--ix-height-xl)` | - |
+| `@header-height-md` | `var(--ix-height-xl)` | - | - |
+| `@header-height-lg` | `var(--ix-height-xl)` | - | - |
+| `@header-height-xl` | `var(--ix-height-2xl)` | `var(--ix-height-xl)` | - |
+| `@header-font-size-sm` | `var(--ix-font-size-md)` | - | - |
+| `@header-font-size-md` | `var(--ix-font-size-lg)` | - | - |
+| `@header-font-size-lg` | `var(--ix-font-size-xl)` | - | - |
+| `@header-font-size-xl` | `var(--ix-font-size-2xl)` | - | - |
+| `@header-color` | `var(--ix-text-color-title)` | `var(--ix-text-color)` | - |
+| `@header-color-hover` | `var(--ix-color-primary-l10)` | - | - |
+| `@header-color-active` | `var(--ix-color-primary-d10)` | - | - |
+| `@header-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
+| `@header-bar-width` | `4px` | - | - |
+| `@header-bar-background-color` | `var(--ix-color-primary)` | - | - |
+| `@header-title-font-weight` | `var(--ix-font-weight-lg)` | - | - |
+| `@header-sub-title-color` | `var(--ix-text-color-title-secondary)` | - | - |
+| `@header-sub-title-font-size` | `var(--ix-font-size-md)` | - | - |
+| `@header-suffix-color` | `var(--ix-text-color-title-secondary)` | - | - |
+| `@header-description-color` | `var(--ix-text-color-info)` | - | - |
+| `@header-description-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@header-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |

packages/components/header/src/Header.tsx

@@ -36,9 +36,10 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       return normalizeClass({
         [prefixCls]: true,
+        [`${prefixCls}-${props.size}`]: true,
         [`${prefixCls}-disabled`]: props.disabled,
         [`${prefixCls}-with-bar`]: props.showBar,
-        [`${prefixCls}-${props.size}`]: true,
+        [`${prefixCls}-with-description`]: props.description || slots.description,
       })
     })
 

packages/components/header/src/types.ts

@@ -9,7 +9,7 @@ import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '
 import type { AvatarProps } from '@idux/components/avatar'
 import type { DefineComponent, HTMLAttributes, PropType, VNodeChild } from 'vue'
 
-export type HeaderSize = 'xl' | 'lg' | 'md' | 'sm'
+export type HeaderSize = 'lg' | 'md' | 'sm'
 
 export const headerProps = {
   avatar: { type: [String, Object] as PropType<string | AvatarProps>, default: undefined },