style: Add click hotspot for sorting (#1031)

* style: Add click hotspot for sorting

* fix: [Table] flter icon and title alignment

packages/semi-foundation/table/table.scss

@@ -375,10 +375,15 @@ $module: #{$prefix}-table;
             display: inline-block;
             width: $width-table_column_sorter-icon;
             height: $height-table_column_sorter-icon;
-            cursor: pointer;
             vertical-align: middle;
             text-align: center;
 
+            &-wrapper {
+                display: inline-flex;
+                align-items: center;
+                cursor: pointer;
+            }
+
             &-up,
             &-down {
                 height: 0;
@@ -408,7 +413,8 @@ $module: #{$prefix}-table;
             display: inline-flex;
             cursor: pointer;
             color: $color-table_filter-text-default;
-            vertical-align: middle;
+            // vertical-align: middle;
+            align-items: center;
 
             svg {
                 width: $width-table_column_filter-icon;

packages/semi-foundation/table/variables.scss

@@ -36,8 +36,8 @@ $radius-table_base: 4px;
 $width-table_column_selection: 48px; // 表格默认列宽
 $width-table_column_sorter-icon: 16px; // 表格排序按钮宽度
 $height-table_column_sorter-icon: 16px; // 表格排序按钮高度
-$width-table_column_filter-icon: 12px; // 表格过滤按钮宽度
-$height-table_column_filter-icon: 12px; // 表格过滤按钮高度
+$width-table_column_filter-icon: 16px; // 表格过滤按钮宽度
+$height-table_column_filter-icon: 16px; // 表格过滤按钮高度
 $width-table_cell_fixed_left_last: 1px; // 表格左上角单元格底部描边宽度
 $width-table_cell_fixed_right_first: 1px; // 表格左上角单元格右侧描边宽度
 $width-table_react_resizable_handle: 9px; // 表格伸缩列调节热区宽度

packages/semi-ui/table/ColumnFilter.tsx

@@ -164,12 +164,13 @@ export default function ColumnFilter(props: ColumnFilterProps = {}): React.React
     } else {
         iconElem = (
             <div className={finalCls}>
+                {'\u200b'/* ZWSP(zero-width space) */}
                 <IconFilter
                     role="button"
                     aria-label="Filter data with this column"
                     aria-haspopup="listbox"
                     tabIndex={-1}
-                    size="small"
+                    size="default"
                 />
             </div>
         );

packages/semi-ui/table/ColumnSorter.tsx

@@ -15,6 +15,7 @@ export interface ColumnSorterProps {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
     prefixCls?: string;
     sortOrder?: SortOrder;
+    title?: React.ReactNode;
 }
 
 export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
@@ -33,9 +34,9 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
     };
 
     render() {
-        const { prefixCls, onClick, sortOrder, style } = this.props;
+        const { prefixCls, onClick, sortOrder, style, title } = this.props;
 
-        const iconBtnSize = 'small';
+        const iconBtnSize = 'default';
 
         const upCls = cls(`${prefixCls}-column-sorter-up`, {
             on: sortOrder === strings.SORT_DIRECTIONS[0],
@@ -58,17 +59,22 @@ export default class ColumnSorter extends PureComponent<ColumnSorterProps> {
                 role='button'
                 {...ariaProps}
                 tabIndex={-1}
-                style={style}
-                className={`${prefixCls}-column-sorter`}
+                className={`${prefixCls}-column-sorter-wrapper`}
                 onClick={onClick}
                 onKeyPress={e => isEnterPress(e) && onClick(e as any)}
             >
-                <span className={`${upCls}`}>
-                    <IconCaretup size={iconBtnSize} />
-                </span>
-                <span className={`${downCls}`}>
-                    <IconCaretdown size={iconBtnSize} />
-                </span>
+                {title}
+                <div
+                    style={style}
+                    className={`${prefixCls}-column-sorter`}
+                >
+                    <span className={`${upCls}`}>
+                        <IconCaretup size={iconBtnSize} />
+                    </span>
+                    <span className={`${downCls}`}>
+                        <IconCaretdown size={iconBtnSize} />
+                    </span>
+                </div>
             </div>
         );
     }

packages/semi-ui/table/Table.tsx

@@ -933,16 +933,22 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
             const stateSortOrder = get(curQuery, 'sortOrder');
             const defaultSortOrder = get(curQuery, 'defaultSortOrder', false);
             const sortOrder = this.foundation.isSortOrderValid(stateSortOrder) ? stateSortOrder : defaultSortOrder;
+            const TitleNode = typeof rawTitle !== 'function' && <React.Fragment key={strings.DEFAULT_KEY_COLUMN_TITLE}>{rawTitle as React.ReactNode}</React.Fragment>;
             if (typeof column.sorter === 'function' || column.sorter === true) {
+                // In order to increase the click hot area of ​​sorting, when sorting is required & useFullRender is false,
+                // both the title and sorting areas are used as the click hot area for sorting。
                 const sorter = (
                     <ColumnSorter
                         key={strings.DEFAULT_KEY_COLUMN_SORTER}
                         sortOrder={sortOrder}
                         onClick={e => this.foundation.handleSort(column, e)}
+                        title={TitleNode}
                     />
                 );
                 useFullRender && (titleMap.sorter = sorter);
                 titleArr.push(sorter);
+            } else {
+                titleArr.push(TitleNode);
             }
 
             const stateFilteredValue = get(curQuery, 'filteredValue');
@@ -964,10 +970,7 @@ class Table<RecordType extends Record<string, any>> extends BaseComponent<Normal
 
             const newTitle =
                 typeof rawTitle === 'function' ?
-                    () => rawTitle(titleMap) :
-                    titleArr.unshift(
-                        <React.Fragment key={strings.DEFAULT_KEY_COLUMN_TITLE}>{rawTitle}</React.Fragment>
-                    ) && titleArr;
+                    () => rawTitle(titleMap) : titleArr;
 
             column = { ...column, title: newTitle };
         }