Merge branch 'main' into fix/1652

.github/workflows/chromatic.yml

@@ -30,9 +30,9 @@ jobs:
         # Job steps
         steps:
             - uses: actions/checkout@v1
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Install dependencies
               run: npx lerna@^6 bootstrap
             - name: Pre-build libs

.github/workflows/lighthouse.yml

@@ -12,10 +12,10 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - name: Use Node.js 16
-              uses: actions/setup-node@v3
+            - name: Use Node.js 20
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: 20
             - name: npm install, build
               run: |
                   npm i -g lerna@^6 gulp

.github/workflows/publish.yml

@@ -16,10 +16,10 @@ jobs:
               with:
                   token: ${{ secrets.PAT }}
 
-            - name: Use Node.js 16
-              uses: actions/setup-node@v3
+            - name: Use Node.js 20
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: 20
 
             - name: npm install
               run: npm i -g lerna@^4.0.0 && npm run bootstrap

.github/workflows/release.yml

@@ -9,9 +9,9 @@ jobs:
         steps:
             - uses: actions/checkout@v3
             - name: release
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16
+                  node-version: 20
             - run: |
                   npm i -g lerna@^6 && npm run bootstrap
                   node scripts/release.js

.github/workflows/test-coverage.yml

@@ -15,9 +15,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Run install
               run: npm i -g lerna@^6 && npm run bootstrap
             - name: Run Jest test
@@ -32,9 +32,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Run install
               run: |
                   npm i -g lerna@^6
@@ -58,9 +58,9 @@ jobs:
         needs: [jest, cypress]
         steps:
             - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Download Jest coverage
               uses: actions/download-artifact@v3
               with:

.github/workflows/test.yml

@@ -15,9 +15,9 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v3
-            - uses: actions/setup-node@v3
+            - uses: actions/setup-node@v4
               with:
-                  node-version: '16'
+                  node-version: '20'
             - name: Run install
               run: npm i -g lerna@^6 && npm run bootstrap
             - name: Run Jest test

.storybook/base/base.js

@@ -86,6 +86,7 @@ module.exports = {
         config.resolve.alias = {
             '@douyinfe/semi-foundation': resolve('packages/semi-foundation'),
             '@douyinfe/semi-icons': resolve('packages/semi-icons/src'),
+            '@douyinfe/semi-icons-lab': resolve('packages/semi-icons-lab/src'),
             '@douyinfe/semi-ui': resolve('packages/semi-ui'),
             '@douyinfe/semi-theme-default': resolve('packages/semi-theme-default'),
             '@douyinfe/semi-illustrations': resolve('packages/semi-illustrations/src'),

CONTRIBUTING-en-US.md

@@ -22,8 +22,12 @@ cd semi-design
 git checkout -b <TOPIC_BRANCH_NAME>
 ```
 >Before installing the enviroment,make sure that there is a dependency of `lerna` and `yarn` locally, if not, should run:
+```base
+corepack enable
+```
+
 ```bash
-npm install --global lerna yarn
+npm install --global lerna
 ```
  - Install the dependencies
 ```bash

content/feedback/banner/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 73
+order: 74
 category: Feedback
 title:  Banner
 subTitle: Banner

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 73
+order: 74
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner

content/feedback/notification/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 74
+order: 75
 category: Feedback
 title:  Notification
 subTitle: Notification

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 74
+order: 75
 category: 反馈类
 title: Notification 通知
 icon: doc-notification

content/feedback/popconfirm/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 75
+order: 76
 category: Feedback
 title:  Popconfirm
 subTitle: Popconfirm

content/feedback/popconfirm/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 75
+order: 76
 category: 反馈类
 title:  Popconfirm 气泡确认框
 icon: doc-popconfirm

content/feedback/progress/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 76
+order: 77
 category: Feedback
 title: Progress
 subTitle: Progress

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 76
+order: 77
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress

content/feedback/skeleton/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 77
+order: 78
 category: Feedback
 title: Skeleton
 subTitle: Skeleton

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 77
+order: 78
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton

content/feedback/spin/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 78
+order: 79
 category: Feedback
 title: Spin
 subTitle: Spin

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 78
+order: 79
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin

content/feedback/toast/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 79
+order: 80
 category: Feedback
 title: Toast
 subTitle: Toast

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 79
+order: 80
 category: 反馈类
 title: Toast 提示
 icon: doc-toast

content/input/colorpicker/index-en-US.md

@@ -0,0 +1,143 @@
+---
+localeCode: en-US
+order: 27
+category: Input
+title: ColorPicker
+icon: doc-colorPlatteNew
+brief: Quickly and easily select colors, and provide a dropper tool to pick colors
+---
+
+
+
+## Demos
+
+### How to import
+
+
+```jsx import
+import { ColorPicker } from '@douyinfe/semi-ui';
+```
+
+
+### Basic Use
+
+#### In portal
+
+```jsx live=true
+import { ColorPicker, Button } from '@douyinfe/semi-ui';
+function Demo(){
+    return <div>
+        <ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}/>
+
+        <br/>
+        <div>自定义 trigger</div>
+
+        <ColorPicker alpha={true} onChange={value=>{console.log(value)}} usePopover={true}>
+            <Button> Trigger </Button>
+        </ColorPicker>
+
+    </div>
+}
+
+```
+
+#### Normal display
+```jsx live=true
+import { ColorPicker } from '@douyinfe/semi-ui';
+function Demo(){
+    return <ColorPicker alpha={true} onChange={value=>{console.log(value)}}/>
+}
+
+```
+
+### Eyedropper Color Picker
+
+Use `eyeDropper={true}` to enable the eyedropper function, which supports picking colors from the browser or external software screen.
+
+<Notice title='Notes'>
+To enable this function, the current web page must be deployed in a secure context such as HTTPS or localhost domain name, otherwise it will have no effect. The user's browser version must be Chromium > 95
+</Notice>
+
+
+```jsx live=true
+import { ColorPicker } from '@douyinfe/semi-ui';
+function Demo(){
+    return <ColorPicker alpha={true} eyeDropper={true} onChange={value=>{console.log(value)}}/>
+}
+
+```
+
+### Default Value
+
+When converting between various color representation formats, there are theoretical errors between some formats, so the value returned to you by onChange is an object containing color values ​​in three formats: hsva, hex, and rgba.
+
+The defaultValue (uncontrolled) and value (controlled) you pass in should also be objects containing the same three formats.
+
+We provide a static tool function `colorStringToValue` on the component class to convert common color strings to this object, supporting direct passing of strings such as rgb(57,197,187) #39c5bb and hsv(176,71,77).
+
+```jsx live=true
+import { ColorPicker } from '@douyinfe/semi-ui';
+function Demo(){
+    return <div>
+        <ColorPicker 
+            defaultValue={ColorPicker.colorStringToValue("rgb(57,197,187)")}
+            onChange={(value)=>{
+            console.log(value)
+        }} className={""} alpha={true}/>
+    </div>
+
+}
+
+```
+
+### Controlled
+
+Controlled use by passing in value
+
+```jsx live=true
+import { ColorPicker } from '@douyinfe/semi-ui';
+function Demo(){
+    const [value,setValue] = useState(ColorPicker.colorStringToValue("#39c5bb"));
+    console.log(value);
+    return <div>
+        <ColorPicker value={value} onChange={(value)=>{
+            setValue(value)
+        }} className={""} alpha={true}/>
+    </div>
+
+}
+
+```
+
+
+### Rendering additional elements at the top and bottom
+
+Use `topSlot` and `bottomSlot` to render additional elements at the top and bottom
+
+```jsx live=true
+import { ColorPicker } from '@douyinfe/semi-ui';
+function Demo(){
+    return <ColorPicker topSlot={<div>
+        TopSlot
+    </div>} bottomSlot={<div>Bottom Slot</div>} alpha={true} onChange={value=>{console.log(value)}}/>
+}
+
+```
+
+### API Table
+
+| Parameter | Description | Type | Default value |
+|---------------|------------|---------------|------|
+| onChange | User selected color callback | (value)=>void | - |
+| alpha | Whether to enable transparency selection | boolean | true |
+| bottomSlot | Bottom rendering additional elements | ReactNode | - |
+| className | Class name | string | - |
+| defaultFormat | Default format for manual input | rgba hex hsva | hex |
+| defaultValue | Default value | Object | - |
+| eyeDropper | Whether to enable the eyedropper color picker | boolean | true |
+| height | Height | number | 280 |
+| style | Style | CSSProperties | - |
+| topSlot | Top rendering additional elements | ReactNode | - |
+| width | Width | number | 280 |
+| usePopover | Whether to put in Popover rendering | boolean | false |
+| popoverProps | When placing a Popover, the props passed to the Popover | Popover Props | - |