From 5465975b1a59870676ac96a6e404181fdb04abdf Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 9 Aug 2023 10:52:39 +0800 Subject: [PATCH] feat: table component token (#44118) * feat: table component token * chore: add typedoc --- .../__snapshots__/demo-extend.test.ts.snap | 2566 +++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 2356 +++++++++++++++ components/table/demo/component-token.md | 7 + components/table/demo/component-token.tsx | 313 ++ components/table/index.en-US.md | 1 + components/table/index.zh-CN.md | 1 + components/table/style/filter.ts | 2 + components/table/style/index.ts | 440 ++- components/table/style/sticky.ts | 3 +- docs/react/migrate-less-variables.en-US.md | 41 +- docs/react/migrate-less-variables.zh-CN.md | 41 +- 11 files changed, 5661 insertions(+), 110 deletions(-) create mode 100644 components/table/demo/component-token.md create mode 100644 components/table/demo/component-token.tsx diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index b3046b05859f..c367c23c1759 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -867,6 +867,2572 @@ exports[`renders components/table/demo/colspan-rowspan.tsx extend context correc exports[`renders components/table/demo/colspan-rowspan.tsx extend context correctly 2`] = `[]`; +exports[`renders components/table/demo/component-token.tsx extend context correctly 1`] = ` +Array [ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
, +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ 		+ Name + +
+ + Age + + + + +
+
+
+
+ +
+
+
+
+ + Address + + + + + + +
+
+ +
+
+ + Action + + + + +
+
+
+
+ +
+
+
+ + + + John Brown + + 12 + + New York No. 1 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 22 + + New York No. 2 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 32 + + New York No. 3 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 42 + + New York No. 4 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 52 + + New York No. 5 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 62 + + New York No. 6 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 72 + + New York No. 7 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 82 + + New York No. 8 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 92 + + New York No. 9 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 102 + + New York No. 10 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+
+
+
+ Here is footer +
+
+
    +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • +
+
+
+
, +] +`; + +exports[`renders components/table/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/table/demo/custom-filter-panel.tsx extend context correctly 1`] = `
`; +exports[`renders components/table/demo/component-token.tsx correctly 1`] = ` +Array [ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
, +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ 		+ Name + +
+ + Age + + + + +
+ 		+
+ + Address + + + + + + +
+ 		+
+ + Action + + + + +
+
+ + + + John Brown + + 12 + + New York No. 1 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 22 + + New York No. 2 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 32 + + New York No. 3 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 42 + + New York No. 4 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 52 + + New York No. 5 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 62 + + New York No. 6 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 72 + + New York No. 7 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 82 + + New York No. 8 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 92 + + New York No. 9 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 102 + + New York No. 10 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+
+
+
+ Here is footer +
+
+
    +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • +
+
+
+
, +] +`; + exports[`renders components/table/demo/custom-filter-panel.tsx correctly 1`] = `
= [ + { + title: 'Name', + dataIndex: 'name', + }, + { + title: 'Age', + dataIndex: 'age', + sorter: (a, b) => a.age - b.age, + }, + { + title: 'Address', + dataIndex: 'address', + filters: [ + { + text: 'London', + value: 'London', + }, + { + text: 'New York', + value: 'New York', + }, + ], + onFilter: (value, record) => record.address.indexOf(value as string) === 0, + }, + { + title: 'Action', + key: 'action', + sorter: true, + render: () => ( + + Delete + + + More actions + + + + + ), + }, +]; + +const data: DataType[] = []; +for (let i = 1; i <= 10; i++) { + data.push({ + key: i, + name: 'John Brown', + age: Number(`${i}2`), + address: `New York No. ${i} Lake Park`, + description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`, + }); +} + +const defaultExpandable = { expandedRowRender: (record: DataType) =>

{record.description}

}; +const defaultTitle = () => 'Here is title'; +const defaultFooter = () => 'Here is footer'; + +const App: React.FC = () => { + const [bordered, setBordered] = useState(false); + const [loading, setLoading] = useState(false); + const [size, setSize] = useState('large'); + const [expandable, setExpandable] = useState | undefined>( + defaultExpandable, + ); + const [showTitle, setShowTitle] = useState(false); + const [showHeader, setShowHeader] = useState(true); + const [showfooter, setShowFooter] = useState(true); + const [rowSelection, setRowSelection] = useState | undefined>({}); + const [hasData, setHasData] = useState(true); + const [tableLayout, setTableLayout] = useState(); + const [top, setTop] = useState('none'); + const [bottom, setBottom] = useState('bottomRight'); + const [ellipsis, setEllipsis] = useState(false); + const [yScroll, setYScroll] = useState(false); + const [xScroll, setXScroll] = useState(); + + const handleBorderChange = (enable: boolean) => { + setBordered(enable); + }; + + const handleLoadingChange = (enable: boolean) => { + setLoading(enable); + }; + + const handleSizeChange = (e: RadioChangeEvent) => { + setSize(e.target.value); + }; + + const handleTableLayoutChange = (e: RadioChangeEvent) => { + setTableLayout(e.target.value); + }; + + const handleExpandChange = (enable: boolean) => { + setExpandable(enable ? defaultExpandable : undefined); + }; + + const handleEllipsisChange = (enable: boolean) => { + setEllipsis(enable); + }; + + const handleTitleChange = (enable: boolean) => { + setShowTitle(enable); + }; + + const handleHeaderChange = (enable: boolean) => { + setShowHeader(enable); + }; + + const handleFooterChange = (enable: boolean) => { + setShowFooter(enable); + }; + + const handleRowSelectionChange = (enable: boolean) => { + setRowSelection(enable ? {} : undefined); + }; + + const handleYScrollChange = (enable: boolean) => { + setYScroll(enable); + }; + + const handleXScrollChange = (e: RadioChangeEvent) => { + setXScroll(e.target.value); + }; + + const handleDataChange = (newHasData: boolean) => { + setHasData(newHasData); + }; + + const scroll: { x?: number | string; y?: number | string } = {}; + if (yScroll) { + scroll.y = 240; + } + if (xScroll) { + scroll.x = '100vw'; + } + + const tableColumns = columns.map((item) => ({ ...item, ellipsis })); + if (xScroll === 'fixed') { + tableColumns[0].fixed = true; + tableColumns[tableColumns.length - 1].fixed = 'right'; + } + + const tableProps: TableProps = { + bordered, + loading, + size, + expandable, + title: showTitle ? defaultTitle : undefined, + showHeader, + footer: showfooter ? defaultFooter : undefined, + rowSelection, + scroll, + tableLayout, + }; + + return ( + <> +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Large + Middle + Small + + + + + Unset + Scroll + Fixed Columns + + + + + Unset + Fixed + + + + { + setTop(e.target.value); + }} + > + TopLeft + TopCenter + TopRight + None + + + + { + setBottom(e.target.value); + }} + > + BottomLeft + BottomCenter + BottomRight + None + + +
+ + + + + ); +}; + +export default App; diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index d0b24b0a5a80..7e13638a2ea1 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -105,6 +105,7 @@ const columns = [ Fixed header and scroll bar with the pageDynamic Settingsselections with icon +Component Token ## API diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index b35ce8051cc6..818c831fc5f6 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -106,6 +106,7 @@ const columns = [ 随页面滚动的固定表头和滚动条动态控制表格属性带下拉箭头的表头 +组件 Token ## API diff --git a/components/table/style/filter.ts b/components/table/style/filter.ts index bd04f1d92a28..d86a223d7bf6 100644 --- a/components/table/style/filter.ts +++ b/components/table/style/filter.ts @@ -29,6 +29,7 @@ const genFilterStyle: GenerateStyle = (token) => { controlItemBgHover, controlItemBgActive, boxShadowSecondary, + filterDropdownMenuBg, } = token; const dropdownPrefixCls = `${antCls}-dropdown`; const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`; @@ -88,6 +89,7 @@ const genFilterStyle: GenerateStyle = (token) => { border: 0, boxShadow: 'none', borderRadius: 'unset', + backgroundColor: filterDropdownMenuBg, '&:empty::after': { display: 'block', diff --git a/components/table/style/index.ts b/components/table/style/index.ts index f1ffe8b34c18..6a11ccef9166 100644 --- a/components/table/style/index.ts +++ b/components/table/style/index.ts @@ -18,7 +18,163 @@ import genSorterStyle from './sorter'; import genStickyStyle from './sticky'; import genSummaryStyle from './summary'; -export interface ComponentToken {} +export interface ComponentToken { + /** + * @desc 表头背景 + * @descEN Background of table header + */ + headerBg: string; + /** + * @desc 表头文字颜色 + * @descEN Color of table header text + */ + headerColor: string; + /** + * @desc 表头排序激活态背景色 + * @descEN Background color of table header when sorted + */ + headerSortActiveBg: string; + /** + * @desc 表头排序激活态悬浮背景色 + * @descEN Background color of table header when sorted and hovered + */ + headerSortHoverBg: string; + /** + * @desc 表格排序列背景色 + * @descEN Background color of table sorted column + */ + bodySortBg: string; + /** + * @desc 表格行悬浮背景色 + * @descEN Background color of table hovered row + */ + rowHoverBg: string; + /** + * @desc 表格行选中背景色 + * @descEN Background color of table selected row + */ + rowSelectedBg: string; + /** + * @desc 表格行选中悬浮背景色 + * @descEN Background color of table selected row when hovered + */ + rowSelectedHoverBg: string; + /** + * @desc 表格行展开背景色 + * @descEN Background color of table expanded row + */ + rowExpandedBg: string; + /** + * @desc 单元格纵向内间距 + * @descEN Vertical padding of table cell + */ + cellPaddingBlock: number; + /** + * @desc 单元格横向内间距（默认大尺寸） + * @descEN Horizontal padding of table cell (large size by default) + */ + cellPaddingInline: number; + /** + * @desc 单元格纵向内间距（中等尺寸） + * @descEN Vertical padding of table cell (middle size) + */ + cellPaddingBlockMD: number; + /** + * @desc 单元格横向内间距（中等尺寸） + * @descEN Horizontal padding of table cell (middle size) + */ + cellPaddingInlineMD: number; + /** + * @desc 单元格纵向内间距（小尺寸） + * @descEN Vertical padding of table cell (small size) + */ + cellPaddingBlockSM: number; + /** + * @desc 单元格横向内间距（小尺寸） + * @descEN Horizontal padding of table cell (small size) + */ + cellPaddingInlineSM: number; + /** + * @desc 表格边框/分割线颜色 + * @descEN Border color of table + */ + borderColor: string; + /** + * @desc 表头圆角 + * @descEN Border radius of table header + */ + headerBorderRadius: number; + /** + * @desc 表格底部背景色 + * @descEN Background of footer + */ + footerBg: string; + /** + * @desc 表格底部文字颜色 + * @descEN Color of footer text + */ + footerColor: string; + /** + * @desc 单元格文字大小（默认大尺寸） + * @descEN Font size of table cell (large size by default) + */ + cellFontSize: number; + /** + * @desc 单元格文字大小（中等尺寸） + * @descEN Font size of table cell (middle size) + */ + cellFontSizeMD: number; + /** + * @desc 单元格文字大小（小尺寸） + * @descEN Font size of table cell (small size) + */ + cellFontSizeSM: number; + /** + * @desc 表头分割线颜色 + * @descEN Split border color of table header + */ + headerSplitColor: string; + /** + * @desc 固定表头排序激活态背景色 + * @descEN Background color of fixed table header when sorted + */ + fixedHeaderSortActiveBg: string; + /** + * @desc 表头过滤按钮悬浮背景色 + * @descEN Background color of table header filter button when hovered + */ + headerFilterHoverBg: string; + /** + * @desc 过滤下拉菜单选项背景 + * @descEN Background of filter dropdown menu item + */ + filterDropdownMenuBg: string; + /** + * @desc 过滤下拉菜单颜色 + * @descEN Color of filter dropdown + */ + filterDropdownBg: string; + /** + * @desc 展开按钮背景色 + * @descEN Background of expand button + */ + expandIconBg: string; + /** + * @desc 选择列宽度 + * @descEN Width of selection column + */ + selectionColumnWidth: number; + /** + * @desc Sticky 模式下滚动条背景色 + * @descEN Background of sticky scrollbar + */ + stickyScrollBarBg: string; + /** + * @desc Sticky 模式下滚动条圆角 + * @descEN Border radius of sticky scrollbar + */ + stickyScrollBarBorderRadius: number; +} export interface TableToken extends FullToken<'Table'> { tableFontSize: number; @@ -238,118 +394,188 @@ const genTableStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Table', (token) => { - const { - controlItemBgActive, - controlItemBgActiveHover, - colorTextPlaceholder, - colorTextHeading, - colorSplit, - colorBorderSecondary, - fontSize, - padding, - paddingXS, - paddingSM, - controlHeight, - colorFillAlter, - colorIcon, - colorIconHover, - opacityLoading, - colorBgContainer, - borderRadiusLG, - colorFillContent, - colorFillSecondary, - controlInteractiveSize: checkboxSize, - } = token; +export default genComponentStyleHook( + 'Table', + (token) => { + const { + colorTextHeading, + colorSplit, + colorIcon, + colorIconHover, + opacityLoading, + colorBgContainer, + controlInteractiveSize: checkboxSize, + headerBg, + headerColor, + headerSortActiveBg, + headerSortHoverBg, + bodySortBg, + rowHoverBg, + rowSelectedBg, + rowSelectedHoverBg, + rowExpandedBg, + cellPaddingBlock, + cellPaddingInline, + cellPaddingBlockMD, + cellPaddingInlineMD, + cellPaddingBlockSM, + cellPaddingInlineSM, + borderColor, + footerBg, + footerColor, + headerBorderRadius, + cellFontSize, + cellFontSizeMD, + cellFontSizeSM, + headerSplitColor, + fixedHeaderSortActiveBg, + headerFilterHoverBg, + filterDropdownBg, + expandIconBg, + selectionColumnWidth, + stickyScrollBarBg, + } = token; - const baseColorAction = new TinyColor(colorIcon); - const baseColorActionHover = new TinyColor(colorIconHover); + const baseColorAction = new TinyColor(colorIcon); + const baseColorActionHover = new TinyColor(colorIconHover); - const tableSelectedRowBg = controlItemBgActive; - const zIndexTableFixed: number = 2; + const zIndexTableFixed: number = 2; - const colorFillSecondarySolid = new TinyColor(colorFillSecondary) - .onBackground(colorBgContainer) - .toHexShortString(); - const colorFillContentSolid = new TinyColor(colorFillContent) - .onBackground(colorBgContainer) - .toHexShortString(); + const tableToken = mergeToken(token, { + tableFontSize: cellFontSize, + tableBg: colorBgContainer, + tableRadius: headerBorderRadius, - const colorFillAlterSolid = new TinyColor(colorFillAlter) - .onBackground(colorBgContainer) - .toHexShortString(); + tablePaddingVertical: cellPaddingBlock, + tablePaddingHorizontal: cellPaddingInline, + tablePaddingVerticalMiddle: cellPaddingBlockMD, + tablePaddingHorizontalMiddle: cellPaddingInlineMD, + tablePaddingVerticalSmall: cellPaddingBlockSM, + tablePaddingHorizontalSmall: cellPaddingInlineSM, + tableBorderColor: borderColor, + tableHeaderTextColor: headerColor, + tableHeaderBg: headerBg, + tableFooterTextColor: footerColor, + tableFooterBg: footerBg, + tableHeaderCellSplitColor: headerSplitColor, + tableHeaderSortBg: headerSortActiveBg, + tableHeaderSortHoverBg: headerSortHoverBg, + tableHeaderIconColor: baseColorAction + .clone() + .setAlpha(baseColorAction.getAlpha() * opacityLoading) + .toRgbString(), + tableHeaderIconColorHover: baseColorActionHover + .clone() + .setAlpha(baseColorActionHover.getAlpha() * opacityLoading) + .toRgbString(), + tableBodySortBg: bodySortBg, + tableFixedHeaderSortActiveBg: fixedHeaderSortActiveBg, + tableHeaderFilterActiveBg: headerFilterHoverBg, + tableFilterDropdownBg: filterDropdownBg, + tableRowHoverBg: rowHoverBg, + tableSelectedRowBg: rowSelectedBg, + tableSelectedRowHoverBg: rowSelectedHoverBg, + zIndexTableFixed, + zIndexTableSticky: zIndexTableFixed + 1, + tableFontSizeMiddle: cellFontSizeMD, + tableFontSizeSmall: cellFontSizeSM, + tableSelectionColumnWidth: selectionColumnWidth, + tableExpandIconBg: expandIconBg, + tableExpandColumnWidth: checkboxSize + 2 * token.padding, + tableExpandedRowBg: rowExpandedBg, - const tableToken = mergeToken(token, { - tableFontSize: fontSize, - tableBg: colorBgContainer, - tableRadius: borderRadiusLG, + // Dropdown + tableFilterDropdownWidth: 120, + tableFilterDropdownHeight: 264, + tableFilterDropdownSearchWidth: 140, - tablePaddingVertical: padding, - tablePaddingHorizontal: padding, - tablePaddingVerticalMiddle: paddingSM, - tablePaddingHorizontalMiddle: paddingXS, - tablePaddingVerticalSmall: paddingXS, - tablePaddingHorizontalSmall: paddingXS, - tableBorderColor: colorBorderSecondary, - tableHeaderTextColor: colorTextHeading, - tableHeaderBg: colorFillAlterSolid, - tableFooterTextColor: colorTextHeading, - tableFooterBg: colorFillAlterSolid, - tableHeaderCellSplitColor: colorBorderSecondary, - tableHeaderSortBg: colorFillSecondarySolid, - tableHeaderSortHoverBg: colorFillContentSolid, - tableHeaderIconColor: baseColorAction - .clone() - .setAlpha(baseColorAction.getAlpha() * opacityLoading) - .toRgbString(), - tableHeaderIconColorHover: baseColorActionHover - .clone() - .setAlpha(baseColorActionHover.getAlpha() * opacityLoading) - .toRgbString(), - tableBodySortBg: colorFillAlterSolid, - tableFixedHeaderSortActiveBg: colorFillSecondarySolid, - tableHeaderFilterActiveBg: colorFillContent, - tableFilterDropdownBg: colorBgContainer, - tableRowHoverBg: colorFillAlterSolid, - tableSelectedRowBg, - tableSelectedRowHoverBg: controlItemBgActiveHover, - zIndexTableFixed, - zIndexTableSticky: zIndexTableFixed + 1, - tableFontSizeMiddle: fontSize, - tableFontSizeSmall: fontSize, - tableSelectionColumnWidth: controlHeight, - tableExpandIconBg: colorBgContainer, - tableExpandColumnWidth: checkboxSize + 2 * token.padding, - tableExpandedRowBg: colorFillAlter, + // Virtual Scroll Bar + tableScrollThumbSize: 8, // Mac scroll bar size + tableScrollThumbBg: stickyScrollBarBg, + tableScrollThumbBgHover: colorTextHeading, + tableScrollBg: colorSplit, + }); - // Dropdown - tableFilterDropdownWidth: 120, - tableFilterDropdownHeight: 264, - tableFilterDropdownSearchWidth: 140, + return [ + genTableStyle(tableToken), + genPaginationStyle(tableToken), + genSummaryStyle(tableToken), + genSorterStyle(tableToken), + genFilterStyle(tableToken), + genBorderedStyle(tableToken), + genRadiusStyle(tableToken), + genExpandStyle(tableToken), + genSummaryStyle(tableToken), + genEmptyStyle(tableToken), + genSelectionStyle(tableToken), + genFixedStyle(tableToken), + genStickyStyle(tableToken), + genEllipsisStyle(tableToken), + genSizeStyle(tableToken), + genRtlStyle(tableToken), + ]; + }, + (token) => { + const { + colorFillAlter, + colorBgContainer, + colorTextHeading, + colorFillSecondary, + colorFillContent, + controlItemBgActive, + controlItemBgActiveHover, + padding, + paddingSM, + paddingXS, + colorBorderSecondary, + borderRadiusLG, + fontSize, + controlHeight, + colorTextPlaceholder, + } = token; - // Virtual Scroll Bar - tableScrollThumbSize: 8, // Mac scroll bar size - tableScrollThumbBg: colorTextPlaceholder, - tableScrollThumbBgHover: colorTextHeading, - tableScrollBg: colorSplit, - }); + const colorFillSecondarySolid = new TinyColor(colorFillSecondary) + .onBackground(colorBgContainer) + .toHexShortString(); + const colorFillContentSolid = new TinyColor(colorFillContent) + .onBackground(colorBgContainer) + .toHexShortString(); + const colorFillAlterSolid = new TinyColor(colorFillAlter) + .onBackground(colorBgContainer) + .toHexShortString(); - return [ - genTableStyle(tableToken), - genPaginationStyle(tableToken), - genSummaryStyle(tableToken), - genSorterStyle(tableToken), - genFilterStyle(tableToken), - genBorderedStyle(tableToken), - genRadiusStyle(tableToken), - genExpandStyle(tableToken), - genSummaryStyle(tableToken), - genEmptyStyle(tableToken), - genSelectionStyle(tableToken), - genFixedStyle(tableToken), - genStickyStyle(tableToken), - genEllipsisStyle(tableToken), - genSizeStyle(tableToken), - genRtlStyle(tableToken), - ]; -}); + return { + headerBg: colorFillAlterSolid, + headerColor: colorTextHeading, + headerSortActiveBg: colorFillSecondarySolid, + headerSortHoverBg: colorFillContentSolid, + bodySortBg: colorFillAlterSolid, + rowHoverBg: colorFillAlterSolid, + rowSelectedBg: controlItemBgActive, + rowSelectedHoverBg: controlItemBgActiveHover, + rowExpandedBg: colorFillAlter, + cellPaddingBlock: padding, + cellPaddingInline: padding, + cellPaddingBlockMD: paddingSM, + cellPaddingInlineMD: paddingXS, + cellPaddingBlockSM: paddingXS, + cellPaddingInlineSM: paddingXS, + borderColor: colorBorderSecondary, + headerBorderRadius: borderRadiusLG, + footerBg: colorFillAlterSolid, + footerColor: colorTextHeading, + cellFontSize: fontSize, + cellFontSizeMD: fontSize, + cellFontSizeSM: fontSize, + headerSplitColor: colorBorderSecondary, + fixedHeaderSortActiveBg: colorFillSecondarySolid, + headerFilterHoverBg: colorFillContent, + filterDropdownMenuBg: colorBgContainer, + filterDropdownBg: colorBgContainer, + expandIconBg: colorBgContainer, + selectionColumnWidth: controlHeight, + stickyScrollBarBg: colorTextPlaceholder, + stickyScrollBarBorderRadius: 100, + }; + }, +); diff --git a/components/table/style/sticky.ts b/components/table/style/sticky.ts index f0ea859a7d7a..a0c2d347037d 100644 --- a/components/table/style/sticky.ts +++ b/components/table/style/sticky.ts @@ -11,6 +11,7 @@ const genStickyStyle: GenerateStyle = (token) => { tableScrollThumbSize, tableScrollBg, zIndexTableSticky, + stickyScrollBarBorderRadius, } = token; const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`; return { @@ -41,7 +42,7 @@ const genStickyStyle: GenerateStyle = (token) => { '&-bar': { height: tableScrollThumbSize, backgroundColor: tableScrollThumbBg, - borderRadius: 100, + borderRadius: stickyScrollBarBorderRadius, transition: `all ${token.motionDurationSlow}, transform none`, position: 'absolute', bottom: 0, diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 5260e528ab9e..a361053e455b 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -542,7 +542,46 @@ export default App; - +### Table + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@table-bg` | `colorBgContainer` | Global Token | +| `@table-header-bg` | `headerBg` | - | +| `@table-header-color` | `headerColor` | - | +| `@table-header-sort-bg` | `headerSortActiveBg` | - | +| `@table-body-sort-bg` | `bodySortActiveBg` | - | +| `@table-row-hover-bg` | `rowHoverBg` | - | +| `@table-selected-row-color` | `colorText` | Global Token | +| `@table-selected-row-bg` | `rowSelectedBg` | - | +| `@table-body-selected-sort-bg` | - | Deprecated, same as `rowSelectedBg` | +| `@table-selected-row-hover-bg` | `rowSelectedHoverBg` | - | +| `@table-expanded-row-bg` | `rowExpandedBg` | - | +| `@table-padding-vertical` | `cellPaddingBlock` | - | +| `@table-padding-horizontal` | `cellPaddingInline` | - | +| `@table-padding-vertical-md` | `cellPaddingBlockMD` | - | +| `@table-padding-horizontal-md` | `cellPaddingInlineMD` | - | +| `@table-padding-vertical-sm` | `cellPaddingBlockSM` | - | +| `@table-padding-horizontal-sm` | `cellPaddingInlineSM` | - | +| `@table-border-color` | `borderColor` | - | +| `@table-border-radius-base` | `headerBorderRadius` | - | +| `@table-footer-bg` | `footerBg` | - | +| `@table-footer-color` | `footerColor` | - | +| `@table-header-bg-sm` | - | Deprecated, same as `headerBg` | +| `@table-font-size` | `cellFontSize` | - | +| `@table-font-size-md` | `cellFontSizeMD` | - | +| `@table-font-size-sm` | `cellFontSizeSM` | - | +| `@table-header-cell-split-color` | `headerSplitColor` | - | +| `@table-header-sort-active-bg` | `headerSortHoverBg` | Misused in v4, and used as hover bg actually | +| `@table-fixed-header-sort-active-bg` | `fixedHeaderSortActiveBg` | - | +| `@table-header-filter-active-bg` | `headerFilterHoverBg` | - | +| `@table-filter-btns-bg` | - | Deprecated, same as `filterDropdownBg` | +| `@table-filter-dropdown-bg` | `filterDropdownBg` | - | +| `@table-expand-icon-bg` | `expandIconBg` | - | +| `@table-selection-column-width` | `selectionColumnWidth` | - | +| `@table-sticky-scroll-bar-bg` | `stickyScrollBarBg` | - | +| `@table-sticky-scroll-bar-radius` | `stickyScrollBarBorderRadius` | - | ### Tabs diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 92d37eeefc1d..b813da1d0cb9 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -539,7 +539,46 @@ Mentions 提及 - +### Table 表格 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@table-bg` | `colorBgContainer` | 全局 Token | +| `@table-header-bg` | `headerBg` | - | +| `@table-header-color` | `headerColor` | - | +| `@table-header-sort-bg` | `headerSortActiveBg` | - | +| `@table-body-sort-bg` | `bodySortActiveBg` | - | +| `@table-row-hover-bg` | `rowHoverBg` | - | +| `@table-selected-row-color` | `colorText` | 全局 Token | +| `@table-selected-row-bg` | `rowSelectedBg` | - | +| `@table-body-selected-sort-bg` | - | 已废弃，同 `rowSelectedBg` | +| `@table-selected-row-hover-bg` | `rowSelectedHoverBg` | - | +| `@table-expanded-row-bg` | `rowExpandedBg` | - | +| `@table-padding-vertical` | `cellPaddingBlock` | - | +| `@table-padding-horizontal` | `cellPaddingInline` | - | +| `@table-padding-vertical-md` | `cellPaddingBlockMD` | - | +| `@table-padding-horizontal-md` | `cellPaddingInlineMD` | - | +| `@table-padding-vertical-sm` | `cellPaddingBlockSM` | - | +| `@table-padding-horizontal-sm` | `cellPaddingInlineSM` | - | +| `@table-border-color` | `borderColor` | - | +| `@table-border-radius-base` | `headerBorderRadius` | - | +| `@table-footer-bg` | `footerBg` | - | +| `@table-footer-color` | `footerColor` | - | +| `@table-header-bg-sm` | - | 已废弃，同 `headerBg` | +| `@table-font-size` | `cellFontSize` | - | +| `@table-font-size-md` | `cellFontSizeMD` | - | +| `@table-font-size-sm` | `cellFontSizeSM` | - | +| `@table-header-cell-split-color` | `headerSplitColor` | - | +| `@table-header-sort-active-bg` | `headerSortHoverBg` | v4 中有误，实际上用于悬浮背景色 | +| `@table-fixed-header-sort-active-bg` | `fixedHeaderSortActiveBg` | - | +| `@table-header-filter-active-bg` | `headerFilterHoverBg` | - | +| `@table-filter-btns-bg` | - | 已废弃，同 `filterDropdownBg` | +| `@table-filter-dropdown-bg` | `filterDropdownBg` | - | +| `@table-expand-icon-bg` | `expandIconBg` | - | +| `@table-selection-column-width` | `selectionColumnWidth` | - | +| `@table-sticky-scroll-bar-bg` | `stickyScrollBarBg` | - | +| `@table-sticky-scroll-bar-radius` | `stickyScrollBarBorderRadius` | - | ### Tabs 标签页