Merge branch 'main' into release

content/feedback/spin/index.md

@@ -143,10 +143,12 @@ import { Spin, Button } from '@douyinfe/semi-ui';
 
 -   **怎么修改 icon 的颜色？**
 
-    可以通过给 .semi-spin-wrapper 类添加 color 属性覆盖原有的颜色。
+    可以通过给 .semi-spin-wrapper 类添加 color 属性覆盖原有的颜色（推荐以更高权重覆盖）
 
     ```
-    .semi-spin-wrapper {
+    <Spin classname='custom' />
+    
+    .custom .semi-spin-wrapper {
       color: red;
     }
     ```

content/input/form/index.md

@@ -2137,6 +2137,9 @@ const { ErrorMessage } = Form;
     这个是标准 HTML 行为，我们不计划进行干预，会与原生保持一致。如果表单内确实只有一个 Input 元素，又不想回车时触发 submit 回调，建议对 Input 的 keydown 事件的 enter 采取 preventDefault 阻止默认行为。
 
     点击 <a href="https://github.com/DouyinFE/semi-design/issues/767" target="_blank">#767</a> 查看相关背景和内容。
+    
+-   **表单会自动保存历史输入项，不想要这个功能怎么办？**    
+    在 v2.3 之前，Form 并没有严格按照 A11y 无障碍标准为输入控件配置`for`、`name`、`id` 等属性，因此在之前的版本并没有该功能。v2.3 后我们严格按照 W3C 标准进行了实现。如果你不希望浏览器自动保存历史输入项，也可以通过在 Form 级别或者 Field 级别设置 `autocomplete=off` 关掉
 
 -   **[🔍 🧾 更多Form FAQ补充 & 问题自查手册](https://bytedance.feishu.cn/docs/doccnNKaGhZMqyu0FufD1JGHOjf)** 
     

content/start/changelog/index-en-US.md

@@ -16,6 +16,13 @@ Version：Major.Minor.Patch
 
 ---
 
+#### 🎉 2.14.0 (2022-07-01)
+- 【Fix】
+    - Fix the issue that the Spin component has black rectangles in some scene contents in dark mode
+- 【Chore】
+    - Optimize Form interface BaseFormApi type definetion [#933](https://github.com/DouyinFE/semi-design/issues/933)
+
+
 #### 🎉 2.14.0-beta.0 (2022-06-28)
 - 【Feat】
     - Input Added A11y keyboard adaptation  [#205](https://github.com/DouyinFE/semi-design/issues/205)

content/start/changelog/index.md

@@ -15,6 +15,12 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 ---
 
+#### 🎉 2.14.0 (2022-07-01)
+- 【Fix】
+  - 修复 Spin 组件在暗色模式下个别场景内容物有黑色矩形的问题
+- 【Chore】
+    - 优化 Form interface BaseFormApi 类型定义 [#933](https://github.com/DouyinFE/semi-design/issues/933)
+
 #### 🎉 2.14.0-beta.0 (2022-06-28)
 - 【Feat】
     - Input 新增 A11y 键盘适配  [#205](https://github.com/DouyinFE/semi-design/issues/205)

content/start/introduction/index.md

@@ -9,7 +9,7 @@ brief: Semi Design 是一个设计系统，它定义了一套中后台设计与
 
 ## 什么是 Semi
 
-Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代企业级应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千计平台产品，服务内外部 10 万+ 用户。
+Semi Design 是由抖音前端团队，MED 产品设计团队设计、开发并维护的设计系统。它作为全面、易用、优质的现代应用 UI 解决方案，从字节跳动各业务线的复杂场景提炼而来，支撑近千计平台产品，服务内外部 10 万+ 用户。
 
 ## 我们的愿景
 

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.14.0-beta.2"
+    "version": "2.14.0"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.14.0-beta.2",
+  "version": "2.14.0",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -27,7 +27,7 @@
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
     "@douyinfe/semi-animation": "2.12.0",
-    "@douyinfe/semi-animation-styled": "2.14.0-beta.2",
+    "@douyinfe/semi-animation-styled": "2.14.0",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.14.0-beta.2",
+  "version": "2.14.0",
   "description": "semi styled animation",
   "keywords": [
     "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.14.0-beta.2",
+  "version": "2.14.0",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-semi-design",
-  "version": "2.14.0-beta.2",
+  "version": "2.14.0",
   "description": "semi ui eslint plugin",
   "keywords": [
     "semi",

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.14.0-beta.2",
+    "version": "2.14.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.14.0-beta.2",
+  "version": "2.14.0",
   "description": "semi icons",
   "keywords": [
     "semi",
@@ -38,7 +38,7 @@
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@douyinfe/semi-webpack-plugin": "2.14.0-beta.2",
+    "@douyinfe/semi-webpack-plugin": "2.14.0",
     "babel-loader": "^8.2.2",
     "css-loader": "4.3.0",
     "del": "^6.0.0",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-illustrations",
-  "version": "2.14.0-beta.2",
+  "version": "2.14.0",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.14.0-beta.2",
+    "version": "2.14.0",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.14.0-beta.2"
+        "@douyinfe/semi-webpack-plugin": "2.14.0"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.14.0-beta.2",
+  "version": "2.14.0",
   "description": "compile semi scss to css",
   "author": "[email protected]",
   "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.14.0-beta.2",
+    "version": "2.14.0",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.14.0-beta.2",
+    "version": "2.14.0",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -15,11 +15,11 @@
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.14.0-beta.2",
-        "@douyinfe/semi-foundation": "2.14.0-beta.2",
-        "@douyinfe/semi-icons": "2.14.0-beta.2",
-        "@douyinfe/semi-illustrations": "2.14.0-beta.2",
-        "@douyinfe/semi-theme-default": "2.14.0-beta.2",
+        "@douyinfe/semi-animation-react": "2.14.0",
+        "@douyinfe/semi-foundation": "2.14.0",
+        "@douyinfe/semi-icons": "2.14.0",
+        "@douyinfe/semi-illustrations": "2.14.0",
+        "@douyinfe/semi-theme-default": "2.14.0",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -75,7 +75,7 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.14.0-beta.2",
+        "@douyinfe/semi-scss-compile": "2.14.0",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

packages/semi-ui/table/Body/index.tsx

@@ -423,7 +423,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
 
         const listStyle = {
             width: '100%',
-            height: y,
+            height: virtualizedData?.length ? y : 0,
             overflowX: 'auto',
             overflowY: 'auto',
         } as const;

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

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { Table, Tag, Tooltip, Button } from '../../../index';
+
+export default function App() {
+    const [data, setData] = useState([]);
+
+    const loadData = () => {
+        if (Array.isArray(data) && data.length > 0) {
+            setData([]);
+            return;
+        }
+
+        const newData = [];
+        for (let i = 0; i < 10000; i++) {
+            const age = (i * 1000) % 149;
+            const name = `Edward King ${i}`;
+            newData.push({
+                key: '' + i,
+                name,
+                age,
+                address: `London, Park Lane no. ${i}`,
+                description: `My name is ${name}, I am ${age} years old, living in New York No. ${i + 1} Lake Park.`,
+            });
+        }
+
+        setData(newData);
+    };
+
+    const scroll = { y: 600, x: 1600 };
+    const style = { width: 800 };
+    const columns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            width: 150,
+            fixed: true,
+            filters: [
+                {
+                    text: 'Code 45',
+                    value: '45',
+                },
+                {
+                    text: 'King 4',
+                    value: 'King 4',
+                },
+            ],
+            onFilter: (value, record) => record.name.includes(value),
+        },
+        {
+            title: 'Age',
+            dataIndex: 'age',
+            width: 150,
+            sorter: (a, b) => (a.age - b.age > 0 ? 1 : -1),
+        },
+        {
+            title: 'Address',
+            // width: 200,
+            dataIndex: 'address',
+        },
+        {
+            fixed: 'right' as const,
+            width: 250,
+            render: (text, record) => (
+                <Tooltip content={record.description}>
+                    <Tag color="green">Show Info</Tag>
+                </Tooltip>
+            ),
+        },
+    ];
+    return (
+        <div>
+            <Button onClick={loadData}>load data</Button>
+            <Table pagination={false} columns={columns} dataSource={data} scroll={scroll} style={style} virtualized />
+        </div>
+    );
+}

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

@@ -6,4 +6,5 @@ export { default as FixedResizable } from './FixedResizable';
 export { default as FixedExpandedRow } from './FixedExpandedRow';
 export { default as FixedMemoryLeak  } from './FixedMemoryLeak';
 export { default as FixedOnHeaderRow } from './FixedOnHeaderRow';
-export { default as RadioRowSelection } from './radioRowSelection';
+export { default as RadioRowSelection } from './radioRowSelection';
+export { default as FixedVirtualizedEmpty } from './FixedVirtualizedEmpty';

packages/semi-ui/tree/treeNode.tsx

@@ -9,6 +9,7 @@ import { Checkbox } from '../checkbox';
 import TreeContext, { TreeContextValue } from './treeContext';
 import Spin from '../spin';
 import { TreeNodeProps, TreeNodeState } from './interface';
+import { getHighLightTextHTML } from '../_utils/index';
 
 const prefixcls = cssClasses.PREFIX_OPTION;
 
@@ -282,18 +283,14 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         if (isFunction(renderLabel)) {
             return renderLabel(label, data);
         } else if (isString(label) && filtered && keyword && treeNodeFilterProp === 'label') {
-            const content: React.ReactNode[] = [];
-            label.split(keyword).forEach((node, index) => {
-                if (index > 0) {
-                    content.push(
-                        <span className={`${prefixcls}-highlight`} key={index}>
-                            {keyword}
-                        </span>
-                    );
-                }
-                content.push(node);
-            });
-            return content;
+            return getHighLightTextHTML({
+                sourceString: label,
+                searchWords: [keyword],
+                option: {
+                    highlightTag: 'span',
+                    highlightClassName: `${prefixcls}-highlight`,
+                },
+            } as any);
         } else {
             return label;
         }

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.14.0-beta.2",
+    "version": "2.14.0",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",

src/components/CaseDiff/index.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import cls from 'classnames';
+import { IconTickCircle, IconClear } from '@douyinfe/semi-icons';
+import './index.scss';
+
+const CaseDiff = (props) => {
+
+
+    let footerCls = cls({
+        'semi-case-diff-footer': true,
+        'semi-case-diff-footer-good': props.type === 'good',
+        'semi-case-diff-footer-bad': props.type === 'bad',
+    });
+    return (
+        <div style={{ border: '1px solid var(--semi-color-border)' }} {...props.style}>
+            <div className='semi-case-diff-content' style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                {props.children}
+            </div>
+            <div className={footerCls} style={{ height: 56 }}>
+                {props.type === 'good' ? <IconTickCircle />: null}
+                {props.type === 'bad' ? <IconClear />: null}
+                {props.title}
+            </div>
+        </div>
+    );
+};
+
+export default CaseDiff;

src/components/CaseDiff/index.scss

@@ -0,0 +1,14 @@
+
+
+
+.semi-case-diff-footer-good {
+    background-color: var(--semi-color-success-light-default);
+    border-top: 4px solid var(--semi-color-success);
+    color: var(--semi-color-success);
+}
+
+.semi-case-diff-footer-bad {
+    background-color: var(--semi-color-danger-light-default);
+    color: var(--semi-color-danger);
+    border-top: 4px solid var(--semi-color-danger);
+}

src/locale/en-US.js

@@ -99,8 +99,8 @@ const appLocale = {
         "component_design__referring_to_the_design_schemes_of_other_business_platforms__s_e47da10ff860ba8b9db1268c06011006": "Component design, referring to the design schemes of other business platforms, summarizes its own front-end specifications and unifies the delivery standards of the platform.",
         "component_library_to_help_developers_build_applications_efficiently": "Component library to help developers build applications efficiently",
         "components__themes_and_other_out_of_the_box_middle_and_back_office_solutions_hel_a50de9f9d8f3b5008c2df45dcfa19886": "Components, themes and other out-of-the-box middle and back-office solutions help designers and developers create high-quality products.",
-        "comprehensive__easy_to_use_and_high_quality": "Build your next app",
-        "enterprise_product_design_system": "with Semi Design",
+        // "comprehensive__easy_to_use_and_high_quality": "Build your next app",
+        "enterprise_product_design_system": "Where Design & Dev Work Together",
         "content_security": "Content Security",
         "default": "Default",
         "design": "Design",

src/locale/zh-CN.js

@@ -73,9 +73,9 @@ const appLocale = {
         'icon.list.tab.stroked': '线性图标',
 
         // new  Home
-        "comprehensive__easy_to_use_and_high_quality": "全面、易用、优质的",
-        "enterprise_product_design_system": "企业级产品设计系统",
-        "home.banner.description": "由字节跳动抖音前端与 UED 团队设计、开发并维护，包含设计语言、React 组件、主题等开箱即用的中后台解决方案，帮助设计师与开发者打造高质量产品。",
+        // "comprehensive__easy_to_use_and_high_quality": "全面、易用、优质的",
+        "enterprise_product_design_system": "连接设计师与开发者",
+        "home.banner.description": "由抖音前端与 UED 团队维护，易于定制的现代化设计系统，帮助设计师与开发者打造高质量产品。",
         "start_using": "开始使用",
         "now_serving_100_000": "现已服务 10 万 + 用户",
         "user": "用户",

src/sitePages/newHome/components/banner/banner.jsx

@@ -5,7 +5,7 @@ import { navigate } from 'gatsby-link';
 import React from 'react';
 import { getLocale } from '../../../../utils/locale';
 import styles from "./banner.module.scss";
-import {IconGithubLogo} from '@douyinfe/semi-icons';
+import { IconGithubLogo } from '@douyinfe/semi-icons';
 
 function Banner() {
     const goStart = () => {
@@ -19,13 +19,28 @@ function Banner() {
             <div className={styles.autoWrapper}>
                 <div className={styles.content}>
                     <div className={styles.headerCopy}>
-                        <p className={styles.text}>{_t("comprehensive__easy_to_use_and_high_quality", { }, "全面、易用、优质的")}<br />{_t("enterprise_product_design_system", { }, "企业级产品设计系统")}</p>
+                        <p className={styles.text}>
+                            {_t("enterprise_product_design_system", { }, "连接设计师与开发者")}
+                        </p>
                         <p className={styles.text_63fb91b5}><span className={styles.text_70c95f84}>{_t("home.banner.description")}</span></p>
                     </div>
                     <div className={styles.group2835}>
                         <Button onClick={goStart} size="large" theme="solid" className={styles.extraLarge}>{_t("start_using", { }, "开始使用")}</Button>
-                        <Button onClick={goGithub}  size="large" type={'tertiary'} theme="borderless" style={{border:'1px solid var(--semi-color-border)',color:'var(--semi-color-text-0)',marginLeft:'16px'}} className={styles.extraLarge}  icon={<IconGithubLogo size={'large'}/>}>GitHub</Button>
-
+                        <Button
+                            onClick={goGithub} 
+                            size="large"
+                            type={'tertiary'}
+                            theme="borderless"
+                            style={{
+                                border:'1px solid var(--semi-color-border)',
+                                color:'var(--semi-color-text-0)',
+                                marginLeft:'16px'
+                            }}
+                            className={styles.extraLarge} 
+                            icon={<IconGithubLogo size={'large'}/>}
+                        >
+                            GitHub
+                        </Button>
                     </div>
                 </div>
                 <div className={styles.autoWrapper_4fa00029}>

src/sitePages/newHome/components/banner/banner.module.scss

@@ -28,7 +28,7 @@
 }
 
 .text {
-    width: 480px;
+    width: 580px;
     margin: 0 0 32px;
     font-size: 48px;
     font-family: Inter, PingFang SC, system,-apple-system,BlinkMacSystemFont,Segoe UI,Microsoft YaHei,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;
@@ -41,7 +41,7 @@
 }
 
 .text_63fb91b5 {
-    width: 480px;
+    width: 596px;
     font-size: 18px;
     color: var(--semi-color-text-0);
     line-height: 32px;