feat(descriptions): 新增支持自定义列间距功能(#2796)

.changeset/brown-rats-begin.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/descriptions": minor
+---
+
+feat: 新增支持自定义列间距功能

.changeset/nice-humans-sort.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/check-select": patch
+---
+
+fix: 修复 onClear 设置后没触发问题

.changeset/rotten-starfishes-prove.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": minor
+---
+
+feat(descriptions): 新增支持自定义列间距功能

.changeset/young-donkeys-kiss.md

@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+fix(check-select): 修复 onClear 设置后没触发问题

packages/ui/check-select/src/CheckSelect.tsx

@@ -61,6 +61,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
       visible,
       onOpen,
       onClose,
+      onClear,
       // picker
       appearance,
       invalid,
@@ -316,6 +317,7 @@ export const CheckSelect = forwardRef<HTMLDivElement | null, CheckSelectProps>(
                 value={value}
                 // @ts-ignore
                 onChange={tryChangeValue}
+                onClear={onClear}
                 data={mergedData}
                 invalid={invalid}
                 onClick={(evt) => {

packages/ui/descriptions/src/Cell.tsx

@@ -13,9 +13,9 @@ export const Cell: React.FC<CellProps> = ({
   label,
   content,
   labelWidth,
+  cellColumnGap,
 }) => {
   const Component: any = component
-
   if (bordered) {
     const compareStyle =
       !isNullish(labelWidth) && !isNullish(label)
@@ -42,7 +42,7 @@ export const Cell: React.FC<CellProps> = ({
 
   return (
     <Component className={cx(`${itemPrefixCls}-item`, className)} style={style} colSpan={colSpan}>
-      <div className={`${itemPrefixCls}-item__container`}>
+      <div className={`${itemPrefixCls}-item__container`} style={{ paddingRight: cellColumnGap }}>
         {!isNullish(label) && (
           <span className={cx(`${itemPrefixCls}-item__label`)} style={{ width: labelWidth }}>
             {label}
@@ -67,4 +67,5 @@ export interface CellProps {
   label?: React.ReactNode
   content?: React.ReactNode
   labelWidth?: React.ReactText
+  cellColumnGap?: React.ReactText
 }

packages/ui/descriptions/src/Descriptions.tsx

@@ -29,6 +29,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
       appearance = 'unset',
       labelPlacement = 'left',
       labelWidth,
+      columnGap,
       size = 'md',
       ...rest
     },
@@ -66,6 +67,7 @@ export const Descriptions = forwardRef<HTMLDivElement | null, DescriptionsProps>
                 noBackground={noBackground}
                 labelPlacement={labelPlacement}
                 rootLabelWidth={labelWidth}
+                cellColumnGap={columnGap}
               />
             ))}
           </tbody>
@@ -100,6 +102,11 @@ export interface DescriptionsProps extends HiBaseHTMLProps<'div'> {
    * label宽度
    */
   labelWidth?: React.ReactText
+  /**
+   * 单元格列间距
+   * 注：在无边框场景下生效
+   */
+  columnGap?: React.ReactText
   /**
    * 设置大小
    */

packages/ui/descriptions/src/Row.tsx

@@ -49,6 +49,7 @@ export interface RowProps {
   noBackground?: boolean
   labelPlacement?: 'left' | 'center' | 'right'
   rootLabelWidth?: React.ReactText
+  cellColumnGap?: React.ReactText
 }
 
 interface CellConfig {
@@ -60,7 +61,13 @@ interface CellConfig {
 
 function renderCols(
   items: React.ReactElement<DescriptionsItemProps>[],
-  { prefixCls, bordered, labelPlacement: labelPlacementContext, rootLabelWidth }: RowProps,
+  {
+    prefixCls,
+    bordered,
+    labelPlacement: labelPlacementContext,
+    rootLabelWidth,
+    cellColumnGap,
+  }: RowProps,
   { component, type, showLabel, showContent }: CellConfig
 ) {
   return items.map(
@@ -95,6 +102,7 @@ function renderCols(
             label={showLabel ? label : null}
             content={showContent ? children : null}
             labelWidth={labelWidth ?? rootLabelWidth}
+            cellColumnGap={index === items.length - 1 ? 0 : cellColumnGap}
           />
         )
       }