docs: add global & component level content guideline (#1083)

* docs: Complete the component content guidelines

* docs: add references for global content guidelines

Co-authored-by: zhangyumei.0319 <[email protected]>

content/basic/divider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 10
+order: 11
 category: Basic
 title:  Divider
 icon: doc-divider

content/basic/divider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 10
+order: 11
 category: 基础类 
 title:  Divider 分割线 
 icon: doc-divider 

content/basic/grid/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 11
+order: 12
 category: Basic
 title:  Grid
 icon: doc-grid

content/basic/grid/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 11
+order: 12
 category: 基础
 title:  Grid 栅格
 icon: doc-grid

content/basic/icon/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 12
+order: 13
 category: Basic
 title: Icon
 subTitle: Icon

content/basic/icon/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 12
+order: 13
 category: 基础
 title:  Icon 图标
 icon: doc-icons

content/basic/layout/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 13
+order: 14
 category: Basic
 title:  Layout
 subTitle: Layout

content/basic/layout/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 13
+order: 14
 category: 基础
 title: Layout 布局
 icon: doc-layout

content/basic/space/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 15
+order: 16
 category: basic
 title:  Space
 icon: doc-space

content/basic/space/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 15
+order: 16
 category: 基础
 title:  Space 间距
 icon: doc-space

content/basic/tokens/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 14
+order: 15
 category: Basic
 title: Tokens 
 icon: doc-token

content/basic/tokens/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 14
+order: 15
 category: 基础
 title:  Tokens 设计变量
 icon: doc-token

content/basic/typography/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 16
+order: 17
 category: Basic
 title:  Typography
 subTitle: Typography
@@ -388,5 +388,41 @@ function Demo() {
 | successTip | Successful tip content                  | React.node                                     | -       | 0.33.0  |
 | onCopy     | Callback for copy action                | Function(e:Event, content:string, res:boolean) | -       | 0.27.0  |
 
+## Content Guidelines
+
+- Link
+  - Text links need to be clear and predictable, users should be able to predict what will happen when they click on the link
+  - Do not mislead users by mislabeling links
+  - Avoid using "Click here" or "Here" as stand-alone links
+
+| ✅ Recommended usage | ❌ Deprecated usage |   
+| --- | --- | 
+| No spaces yet? <PureA> Create space </PureA>| No spaces yet? <PureA>Click here</PureA> |
+
+- Avoid using entire sentences as clickable text links, and instead use text that describes where to go as the link content
+
+| ✅ Recommended usage | ❌ Deprecated usage |   
+| --- | --- | 
+| Views <PureA>user documentation</PureA> for details|<PureA>View user documentation for details</PureA> |
+
+- Using short terms or words as link text is more conducive to internationalization, to avoid the problem of link text being split due to different grammar and word order in different languages
+
+| ✅ Recommended usage | ❌ Deprecated usage |   
+| --- | --- | 
+| Manage <PureA>notifications </PureA>to| <PureA>Manage notifications</PureA> to |
+
+- When ending with a text link, there is no need to follow punctuation, except for the question mark "?"
+
+| ✅ Recommended usage | ❌ Deprecated usage |   
+| --- | --- | 
+| No spaces yet? <PureA> Create space </PureA> | No spaces yet? <PureA>Click here</PureA> |
+| <PureA> Forgot password ？</PureA> |<PureA>Forgot password</PureA> |
+
+- Link text does not contain the articles "the, a, an"
+
+| ✅ Recommended usage | ❌ Deprecated usage |   
+| --- | --- | 
+| View <PureA> user documentation </PureA> for details| View the<PureA> user documentation</PureA> for details |
+
 ## Design Tokens
 <DesignToken/>

content/basic/typography/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 16
+order: 17
 category: 基础
 title:  Typography 版式
 icon: doc-typography
@@ -372,5 +372,41 @@ function Demo() {
 | successTip | 复制成功的展示内容          | React.node                                     | -      | 0.33.0 |
 | onCopy     | 复制回调                    | Function(e:Event, content:string, res:boolean) | -      | 0.27.0 |
 
+
+## 文案规范
+- Link
+  - 文字链接需要清晰且可预测，用户应该能够预测他们点击链接时会发生什么
+  - 切勿通过错误标记链接来误导用户
+  - 避免使用“Click here”或“Here”作为独立链接
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| No spaces yet? <PureA> Create space </PureA>| No spaces yet? <PureA>Click here</PureA> |
+
+- 避免将整个句子作为可点击的文字链接，而是将描述具体去向的文字作为链接内容
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| Views <PureA>user documentation</PureA> for details|<PureA>View user documentation for details</PureA> |
+
+- 使用短术语或词作为链接文本会更有利于国际化，以避免由于不同的语言的语法和语序不同，而出现链接文字被拆分的问题
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| Manage <PureA>notifications </PureA>to| <PureA>Manage notifications</PureA> to |
+
+- 以文字链接结尾时，不需要跟随标点符号，除了问号“？”
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| No spaces yet? <PureA> Create space </PureA> | No spaces yet? <PureA>Click here</PureA> |
+| <PureA> Forgot password ？</PureA> |<PureA>Forgot password</PureA> |
+
+- 链接文字不要包含冠词“the, a, an”
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| View <PureA> user documentation </PureA> for details| View the<PureA> user documentation</PureA> for details |
+
 ## 设计变量
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 63
+order: 64
 category: Feedback
 title:  Banner
 subTitle: Banner
@@ -192,6 +192,23 @@ import { Banner } from '@douyinfe/semi-ui';
 - The close icon has a `aria-label` of 'Close'.
 
 ### Keyboard and Focus
+
 - The close button of the Banner can be focused with the `Tab` key. After the button is focused, hit the `Enter` key or the `Space` key to close the banner.
+
+## Content Guidelines
+
+- Full screen Banner
+  - Try to keep the content displayed completely on one line
+  - Use correct punctuation, commas within sentences and periods between sentences
+- Non-fullscreen Banner
+  - title
+    - Instructions in condensed language
+    - Try to avoid using commas, periods and other punctuation marks in the title, and support the use of question marks at the end when there are and only interrogative sentences
+  - text
+    - On the premise of complete information transmission, try to compress the text to 1-2 sentences
+    - A detailed description or explanation of the title, rather than a repetition of the title
+    - Use correct punctuation, commas within sentences and periods between sentences
+
 ## Design Tokens
+
 <DesignToken/>

content/feedback/banner/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 63
+order: 64
 category: 反馈类
 title:  Banner 通知横幅
 icon: doc-banner
@@ -194,6 +194,18 @@ import { Banner } from '@douyinfe/semi-ui';
 
 - Banner 的关闭按钮可以使用 `Tab` 键聚焦，按钮聚焦后，敲击 `Enter` 键或 `Space` 键可以关闭 banner
 
+## 文案规范
+- 全屏 Banner
+  - 尽量保持内容一行展示完全
+  - 使用正确的标点符号，句子内使用逗号，句子间使用句号
+- 非全屏 Banner
+  - 标题
+    - 使用精简的语言进行说明
+    - 标题上尽量避免使用逗号，句号等标点符号，有且只有是疑问句的时候，支持使用问号结尾
+  - 正文
+    - 在信息传递完整的前提下，尽可能地将正文压缩至 1 -2 句话
+    - 对标题进行详尽地描述或者解释，而不是对标题的重复说明
+    - 使用正确的标点符号，句子内使用逗号，句子间使用句号
 
 ## 设计变量
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 64
+order: 65
 category: Feedback
 title:  Notification
 subTitle: Notification
@@ -325,5 +325,31 @@ When you need access Context, you could use ``Notification.useNotification` to c
 - The `role` of the component is'alert'
 - The notification's `aria-labelledby` is marked as the corresponding notification title
 
+## Content Guidelines
+
+<div style={{ border: '1px solid var(--semi-color-border)', padding: 10, marginBottom: 24, justifyContent: 'center', display: 'flex' }}>
+    <NotificationCard
+        type='info'
+        title='Task completed'
+        content={
+            <div>
+                400 tasks succeed and 600 failed
+                <div style={{ color: 'var(--semi-color-primary)', marginTop: 4, fontWeight: 600 }}>Check failed tasks</div>
+            </div>
+        }
+    />
+</div>
+
+- Title
+  - Explain in clear and concise language
+  - Avoid punctuation such as commas, periods, etc.
+- Text
+  - On the premise of complete information transmission, try to compress the text to 1-2 sentences
+  - A detailed description or explanation of the title, rather than a repetition of the title
+  - Use correct punctuation, commas within sentences and periods between sentences
+- Operate
+  - The copy needs to show the specific meaning of the operation
+
 ## Design Tokens
+
 <DesignToken/>

content/feedback/notification/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 64
+order: 65
 category: 反馈类
 title: Notification 通知
 icon: doc-notification
@@ -310,10 +310,44 @@ import { Notification, Button } from '@douyinfe/semi-ui';
 -  通知的 `aria-labelledby` 标记为对应通知标题
 
 
+## 文案规范
+
+
+<div style={{ border: '1px solid var(--semi-color-border)', padding: 10, marginBottom: 24, justifyContent: 'center', display: 'flex' }}>
+    <NotificationCard
+        type='info'
+        title='Task completed'
+        content={
+            <div>
+                400 tasks succeed and 600 failed
+                <div style={{ color: 'var(--semi-color-primary)', marginTop: 4, fontWeight: 600 }}>Check failed tasks</div>
+            </div>
+        }
+    />
+</div>
+
+- 标题
+  - 使用简洁明了的语言进行说明
+  - 避免使用逗号，句号等标点符号
+- 正文
+  - 在信息传递完整的前提下，尽可能地将正文压缩至 1 -2 句话
+  - 对标题进行详尽地描述或者解释，而不是对标题的重复说明
+  - 使用正确的标点符号，句子内使用逗号，句子间使用句号
+- 操作
+  - 文案需要展示操作的具体含义
+
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| <NotificationCard type='info' style={{ width: 350}} title='Task completed' content={<div> 400 tasks succeed and 600 failed <div style={{ color: 'var(--semi-color-primary)', marginTop: 4, fontWeight: 600 }}>Check failed tasks</div></div>} /> | <NotificationCard type='info' style={{ width: 350}} title='Status editing tasks completed' content={<div> 400 tasks succeed and 600 failed <div style={{ color: 'var(--semi-color-primary)', marginTop: 4, fontWeight: 600 }}>Check</div></div>} /> |
+
+
+
 ## 设计变量
 
 <DesignToken/>
 
+
 全局销毁 ( >= 0.25.0 )：
 
 -   `Notification.destroyAll()` ( >= 0.25.0 )

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

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

content/feedback/popconfirm/index.md

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

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 66
+order: 67
 category: Feedback
 title: Progress
 subTitle: Progress
@@ -284,6 +284,9 @@ import { Progress } from '@douyinfe/semi-ui';
 // usage of aria-valuetext
 <Progress aria-label='Percent of disk usage' percent={80} aria-valuetext="Step 2: Copying files... "/> 
 ```
+
+## Content Guidelines
+- If the progress bar process is complicated, or there is a long waiting time, you can use the help text to explain. This lets the user know what progress is happening.
 ## Design Tokens
 
 <DesignToken/>

content/feedback/progress/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 66
+order: 67
 category: 反馈类
 title: Progress 进度条
 icon: doc-progress
@@ -306,6 +306,10 @@ import { Progress } from '@douyinfe/semi-ui';
 <Progress aria-label='Percent of disk usage' percent={80} aria-valuetext="Step 2: Copying files... "/> 
 ```
 
+
+## 文案规范
+- 如果进度条过程复杂，或者有很长的等待时间，可以使用帮助文本来做说明。这样可以让用户知道正在发生的进度进展
+
 ## 设计变量
 
 <DesignToken/>

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

@@ -1,14 +1,13 @@
 ---
 localeCode: en-US
-order: 67
+order: 68
 category: Feedback
-title:  Skeleton
+title: Skeleton
 subTitle: Skeleton
 icon: doc-skeleton
 brief: A placeholder preview of content before the data loaded.
 ---
 
-
 ## Overview
 
 -   `Avatar`: Avatar placeholder, by default uses Avatar medium sizing: `width: 48px`, `height: 48px`. Supports other sizes after v1.0.
@@ -26,50 +25,61 @@ brief: A placeholder preview of content before the data loaded.
 ```jsx
 import { Skeleton } from '@douyinfe/semi-ui';
 ```
+
 ### Basic Usage
 
 ```jsx live=true
 import React from 'react';
-import { Skeleton, Switch, Button } from '@douyinfe/semi-ui';
+import { Skeleton, Switch, Button, Avatar } from '@douyinfe/semi-ui';
 
 class Demo extends React.Component {
     constructor() {
         super();
-        this.state = {loading: true};
+        this.state = { loading: true };
     }
 
     showContent() {
-        const {loading} = this.state;
+        const { loading } = this.state;
         this.setState({
-            loading: !loading
+            loading: !loading,
         });
     }
 
     render() {
-        const {loading} = this.state;
+        const { loading } = this.state;
         return (
             <>
-                <span style={{display: 'flex', alignItems: 'center'}}>
-                    <Switch onChange={() => this.showContent()}/>
-                    <span style={{marginLeft: '10px' }}>Show Loading Content</span>
+                <span style={{ display: 'flex', alignItems: 'center' }}>
+                    <Switch onChange={() => this.showContent()} />
+                    <span style={{ marginLeft: '10px' }}>Show Loading Content</span>
                 </span>
-                <br/>
-                <Skeleton placeholder={(<Skeleton.Avatar />)} loading={loading}>
-                    <Avatar color='blue' style={{marginBottom: 10}}>U</Avatar>
+                <br />
+                <Skeleton placeholder={<Skeleton.Avatar />} loading={loading}>
+                    <Avatar color="blue" style={{ marginBottom: 10 }}>
+                        U
+                    </Avatar>
                 </Skeleton>
-                <br/>
-                <Skeleton style={{width: 200, height: 150}} placeholder={(<Skeleton.Image />)} loading={loading}>
-                    <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png" height='150' />
+                <br />
+                <Skeleton style={{ width: 200, height: 150 }} placeholder={<Skeleton.Image />} loading={loading}>
+                    <img
+                        src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                        height="150"
+                        alt="avatar"
+                    />
                 </Skeleton>
-                <br/>
-                <Skeleton style={{width: 80}} placeholder={(<Skeleton.Title style={{marginBottom: 10}}/>)} loading={loading}>
-                    <h4 style={{marginBottom: 0}}>Semi UI</h4>
+                <br />
+                <Skeleton
+                    style={{ width: 80 }}
+                    placeholder={<Skeleton.Title style={{ marginBottom: 10 }} />}
+                    loading={loading}
+                >
+                    <h4 style={{ marginBottom: 0 }}>Semi UI</h4>
                 </Skeleton>
-                <Skeleton style={{width: 240}} placeholder={(<Skeleton.Paragraph rows={2}/>)} loading={loading}>
-                    <p style={{width: 240}} >Carefully polish the user experience of each component.</p>
+                <Skeleton style={{ width: 240 }} placeholder={<Skeleton.Paragraph rows={2} />} loading={loading}>
+                    <p style={{ width: 240 }}>Carefully polish the user experience of each component.</p>
                 </Skeleton>
-                <br/>
-                <Skeleton placeholder={(<Skeleton.Button />)} loading={loading}>
+                <br />
+                <Skeleton placeholder={<Skeleton.Button />} loading={loading}>
                     <Button>Button</Button>
                 </Skeleton>
             </>
@@ -89,14 +99,18 @@ import { Skeleton } from '@douyinfe/semi-ui';
 () => {
     const placeholder = (
         <div>
-            <Skeleton.Image style={{width: 200, height: 150}}/>
-            <Skeleton.Title style={{width: 120, marginTop: 10}}/>
+            <Skeleton.Image style={{ width: 200, height: 150 }} />
+            <Skeleton.Title style={{ width: 120, marginTop: 10 }} />
         </div>
     );
 
     return (
         <Skeleton placeholder={placeholder} loading={true}>
-            <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png" height='150' />
+            <img
+                src="https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg"
+                height="150"
+                alt="avatar"
+            />
             <h4>Semi UI</h4>
         </Skeleton>
     );
@@ -112,14 +126,12 @@ import { Skeleton, Descriptions } from '@douyinfe/semi-ui';
 () => {
     const placeholder = (
         <div>
-            <Skeleton.Paragraph rows={1} style={{width: 80, marginBottom: 10}}/>
-            <Skeleton.Title style={{width: 120}}/>
+            <Skeleton.Paragraph rows={1} style={{ width: 80, marginBottom: 10 }} />
+            <Skeleton.Title style={{ width: 120 }} />
         </div>
     );
 
-    const data = [
-        { key: 'Actual User', value: '1,480,000' },
-    ];
+    const data = [{ key: 'Actual User', value: '1,480,000' }];
 
     return (
         <Skeleton placeholder={placeholder} loading={true}>
@@ -137,15 +149,17 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 () => {
     const placeholder = (
-        <div style={{display: 'flex', alignItems: 'center'}}>
-            <Skeleton.Avatar style={{marginRight: 12}}/>
-            <Skeleton.Title style={{width: 120}}/>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Skeleton.Avatar style={{ marginRight: 12 }} />
+            <Skeleton.Title style={{ width: 120 }} />
         </div>
     );
 
     return (
         <Skeleton placeholder={placeholder} loading={true}>
-            <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
+            <Avatar color="blue" style={{ marginRight: 12 }}>
+                UI
+            </Avatar>
             <span>Semi UI</span>
         </Skeleton>
     );
@@ -169,14 +183,14 @@ import { Skeleton, Button } from '@douyinfe/semi-ui';
 
     const placeholder = (
         <div style={style}>
-            <Skeleton.Paragraph style={style} rows={3}/>
+            <Skeleton.Paragraph style={style} rows={3} />
             <Skeleton.Button />
         </div>
     );
 
     return (
-        <Skeleton placeholder={placeholder} loading={true} style={{textAlign: 'center'}}>
-            <div style={{textAlign: 'center'}}>
+        <Skeleton placeholder={placeholder} loading={true} style={{ textAlign: 'center' }}>
+            <div style={{ textAlign: 'center' }}>
                 <p>Hi, Bytedance dance dance.</p>
                 <p>Hi, Bytedance dance dance.</p>
                 <Button>Button</Button>
@@ -195,15 +209,15 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 () => {
     const style = {
         display: 'flex',
-        alignItems: 'flex-start'
+        alignItems: 'flex-start',
     };
 
     const placeholder = (
         <div style={style}>
-            <Skeleton.Avatar style={{marginRight: 12}}/>
+            <Skeleton.Avatar style={{ marginRight: 12 }} />
             <div>
-                <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
-                <Skeleton.Paragraph style={{width: 240}} rows={3}/>
+                <Skeleton.Title style={{ width: 120, marginBottom: 12, marginTop: 12 }} />
+                <Skeleton.Paragraph style={{ width: 240 }} rows={3} />
             </div>
         </div>
     );
@@ -211,7 +225,9 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
     return (
         <Skeleton placeholder={placeholder} loading={true}>
             <div style={style}>
-                <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
+                <Avatar color="blue" style={{ marginRight: 12 }}>
+                    UI
+                </Avatar>
                 <div>
                     <h3>Semi UI</h3>
                     <p>Hi, Bytedance dance dance.</p>
@@ -246,60 +262,61 @@ import { Skeleton, Table } from '@douyinfe/semi-ui';
                 dataIndex: 'address',
             },
         ],
-        content: [{
-            key: '1',
-            name: 'John Brown',
-            age: 32,
-            address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
-        },
-        {
-            key: '2',
-            name: 'Jim Green',
-            age: 42,
-            address: 'London No. 1 Lake Park',
-        },
-        {
-            key: '3',
-            name: 'Joe Black',
-            age: 32,
-            address: 'Sidney No. 1 Lake Park',
-        },
-        {
-            key: '4',
-            name: 'Disabled User',
-            age: 99,
-            address: 'Sidney No. 1 Lake Park',
-        },
-        ]
+        content: [
+            {
+                key: '1',
+                name: 'John Brown',
+                age: 32,
+                address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'Jim Green',
+                age: 42,
+                address: 'London No. 1 Lake Park',
+            },
+            {
+                key: '3',
+                name: 'Joe Black',
+                age: 32,
+                address: 'Sidney No. 1 Lake Park',
+            },
+            {
+                key: '4',
+                name: 'Disabled User',
+                age: 99,
+                address: 'Sidney No. 1 Lake Park',
+            },
+        ],
     };
 
     const skData = {
-        columns: [1,2,3].map(key => {
+        columns: [1, 2, 3].map(key => {
             const item = {};
-            item.title = (<Skeleton.Title style={{width: '0'}}/>);
+            item.title = <Skeleton.Title style={{ width: '0' }} />;
             item.dataIndex = key;
             return item;
         }),
-        dataSource: [1,2,3,4].map(key => {
+        dataSource: [1, 2, 3, 4].map(key => {
             const item = {};
             item.key = key;
-            [1,2,3].forEach(i => {
+            [1, 2, 3].forEach(i => {
                 const width = 50 * i;
-                item[i] = (<Skeleton.Paragraph style={{width: width}} rows={1}/>);
+                item[i] = <Skeleton.Paragraph style={{ width: width }} rows={1} />;
             });
             return item;
-        })
+        }),
     };
 
     const placeholder = (
-        <div style={{position: 'relative'}}>
+        <div style={{ position: 'relative' }}>
             <Table
-                style={{backgroundColor: 'var(--semi-color-bg-1)'}}
+                style={{ backgroundColor: 'var(--semi-color-bg-1)' }}
                 columns={skData.columns}
                 dataSource={skData.dataSource}
                 pagination={false}
             />
-            <div style={{position: 'absolute', left: 0, right: 0, top: 0, bottom: 0}}></div>
+            <div style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0 }}></div>
         </div>
     );
 
@@ -324,15 +341,15 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 () => {
     const style = {
         display: 'flex',
-        alignItems: 'flex-start'
+        alignItems: 'flex-start',
     };
 
     const placeholder = (
         <div style={style}>
-            <Skeleton.Avatar style={{marginRight: 12}}/>
+            <Skeleton.Avatar style={{ marginRight: 12 }} />
             <div>
-                <Skeleton.Title style={{width: 120, marginBottom: 12, marginTop: 12}}/>
-                <Skeleton.Paragraph style={{width: 240}} rows={3}/>
+                <Skeleton.Title style={{ width: 120, marginBottom: 12, marginTop: 12 }} />
+                <Skeleton.Paragraph style={{ width: 240 }} rows={3} />
             </div>
         </div>
     );
@@ -340,7 +357,9 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
     return (
         <Skeleton placeholder={placeholder} loading={true} active>
             <div style={style}>
-                <Avatar color='blue' style={{marginRight: 12}}>UI</Avatar>
+                <Avatar color="blue" style={{ marginRight: 12 }}>
+                    UI
+                </Avatar>
                 <div>
                     <h3>Semi UI</h3>
                     <p>Hi, Bytedance dance dance.</p>
@@ -357,31 +376,36 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 
 ### Skeleton
 
-| Property    | Instructions                                                                                  | type       | Default |
-| ----------- | --------------------------------------------------------------------------------------------- | ---------- | ------- |
-| active      | Toggle whether to show the animated loading effect                                            | boolean    | false   |
-| class Name  | Class name                                                                                    | string     | -       |
-| loading     | When set to true, the placeholder element is displayed. Otherwise, child element is displayed | boolean    | true    |
-| placeholder | Elements to be displayed while loading                                                        | ReactNode | -       |
-| style       | Inline style                                                                                  | CSSProperties     | -       |
+| Property | Instructions | type | Default |
+| --- | --- | --- | --- |
+| active | Toggle whether to show the animated loading effect | boolean | false |
+| class Name | Class name | string | - |
+| loading | When set to true, the placeholder element is displayed. Otherwise, child element is displayed | boolean | true |
+| placeholder | Elements to be displayed while loading | ReactNode | - |
+| style | Inline style | CSSProperties | - |
 
 ### Skeleton.Avatar
 
 > `Skeleton.Image`,`Skeleton.Title`，`Skeleton.Button` have same APIs with `Skeleton.Avatar`.
 
-| Property   | Instructions | type   | Default |
-| ---------- | ------------ | ------ | ------- |
-| class Name | Class name   | string | -       |
-| size       | Size of the avatar, one of `extra-extra-small`, `extra-small`, `small`, `medium`, `large`, `extra-large`, **v>=1.0** | string | `medium` |
-| style      | Inline style | CSSProperties | -       |
+| Property | Instructions | type | Default |
+| --- | --- | --- | --- |
+| class Name | Class name | string | - |
+| size | Size of the avatar, one of `extra-extra-small`, `extra-small`, `small`, `medium`, `large`, `extra-large`, **v>=1.0** | string | `medium` |
+| style | Inline style | CSSProperties | - |
 
 ### Skeleton.Paragraph
 
-| Property  | Instructions                                        | type   | Default |
-| --------- | --------------------------------------------------- | ------ | ------- |
-| className | Class name                                          | string | -       |
-| rows      | Set the number of rows in the placeholder paragraph | number | 4       |
+| Property  | Instructions                                        | type          | Default |
+| --------- | --------------------------------------------------- | ------------- | ------- |
+| className | Class name                                          | string        | -       |
+| rows      | Set the number of rows in the placeholder paragraph | number        | 4       |
 | style     | Inline style                                        | CSSProperties | -       |
 
+## Content Guidelines
+
+- Unchanged fixed content directly displays fixed content, and variable content is displayed using skeleton screen
+
 ## Design Tokens
+
 <DesignToken/>

content/feedback/skeleton/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 67
+order: 68
 category: 反馈类
 title: Skeleton 骨架屏
 icon: doc-skeleton
@@ -53,6 +53,7 @@ import { Skeleton, Switch, Avatar, Button } from '@douyinfe/semi-ui';
                 <img
                     src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
                     height="150"
+                    alt="avatar"
                 />
             </Skeleton>
             <br />
@@ -96,6 +97,7 @@ import { Skeleton } from '@douyinfe/semi-ui';
             <img
                 src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
                 height="150"
+                alt="avatar"
             />
             <h4>Semi UI</h4>
         </Skeleton>
@@ -388,6 +390,12 @@ import { Skeleton, Avatar } from '@douyinfe/semi-ui';
 | rows      | 设置段落占位图的行数 | number | 4      |
 | style     | 样式                 | CSSProperties | -      |
 
+## 文案规范
+- 不变的固定内容直接展示固定内容，可变的内容使用骨架屏展示
+
+
+
+
 ## 设计变量
 
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 68
+order: 69
 category: Feedback
 title: Spin
 subTitle: Spin
@@ -164,6 +164,10 @@ import { Spin, Button } from '@douyinfe/semi-ui';
 
 <DesignToken/>
 
+## Content Guidelines
+- Precisely state the loading status, using words such as "Loading", "Submitting", "Processing", etc.
+- Use as few words as possible to describe the state
+
 ## FAQ
 
 -   **How to modify the color of the spin icon? **

content/feedback/spin/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 68
+order: 69
 category: 反馈类
 title: Spin 加载器
 icon: doc-spin
@@ -139,6 +139,10 @@ import { Spin, Button } from '@douyinfe/semi-ui';
 
 <DesignToken/>
 
+## 文案规范
+- 准确地说明加载状态，使用比如“Loading”, “Submitting”, “Processing”等词
+- 使用尽量少的词汇去描述状态
+
 ## FAQ
 
 -   **怎么修改 icon 的颜色？**

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 69
+order: 70
 category: Feedback
 title: Toast
 subTitle: Toast
@@ -68,7 +68,7 @@ function Demo() {
 
     return (
         <>
-            <Button style={{color:`var(--semi-color-success)`}} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
+            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -105,7 +105,7 @@ function Demo() {
             <Button onClick={() => Toast.info(opts)}>Info</Button>
             <br />
             <br />
-            <Button style={{color:`var(--semi-color-success)`}} onClick={() => Toast.success(opts)}>Success</Button>
+            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -415,6 +415,29 @@ HookToast
 
 - The role of Toast is alert
 
+## Content Guidelines
+
+<div style={{ border: '1px solid var(--semi-color-border)', padding: 10, marginBottom: 24, justifyContent: 'center', display: 'flex' }}>
+    <ToastCard type='success' content='Ticket transferred' />
+</div>
+
+- Keep it simple
+- Do not use periods at the end of sentences
+- Explain using the noun + verb format
+
+| ✅ Recommended usage | ❌ Deprecated usage |
+| --- | --- |
+| Language added | New language has been added successfully |
+| Ticket transfer failed | Can't transfer ticket |
+
+- Provide prompt message for action
+  - only provide one action
+  - Don't use actions like "read" like OK, Got it, Dismiss, Cancel
+
+| ✅ Recommended usage | ❌ Deprecated usage |
+| --- | --- |
+|  <ToastCard type='error' content={<div>Ticket transfer failed <span style={{ color: 'var(--semi-color-primary)', marginLeft: 4, cursor: 'pointer' }}>Retry</span> </div>} /> |  <ToastCard type='error' content={<div>Ticket transfer failed <span style={{ color: 'var(--semi-color-primary)', marginLeft: 4, cursor: 'pointer' }}>Dismiss</span> </div>} /> |
+
 ## Design Tokens
 
 <DesignToken/>

content/feedback/toast/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 69
+order: 70
 category: 反馈类
 title: Toast 提示
 icon: doc-toast
@@ -69,7 +69,7 @@ function Demo() {
 
     return (
         <>
-            <Button style={{color:`var(--semi-color-success)`}} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
+            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success('Hi,Bytedance dance dance')}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -106,7 +106,7 @@ function Demo() {
             <Button onClick={() => Toast.info(opts)}>Info</Button>
             <br />
             <br />
-            <Button style={{color:`var(--semi-color-success)`}} onClick={() => Toast.success(opts)}>Success</Button>
+            <Button style={{ color:`var(--semi-color-success)` }} onClick={() => Toast.success(opts)}>Success</Button>
             <br />
             <br />
             <Button type="warning" onClick={() => Toast.warning(opts)}>
@@ -416,6 +416,32 @@ HookToast ( >= 1.2.0 )：
 
 - Toast 的 role 为 alert
 
+## 文案规范
+
+
+<div style={{ border: '1px solid var(--semi-color-border)', padding: 10, marginBottom: 24, justifyContent: 'center', display: 'flex' }}>
+    <ToastCard type='success' content='Ticket transferred' />
+</div>
+
+
+- 保持简洁
+- 句尾不使用句号
+- 使用 名词 + 动词 的格式进行说明
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| Language added | New language has been added successfully |
+| Ticket transfer failed | Can't transfer ticket |
+
+- 提供动作的提示消息
+  - 只提供一个动作
+  - 不使用类似于「已读」类的动作，例如 OK, Got it, Dismiss, Cancel
+
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+|  <ToastCard type='error' content={<div>Ticket transfer failed <span style={{ color: 'var(--semi-color-primary)', marginLeft: 4, cursor: 'pointer' }}>Retry</span> </div>} /> |  <ToastCard type='error' content={<div>Ticket transfer failed <span style={{ color: 'var(--semi-color-primary)', marginLeft: 4, cursor: 'pointer' }}>Dismiss</span> </div>} /> |
+
 ## 设计变量
 
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 17
+order: 18
 category: Input
 title: AutoComplete
 icon: doc-autocomplete
@@ -346,7 +346,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
         <AutoComplete
             loading={loading}
             data={data}
-            emptyContent={<Empty style={{ padding: 12, width: 300 }} image={<IllustrationNoContent style={{width: 150, height: 150}}/>} description={'no content yet'} />}
+            emptyContent={<Empty style={{ padding: 12, width: 300 }} image={<IllustrationNoContent style={{ width: 150, height: 150 }}/>} description={'no content yet'} />}
             onSearch={fetchData}
         />
     );
@@ -400,5 +400,10 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
    - Use `Esc` to close the menu
    - Use `Up Arrow` or `Down Arrow` to toggle options
    - The focused option can be selected with the `Enter` key and the panel will be collapsed
+
+## Content Guidelines
+- Content needs to be presented clearly so that users can clearly perceive the options available
+- Limit the number of options displayed at one time
+
 ## Design Token
 <DesignToken/>

content/input/autocomplete/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 17
+order: 18
 category: 输入类
 title: AutoComplete 自动完成
 icon: doc-autocomplete
@@ -273,7 +273,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
             newData = [];
         }
         setData(newData);
-    }
+    };
     return (
         <div>
             <AutoComplete
@@ -291,7 +291,7 @@ import { AutoComplete } from '@douyinfe/semi-ui';
                 style={{ width: 200, margin: 10 }}
             ></AutoComplete>
         </div>
-    )
+    );
 };
 
 ```
@@ -361,7 +361,7 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
         <AutoComplete
             loading={loading}
             data={data}
-            emptyContent={<Empty style={{ padding: 12, width: 300 }} image={<IllustrationNoContent style={{width: 150, height: 150}}/>} description={'暂无内容'} />}
+            emptyContent={<Empty style={{ padding: 12, width: 300 }} image={<IllustrationNoContent style={{ width: 150, height: 150 }}/>} description={'暂无内容'} />}
             onSearch={fetchData}
         />
     );
@@ -417,5 +417,9 @@ import { IllustrationNoContent } from '@douyinfe/semi-illustrations';
   - 使用 `上箭头` 或 `下箭头` 可以切换选项
   - 被聚焦的选项可以通过 `Enter` 键选中，并收起面板
 
+## 文案规范
+- 需要清晰地展示内容，让用户显而易见地感知到可用的各个选项
+- 限制一次性展示的选项数量
+
 ## 设计变量
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 18
+order: 19
 category: Input
 title:  Button
 subTitle: Button
@@ -539,6 +539,29 @@ function SplitButtonDemo(){
 - The trigger of `Button` is the same as the native `button`, when the `button` is focused, it can be activated by `Enter` or `Space` key
 - The buttons in the `ButtonGroup` are managed in the same way as the focus of a single `button`, and can be switched by `Tab` and `Shift + Tab`
 
+## Content Guidelines
+
+- Buttons need to be clear and predictable, users should be able to predict what will happen when they click the button
+- Buttons should always start with a strong verb that encourages action
+- To give the user enough context, use {verb}+{noun} content formulas on buttons; in addition to common actions like "Done", "Close", "Cancel" or "OK"
+
+| ✅ Recommended usage | ❌ Deprecated usage |
+| --- | --- |
+| <div style={{ textAlign: 'center' }}><Empty image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />} description={'No permission to view this page'}/><Button theme='solid' type='primary' style={{ marginTop: 12 }}>Apply permission</Button></div>|  <div style={{ textAlign: 'center' }}><Empty image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />} description={'No permission to view this page'}/><Button theme='solid' type='primary' style={{ marginTop: 12 }}>Apply</Button></div>  |
+
+- When the button is combined with other components, the button can only display {verb}, such as "Add", "Create", if the other components (such as Modal and Sidesheet) already provide enough context for the information
+  
+| ✅ Recommended usage | ❌ Deprecated usage |
+| --- | --- |
+| <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/button-good-2.png' style={{ width: 350 }} />| <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/button-bad-2.png' style={{ width: 350 }} /> |
+
+- Always write in Sentence case
+
+| ✅ Recommended usage | ❌ Deprecated usage |
+| --- | --- |
+| Create project | Create <br/> Create a project|
+| Edit profile | Edit |
+
 ## Design Tokens
 <DesignToken/>
 

content/input/button/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 18
+order: 19
 category: 输入类
 title:  Button 按钮
 icon: doc-button
@@ -413,17 +413,17 @@ function SplitButtonDemo(){
     });
 
     const handleVisibleChange = (key,visible)=>{
-        newBtnVisible = {...btnVisible};
+        newBtnVisible = { ...btnVisible };
         newBtnVisible[key] = visible;
         setBtnVisible(newBtnVisible);
     };
 
     return (
         <div>
-            <SplitButtonGroup style={{marginRight:10}} aria-label="项目操作按钮组">
+            <SplitButtonGroup style={{ marginRight:10 }} aria-label="项目操作按钮组">
                 <Button theme="solid" type="primary">分裂按钮</Button>
                 <Dropdown onVisibleChange={(v)=>handleVisibleChange(1,v)} menu={menu} trigger="click" position="bottomRight">
-                    <Button style={btnVisible[1]?{background:'var(--semi-color-primary-hover)',padding:'8px 4px'}:{padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
+                    <Button style={btnVisible[1] ? { background:'var(--semi-color-primary-hover)',padding:'8px 4px' } : { padding:'8px 4px'}} theme="solid" type="primary" icon={<IconTreeTriangleDown />}></Button>
                 </Dropdown>
             </SplitButtonGroup>
             <SplitButtonGroup style={{marginRight:10}} aria-label="项目操作按钮组">
@@ -499,6 +499,29 @@ function SplitButtonDemo(){
 - Button 的触发与原生 button 一致，当按钮聚焦时，可以通过 Enter 或 Space 键激活
 - ButtonGroup 中的按钮与单个按钮的焦点管理方式一致，可以通过 Tab 以及 Shift + Tab 进行切换
 
+
+## 文案规范
+- 按钮需要清晰可预测，用户应该能够预测他们点击按钮时会发生什么
+- 按钮应该总是以鼓励行动的强动词开头
+- 为了给用户提供足够的上下文，在按钮上使用 {动词}+{名词} 内容公式；除了常见的动作，如“Done”、“Close”、“Cancel”或“OK”
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| <div style={{ textAlign: 'center' }}><Empty image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />} description={'No permission to view this page'}/><Button theme='solid' type='primary' style={{ marginTop: 12 }}>Apply permission</Button></div>|  <div style={{ textAlign: 'center' }}><Empty image={<IllustrationNoAccess style={{ width: 150, height: 150 }} />} darkModeImage={<IllustrationNoAccessDark style={{ width: 150, height: 150 }} />} description={'No permission to view this page'}/><Button theme='solid' type='primary' style={{ marginTop: 12 }}>Apply</Button></div>  |
+
+- 当按钮和其他组件一起时候，如果其他组件（比如 Modal 和Sidesheet）已经提供了足够信息的上下文的话，按钮可以只展示 {动词}，如“Add”、“Create”；
+  
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/button-good-2.png' style={{ width: 350 }} />| <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/button-bad-2.png' style={{ width: 350 }} /> |
+
+- 始终按句子大小写（Sentence case）原则书写
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| Create project | Create <br/> Create a project|
+| Edit profile | Edit |
+
 ## 设计变量
 <DesignToken/>
 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 19
+order: 20
 category: Input
 title:  Cascader
 subTitle: Cascade

content/input/cascader/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 19
+order: 20
 category: 输入类
 title:  Cascader 级联选择
 icon: doc-cascader
@@ -1587,5 +1587,12 @@ function Demo() {
 - Cascader 支持传入 `aria-label`、`aria-describedby`、`aria-errormessage`、`aria-invalid`、`aria-labelledby`、`aria-required` 来表示该 Cascader 的相关信息;
 - Cascader 支持通过按下 Enter 键来选中选项、清空选项、展开下拉框
 
+## 文案规范
+- 选择器选项
+  - 如果没有默认选项，就使用“Select”做占位文案
+  - 选项要按首字母顺序或者其他有逻辑的排列顺序，使用户更好地找到选项
+  - 使用语句书写规范（首字母大写，其余小写），避免在句尾使用逗号和分号
+  - 清晰表达出选项所表示的选择目的
+
 ## 设计变量
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 20
+order: 21
 category: Input
 title:  Checkbox
 subTitle: Checkbox
@@ -450,6 +450,22 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 - The click area of ​​Checkbox is larger than the box itself and contains the text behind the box; for checkboxes with auxiliary text, the auxiliary text is also included in the click area.
 - Disabled Checkbox is not focusable.
 
+## Content Guidelines
+
+<div style={{ border: '1px solid var(--semi-color-border)', padding: 10, marginBottom: 24 }}>
+    <p style={{ fontWeight: 600, fontSize: 16  }}>Checkbox Content Demo</p>
+    <CheckboxGroup options={[
+        { label: 'Call', value: 'abc' },
+        { label: 'IM', value: 'c' },
+        { label: 'Ticket', value: 'd' },
+        { label: 'Offline', value: 'e' },
+        { label: 'Buzz', value: 'f' }
+    ]} direction='horizontal' aria-label="CheckboxGroup 示例" style={{ marginTop: 10 }}/>
+</div>
+
+- Capitalize the first letter
+- No punctuation
+
 ## Design Tokens
 <DesignToken/>
 

content/input/checkbox/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 20
+order: 21
 category: 输入类
 title: Checkbox 复选框
 icon: doc-checkbox
@@ -432,6 +432,28 @@ import { Checkbox, CheckboxGroup, Row, Col } from '@douyinfe/semi-ui';
 - Checkbox 的点击区域大于框本身，包含了框后的文案；带辅助文本的 checkbox，辅助文本也包含在点击区域内。
 - 禁用的 Checkbox 不可获取焦点。
 
+## 文案规范
+
+
+<div style={{ border: '1px solid var(--semi-color-border)', padding: 10, marginBottom: 24 }}>
+    <p style={{ fontWeight: 600, fontSize: 16  }}>Checkbox Content Demo</p>
+    <CheckboxGroup options={[
+        { label: 'Call', value: 'abc' },
+        { label: 'IM', value: 'c' },
+        { label: 'Ticket', value: 'd' },
+        { label: 'Offline', value: 'e' },
+        { label: 'Buzz', value: 'f' }
+    ]} direction='horizontal' aria-label="CheckboxGroup 示例" style={{ marginTop: 10 }}/>
+</div>
+
+- 首字母大写
+- 不使用标点符号
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| Call | call |
+| Call | Call; |
+
 ## 设计变量
 <DesignToken/>
 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 21
+order: 22
 category: Input
 title: DatePicker
 subTitle: Date Selector
@@ -923,6 +923,12 @@ Multiple dates or times are used by default `","` (English comma) separated.
 
 > More token available [Date-fns official website](https://date-fns.org/v2.9.0/docs/Unicode-Tokens)
 
+## Content Guidelines
+
+- Date picker is recommended to be used with tags
+- Use concise labels to indicate what the date selection refers to
+- Please refer to [Date and Time](/en-US/start/content-guidelines#8.%20%E6%97%A5%E6%9C%9F%E4%B8%8E%E6%97%B6%E9%97%B4)
+
 ## Design Tokens
 <DesignToken/>
 

content/input/datepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 21
+order: 22
 category: 输入类
 title: DatePicker 日期选择器
 icon: doc-datepicker
@@ -889,6 +889,11 @@ type TriggerRenderProps = {
 };
 ```
 
+
+## 文案规范
+- 日期选择器建议搭配标签使用
+- 使用简洁的标签来表明日期选择所指的内容
+- 日期选择器中日期格式请参考[日期与时间](/zh-CN/start/content-guidelines#8.%20%E6%97%A5%E6%9C%9F%E4%B8%8E%E6%97%B6%E9%97%B4)的规范
 ## 设计变量
 
 <DesignToken/>
@@ -916,6 +921,7 @@ semi-ui 组件库中采用 [date-fns(v2.9.0)](https://date-fns.org/v2.9.0/docs/G
 
 > 更多 token 可以查阅 [date-fns 官网](https://date-fns.org/v2.9.0/docs/Unicode-Tokens)
 
+
 ## FAQ
 
 -   **日期时间选择器，时分秒选择时不想要无限滚动效果如何实现？**  

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 22
+order: 23
 category: Input
 title:  Form
 subTitle: Form
@@ -107,14 +107,14 @@ import { Form } from '@douyinfe/semi-ui';
 () => (
     <Form render={({ formState, formApi, values }) => (
         <>
-            <Form.Select field="role" label='Role' style={{width:120}}>
+            <Form.Select field="role" label='Role' style={{ width:120 }}>
                 <Form.Select.Option value="admin">Admin</Form.Select.Option>
                 <Form.Select.Option value="user">User</Form.Select.Option>
                 <Form.Select.Option value="guest">Guest</Form.Select.Option>
             </Form.Select>
             <Form.Input field='userName' label='UserName' />
             <Form.Input field='password' label='Password' />
-            <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
+            <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>
         </>
     )} layout='horizontal'>
     </Form>
@@ -134,14 +134,14 @@ import { Form } from '@douyinfe/semi-ui';
         {
             ({ formState, values, formApi }) => (
                 <>
-                    <Form.Select field="role" label='Role' style={{width:120}}>
+                    <Form.Select field="role" label='Role' style={{ width:120 }}>
                         <Form.Select.Option value="admin">Admin</Form.Select.Option>
                         <Form.Select.Option value="user">User</Form.Select.Option>
                         <Form.Select.Option value="guest">Guest</Form.Select.Option>
                     </Form.Select>
                     <Form.Input field='userName' label='UserName' />
                     <Form.Input field='password' label='Password' />
-                    <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
+                    <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>
                 </>
             )
         }
@@ -165,7 +165,7 @@ class Demo extends React.Component {
                 <Form.Input field='Role'/>
                 <Form.Input field='UserName' />
                 <Form.Input field='Password' />
-                <code style={{marginTop: 30}}>{JSON.stringify(formState)}</code>
+                <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>
             </>
         );
         return <Form component={fields} layout='horizontal'/>;
@@ -410,7 +410,7 @@ import { Form, Row, Col, Toast, TextArea } from '@douyinfe/semi-ui';
                         <Form.Input field='parents[0].name' placeholder='Try input something'/>
                         <Form.Input field="parents[1]['name']" placeholder='Try input something'/>
                     </Col>
-                    <Col span={10} offset={1} style={{marginTop: 12}}>
+                    <Col span={10} offset={1} style={{ marginTop: 12 }}>
                         <Form.Label text='formState.values in real time：'></Form.Label>
                         <TextArea value={JSON.stringify(formState.values)}></TextArea>
                     </Col>
@@ -436,8 +436,8 @@ import { Form, Button, Toast } from '@douyinfe/semi-ui';
         Toast.info('Submit Success');
     };
     return (
-        <Form onSubmit={values => handleSubmit(values)} style={{width: 400}}>
-            {({formState, values, formApi}) => (
+        <Form onSubmit={values => handleSubmit(values)} style={{ width: 400 }}>
+            {({ formState, values, formApi }) => (
                 <>
                     <Form.Input field='phone' label='PhoneNumber' style={{ width: '100%' }} placeholder='Enter your phone number'></Form.Input>
                     <Form.Input field='password' label='Password' style={{ width: '100%' }} placeholder='Enter your password'></Form.Input>
@@ -503,14 +503,14 @@ class BasicDemo extends React.Component {
         const { labelPosition, labelAlign, labelWidth } = this.state;
         return (
             <>
-                <div style={{borderBottom: '1px solid var(--semi-color-text-3)', paddingBottom: 10 }}>
+                <div style={{ borderBottom: '1px solid var(--semi-color-text-3)', paddingBottom: 10 }}>
                     <Form.Label style={{ marginLeft: 10 }}>Switch Label Position:</Form.Label>
-                    <Select onChange={this.changeLabelPos} value={labelPosition} style={{width: 100}}>
+                    <Select onChange={this.changeLabelPos} value={labelPosition} style={{ width: 100 }}>
                         <Select.Option value='top'>top</Select.Option>
                         <Select.Option value='left'>left</Select.Option>
                     </Select>
                     <Form.Label style={{ marginLeft: 10 }}>Switch Label Text Align</Form.Label>
-                    <Select onChange={this.changeLabelAlign} value={labelAlign} style={{width: 100}}>
+                    <Select onChange={this.changeLabelAlign} value={labelAlign} style={{ width: 100 }}>
                         <Select.Option value='left'>left</Select.Option>
                         <Select.Option value='right'>right</Select.Option>
                     </Select>
@@ -524,7 +524,7 @@ class BasicDemo extends React.Component {
                         field="input"
                         label="PhoneNumber"
                         trigger='blur'
-                        style={{width: 200}}
+                        style={{ width: 200 }}
                         rules={[
                             { required: true, message: 'required Error' },
                             { type: 'string', message: 'type error' },
@@ -532,11 +532,11 @@ class BasicDemo extends React.Component {
                         ]}
                     />
                     <Form.Switch label="Agree" field='agree'/>
-                    <Form.InputNumber field='price' label='price' style={{width: 200}}/>
-                    <Form.Select label="Name" field='name' style={{width: 200}}>
-                        <Option value="mike">mike</Option>
-                        <Option value="jane">jane</Option>
-                        <Option value="kate">kate</Option>
+                    <Form.InputNumber field='price' label='price' style={{ width: 200 }}/>
+                    <Form.Select label="Name" field='name' style={{ width: 200 }}>
+                        <Form.Select.Option value="mike">mike</Form.Select.Option>
+                        <Form.Select.Option value="jane">jane</Form.Select.Option>
+                        <Form.Select.Option value="kate">kate</Form.Select.Option>
                     </Form.Select>
                     <Form.CheckboxGroup label="Role" field='role' direction='horizontal'>
                         <Checkbox value="admin">admin</Checkbox>
@@ -645,8 +645,8 @@ import { Form } from '@douyinfe/semi-ui';
         labelPosition='left'
         labelAlign='right'
     >
-        <Form.Input field='name' style={{width: 250}} label='Name' placeholder='Input Name' trigger='blur' />
-        <Form.Select field="role" label='Role' placeholder='Choose Role' style={{width: 250}}>
+        <Form.Input field='name' style={{ width: 250 }} label='Name' placeholder='Input Name' trigger='blur' />
+        <Form.Select field="role" label='Role' placeholder='Choose Role' style={{ width: 250 }}>
             <Form.Select.Option value="qa">Quality Assurance</Form.Select.Option>
             <Form.Select.Option value="rd">Software Engineer</Form.Select.Option>
             <Form.Select.Option value="pm">Product Manager</Form.Select.Option>
@@ -666,7 +666,7 @@ import { Form } from '@douyinfe/semi-ui';
 
 () => (
     <Form onSubmit={(values) => console.log(values)} style={{ width: 400 }}>
-        <Form.Input field='name' label='UserName' trigger='blur' noLabel={true} style={{width: 250}} placeholder='Input userName'/>
+        <Form.Input field='name' label='UserName' trigger='blur' noLabel={true} style={{ width: 250 }} placeholder='Input userName'/>
         <Form.Select field="role" label='UserRole' style={{ width: '250px' }} noLabel={true} placeholder='Choose role'>
             <Form.Select.Option value="qa">Quality Assurance</Form.Select.Option>
             <Form.Select.Option value="rd">Software Engineer</Form.Select.Option>
@@ -707,13 +707,13 @@ class AssistComponent extends React.Component {
             <Form
                 onChange={v=>console.log(v)}
                 onSubmit={v=>console.log(v)}
-                style={{width: 600}}
+                style={{ width: 600 }}
                 labelPosition='left'
                 labelWidth={100}
             >
-                <Form.Input field='effectName' label='EffectName' style={{width: 250}}/>
+                <Form.Input field='effectName' label='EffectName' style={{ width: 250 }}/>
                 <Form.Select
-                    style={{width: 300}}
+                    style={{ width: 300 }}
                     field="type"
                     label="EffectType"
                 >
@@ -722,12 +722,12 @@ class AssistComponent extends React.Component {
                 </Form.Select>
                 <Form.ErrorMessage />
                 <Form.Slot label={{ text: 'SlotA' }}>
-                    <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
+                    <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
                         {`I'm Semi Form SlotA, a custom ReactNode`}
                     </div>
                 </Form.Slot>
                 <Form.Slot label={{ text: 'SlotB', width: 160, align: 'right' }}>
-                    <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
+                    <div style={{ display: 'flex', alignItems: 'center', height: '100%' }}>
                         {`I'm Semi Form SlotA, i have different labelWidth and textAlign.`}
                     </div>
                 </Form.Slot>
@@ -745,7 +745,7 @@ import React from 'react';
 import { Form } from '@douyinfe/semi-ui';
 () => (
     <Form labelPosition='inset' layout='horizontal'>
-        <Form.Input field='name' label='UserName' trigger='blur' style={{width: 250}} placeholder='Input userName'/>
+        <Form.Input field='name' label='UserName' trigger='blur' style={{ width: 250 }} placeholder='Input userName'/>
         <Form.Select field="role" label='UserRole' style={{ width: '250px' }}>
             <Form.Select.Option value="qa">Quality Assurance</Form.Select.Option>
             <Form.Select.Option value="rd">Software Engineer</Form.Select.Option>
@@ -840,7 +840,7 @@ class ModalFormDemo extends React.Component {
                     title="New"
                     visible={visible}
                     onOk={this.handleOk}
-                    style={{width: 600}}
+                    style={{ width: 600 }}
                     onCancel={this.handleCancel}
                 >
                     <Form
@@ -851,15 +851,17 @@ class ModalFormDemo extends React.Component {
                                 <Form.Select
                                     field='region'
                                     label="Country/Region"
-                                    style={{width:120}}
+                                    style={{ width:120 }}
                                     rules={[
                                         { required: true, message },
                                     ]}
+                                    optionList={[
+                                        { label: 'China', value: 'China' },
+                                        { label: 'USA', value: 'US' },
+                                        { label: 'Europe', value: 'Europe' },
+                                        { label: 'Japan', value: 'Japan' },
+                                    ]}
                                 >
-                                    <Option value="China">China</Option>
-                                    <Option value="US">USA</Option>
-                                    <Option value="Europe">Europe</Option>
-                                    <Option value="Japan">Japan</Option>
                                 </Form.Select>
                             </Col>
                             <Col span={17}>
@@ -877,7 +879,7 @@ class ModalFormDemo extends React.Component {
                                     field='area'
                                     label="Area"
                                     placeholder='Choose Area'
-                                    style={{width:120}}
+                                    style={{ width:120 }}
                                     rules={[
                                         { required: true, message },
                                     ]}
@@ -1000,7 +1002,7 @@ class FormLevelValidateSync extends React.Component {
                 <Form.Input field='familyName[0].before' trigger='blur'></Form.Input>
                 <Form.Input field='familyName[0].after' trigger='blur'></Form.Input>
                 <Form.Input field='familyName[1]' trigger='blur'></Form.Input>
-                <div style={{display: 'flex', alignItems: 'flex-end'}}>
+                <div style={{ display: 'flex', alignItems: 'flex-end' }}>
                     <Button type="primary" htmlType="submit" className="btn-margin-right">
                         Submit
                     </Button>
@@ -1047,7 +1049,7 @@ class FormLevelValidateAsync extends React.Component {
                 <Form.Input field='familyName[0].before' trigger='blur'></Form.Input>
                 <Form.Input field='familyName[1]' trigger='blur'></Form.Input>
                 <Form.Input field='sex' trigger='blur'></Form.Input>
-                <div style={{display: 'flex', alignItems: 'flex-end'}}>
+                <div style={{ display: 'flex', alignItems: 'flex-end' }}>
                     <Button type="primary" htmlType="submit" className="btn-margin-right">
                         Submit
                     </Button>
@@ -1201,7 +1203,7 @@ class ArrayFieldDemo extends React.Component {
         const ComponentUsingFormState = () => {
             const formState = useFormState();
             return (
-                <TextArea style={{marginTop: 10}} value={JSON.stringify(formState)} />
+                <TextArea style={{ marginTop: 10 }} value={JSON.stringify(formState)} />
             );
         };
         return (
@@ -1216,13 +1218,13 @@ class ArrayFieldDemo extends React.Component {
                                         <Form.Input
                                             field={`${field}[name]`}
                                             label={`Effect Name：`}
-                                            style={{width: 200, marginRight: 16}}
+                                            style={{ width: 200, marginRight: 16 }}
                                         >
                                         </Form.Input>
                                         <Form.Select
                                             field={`${field}[type]`}
                                             label={`Effect Type：`}
-                                            style={{width: 90}}
+                                            style={{ width: 90 }}
                                         >
                                             <Form.Select.Option value='2D'>2D</Form.Select.Option>
                                             <Form.Select.Option value='3D'>3D</Form.Select.Option>
@@ -1288,8 +1290,8 @@ class ArrayDemo extends React.Component {
     renderItems(formState, values) {
         return values.effects && values.effects.map((effect, i) => (
             <div key={effect.key} style={{ width: 1000, display: 'flex' }}>
-                <Form.Input field={`effects[${i}].name`} style={{width: 200, marginRight: 16}}></Form.Input>
-                <Form.Select field={`effects[${i}].type`} style={{width: 90}}>
+                <Form.Input field={`effects[${i}].name`} style={{ width: 200, marginRight: 16 }}></Form.Input>
+                <Form.Select field={`effects[${i}].type`} style={{ width: 90 }}>
                     <Form.Select.Option value='2D'>2D</Form.Select.Option>
                     <Form.Select.Option value='3D'>3D</Form.Select.Option>
                 </Form.Select>
@@ -1311,7 +1313,7 @@ class ArrayDemo extends React.Component {
                     <>
                         <Button onClick={this.add}>add</Button>
                         {this.renderItems(formState, values)}
-                        <TextArea style={{marginTop: 10}} value={JSON.stringify(formState.values)} />
+                        <TextArea style={{ marginTop: 10 }} value={JSON.stringify(formState.values)} />
                     </>
                 )}
             </Form>
@@ -1674,9 +1676,9 @@ class FormApiDemo extends React.Component {
 
     changeValues() {
         // use formApi to update formA
-        this.formApi.setValues({ a: 1});
+        this.formApi.setValues({ a: 1 });
         // use formApi to update formB
-        this.formBRef.current.formApi.setValues({ b: 2});
+        this.formBRef.current.formApi.setValues({ b: 2 });
     }
 
     render() {
@@ -1848,6 +1850,21 @@ const { ErrorMessage } = Form;
 - [aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute)
   - When the Field is configured with `helpText` or `extraText`, the Field component will be automatically added with the `aria-describedby` attribute, whose value is the id of the DOM element corresponding to helpText and extraText (format like: `${props.field}-helpText` , `${props.field}-extraText`)
 
+## Content Guidelines
+
+- Form title
+  - The title of the form needs to follow the writing specification of the title
+- Form label
+  - The label is a short description of the input box. The label is not a help text, so it should not be a description of the input
+  - Labels must:
+    - Place it above or below the input box
+    - Short (1-3 words)
+    - Use case conventions for statements (first letter uppercase, others lowercase)
+- Help text
+  - Help text use statement writing conventions, capitalized
+- Form button
+  - For the content Guidelines of the form button, refer to [Button component](/en-US/input/button) 
+
 ## Design Tokens
 
 <DesignToken/>

content/input/form/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 22
+order: 23
 category: 输入类
 title:  Form 表单
 icon: doc-form
@@ -2189,6 +2189,26 @@ const { ErrorMessage } = Form;
   - 当 Field 配置了 `helpText` 或 `extraText` 时，Field 组件会被自动添加 `aria-describedby` 属性，值为 helpText、extraText 所对应DOM元素的 id （格式：`${props.field}-helpText` 、`${props.field}-extraText`）
 
 
+## 文案规范
+
+- 表单标题
+  - 表单标题需要跟随标题的书写规范
+- 表单标签
+  - 标签是输入框的简短描述。标签不是注释信息（help text），因此不应该是输入框的填写说明
+  - 标签必须要：
+    - 放在输入框的上方或下方
+    - 简短（1-3个词）
+    - 使用语句的大小写规范（首字母大写，其他小写）
+- 帮助文本
+  - 帮助文本使用语句书写规范，首字母大写
+- 表单按钮
+  - 关于表单按钮的文案规范，参考[按钮Button组件的文案规范](/zh-CN/input/button#%E6%96%87%E6%A1%88%E8%A7%84%E8%8C%83) 
+
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/formdemogood.jpg' style={{ height: 280 }} />| <img src='https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/content_guide/formdemobad.jpg' style={{ height: 280 }} /> |
+
 ## 设计变量
 <DesignToken/>
 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 23
+order: 24
 category: Input
 title:  Input
 subTitle: Input

content/input/input/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 23
+order: 24
 category: 输入类
 title:  Input 输入框
 icon: doc-input

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 24
+order: 25
 category: Input
 title:  InputNumber
 subTitle: InputNumber

content/input/inputnumber/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 24
+order: 25
 category: 输入类
 title: InputNumber 数字输入框
 icon: doc-inputnumber

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 25
+order: 26
 category: Input
 title: Radio
 subTitle: Radio
@@ -446,6 +446,11 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
 123
 ``` -->
 
+## Content Guidelines
+
+- Capitalize the first letter
+- No punctuation
+
 ## Design Tokens
 
 <DesignToken/>

content/input/radio/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 25
+order: 26
 category: 输入类
 title: Radio 单选框
 icon: doc-radio
@@ -382,17 +382,21 @@ class App extends React.Component {
 WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/
 
 - RadioGroup 可以被获取焦点，初始焦点设置：
-  - 当 RadioGroup 中没有被选择项时，初始焦点为第一个 Radio 项上；
-  - 当 RadioGroup 中有选中项时，初始焦点为选中的 Radio 项上。
+  - 当 RadioGroup 中没有被选择项时，初始焦点为第一个 Radio 项上
+  - 当 RadioGroup 中有选中项时，初始焦点为选中的 Radio 项上
 - 在同一个 radiogroup 内
-  - 可以通过 `右箭头` 或 `下箭头` 将焦点移动到下一个 Radio 项上，同时取消先前的 Radio 项的选中状态，并选中当前聚焦的 Radio 项；
-  - 可以通过 `左箭头` 或 `上箭头` 将焦点移动到上一个 Radio 项上，同时取消先前的 Radio 项的选中状态，并选中当前聚焦的 Radio 项。
-- 若 RadioGroup 中没有选中项，可以 `Space` 键选中初始焦点。
+  - 可以通过 `右箭头` 或 `下箭头` 将焦点移动到下一个 Radio 项上，同时取消先前的 Radio 项的选中状态，并选中当前聚焦的 Radio 项
+  - 可以通过 `左箭头` 或 `上箭头` 将焦点移动到上一个 Radio 项上，同时取消先前的 Radio 项的选中状态，并选中当前聚焦的 Radio 项
+- 若 RadioGroup 中没有选中项，可以 `Space` 键选中初始焦点
 
 <!-- ## 相关物料
 ```material
 123
 ``` -->
 
+## 文案规范
+- 首字母大写
+- 不使用标点符号
+
 ## 设计变量
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 26
+order: 27
 category: Input
 title: Rating
 subTitle: Rating

content/input/rating/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 26
+order: 27
 category: 输入类
 title:  Rating 评分
 icon: doc-rating

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 27
+order: 28
 category: Input
 title: Select
 subTitle: Select
@@ -589,83 +589,62 @@ A multi-select example with remote search, request debounce, loading status.
 
 ```jsx live=true
 import React from 'react';
-import { Select } from '@douyinfe/semi-ui';
 import { debounce } from 'lodash-es';
+import { Select } from '@douyinfe/semi-ui';
 
-class SearchDemo extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            Loading: false,
-            optionList: [
-                { value: 'abc', label: 'Semi', type: 1 },
-                { value: 'capcut', label: 'Capcut', type: 2 },
-                { value: 'xigua', label: 'BuzzVideo', type: 4 },
-            ],
-            value: '',
-            multipleValue: [],
-        };
-        this.handleSearch = debounce(this.handleSearch, 800).bind(this);
-        this.onChange = this.onChange.bind(this);
-        this.onMultipleChange = this.onMultipleChange.bind(this);
-    }
-
-    handleSearch(inputValue) {
-        this.setState({ loading: true });
-        let length = Math.ceil(Math.random() * 100);
-        let result = Array.from({ length }, (v, i) => {
-            return { value: inputValue + i, label: inputValue + '-new line-' + i, type: i + 1 };
-        });
-        setTimeout(() => {
-            this.setState({ optionList: result, loading: false });
-        }, 2000);
-    }
-
-    onChange(value) {
-        this.setState({ value });
-    }
+() => {
+    const [loading, setLoading] = useState(false);
+    const optionList = [
+        { value: 'dsm', label: 'Semi DSM', type: 1 },
+        { value: 'd2c', label: 'Semi DesignToCode', type: 2 },
+        { value: 'c2d', label: 'Semi CodeToDesign', type: 3 },
+        { value: 'plugin', label: 'Semi Plugin', type: 4 },
+    ];
+    const [list, setList] = useState(optionList);
+    const [value, setValue] = useState('');
+    
+    const handleMultipleChange = (newValue) => {
+        setValue(newValue);
+    };
 
-    onMultipleChange(multipleValue) {
-        this.setState({ multipleValue });
-    }
+    const handleSearch = (inputValue) => {
+        setLoading(true);
+        let result = [];
+        if (inputValue) {
+            let length = Math.ceil(Math.random()*100);
+            result = Array.from({ length }, (v, i) => {
+                return { value: inputValue + i, label: `Relative: ${inputValue}${i}`, type: i + 1 };
+            });
+            setTimeout(() => {
+                setLoading(false);
+                setList(result);
+            }, 1000);
+        } else {
+            result = Array.from({ length }, (v, i) => {
+                return { value: inputValue + i, label: `Random: ${i}`, type: i + 1 };
+            });
+        }
+    };
 
-    render() {
-        const { loading, optionList, value, multipleValue } = this.state;
-        return (
-            <div>
-                <Select
-                    style={{ width: 300 }}
-                    filter
-                    remote
-                    onChangeWithObject
-                    onSearch={this.handleSearch}
-                    optionList={optionList}
-                    loading={loading}
-                    onChange={this.onChange}
-                    value={value}
-                    emptyContent={null}
-                ></Select>
-                <br />
-                <br />
-                <Select
-                    style={{ width: 300 }}
-                    filter
-                    remote
-                    onChangeWithObject
-                    multiple
-                    value={multipleValue}
-                    onSearch={this.handleSearch}
-                    optionList={optionList}
-                    loading={loading}
-                    onChange={this.onMultipleChange}
-                    placeholder="Multiple Select"
-                    emptyContent={null}
-                ></Select>
-            </div>
-        );
-    }
-}
+    return (
+        <Select
+            style={{ width: 300 }}
+            filter
+            remote
+            onChangeWithObject
+            multiple
+            value={value}
+            onSearch={debounce(handleSearch, 1000)}
+            optionList={list}
+            loading={loading}
+            onChange={handleMultipleChange}
+            emptyContent={null}
+        >
+        </Select>
+    );
+};
 ```
+
 ### Custom search strategy
 
 By default, the user's search input will be compared with the option's label value as a string include.  
@@ -1376,7 +1355,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 - The role of the Select trigger is combobox, the role of the popup layer is listbox, and the role of the option is option
 - Select trigger has aria-haspopup, aria-expanded, and aria-controls properties, indicating the relationship between trigger and popup layer
 - When multiple selections are made, listbox aria-multiselectable is true, indicating that multiple selections are currently available
-- Aria-selected is true when Option is selected; aria-disabled is true when Option is disabled
+- aria-selected is true when Option is selected; aria-disabled is true when Option is disabled
 - The attribute aria-activedescendant ensures that the currently selected option is recognized when the narration is spoken(for more information, please refer to [Managing Focus in Composites Using aria-activedescendant](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_activedescendant))
 
 ### Keyboard and Focus
@@ -1396,6 +1375,19 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 - When the focus is on the Select box, and the user uses an `innerBottomSlot` or `outerBottomSlot` property with a custom slot with an interactive element:
   - You can use the `Tab` key to switch to these interactive elements
   - When the focus is on the first interactive element of the custom slot, use `Shift` + `Tab` to return the focus to the Select box
+
+## Content Guidelines
+- Selector trigger
+   - Describe in 1-3 words the input that the user needs to make
+   - Use statement writing conventions (first letter uppercase, rest lowercase)
+   - Avoid punctuation and prepositions ("the", "an", "a")
+   - Labels need to be independent statements. Don't let the label be the first half of the statement and the option the second half of the statement.
+   - Use descriptive sentences, not indicative ones. Help text is available under the select box if the option needs more explanation.
+- Selector options
+   - If there is no default option, use "Select" as placeholder copy
+   - Options should be in alphabetical order or other logical order to make it easier for users to find options
+   - Use statement writing conventions (first letter uppercase, rest lowercase), avoid commas and semicolons at the end of sentences
+   - Clearly articulate the purpose of the choice indicated by the option
 ## Design Tokens
 
 <DesignToken/>

content/input/select/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 27
+order: 28
 category: 输入类
 title:  Select 选择器
 icon: doc-select
@@ -639,88 +639,62 @@ import { Select } from '@douyinfe/semi-ui';
 通过动态更新`optionList`更新下拉菜单中的备选项  
 使用受控的 value 属性
 
-```jsx live=true hideInDSM
+```jsx live=true
 import React from 'react';
 import { debounce } from 'lodash-es';
 import { Select } from '@douyinfe/semi-ui';
 
-class SearchDemo extends React.Component {
-    constructor(){
-        super();
-        this.state = {
-            loading: false,
-            optionList: [
-                { value: 'abc', label: '抖音', type: 1 },
-                { value: 'hotsoon', label: '火山小视频', type: 2 },
-                { value: 'jianying', label: '剪映', type: 3 },
-                { value: 'toutiao', label: '今日头条', type: 4 },
-            ],
-            value: '',
-            multipleValue: [],
-        };
-        this.handleSearch = debounce(this.handleSearch, 800).bind(this);
-        this.onChange = this.onChange.bind(this);
-        this.onMultipleChange = this.onMultipleChange.bind(this);
-    }
-
-    handleSearch(inputValue) {
-        this.setState({ loading: true });
-        let length = Math.ceil(Math.random()*100);
-        let result = Array.from({ length }, (v, i) => {
-            return { value: inputValue + i, label: inputValue + '-新业务线-' + i, type: i + 1 };
-        });
-        setTimeout(() => {
-            this.setState({ optionList: result, loading: false });
-        }, 2000);
-    }
-
-    onChange(value) {
-        this.setState({ value });
-    }
-
-    onMultipleChange(multipleValue) {
-        this.setState({ multipleValue });
-    }
+() => {
+    const [loading, setLoading] = useState(false);
+    const optionList = [
+        { value: 'douyin', label: '抖音', type: 1 },
+        { value: 'xingtu', label: '醒图', type: 2 },
+        { value: 'jianying', label: '剪映', type: 3 },
+        { value: 'toutiao', label: '今日头条', type: 4 },
+    ];
+    const [list, setList] = useState(optionList);
+    const [value, setValue] = useState('');
+    
+    const handleMultipleChange = (newValue) => {
+        setValue(newValue);
+    };
 
-    render() {
-        const { loading, optionList, value, multipleValue } = this.state;
-        return (
-            <div>
-                <Select
-                    style={{ width: 300 }}
-                    filter
-                    remote
-                    onChangeWithObject
-                    onSearch={this.handleSearch}
-                    optionList={optionList}
-                    loading={loading}
-                    onChange={this.onChange}
-                    value={value}
-                    placeholder='请选择'
-                    emptyContent={null}
-                >
-                </Select>
-                <br/><br/>
-                <Select
-                    style={{ width: 300 }}
-                    filter
-                    remote
-                    onChangeWithObject
-                    multiple
-                    value={multipleValue}
-                    onSearch={this.handleSearch}
-                    optionList={optionList}
-                    loading={loading}
-                    onChange={this.onMultipleChange}
-                    placeholder='请选择'
-                    emptyContent={null}
-                >
-                </Select>
-            </div>
-        );
-    }
+    const handleSearch = (inputValue) => {
+        setLoading(true);
+        let result = [];
+        if (inputValue) {
+            let length = Math.ceil(Math.random()*100);
+            result = Array.from({ length }, (v, i) => {
+                return { value: inputValue + i, label: `相近业务 ${inputValue}${i}`, type: i + 1 };
+            });
+            setTimeout(() => {
+                setLoading(false);
+                setList(result);
+            }, 1000);
+        } else {
+            result = Array.from({ length }, (v, i) => {
+                return { value: inputValue + i, label: `随机业务${i}`, type: i + 1 };
+            });
+        }
+    };
 
-}
+    return (
+        <Select
+            style={{ width: 300 }}
+            filter
+            remote
+            onChangeWithObject
+            multiple
+            value={value}
+            onSearch={debounce(handleSearch, 1000)}
+            optionList={list}
+            loading={loading}
+            onChange={handleMultipleChange}
+            emptyContent={null}
+        >
+        </Select>
+    );
+};
 ```
 
 ### 自定义搜索逻辑
@@ -1419,6 +1393,18 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
   - 可以使用 `Tab` 键切换到这些可交互元素上
   - 当焦点在自定义 slot 的首个可交互元素上时，使用 `Shift` + `Tab` ，焦点回到 Select 框上
 
+## 文案规范
+- 选择器标签
+  - 用1-3个词描述需要用户所做的输入
+  - 使用语句书写规范（首字母大写，其余小写）
+  - 避免使用标点符号和介词（“the”, “an”, “a”）
+  - 标签需是独立语句。不要让标签是前半句语句，选项是后半句语句。
+  - 使用描述性语句，而不是指示性语句。如果选项需要更多解释，可以在选择框下使用帮助文本。
+- 选择器选项
+  - 如果没有默认选项，就使用“Select”做占位文案
+  - 选项要按首字母顺序或者其他有逻辑的排列顺序，使用户更好地找到选项
+  - 使用语句书写规范（首字母大写，其余小写），避免在句尾使用逗号和分号
+  - 清晰表达出选项所表示的选择目的
 ## 设计变量
 <DesignToken/>
 

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 28
+order: 29
 category: Input
 title:  Slider
 subTitle: Slider

content/input/slider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 28
+order: 29
 category: 输入类
 title:  Slider 滑动选择器
 icon: doc-slider

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 29
+order: 30
 category: Input
 title: Switch
 subTitle: Switch
@@ -151,7 +151,7 @@ import { Switch } from '@douyinfe/semi-ui';
         />
     );
 
-}
+};
 ```
 
 ### loading
@@ -201,6 +201,12 @@ import { Switch } from '@douyinfe/semi-ui';
 ### Keyboard and Focus
 - Keyboard users can use `Tab` and `Shift + Tab` to switch focus.
 - When focusing, you can switch on or off by pressing the `Space` key.
+
+## Content Guidelines
+- Switch description
+  - First letter is capitalized, no punctuation is required
+  - Indirectly and explicitly state whether the setting is on or off
+  - If needed, explain to the user what the on and off states represent
 ## Design Tokens
 
 <DesignToken/>

content/input/switch/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 29
+order: 30
 category: 输入类
 title: Switch 开关
 icon: doc-switch
@@ -200,6 +200,11 @@ import { Switch } from '@douyinfe/semi-ui';
 -   键盘用户可以使用 `Tab` 及 `Shift + Tab` 切换焦点
 -   聚焦时可以通过 `Space` 键切换开启或关闭状态
 
+## 文案规范
+- 开关描述
+  - 首字母大写，不需要标点符号
+  - 间接明了地说明该设置的开启或关闭状态
+  - 如果需要，解释给用户开启和关闭状态所代表的情况
 ## 设计变量
 
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 30
+order: 31
 category: Input
 title: TagInput
 subTitle: TagInput

content/input/taginput/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 30
+order: 31
 category: 输入类
 title: TagInput 标签输入框
 icon: doc-tagInput

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 31
+order: 32
 category: Input
 title: TimePicker
 subTitle: TimePicker
@@ -324,6 +324,9 @@ function Demo(props = {}) {
 | blur()  | Remove focus  |
 | focus() | Get the focus |
 
+## Content Guidelines
+- The time selector includes at least hours and minutes, such as: 11:30, which can be adapted to 12-hour or 24-hour format during localization
+- When 12-hour clock is selected, it needs to be used together with AM/PM
 ## Design Tokens
 
 <DesignToken/>

content/input/timepicker/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 31
+order: 32
 category: 输入类
 title: TimePicker 时间选择器
 icon: doc-timepicker
@@ -309,5 +309,8 @@ function Demo(props = {}) {
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
 
+## 文案规范
+- 时间选择器至少包括时和分，如：11:30，它在本地化过程中，可以适应为12小时制或者24小时制
+- 当选择12小时制，需要和AM/PM一起搭配使用
 ## 设计变量
 <DesignToken/>

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 32
+order: 33
 category: Input
 title: Transfer
 icon: doc-transfer

content/input/transfer/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 32
+order: 33
 category: 输入类
 title: Transfer 穿梭框
 icon: doc-transfer

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 33
+order: 34
 category: Input
 title:  TreeSelect
 subTitle: TreeSelect

content/input/treeselect/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 33
+order: 34
 category: 输入类
 title: TreeSelect 树选择器
 icon: doc-treeselect

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

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 34
+order: 35
 category: Input
 title: Upload
 icon: doc-upload
@@ -491,7 +491,7 @@ When `listType` is `list`, you can customize the list operation area by passing
 ```jsx live=true width=48%
 import React from 'react';
 import { Upload, Button } from '@douyinfe/semi-ui';
-import { IconUpload, IconDownload, IconEyeOpened } from '@douyinfe/semi-icons';
+import { IconUpload, IconDownload, IconEyeOpened, IconDelete } from '@douyinfe/semi-icons';
 
 () => {
     let action = 'https://run.mocky.io/v3/d6ac5c9e-4d39-4309-a747-7ed3b5694859';
@@ -507,16 +507,18 @@ import { IconUpload, IconDownload, IconEyeOpened } from '@douyinfe/semi-icons';
         }
     ];
     const renderFileOperation = (fileItem) => (
-        <div style={{display: 'flex',columnGap: 8, padding: '0 8px'}}>
+        <div style={{ display: 'flex',columnGap: 8, padding: '0 8px' }}>
             <Button icon={<IconEyeOpened></IconEyeOpened>} type="tertiary" theme="borderless" size="small"></Button>
             <Button icon={<IconDownload></IconDownload>} type="tertiary" theme="borderless" size="small"></Button>
             <Button onClick={e=>fileItem.onRemove()} icon={<IconDelete></IconDelete>} type="tertiary" theme="borderless" size="small"></Button>
         </div>
-    )
-    return <Upload action={action} defaultFileList={defaultFileList} itemStyle={{width: 300}} renderFileOperation={renderFileOperation}>
+    );
+    return (
+        <Upload action={action} defaultFileList={defaultFileList} itemStyle={{ width: 300 }} renderFileOperation={renderFileOperation}>
             <Button icon={<IconUpload />} theme="light">Upload</Button>
         </Upload>
-    }
+    );
+};
 ```
 
 ### Default file list
@@ -713,7 +715,7 @@ import { IconPlus, IconEyeOpened } from '@douyinfe/semi-icons';
     const handlePreview = (file) => {
         const feature = "width=300,height=300";
         window.open(file.url, 'imagePreview', feature);
-    }
+    };
     return (
         <>
             <Upload
@@ -724,7 +726,7 @@ import { IconPlus, IconEyeOpened } from '@douyinfe/semi-icons';
                 multiple
                 defaultFileList={defaultFileList}
                 onPreviewClick={handlePreview}
-                renderPicPreviewIcon={()=><IconEyeOpened style={{color: 'var(--semi-color-white)', fontSize: 24}} />}
+                renderPicPreviewIcon={()=><IconEyeOpened style={{ color: 'var(--semi-color-white)', fontSize: 24 }} />}
             >
                 <IconPlus size="extra-large" />
             </Upload>
@@ -924,6 +926,7 @@ import { IconBolt } from '@douyinfe/semi-icons';
         <img
             src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
             height="96"
+            alt="upload"
             style={{ borderRadius: 4 }}
         />
         <div
@@ -1311,6 +1314,16 @@ interface FileItem {
 | insert | Upload file, when index is passed, it will be inserted at the specified position, if not passed, it will be inserted at the end | (files: Array<File\>, index?: number) => void | 2.2.0 |
 | upload | Start upload manually, use with uploadTrigger="custom" | () => void | |
 
+## Content Guidelines
+- Upload button
+   - For the copywriting specification of the form button, refer to [The content Guidelines of the Button component]()
+- Help text
+   - The help text is written in sentences, the first letter is capitalized, and periods may not be required
+- Error message
+   - Clearly tell the user why the file cannot be uploaded, and tell the user how to upload it successfully
+   - Help texts are written using sentences, capitalized
+   - Concise language that users can read at a glance, such as `File size must be less than 20MB`, `File type must be .gif, .jpg, .png or .svg`
+
 ## Design Tokens
 <DesignToken/>
 

content/input/upload/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 34
+order: 35
 category: 输入类
 title: Upload 上传
 icon: doc-upload
@@ -1324,6 +1324,17 @@ Upload组件是一个可交互的控件，在点击或拖拽时触发文件选
 - 为可点击元素添加 `role="button"`
 - 文件列表添加 `role="list"`，并用 `aria-label` 描述
 
+
+## 文案规范
+- 上传按钮
+  - 关于表单按钮的文案规范，参考[按钮Button组件的文案规范](/zh-CN/input/button#%E6%96%87%E6%A1%88%E8%A7%84%E8%8C%83) 
+- 帮助文本
+  - 帮助文本使用语句书写规范，首字母大写，可以不需要句号
+- 用户出错提示
+  - 清晰地告诉用户为什么文件无法被上传，并且告知用户如何操作能够成功上传
+  - 帮助文本使用语句书写规范，首字母大写
+  - 简洁的用语让用户能够一眼读懂，比如 `File size must be less than 20MB`, `File type must be .gif, .jpg, .png or .svg`
+
 ## 设计变量
 <DesignToken/>
 

content/navigation/anchor/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 35
+order: 36
 category: Navigation
 title:  Anchor
 subTitle: Anchor
@@ -356,6 +356,10 @@ import { Anchor } from '@douyinfe/semi-ui';
 | style      | Style object              | object            | -       |
 | title      | The content of hyper link | string\|ReactNode | -       |
 
+## Content Guidelines
+- Write in sentence case
+- Keep it concise and avoid line breaks
+
 ## Design Tokens
 <DesignToken/>
 

content/navigation/anchor/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 35
+order: 36
 category: 导航类
 title:  Anchor 锚点
 icon: doc-anchor
@@ -358,9 +358,14 @@ import { Anchor } from '@douyinfe/semi-ui';
 | style     | 样式对象             | object            | -      |        |
 | title     | 文字内容             | string\|ReactNode | -      |        |
 
+## 文案规范
+- 按句子大小写书写
+- 保持简洁，避免换行
+
 ## 设计变量
 <DesignToken/>
 
+
 ## FAQ
 
 1. **为何我的 Link 没有高亮和滑动跟随？**  

content/navigation/backtop/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 36
+order: 37
 category: Navigation
 title: BackTop
 subTitle: BackTop

content/navigation/backtop/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 36
+order: 37
 category: 导航类
 title: BackTop 回到顶部
 icon: doc-backtop

content/navigation/breadcrumb/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 37
+order: 38
 category: Navigation
 title:  Breadcrumb
 subTitle: Breadcrumb
@@ -339,6 +339,11 @@ After **v>=1.16.0**, other props in Breadcrumb.Item are also supported correspon
 - Breadcrumb supports the `aria-label` props to indicate the function of the Breadcrumb
 - Breadcrumb will set `aria-current='page'` for the current item
 
+## Content Guidelines
+
+- Each page link should be short and clearly reflect the location or entity it links to
+- Write in sentence case
+
 ## Design Tokens
 <DesignToken/>
 

content/navigation/breadcrumb/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 37
+order: 38
 category: 导航类
 title:  Breadcrumb 面包屑
 icon: doc-breadcrumb
@@ -341,6 +341,11 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
 - Breadcrumb 支持传入 `aria-label` 来表示该 Breadcrumb 作用
 - Breadcrumb 会对当前项设置 `aria-current='page'`
 
+## 文案规范
+
+- 每个页面链接都应该很简短，并且清楚地反映它链接到的位置或链接的实体
+- 按句子大小写书写
+
 ## 设计变量
 <DesignToken/>
 

content/navigation/navigation/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 38
+order: 39
 category: Navigation
 title:  Navigation
 subTitle: Navigation
@@ -768,6 +768,11 @@ function NavApp (props = {}) {
 | collapseText   | Title of the collapse button                                                                                                      | (collapsed:boolean) => string\|ReactNode |         | 0.35.0  |
 | style          | Outermost style                                                                                                                   | object                                    |         |         |
 
+## Content Guidelines
+
+- Navigation bar menu uses sentence case format
+- Keep it as simple as possible
+
 ## Design Tokens
 <DesignToken/>
 

content/navigation/navigation/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 38
+order: 39
 category: 导航类
 title:  Navigation 导航
 icon: doc-navigation
@@ -773,6 +773,17 @@ function NavApp (props = {}) {
 | collapseText   | “收起”按钮的文案                                                                         | (collapsed:boolean) => string\|ReactNode |        | 0.35.0 |
 | style          | 最外层样式                                                                               | CSSProperties                                    |        |                |
 
+
+## 文案规范
+
+- 导航栏菜单使用句子大小写格式
+- 尽量精简
+
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| Appeal center | Appeal Center |
+
+
 ## 设计变量
 <DesignToken/>
 

content/navigation/pagination/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 39
+order: 40
 category: Navigation
 title:  Pagination
 subTitle: Pagination

content/navigation/pagination/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 39
+order: 40
 category: 导航类
 title:  Pagination 翻页器
 icon: doc-pagination

content/navigation/steps/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 40
+order: 41
 category: Navigation
 title: Steps
 subTitle: Steps
@@ -347,6 +347,15 @@ Step in the step bar.
 - Steps and Step components support passing in the `aria-label` attribute to represent the description of Steps and Steps
 - Step component has an `aria-current` `step` attribute, indicating that this is a step in the step bar
 
+## Content Guidelines
+- Step title
+  - title should be kept concise, avoiding truncation and line breaks
+  - use sentence capitalization
+  - do not include punctuation
+- Step description
+  - supplementary contextual information for the title
+  - don't end with punctuation
+
 ## Design Tokens
 
 <DesignToken/>

content/navigation/steps/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 40
+order: 41
 category: 导航类
 title:  Steps 步骤
 icon: doc-steps
@@ -67,8 +67,8 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{display:'flex',justifyContent:'center'}}>
-        <Steps type="nav" current={1} style={{margin:'auto'}}>
+    <div style={{ display:'flex',justifyContent:'center' }}>
+        <Steps type="nav" current={1} style={{ margin:'auto' }}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
             <Steps.Step title="产品用途" />
@@ -101,8 +101,8 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <div style={{display:'flex',justifyContent:'center'}}>
-        <Steps type="nav" size="small" current={1} style={{margin:'auto'}}>
+    <div style={{ display:'flex',justifyContent:'center' }}>
+        <Steps type="nav" size="small" current={1} style={{ margin:'auto' }}>
             <Steps.Step title="注册账号" />
             <Steps.Step title="这个项目的文字比较多多多多" />
             <Steps.Step title="产品用途" />
@@ -164,7 +164,7 @@ class App extends React.Component {
                         <Step key={item.title} title={item.title} />
                     ))}
                 </Steps>
-                <div className="steps-content" style={{marginTop: 4, marginBottom: 4}}>{steps[current].content}</div>
+                <div className="steps-content" style={{ marginTop: 4, marginBottom: 4 }}>{steps[current].content}</div>
                 <div className="steps-action">
                     {current < steps.length - 1 && (
                         <Button type="primary" onClick={() => this.next()}>
@@ -198,7 +198,7 @@ import React from 'react';
 import { Steps } from '@douyinfe/semi-ui';
 
 () => (
-    <Steps direction="vertical" current={1} style={{width: 300}}>
+    <Steps direction="vertical" current={1} style={{ width: 300 }}>
         <Steps.Step title="Finished" description="This is a description" />
         <Steps.Step title="In Progress" description="This is a description" />
         <Steps.Step title="Waiting" description="This is a description" />
@@ -351,5 +351,14 @@ class App extends React.Component {
 | onClick     | 点击回调  | function | -   |    |
 | onKeyDown     | 回车事件回调  | function | -   |    |
 
+
+## 文案规范
+- 步骤标题
+  - 标题应保持简洁，避免截断和换行；
+  - 使用句子大小写书写；
+  - 不要包含标点符号
+- 描述
+  - 为标题补充上下文信息
+  - 不要以标点符号结尾
 ## 设计变量
 <DesignToken/>

content/navigation/tabs/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 41
+order: 42
 category: Navigation
 title: Tabs
 subTitle: Tabs
@@ -499,17 +499,17 @@ class App extends React.Component {
         super(props);
         this.state = {
             tabList: [
-                {tab: 'Doc', itemKey:'1', text:'Doc', closable:true},
-                {tab: 'Quick Start', itemKey:'2', text:'Quick Start', closable:true},
-                {tab: 'Help', itemKey:'3', text:'Help'},
+                { tab: 'Doc', itemKey:'1', text:'Doc', closable:true },
+                { tab: 'Quick Start', itemKey:'2', text:'Quick Start', closable:true },
+                { tab: 'Help', itemKey:'3', text:'Help' },
             ]
-        }
+        };
     }
     close(key){
         const newTabList = [...this.state.tabList];
         const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
         newTabList.splice(closeIndex, 1);
-        this.setState({tabList:newTabList});
+        this.setState({ tabList:newTabList });
     }
     render() {
         return (
@@ -592,6 +592,12 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
   - Users can use `Delete` keys to delete tab
   - After deletion, the focus is transferred to the next element of the deleted tab element; if the deleted element has no subsequent element, it is transferred to the previous element
 
+## Content Guidelines
+- Label copy needs to explain the label content accurately and clearly
+- Use short, easily distinguishable labels
+- try to stay within one word
+
+
 ## Design Token
 
 <DesignToken/>

content/navigation/tabs/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 41
+order: 42
 category: 导航类
 title: Tabs 标签栏
 icon: doc-tabs
@@ -523,17 +523,17 @@ class App extends React.Component {
         super(props);
         this.state = {
             tabList: [
-                {tab: '文档', itemKey:'1', text:'文档', closable:true},
-                {tab: '快速起步', itemKey:'2', text:'快速起步', closable:true},
-                {tab: '帮助', itemKey:'3', text:'帮助'},
+                { tab: '文档', itemKey:'1', text:'文档', closable:true },
+                { tab: '快速起步', itemKey:'2', text:'快速起步', closable:true },
+                { tab: '帮助', itemKey:'3', text:'帮助' },
             ]
-        }
+        };
     }
     close(key){
         const newTabList = [...this.state.tabList];
         const closeIndex = newTabList.findIndex(t=>t.itemKey===key);
         newTabList.splice(closeIndex, 1);
-        this.setState({tabList:newTabList});
+        this.setState({ tabList:newTabList });
     }
     render() {
         return (
@@ -621,6 +621,12 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
 
 <DesignToken/>
 
+## 文案规范
+- 标签文案需要准确清晰地解释标签内容
+- 用简短的，易区分的标签
+- 尽量保持在一个词以内
+
+
 ## FAQ
 
 -   **为什么在Tabs中使用 Typography 的省略 ellipsis 失效？**

content/navigation/tree/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 42
+order: 43
 category: Navigation
 title:  Tree
 subTitle: Tree
@@ -275,77 +275,77 @@ class Demo extends React.Component {
 After setting the `filterTreeNode` property to enable search, you can customize the rendering method of the search box by setting `searchRender`. When set to `false`, the search box can be hidden.
 ```jsx live=true
 import React from 'react';
-import { Tree } from '@douyinfe/semi-ui';
+import { Tree, Input } from '@douyinfe/semi-ui';
 
 () => {
-  const treeData = [
-            {
-                label: 'Asia',
-                value: 'Asia',
-                key: '0',
-                children: [
-                    {
-                        label: 'China',
-                        value: 'China',
-                        key: '0-0',
-                        children: [
-                            {
-                                label: 'Beijing',
-                                value: 'Beijing',
-                                key: '0-0-0',
-                            },
-                            {
-                                label: 'Shanghai',
-                                value: 'Shanghai',
-                                key: '0-0-1',
-                            },
-                        ],
-                    },
-                    {
-                        label: 'Japan',
-                        value: 'Japan',
-                        key: '0-1',
-                        children: [
-                            {
-                                label: 'Osaka',
-                                value: 'Osaka',
-                                key: '0-1-0'
-                            }
-                        ]
-                    },
-                ],
-            },
-            {
-                label: 'North America',
-                value: 'North America',
-                key: '1',
-                children: [
-                    {
-                        label: 'United States',
-                        value: 'United States',
-                        key: '1-0'
-                    },
-                    {
-                        label: 'Canada',
-                        value: 'Canada',
-                        key: '1-1'
-                    }
-                ]
-            }
-        ];
+    const treeData = [
+        {
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: 'Beijing',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: 'Shanghai',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    children: [
+                        {
+                            label: 'Osaka',
+                            value: 'Osaka',
+                            key: '0-1-0'
+                        }
+                    ]
+                },
+            ],
+        },
+        {
+            label: 'North America',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: 'United States',
+                    value: 'United States',
+                    key: '1-0'
+                },
+                {
+                    label: 'Canada',
+                    value: 'Canada',
+                    key: '1-1'
+                }
+            ]
+        }
+    ];
 
-  return (
-    <Tree
-      filterTreeNode
-      searchRender={({ prefix, ...restProps }) => (
-        <Input
-          prefix='Search'
-          {...restProps}
+    return (
+        <Tree
+            filterTreeNode
+            searchRender={({ prefix, ...restProps }) => (
+                <Input
+                    prefix='Search'
+                    {...restProps}
+                />
+            )}
+            treeData={treeData}
         />
-      )}
-      treeData={treeData}
-    />
-  );
+    );
 };
 
 ```
@@ -354,78 +354,78 @@ import { Tree } from '@douyinfe/semi-ui';
 Use ref to get tree instance，you can call `search` method of tree to trigger search manually. Note that you need to set `filterTreeNode` to enable search at the same time.If the search box is outside the tree, you can hide the search box inside the tree by setting `searchRender=false`.
 ```jsx live=true
 import React from 'react';
-import { Tree } from '@douyinfe/semi-ui';
+import { Tree, Input } from '@douyinfe/semi-ui';
 
 () => {
-  const ref = useRef();
-  const treeData = [
-    {
-      label: 'Asia',
-      value: 'Asia',
-      key: '0',
-      children: [
-        {
-          label: 'China',
-          value: 'China',
-          key: '0-0',
-          children: [
-            {
-              label: 'Beijing',
-              value: 'Beijing',
-              key: '0-0-0',
-            },
-            {
-              label: 'Shanghai',
-              value: 'Shanghai',
-              key: '0-0-1',
-            },
-          ],
-        },
-        {
-          label: 'Japan',
-          value: 'Japan',
-          key: '0-1',
-          children: [
-            {
-              label: 'Osaka',
-              value: 'Osaka',
-              key: '0-1-0',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: 'North America',
-      value: 'North America',
-      key: '1',
-      children: [
+    const ref = useRef();
+    const treeData = [
         {
-          label: 'United States',
-          value: 'United States',
-          key: '1-0',
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: 'Beijing',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: 'Shanghai',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    children: [
+                        {
+                            label: 'Osaka',
+                            value: 'Osaka',
+                            key: '0-1-0',
+                        },
+                    ],
+                },
+            ],
         },
         {
-          label: 'Canada',
-          value: 'Canada',
-          key: '1-1',
+            label: 'North America',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: 'United States',
+                    value: 'United States',
+                    key: '1-0',
+                },
+                {
+                    label: 'Canada',
+                    value: 'Canada',
+                    key: '1-1',
+                },
+            ],
         },
-      ],
-    },
-  ];
-  return (
-    <div>
-      <Input aria-label='filter tree' prefix="Search" showClear onChange={v => ref.current.search(v)} />
-      <div style={{ marginTop: 20}}>search result：</div>
-      <Tree
-        ref={ref}
-        filterTreeNode
-        searchRender={false}
-        treeData={treeData}
-        blockNode={false}
-      />
-    </div>
-  );
+    ];
+    return (
+        <div>
+            <Input aria-label='filter tree' prefix="Search" showClear onChange={v => ref.current.search(v)} />
+            <div style={{ marginTop: 20 }}>search result：</div>
+            <Tree
+                ref={ref}
+                filterTreeNode
+                searchRender={false}
+                treeData={treeData}
+                blockNode={false}
+            />
+        </div>
+    );
 };
 ```
 
@@ -644,19 +644,19 @@ import { IconMapPin } from '@douyinfe/semi-icons';
             label: 'Asia',
             value: 'Asia',
             key: '0',
-            icon: (<IconMapPin style={{color: 'var(--semi-color-text-2)'}}/>),
+            icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }}/>),
             children: [
                 {
                     label: 'China',
                     value: 'China',
                     key: '0-0',
-                    icon: (<IconMapPin style={{color: 'var(--semi-color-text-2)'}}/>)
+                    icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }}/>)
                 },
                 {
                     label: 'Japan',
                     value: 'Japan',
                     key: '0-1',
-                    icon: (<IconMapPin style={{color: 'var(--semi-color-text-2)'}}/>)
+                    icon: (<IconMapPin style={{ color: 'var(--semi-color-text-2)' }}/>)
                 },
             ],
         }
@@ -1007,7 +1007,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -1099,7 +1099,7 @@ class Demo extends React.Component {
         };
     }
     onExpand(value) {
-        this.setState({expandedKeys: value});
+        this.setState({ expandedKeys: value });
     }
     render() {
         const treeData = [
@@ -1208,7 +1208,7 @@ class Demo extends React.Component {
             const rec = n => (n >= 0 ? x * y ** n-- + rec(n) : 0);
             return rec(z + 1);
         }
-        return {gData, total: calcTotal(x, y, z)};
+        return { gData, total: calcTotal(x, y, z) };
     }
 
       
@@ -1304,7 +1304,7 @@ class Demo extends React.Component {
                     treeData={this.state.treeData}
                 />
                 <br/>
-                <Button onClick={this.add} style={{margin: 20}}>
+                <Button onClick={this.add} style={{ margin: 20 }}>
                     Update Data
                 </Button>
             </div>
@@ -1601,6 +1601,7 @@ import { Tree, Checkbox } from '@douyinfe/semi-ui';
         const { label } = data;
         const isLeaf = !(data.children && data.children.length);
         return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
             <li
                 className={className}
                 role="treeitem"
@@ -1613,7 +1614,7 @@ import { Tree, Checkbox } from '@douyinfe/semi-ui';
                     <Checkbox
                         indeterminate={checkStatus.halfChecked}
                         checked={checkStatus.checked}
-                        style={{marginRight: 8}}
+                        style={{ marginRight: 8 }}
                     />
                 </div> : null}
                 <span>{label}</span>
@@ -1898,7 +1899,7 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
                 onClick={onClick}
                 style={style}
             >
-                {isLeaf ? <span style={{width: 24}}></span> : expandIcon}
+                {isLeaf ? <span style={{ width: 24 }}></span> : expandIcon}
                 {icon}
                 <span>{label}</span>
             </li>
@@ -2214,5 +2215,11 @@ Demo:
     />
 ```
 
+
+## Content Guidelines
+- Try to use phrases, capitalize the first letter
+- Keep the same form of terminology between levels, such as all place names or country names
+
+
 ## Design Tokens
 <DesignToken/>

content/navigation/tree/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 42
+order: 43
 category: 导航类
 title:  Tree 树形控件
 icon: doc-tree
@@ -262,77 +262,77 @@ class Demo extends React.Component {
 设置 `filterTreeNode` 属性开启搜索后，可以通过设置 `searchRender` 自定义搜索框的渲染方法，设置为`false`时可以隐藏搜索框。
 ```jsx live=true
 import React from 'react';
-import { Tree } from '@douyinfe/semi-ui';
+import { Tree, Input } from '@douyinfe/semi-ui';
 
 () => {
-  const treeData = [
-            {
-                label: 'Asia',
-                value: 'Asia',
-                key: '0',
-                children: [
-                    {
-                        label: 'China',
-                        value: 'China',
-                        key: '0-0',
-                        children: [
-                            {
-                                label: 'Beijing',
-                                value: 'Beijing',
-                                key: '0-0-0',
-                            },
-                            {
-                                label: 'Shanghai',
-                                value: 'Shanghai',
-                                key: '0-0-1',
-                            },
-                        ],
-                    },
-                    {
-                        label: 'Japan',
-                        value: 'Japan',
-                        key: '0-1',
-                        children: [
-                            {
-                                label: 'Osaka',
-                                value: 'Osaka',
-                                key: '0-1-0'
-                            }
-                        ]
-                    },
-                ],
-            },
-            {
-                label: 'North America',
-                value: 'North America',
-                key: '1',
-                children: [
-                    {
-                        label: 'United States',
-                        value: 'United States',
-                        key: '1-0'
-                    },
-                    {
-                        label: 'Canada',
-                        value: 'Canada',
-                        key: '1-1'
-                    }
-                ]
-            }
-        ];
+    const treeData = [
+        {
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: 'Beijing',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: 'Shanghai',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    children: [
+                        {
+                            label: 'Osaka',
+                            value: 'Osaka',
+                            key: '0-1-0'
+                        }
+                    ]
+                },
+            ],
+        },
+        {
+            label: 'North America',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: 'United States',
+                    value: 'United States',
+                    key: '1-0'
+                },
+                {
+                    label: 'Canada',
+                    value: 'Canada',
+                    key: '1-1'
+                }
+            ]
+        }
+    ];
 
-  return (
-    <Tree
-      filterTreeNode
-      searchRender={({ prefix, ...restProps }) => (
-        <Input
-          prefix='Search'
-          {...restProps}
+    return (
+        <Tree
+            filterTreeNode
+            searchRender={({ prefix, ...restProps }) => (
+                <Input
+                    prefix='Search'
+                    {...restProps}
+                />
+            )}
+            treeData={treeData}
         />
-      )}
-      treeData={treeData}
-    />
-  );
+    );
 };
 
 ```
@@ -341,78 +341,78 @@ import { Tree } from '@douyinfe/semi-ui';
 可以通过ref的方式获取tree的实例，调用tree的`search`方法进行搜索。注意需要同时设置`filterTreeNode`开启搜索，如果搜索框在tree外部，可以通过设置`searchRender=false`隐藏tree内部的搜索框。
 ```jsx live=true
 import React from 'react';
-import { Tree } from '@douyinfe/semi-ui';
+import { Tree, Input } from '@douyinfe/semi-ui';
 
 () => {
-  const ref = useRef();
-  const treeData = [
-    {
-      label: 'Asia',
-      value: 'Asia',
-      key: '0',
-      children: [
-        {
-          label: 'China',
-          value: 'China',
-          key: '0-0',
-          children: [
-            {
-              label: 'Beijing',
-              value: 'Beijing',
-              key: '0-0-0',
-            },
-            {
-              label: 'Shanghai',
-              value: 'Shanghai',
-              key: '0-0-1',
-            },
-          ],
-        },
-        {
-          label: 'Japan',
-          value: 'Japan',
-          key: '0-1',
-          children: [
-            {
-              label: 'Osaka',
-              value: 'Osaka',
-              key: '0-1-0',
-            },
-          ],
-        },
-      ],
-    },
-    {
-      label: 'North America',
-      value: 'North America',
-      key: '1',
-      children: [
+    const ref = useRef();
+    const treeData = [
         {
-          label: 'United States',
-          value: 'United States',
-          key: '1-0',
+            label: 'Asia',
+            value: 'Asia',
+            key: '0',
+            children: [
+                {
+                    label: 'China',
+                    value: 'China',
+                    key: '0-0',
+                    children: [
+                        {
+                            label: 'Beijing',
+                            value: 'Beijing',
+                            key: '0-0-0',
+                        },
+                        {
+                            label: 'Shanghai',
+                            value: 'Shanghai',
+                            key: '0-0-1',
+                        },
+                    ],
+                },
+                {
+                    label: 'Japan',
+                    value: 'Japan',
+                    key: '0-1',
+                    children: [
+                        {
+                            label: 'Osaka',
+                            value: 'Osaka',
+                            key: '0-1-0',
+                        },
+                    ],
+                },
+            ],
         },
         {
-          label: 'Canada',
-          value: 'Canada',
-          key: '1-1',
+            label: 'North America',
+            value: 'North America',
+            key: '1',
+            children: [
+                {
+                    label: 'United States',
+                    value: 'United States',
+                    key: '1-0',
+                },
+                {
+                    label: 'Canada',
+                    value: 'Canada',
+                    key: '1-1',
+                },
+            ],
         },
-      ],
-    },
-  ];
-  return (
-    <div>
-      <Input aria-label='filter tree' prefix="Search" showClear onChange={v => ref.current.search(v)} />
-      <div style={{ marginTop: 20}}>搜索结果如下：</div>
-      <Tree
-        ref={ref}
-        filterTreeNode
-        searchRender={false}
-        treeData={treeData}
-        blockNode={false}
-      />
-    </div>
-  );
+    ];
+    return (
+        <div>
+            <Input aria-label='filter tree' prefix="Search" showClear onChange={v => ref.current.search(v)} />
+            <div style={{ marginTop: 20 }}>搜索结果如下：</div>
+            <Tree
+                ref={ref}
+                filterTreeNode
+                searchRender={false}
+                treeData={treeData}
+                blockNode={false}
+            />
+        </div>
+    );
 };
 ```
 
@@ -1054,7 +1054,7 @@ class Demo extends React.Component {
         };
     }
     onChange(value) {
-        this.setState({value});
+        this.setState({ value });
     }
     render() {
         const treeData = [
@@ -1121,7 +1121,7 @@ class Demo extends React.Component {
         };
     }
     onExpand(value) {
-        this.setState({expandedKeys: value});
+        this.setState({ expandedKeys: value });
     }
     render() {
         const treeData = [
@@ -2207,5 +2207,9 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
     />
 ```
 
+## 文案规范
+- 尽量使用短语，首字母大写
+- 平级之间保持用语形式一致，例如全是地名或者是国家名
+
 ## 设计变量
 <DesignToken/>

content/order.js

@@ -4,6 +4,7 @@ const order = [
     'customize-theme',
     'dark-mode',
     'accessibility',
+    'content-guidelines',
     'changelog',
     'update-to-v2',
     'faq',

content/other/configprovider/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 70
+order: 71
 category: Other
 title: ConfigProvider
 icon: doc-configprovider

content/other/configprovider/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 70
+order: 71
 category: 其他
 title:  ConfigProvider 全局配置
 icon: doc-configprovider

content/other/locale/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 71
+order: 72
 category: Other
 title: LocaleProvider
 subTitle: LocaleProvider

content/other/locale/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 71
+order: 72
 category: 其他
 title:  LocaleProvider 多语言
 icon: doc-i18n

content/show/avatar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 43
+order: 44
 category: Show
 title:  Avatar
 subTitle: avatar

content/show/avatar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 43
+order: 44
 category: 展示类
 title: Avatar 头像
 icon: doc-avatar

content/show/badge/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 44
+order: 45
 category: Show
 title:  Badge
 subTitle: Badge
@@ -287,5 +287,9 @@ import { Badge } from '@douyinfe/semi-ui';
 | theme         | Badge theme, one of `solid`, `light`, `inverted`                                | string     | `solid`    |
 | type          | Badge type, one of `primary`, `secondary`, `sense`, `danger`, `warning`         | string     | `primary`  |
 
+## Content Guidelines
+
+- Capitalize the first letter
+
 ## Design Tokens
-<DesignToken/>
+<DesignToken/>

content/show/badge/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 44
+order: 45
 category: 展示类
 title:  Badge 徽章
 icon: doc-badge
@@ -263,7 +263,7 @@ import { Badge } from '@douyinfe/semi-ui';
         <br/>
         <span><Badge dot type='tertiary' /> 信息 info</span>
         <br/>
-        <span><Badge dot style={{ backgroundColor: 'var(--semi-color-success)'}} /> 成功 success</span>
+        <span><Badge dot style={{ backgroundColor: 'var(--semi-color-success)' }} /> 成功 success</span>
         <br/>
         <span><Badge dot type='warning' /> 提醒 warning</span>
         <br/>
@@ -285,5 +285,9 @@ import { Badge } from '@douyinfe/semi-ui';
 | theme | 徽章主题，可选 `solid`、 `light`、 `inverted` | string | `solid` |
 | type | 徽章类型，可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning` | string | `primary`  |
 
+
+## 文案规范
+- Badge内容若为英文时，首字母应大写
 ## 设计变量
-<DesignToken/>
+<DesignToken/>
+

content/show/calendar/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 45
+order: 46
 category: Show
 title:  Calendar
 subTitle: Calendar
@@ -353,5 +353,11 @@ By default, when the event is an all day event without start or end time, it wil
 | key | Required and must be unique. **v>=1.0.0** | string | - |
 | start      | Start time of the event        | Date | -       |
 
+## Content Guidelines
+
+- Both 12-hour and 24-hour clocks can be used when the time needs to be displayed
+- If the 12-hour clock is used, it needs to be used together with AM/PM. For details, please refer to [Time Specification](/en-US/start/content-guidelines#8.%20%E6%97%A5%E6%9C%9F%E4%B8%8E%E6%97%B6%E9%97%B4)
+- For the abbreviation rules for month, week and time, please refer to [Abbreviation Specification](/en-US/start/content-guidelines#1.%20%E7%BC%A9%E5%86%99)
+
 ## Design Tokens
 <DesignToken/>

content/show/calendar/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 45
+order: 46
 category: 展示类
 title: Calendar 日历
 icon: doc-calendar
@@ -327,6 +327,11 @@ import { Calendar } from '@douyinfe/semi-ui';
 | key      | required 且要求唯一, **v>=1.0.0** | string      | -      |
 | start    | 事情起始的时间                    | Date | -      |
 
+## 文案规范
+- 当需要显示时间时，12 小时制和 24 小时制都是可以使用的
+- 如果采用12小时制，需要搭配 AM/PM 一起使用，具体内容可参考 [时间规范](/zh-CN/start/content-guidelines#8.%20%E6%97%A5%E6%9C%9F%E4%B8%8E%E6%97%B6%E9%97%B4)
+- 关于月份、星期、时间的缩写使用规则，可参考 [缩写规范](/zh-CN/start/content-guidelines#1.%20%E7%BC%A9%E5%86%99)
+
 ## 设计变量
 
 <DesignToken/>

content/show/card/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 46
+order: 47
 category: Show
 title:  Card
 subTitle: Card
@@ -698,9 +698,26 @@ function Demo() {
 
 ## Accessibility
 
-- Card supports the input of `aria-label` to indicate the function of the Card;
-- When Card loading, `aria-busy` will be turned on;
-- Card is a container-type component, and any elements inside the card need to follow their respective accessibility guidelines.
+- Card supports the input of `aria-label` to indicate the function of the Card
+- When Card loading, `aria-busy` will be turned on
+- Card is a container-type component, and any elements inside the card need to follow their respective accessibility guidelines
+
+## Content Guidelines
+
+- Card title
+  - Card titles should be informative and focus on the most important information
+  - try to limit the title to 1 phrase or segment
+  - Card titles should be written in sentence case
+  - do not end with punctuation marks (except question marks)
+- Text
+  - Actionable: Use imperative sentences instead of "you can" to describe the body, which better tells the user what can be done
+  
+| ✅ Recommended usage | ❌ Deprecated usage |   
+| --- | --- | 
+| Get order progress for details | You can get order progress for details |
+
+- Always say the most important information first
+- Use "Need to" instead of "must"
 
 ## Design Tokens
 <DesignToken/>

content/show/card/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 46
+order: 47
 category: 展示类
 title:  Card 卡片
 subTitle: 卡片
@@ -698,9 +698,26 @@ function Demo() {
 
 ## Accessibility
 
-- Card 支持传入 `aria-label` 来表示该 Card 作用；
-- Card loading 时，将开启 `aria-busy`；
-- Card 为容器型组件，卡片内部的任何元素需要遵循各自的可访问性指南。
+- Card 支持传入 `aria-label` 来表示该 Card 作用
+- Card loading 时，将开启 `aria-busy`
+- Card 为容器型组件，卡片内部的任何元素需要遵循各自的可访问性指南
+
+## 文案规范
+
+- 卡片标题
+  - 卡片标题应具有信息描述性，聚焦最重要的信息
+  - 尽量将标题限制在 1 个短语或句段中
+  - 卡片标题应句子大小写书写
+  - 不要以标点符号结尾（除了问号）
+- 正文
+  - 可操作的：使用祈使句而不是“你可以”来描述正文，可以更好的告诉用户可以做什么
+  
+| ✅ 推荐用法 | ❌ 不推荐用法 |   
+| --- | --- | 
+| Get order progress for details | You can get order progress for details |
+
+- 总是优先说最重要的信息
+- 使用 “Need to”而不是”must“
 
 ## 设计变量
 <DesignToken/>

content/show/carousel/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 47
+order: 48
 category: Show
 title: Carousel
 subTitle: Carousel

content/show/carousel/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 47
+order: 48
 category: 展示类
 title: Carousel 轮播图
 icon: doc-carousel

content/show/collapse/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 48
+order: 49
 category: Show
 title: Collapse
 subTitle: Collapse
@@ -207,6 +207,10 @@ import { IconCopy } from '@douyinfe/semi-icons';
 - The content of the panel is set with `aria-hidden`, and its value is automatically switched between true and false with the display of the panel content
 - The panel `aria-disabled` is synchronized with the `disabled` property, indicating that the panel is disabled
 
+## Content Guidelines
+
+The essence of the folding panel is that the card container adds the function of folding and unfolding, so the copywriting specification of the folding panel needs to be the same as the [Card copywriting specification](/zh-CN/show/card#%E6%96%87%E6%A1%88%E8%A7%84%E8%8C%83)
+
 ## Design Tokens
 
 <DesignToken/>

content/show/collapse/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 48
+order: 49
 category: 展示类
 title: Collapse 折叠面板
 icon: doc-accordion
@@ -206,6 +206,9 @@ import { IconCopy } from '@douyinfe/semi-icons';
 - 面板内容 设置了 `aria-hidden` 随面板内容展现隐藏其值在 true 和 false 之间自动切换
 - 面板 `aria-disabled` 与 `disabled` 属性同步，表示面板禁用
 
+## 文案规范
+折叠面板本质是卡片容器增加了收起和展开的功能，所以折叠面板的文案规范需要和 [卡片文案规范](/zh-CN/show/card#%E6%96%87%E6%A1%88%E8%A7%84%E8%8C%83) 保持一致
+
 ## 设计变量
 
 <DesignToken/>

content/show/collapsible/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 49
+order: 50
 category: Show
 title: Collapsible
 subTitle: Collapsible

content/show/collapsible/index.md

@@ -1,6 +1,6 @@
 ---
 localeCode: zh-CN
-order: 49
+order: 50
 category: 展示类
 title: Collapsible 折叠
 icon: doc-collapsible

content/show/descriptions/index-en-US.md

@@ -1,6 +1,6 @@
 ---
 localeCode: en-US
-order: 50
+order: 51
 category: Show
 title: Description
 subTitle: Descriptions
@@ -168,6 +168,10 @@ import { Descriptions } from '@douyinfe/semi-ui';
 | className  | Classname                                   | string            | -       |
 | style      | Inline style                                | CSSProperties     | -       |
 
+## Content Guidelines
+
+- Field names and values ​​are written in upper and lower case according to the Sentence case principle
+
 ## Design Tokens
 
 <DesignToken/>