style: update checkbox

Author: tangjinzhou

components/checkbox/Checkbox.tsx

@@ -4,7 +4,7 @@ import VcCheckbox from '../vc-checkbox/Checkbox';
 import { flattenChildren } from '../_util/props-util';
 import warning from '../_util/warning';
 import type { EventHandler } from '../_util/EventInterface';
-import { useInjectFormItemContext } from '../form/FormItemContext';
+import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItemContext';
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 import type { CheckboxChangeEvent, CheckboxProps } from './interface';
@@ -18,6 +18,7 @@ export default defineComponent({
   // emits: ['change', 'update:checked'],
   setup(props, { emit, attrs, slots, expose }) {
     const formItemContext = useInjectFormItemContext();
+    const formItemInputContext = FormItemInputContext.useInject();
     const { prefixCls, direction } = useConfigInject('checkbox', props);
     const checkboxGroup = inject(CheckboxGroupContextKey, undefined);
     const uniId = Symbol('checkboxUniId');
@@ -84,20 +85,27 @@ export default defineComponent({
           [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
           [`${prefixCls.value}-wrapper-checked`]: checkboxProps.checked,
           [`${prefixCls.value}-wrapper-disabled`]: checkboxProps.disabled,
+          [`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
         },
         className,
       );
       const checkboxClass = classNames({
         [`${prefixCls.value}-indeterminate`]: indeterminate,
       });
+      const ariaChecked = indeterminate ? 'mixed' : undefined;
       return (
         <label
           class={classString}
           style={style}
           onMouseenter={onMouseenter as EventHandler}
           onMouseleave={onMouseleave as EventHandler}
         >
-          <VcCheckbox {...checkboxProps} class={checkboxClass} ref={checkboxRef} />
+          <VcCheckbox
+            aria-checked={ariaChecked}
+            {...checkboxProps}
+            class={checkboxClass}
+            ref={checkboxRef}
+          />
           {children.length ? <span>{children}</span> : null}
         </label>
       );

components/checkbox/style/index.tsx

@@ -1,2 +1,3 @@
 import '../../style/index.less';
 import './index.less';
+// deps-lint-skip: form

components/checkbox/style/mixin.less

@@ -169,6 +169,13 @@
     & + & {
       margin-left: 8px;
     }
+
+    &&-in-form-item {
+      input[type='checkbox'] {
+        width: 14px;
+        height: 14px;
+      }
+    }
   }
 
   .@{checkbox-prefix-cls} + span {

components/collapse/style/index.less

@@ -120,6 +120,11 @@
     border-radius: 0;
   }
 
+  // hide the last border-bottom in borderless mode
+  &-borderless > &-item:last-child {
+    border-bottom: 0;
+  }
+
   &-borderless > &-item > &-content {
     background-color: transparent;
     border-top: 0;