fix(comp:checkbox): style update and css variable support (#1291)

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

@@ -28,7 +28,7 @@
 
 #### ButtonGroupProps
 
-> 除以下表格之外还支持原生 `Space` 组件的[所有属性](/components/space/zh?tab=api#SpaceProps)。
+> 除以下表格之外还支持 `Space` 组件的[所有属性](/components/space/zh?tab=api#SpaceProps)。
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |

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

@@ -1,7 +1,7 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
 | `@button-font-size-xs` | `var(--ix-font-size-sm)` | - | - |
-| `@button-font-size-sm` | `var(--ix-font-size-sm)` | - | - |
+| `@button-font-size-sm` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
 | `@button-font-size-md` | `var(--ix-font-size-md)` | - | - |
 | `@button-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
 | `@button-font-size-xl` | `var(--ix-font-size-xl)` | `var(--ix-font-size-lg)` | - |

packages/components/button/style/index.less

@@ -305,7 +305,7 @@
       z-index: 2;
     }
 
-    &&-disabled {
+    &.@{button-prefix}-disabled {
       z-index: 0;
     }
   }

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

@@ -1,5 +1,5 @@
 @button-font-size-xs: var(--ix-font-size-sm);
-@button-font-size-sm: var(--ix-font-size-sm);
+@button-font-size-sm: var(--ix-font-size-md);
 @button-font-size-md: var(--ix-font-size-md);
 @button-font-size-lg: var(--ix-font-size-lg);
 @button-font-size-xl: var(--ix-font-size-xl);

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

@@ -1,5 +1,6 @@
 @import './default.variable.less';
 
+@button-font-size-sm: var(--ix-font-size-sm);
 @button-font-size-lg: var(--ix-font-size-md);
 @button-font-size-xl: var(--ix-font-size-lg);
 

packages/components/checkbox/__tests__/__snapshots__/checkboxGroup.spec.ts.snap

@@ -1,11 +1,15 @@
 // Vitest Snapshot v1
 
 exports[`CheckboxGroup > render work 1`] = `
-"<div class=\\"ix-checkbox-group\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option1\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option1</span>
-    <!---->
-  </label><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option2\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option2</span>
-    <!---->
-  </label><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option3\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">option3</span>
-    <!---->
-  </label></div>"
+"<div class=\\"ix-space ix-checkbox-group\\" style=\\"margin-bottom: -8px;\\">
+  <div class=\\"ix-space-item\\" style=\\"margin-right: 8px; padding-bottom: 8px;\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option1\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+      <!----><span class=\\"ix-checkbox-label\\">option1</span>
+    </label></div>
+  <div class=\\"ix-space-item\\" style=\\"margin-right: 8px; padding-bottom: 8px;\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option2\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+      <!----><span class=\\"ix-checkbox-label\\">option2</span>
+    </label></div>
+  <div class=\\"ix-space-item\\" style=\\"padding-bottom: 8px;\\"><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"option3\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
+      <!----><span class=\\"ix-checkbox-label\\">option3</span>
+    </label></div>
+</div>"
 `;

packages/components/checkbox/__tests__/checkbox.spec.ts

@@ -84,19 +84,20 @@ describe('Checkbox', () => {
       },
     })
 
-    expect(wrapper.classes()).toContain('ix-checkbox-button')
+    expect(wrapper.classes()).toContain('ix-button')
+    expect(wrapper.classes()).toContain('ix-button-default')
   })
 
   test('size work', async () => {
     const wrapper = CheckboxMount({
       props: { size: 'sm' },
     })
 
-    expect(wrapper.classes()).not.toContain('ix-checkbox-sm')
+    expect(wrapper.classes()).not.toContain('ix-button-sm')
 
     await wrapper.setProps({ buttoned: true })
 
-    expect(wrapper.classes()).toContain('ix-checkbox-sm')
+    expect(wrapper.classes()).toContain('ix-button-sm')
   })
 
   test('disabled work', async () => {

packages/components/checkbox/__tests__/checkboxGroup.spec.ts

@@ -108,25 +108,14 @@ describe('CheckboxGroup', () => {
       },
     })
 
-    expect(wrapper.findAll('.ix-checkbox-button').length).toBe(3)
+    expect(wrapper.findAll('.ix-button').length).toBe(3)
   })
 
   test('size work', async () => {
     const wrapper = CheckboxGroupMount({
       props: { buttoned: true, size: 'sm' },
     })
 
-    expect(wrapper.findAll('.ix-checkbox-sm').length).toBe(3)
-  })
-
-  test('gap work', async () => {
-    const wrapper = CheckboxGroupMount()
-
-    expect(wrapper.classes()).not.toContain('ix-checkbox-group-with-gap')
-
-    await wrapper.setProps({ gap: 8 })
-
-    expect(wrapper.classes()).toContain('ix-checkbox-group-with-gap')
-    expect((wrapper.element as HTMLElement).style.gap).toEqual('8px')
+    expect(wrapper.findAll('.ix-button-sm').length).toBe(3)
   })
 })

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

@@ -31,17 +31,18 @@
 
 #### CheckboxGroupProps
 
+> 除以下表格之外还支持 `Space` 组件的[所有属性](/components/space/zh?tab=api#SpaceProps)。
+
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `control` | 控件控制器 | `string \| number \| AbstractControl` | - | - | 配合 `@idux/cdk/forms` 使用, 参考 [Form](/components/form/zh) |
 | `v-model:value` | 指定当前勾选框是否选中 |  `any[]`  | - | - | 使用 `control` 时，此配置无效 |
 | `buttoned` | 设置组内 `IxCheckbox` 的 `buttoned` 属性 | `boolean` | `false` | - | - |
 | `dataSource` | 勾选框组数据源 | `CheckboxData[]` | - | - | 优先级高于 `default` 插槽 |
 | `disabled` | 设置组内 `IxCheckbox` 的 `disabled` 属性 | `boolean` | `false` | - | 使用 `control` 时，此配置无效 |
-| `gap` | 设置组内 `IxCheckbox` 的间隔 | `number \| string` | - | - | - |
+| `gap` | 设置勾选框组的 gap 配置 | `number \| string` | - | - | 也就是 `Space` 的 `size`, 默认为 `8`, 为按钮组时默认为 `0` |
 | `name` | 设置组内 `IxCheckbox` 的 `name` 属性 | `string` | - | - |- |
 | `size` | 设置组内 `IxCheckbox` 的 `size` 属性 | `'sm' \| 'md' \| 'lg'`| - | - | - |
-| `vertical` | 设置组内排列方向 | `boolean` | - | - | 默认为水平排列方向，可设`true`为垂直排列 |
 | `onChange` | 选中值发生变化后的回调 | `(newValue: any[], oldValue: any[]) => void`| - | - | - |
 
 ```ts

packages/components/checkbox/docs/Index.zh.md

@@ -3,6 +3,6 @@ category: components
 type: 数据录入
 title: Checkbox
 subtitle: 复选框
-cover:
+theme: true
 ---
 

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

@@ -1,37 +1,13 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
-| `@checkbox-font-size-md` | `@form-font-size-md` | `@form-font-size-sm` | - |
-| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
-| `@checkbox-line-height` | `@form-line-height` | - | - |
-| `@checkbox-height-sm` | `@form-height-sm` | - | - |
-| `@checkbox-height-md` | `@form-height-md` | - | - |
-| `@checkbox-height-lg` | `@form-height-lg` | - | - |
-| `@checkbox-min-width-sm` | `@width-xs` | - | - |
-| `@checkbox-min-width-md` | `@width-sm` | - | - |
-| `@checkbox-min-width-lg` | `@width-md` | - | - |
-| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
-| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
-| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
-| `@checkbox-border-width` | `@form-border-width` | - | - |
-| `@checkbox-border-style` | `@form-border-style` | - | - |
-| `@checkbox-border-color` | `@form-border-color` | - | - |
-| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-color` | `@form-color` | - | - |
-| `@checkbox-background-color` | `@form-background-color` | - | - |
-| `@checkbox-hover-color` | `@form-hover-color` | `@form-active-color` | - |
-| `@checkbox-active-color` | `@form-active-color` | - | - |
-| `@checkbox-focus-color` | `@form-focus-color` | `@form-active-color` | - |
-| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
-| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
-| `@checkbox-font-size` | `@font-size-md` | `@font-size-sm` | - |
-| `@checkbox-box-size` | `16px` | - | - |
-| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-indeterminate-width` | `8px` | - | - |
-| `@checkbox-indeterminate-height` | `2px` | - | - |
-| `@checkbox-tick-color` | `@color-white` | - | - |
-| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
-| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
-| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
-| `@checkbox-label-padding` | `0 @spacing-sm` | `0 @spacing-xs` | - |
-| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
+| `@checkbox-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@checkbox-color` | `var(--ix-text-color)` | - | - |
+| `@checkbox-color-active` | `var(--ix-color-primary)` | - | - |
+| `@checkbox-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
+| `@checkbox-background-color` | `var(--ix-background-color)` | - | - |
+| `@checkbox-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
+| `@checkbox-border-color` | `var(--ix-border-color)` | - | - |
+| `@checkbox-border-color-hover` | `var(--ix-color-primary)` | - | - |
+| `@checkbox-border-color-focus` | `var(--ix-color-primary)` | - | - |
+| `@checkbox-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
+| `@checkbox-label-padding` | `0 8px` | `0 4px` | - |

packages/components/checkbox/src/Checkbox.tsx

@@ -20,6 +20,12 @@ import { convertStringVNode, useKey } from '@idux/components/utils'
 import { type CheckboxGroupContext, checkboxGroupToken } from './token'
 import { type CheckValue, type CheckboxProps, checkboxProps } from './types'
 
+const buttonSizeMap = {
+  sm: 'xs',
+  md: 'sm',
+  lg: 'md',
+}
+
 export default defineComponent({
   name: 'IxCheckbox',
   inheritAttrs: false,
@@ -45,7 +51,10 @@ export default defineComponent({
       return checkboxGroup ? key : undefined
     })
     const isButtoned = computed(() => props.buttoned ?? checkboxGroup?.props.buttoned ?? false)
-    const size = computed(() => props.size ?? checkboxGroup?.props.size ?? formContext?.size.value ?? config.size)
+    const mergedSize = computed(() => {
+      const size = props.size ?? checkboxGroup?.props.size ?? formContext?.size.value ?? config.size
+      return buttonSizeMap[size]
+    })
     const { isChecked, isDisabled, isFocused, handleChange, handleBlur, handleFocus } = useCheckbox(
       props,
       checkboxGroup,
@@ -57,12 +66,14 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       const classes = {
         [prefixCls]: true,
-        [`${prefixCls}-button`]: buttoned,
         [`${prefixCls}-checked`]: !indeterminate && isChecked.value,
         [`${prefixCls}-disabled`]: isDisabled.value,
         [`${prefixCls}-focused`]: isFocused.value,
         [`${prefixCls}-indeterminate`]: indeterminate,
-        [`${prefixCls}-${size.value}`]: buttoned,
+        [`${common.prefixCls}-button`]: buttoned,
+        [`${common.prefixCls}-button-default`]: buttoned,
+        [`${common.prefixCls}-button-disabled`]: buttoned && isDisabled.value,
+        [`${common.prefixCls}-button-${mergedSize.value}`]: buttoned,
       }
       return normalizeClass([classes, attrs.class])
     })
@@ -98,8 +109,8 @@ export default defineComponent({
             />
             {!isButtoned.value && <span class={`${prefixCls}-input-box`} tabindex={tabindex as number} />}
           </span>
+          {isButtoned.value && <span class={`${prefixCls}-input-tick`} tabindex={tabindex as number} />}
           {labelNode && <span class={`${prefixCls}-label`}>{labelNode}</span>}
-          {isButtoned.value && <span class={`${prefixCls}-button-tick`} tabindex={tabindex as number} />}
         </label>
       )
     }

packages/components/checkbox/src/CheckboxGroup.tsx

@@ -7,10 +7,7 @@
 
 import { type VNodeChild, computed, defineComponent, normalizeClass, provide } from 'vue'
 
-import { isNil } from 'lodash-es'
-
 import { useAccessorAndControl } from '@idux/cdk/forms'
-import { convertCssPixel } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 import { useFormItemRegister } from '@idux/components/form'
 import { IxSpace } from '@idux/components/space'
@@ -29,23 +26,23 @@ export default defineComponent({
     useFormItemRegister(control)
     provide(checkboxGroupToken, { props, accessor })
 
+    const mergedGap = computed(() => {
+      return props.gap ?? (props.buttoned ? 0 : 8)
+    })
+
     const classes = computed(() => {
-      const { gap } = props
+      const { buttoned } = props
+      const gap = mergedGap.value
       const prefixCls = mergedPrefixCls.value
       return normalizeClass({
         [prefixCls]: true,
-        [`${prefixCls}-with-gap`]: !isNil(gap),
+        [`${common.prefixCls}-button-group`]: buttoned,
+        [`${common.prefixCls}-button-group-compact`]: buttoned && (!gap || gap === '0'),
       })
     })
 
-    const style = computed(() => {
-      const { gap } = props
-      return gap != null ? `gap: ${convertCssPixel(gap)};` : undefined
-    })
-
     return () => {
-      const { dataSource, vertical } = props
-
+      const { dataSource } = props
       let children: VNodeChild[] | undefined
       if (dataSource) {
         children = dataSource.map(item => {
@@ -57,9 +54,9 @@ export default defineComponent({
         children = slots.default ? slots.default() : undefined
       }
       return (
-        <div class={classes.value} style={style.value}>
-          {vertical ? <IxSpace vertical={true}>{children}</IxSpace> : children}
-        </div>
+        <IxSpace class={classes.value} size={mergedGap.value}>
+          {children}
+        </IxSpace>
       )
     }
   },

packages/components/checkbox/src/types.ts

@@ -10,6 +10,7 @@
 import type { AbstractControl } from '@idux/cdk/forms'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, VKey } from '@idux/cdk/utils'
 import type { FormSize } from '@idux/components/form'
+import type { SpaceProps } from '@idux/components/space'
 import type { DefineComponent, HTMLAttributes, LabelHTMLAttributes, PropType } from 'vue'
 
 export const checkboxProps = {
@@ -57,15 +58,14 @@ export const checkboxGroupProps = {
   gap: { type: [Number, String] as PropType<number | string>, default: undefined },
   name: { type: String, default: undefined },
   size: { type: String as PropType<FormSize>, default: undefined },
-  vertical: { type: Boolean, default: false },
 
   // events
   'onUpdate:value': { type: [Function, Array] as PropType<MaybeArray<(value: any) => void>> },
   onChange: { type: [Function, Array] as PropType<MaybeArray<(value: any, oldValue: any) => void>> },
 } as const
 
 export type CheckboxGroupProps = ExtractInnerPropTypes<typeof checkboxGroupProps>
-export type CheckboxGroupPublicProps = ExtractPublicPropTypes<typeof checkboxGroupProps>
+export type CheckboxGroupPublicProps = ExtractPublicPropTypes<typeof checkboxGroupProps> & Omit<SpaceProps, 'size'>
 export type CheckboxGroupComponent = DefineComponent<
   Omit<HTMLAttributes, keyof CheckboxGroupPublicProps> & CheckboxGroupPublicProps
 >