fix: setting zebra pattern is invalid (#1525)

* fix: setting zebra pattern is invalid

* chore: add zebra story to Table

* fix: make var colo into token

---------

Co-authored-by: shijia.me <[email protected]>

packages/semi-foundation/table/table.scss

@@ -209,15 +209,19 @@ $module: #{$prefix}-table;
         display: table-row-group;
         & > .#{$module}-row {
             display: table-row;
+            background-color: $color-table_body-bg-default;
 
             &:hover {
                 & > .#{$module}-row-cell {
-                    background-color: $color-table_body-bg-hover;
+                    // $color-table_body-bg-hover has transparency，will reveal the background color $color-table_body-bg-default\
+                    // combine background-image and background-color to make the non-fixed column color does not show through the bottom color
+                    background-image: linear-gradient(0deg, $color-table_body-bg-hover, $color-table_body-bg-hover);
+                    background-color: $color-table_cell-bg-hover;
 
                     &.#{$module}-cell-fixed {
                         &-left,
                         &-right {
-                            background-color: $color-table_body-bg-default;
+                            background-image: linear-gradient(0deg, $color-table_body-bg-default, $color-table_body-bg-default);
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
@@ -246,7 +250,6 @@ $module: #{$prefix}-table;
                 box-sizing: border-box;
                 position: relative;
                 vertical-align: middle;
-                background-color: $color-table_body-bg-default;
 
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;

packages/semi-foundation/table/variables.scss

@@ -75,6 +75,8 @@ $color-table_resizer-bg-default: var(--semi-color-primary); // 表格拉伸标
 $color-table_selection-bg-default: rgba(var(--semi-grey-0), 1); // 表格分组背景色
 $color-table_placeholder-text-default: var(--semi-color-text-2); // 表格空数据文本颜色
 
+$color-table_cell-bg-hover: var(--semi-color-bg-0); // 让表格在 hover 时正确显示 $color-table_body-bg-hover 颜色，如无必要不要修改
+
 // Other
 $font-table_base-fontSize: 14px; // 表格默认文本字号
 $border-table_base-borderStyle: solid; // 表格描边样式

packages/semi-ui/table/_story/v2/index.js

@@ -13,4 +13,5 @@ export { default as FixedSorter } from './FixedSorter';
 export { default as stickyHeaderTable } from './stickyHeader';
 export { default as Fixed1188 } from './Fixed1188';
 export { default as EmptyFilters } from './emptyFilters';
-export { default as fixedResizableWithForm } from './fixedResizableWithForm';
+export { default as fixedResizableWithForm } from './fixedResizableWithForm';
+export { default as zebra } from './zebra';

packages/semi-ui/table/_story/v2/zebra.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import { Table, Avatar } from '@douyinfe/semi-ui';
+import { IconMore } from '@douyinfe/semi-icons';
+
+App.storyName = 'zebra style';
+
+/**
+ * zebra style
+ */
+export default function App() {
+    const handleRow = (record, index) => {
+        // 给偶数行设置斑马纹
+        if (index % 2 === 0) {
+            return {
+                style: {
+                    background: 'var(--semi-color-fill-0)',
+                }
+            };
+        } else {
+            return {};
+        }
+    };
+
+    const columns = [
+        {
+            title: '标题',
+            dataIndex: 'name',
+            width: 400,
+            // fixed: true,
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" shape="square" src={record.nameIconSrc} style={{ marginRight: 12 }}></Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            // onCell: handleRow,
+        },
+        {
+            title: '大小',
+            dataIndex: 'size',
+            // onCell: handleRow,
+        },
+        {
+            title: '所有者',
+            dataIndex: 'owner',
+            render: (text, record, index) => {
+                return (
+                    <div>
+                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>{typeof text === 'string' && text.slice(0, 1)}</Avatar>
+                        {text}
+                    </div>
+                );
+            },
+            // onCell: handleRow,
+        },
+        {
+            title: '更新日期',
+            dataIndex: 'updateTime',
+            // onCell: handleRow,
+        },
+        {
+            title: '',
+            dataIndex: 'operate',
+            render: () => {
+                return <IconMore />;
+            },
+            // onCell: handleRow,
+        },
+    ];
+    const data = [
+        {
+            key: '1',
+            name: 'Semi Design 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey'
+
+        },
+        {
+            key: '2',
+            name: 'Semi Design 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red'
+        },
+        {
+            key: '3',
+            name: '设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue'
+        },
+        {
+            key: '4',
+            name: 'Semi Pro 设计稿.fig',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png',
+            size: '2M',
+            owner: '姜鹏志',
+            updateTime: '2020-02-02 05:13',
+            avatarBg: 'grey'
+
+        },
+        {
+            key: '5',
+            name: 'Semi Pro 分享演示文稿',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '2M',
+            owner: '郝宣',
+            updateTime: '2020-01-17 05:31',
+            avatarBg: 'red'
+        },
+        {
+            key: '6',
+            name: 'Semi Pro 设计文档',
+            nameIconSrc: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png',
+            size: '34KB',
+            owner: 'Zoey Edwards',
+            updateTime: '2020-01-26 11:01',
+            avatarBg: 'light-blue'
+        },
+    ];
+
+    return <Table columns={columns} dataSource={data} onRow={handleRow} pagination={false} />;
+}