improve(design): Filter support i18n + improve Filter.Checkbox tags wrapper padding and popover min-width (#1432)

Author: dengfuping

packages/design/src/filter/components/FilterButton.tsx

@@ -42,6 +42,7 @@ interface FilterButtonProps extends BaseFilterProps, InternalFilterProps {
   showLabelDivider?: boolean;
   /** 是否显示后缀图标区域（包括下拉箭头和清除图标），默认 true */
   showSuffixIcon?: boolean;
+  style?: React.CSSProperties;
 }
 
 const FilterButton = forwardRef<FilterButtonRef, FilterButtonProps>(
@@ -65,6 +66,7 @@ const FilterButton = forwardRef<FilterButtonRef, FilterButtonProps>(
       showLabelDivider = false,
       showSuffixIcon = true,
       _isInWrapComponent = false,
+      style,
       ...restProps
     },
     ref
@@ -153,7 +155,7 @@ const FilterButton = forwardRef<FilterButtonRef, FilterButtonProps>(
           body: {
             padding: 0,
             maxWidth: 300,
-            minWidth: 200,
+            minWidth: 120,
           },
         }}
         {...popoverProps}
@@ -170,6 +172,7 @@ const FilterButton = forwardRef<FilterButtonRef, FilterButtonProps>(
                 (!isCollapsed || _isInWrapComponent) &&
                 getFilterCls(prefixCls, 'selected')
             )}
+            style={style}
           >
             <Flex align="center" justify="space-between" style={{ width: '100%' }}>
               {icon && <div className={getFilterCls(prefixCls, 'button-prefix-icon')}>{icon}</div>}

packages/design/src/filter/components/FilterCascader.tsx

@@ -460,6 +460,10 @@ const FilterCascader: React.FC<FilterCascaderProps> = ({
             selected={hasValue}
             onOpenChange={handleMainPopoverOpenChange}
             {...filterButtonProps}
+            style={{
+              ...filterButtonProps?.style,
+              paddingInline: token.paddingXXS,
+            }}
           >
             <WrappedTagsDisplay tags={selectedTags} onRemove={handleRemoveTag} />
           </FilterButton>

packages/design/src/filter/components/FilterCheckbox.tsx

@@ -320,6 +320,10 @@ const FilterCheckbox: FC<FilterCheckboxProps> = ({
           selected={hasValue}
           onOpenChange={handlePopoverOpenChange}
           {...filterButtonProps}
+          style={{
+            ...filterButtonProps?.style,
+            paddingInline: token.paddingXXS,
+          }}
         >
           <WrappedTagsDisplay tags={selectedTags} onRemove={handleRemoveTag} />
         </FilterButton>

packages/design/src/filter/components/ResponsiveFilterGroup.tsx

@@ -17,8 +17,8 @@ import Button from '../../button';
 import FilterWrap from './FilterWrap';
 import type { FilterButtonRef } from './FilterButton';
 import ConfigProvider from '../../config-provider';
-import type { Locale } from '../../locale';
-import enUS from '../../locale/en-US';
+import type { FilterLocale, Locale } from '../../locale';
+import defaultLocale from '../../locale/en-US';
 import {
   FilterProvider,
   type FilterComponentName,
@@ -46,6 +46,7 @@ export interface ResponsiveFilterGroupProps {
   extra?: ReactNode;
   /** 是否显示计数 默认 true */
   showCount?: boolean;
+  locale?: FilterLocale;
 }
 
 /**
@@ -117,9 +118,14 @@ const ResponsiveFilterGroup: FC<ResponsiveFilterGroupProps> = ({
   style,
   extra,
   showCount = true,
+  locale: customLocale,
 }) => {
   const { locale: contextLocale } = useContext(ConfigProvider.ConfigContext);
-  const filterLocale = (contextLocale as Locale)?.Filter || enUS.Filter;
+  const filterLocale: FilterLocale = {
+    ...defaultLocale.Filter,
+    ...contextLocale?.Filter,
+    ...customLocale,
+  };
   // 如果没有传入 label，使用国际化默认值
   const filterLabel = label ?? filterLocale?.filters;
   const containerRef = useRef<HTMLDivElement>(null);
@@ -459,12 +465,12 @@ const ResponsiveFilterGroup: FC<ResponsiveFilterGroupProps> = ({
                       filterButtonRef.current?.closePopover();
                     }}
                   >
-                    Apply
+                    {filterLocale?.apply}
                   </Button>
                 )}
                 {onClearAll && (
                   <Button type="link" size="small" onClick={handleClearAll}>
-                    Clear All
+                    {filterLocale?.clearAll}
                   </Button>
                 )}
               </Flex>

packages/design/src/locale/en-US.ts

@@ -30,5 +30,7 @@ export default {
     pleaseSelect: 'Please select',
     open: 'Open',
     filters: 'Filters',
+    apply: 'Apply',
+    clearAll: 'Clear All',
   },
 } as Locale;

packages/design/src/locale/index.ts

@@ -23,6 +23,8 @@ export interface FilterLocale {
   pleaseSelect?: string;
   open?: string;
   filters?: string;
+  apply?: string;
+  clearAll?: string;
 }
 
 export interface Locale extends AntLocale {

packages/design/src/locale/ja-JP.ts

@@ -30,5 +30,7 @@ export default {
     pleaseSelect: '選択してください',
     open: '開く',
     filters: 'フィルター',
+    apply: '確定',
+    clearAll: 'すべてクリア',
   },
 } as Locale;

packages/design/src/locale/zh-CN.ts

@@ -30,5 +30,7 @@ export default {
     pleaseSelect: '请选择',
     open: '开启',
     filters: '筛选',
+    apply: '确定',
+    clearAll: '清空',
   },
 } as Locale;

packages/design/src/locale/zh-TW.ts

@@ -30,5 +30,7 @@ export default {
     pleaseSelect: '請選擇',
     open: '開啟',
     filters: '篩選',
+    apply: '確定',
+    clearAll: '清空',
   },
 } as Locale;