Merge branch 'release'

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 | - |

content/input/colorpicker/index.md

@@ -0,0 +1,143 @@
+---
+localeCode: zh-CN
+order: 27
+category: 输入类
+title: ColorPicker 颜色选择器
+icon: doc-colorPlatteNew
+brief: 快速便捷地选择颜色，并提供滴管工具取色
+---
+
+
+
+## 代码演示
+
+### 如何引入
+
+
+```jsx import
+import { ColorPicker } from '@douyinfe/semi-ui';
+```
+
+
+### 基本用法
+
+#### 放在弹层
+
+```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>
+}
+
+```
+
+#### 正常展示
+```jsx live=true
+import { ColorPicker } from '@douyinfe/semi-ui';
+function Demo(){
+    return <ColorPicker alpha={true} onChange={value=>{console.log(value)}}/>
+}
+
+```
+
+### 滴管取色器
+
+使用 `eyeDropper={true}` 开启滴管功能，支持从浏览器内或外部软件屏幕取色。
+
+<Notice title='注意事项'>
+开启此功能需要当前网页部署在 HTTPS 或 localhost 域名等安全 context 下，否则无效果。需用户浏览器版本 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)}}/>
+}
+
+```
+
+### 默认值
+在进行各种颜色表示格式之间相互转换时，部分格式之间存在理论误差，因此 onChange 返回给你的值是同时包含了 hsva hex rgba 三种格式的色值的对象。
+
+你传入的 defaultValue(非受控) 和 value(受控) 也应当是同样包含三种格式的对象。
+
+我们在组件类上提供了静态工具函数 `colorStringToValue`，用于将常见颜色字符串转换为该对象，支持 rgb(57,197,187) #39c5bb 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>
+
+}
+
+```
+
+### 受控
+
+通过传入 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>
+
+}
+
+```
+
+
+### 顶部和底部渲染额外元素
+
+使用 `topSlot` 和 `bottomSlot` 在顶部和底部渲染额外元素
+
+```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 参考
+
+| 参数            | 说明         | 类型            | 默认值  |
+|---------------|------------|---------------|------|
+| onChange | 用户选中颜色的回调 | (value)=>void | - |
+| alpha         | 是否开启透明度选择  | boolean       | true |
+| bottomSlot | 底部渲染额外元素 | ReactNode | - |
+| className | 类名 | string | - |
+| defaultFormat | 默认手动输入时的格式 | rgba hex hsva | hex  |
+| defaultValue  | 默认值        | Object        | -    |
+| eyeDropper    | 是否开启滴管拾色器  | boolean       | true |
+| height | 高度 | number | 280 |
+| style | 样式 | CSSProperties | - | 
+| topSlot | 顶部渲染额外元素 | ReactNode | - |
+| width         | 宽度         | number        | 280  |
+| usePopover | 是否放入Popover渲染 | boolean | false |
+| popoverProps | 放入 Popover 时，Popover 传入的 props | Popover Props | - |
+